/* ============================================================================
   vb-modal.css — ONE shared modal/popup design for ViyaBook.
   Master reference: the "Add Sales Product" modal (sales.html).

   IMPORTANT: this uses a NEW, opt-in namespace (vb-modal-*). It intentionally
   does NOT touch the legacy .modal / .modal-card / .modal-overlay classes,
   which are overloaded across pages (.modal is a backdrop on some pages and a
   card on others). A modal adopts this design by switching its classes to the
   vb-modal-* equivalents — nothing breaks until a modal is intentionally
   migrated. Show/hide stays driven by the page's existing JS (by element id),
   so functionality is unchanged.

   Structure:
     <div class="vb-modal-overlay" id="...">      <!-- backdrop -->
       <div class="vb-modal">                       <!-- white card -->
         <div class="vb-modal-head">
           <h2>Title</h2>
           <button class="vb-modal-close" type="button" data-close="...">&times;</button>
         </div>
         <div class="vb-modal-body"> ...fields... </div>
         <div class="vb-modal-actions"> ...buttons... </div>
       </div>
     </div>
   Open by adding .show (or .open / .active) to the overlay, or set its
   display via JS — all are supported below.
   ========================================================================== */

/* ── Backdrop ─────────────────────────────────────────────────────────── */
.vb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 23, 53, 0.48);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
}
.vb-modal-overlay.show,
.vb-modal-overlay.open,
.vb-modal-overlay.active { display: flex; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.vb-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(7, 23, 53, 0.25);
  padding: 22px;
  box-sizing: border-box;
}
.vb-modal.vb-modal-sm { width: min(440px, 100%); }
.vb-modal.vb-modal-lg { width: min(720px, 100%); }

/* ── Header ───────────────────────────────────────────────────────────── */
.vb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.vb-modal-head h2,
.vb-modal-head h3,
.vb-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #07152f;
}
.vb-modal-head .vb-modal-sub { font-size: 13px; color: #64748b; font-weight: 500; margin-top: 4px; }
.vb-modal-close {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vb-modal-close:hover { background: #e2e8f0; }

/* ── Fields / inputs (matches master) ─────────────────────────────────── */
.vb-field { display: grid; gap: 7px; margin-bottom: 13px; }
.vb-field label,
.vb-modal label { font-size: 12px; color: #475569; font-weight: 600; }
.vb-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vb-modal-grid .full { grid-column: 1 / -1; }

.vb-modal input:not([type=checkbox]):not([type=radio]),
.vb-modal select,
.vb-modal textarea {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border: 1px solid #e4ebf5;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  outline: 0;
  font: inherit;
  font-weight: 500;
  color: #0f172a;
}
.vb-modal textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; }
.vb-modal input:focus,
.vb-modal select:focus,
.vb-modal textarea:focus { border-color: #80b5ff; }
.vb-modal input::placeholder,
.vb-modal textarea::placeholder { color: #94a3b8; }

/* ── Footer actions ───────────────────────────────────────────────────── */
.vb-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
/* Reuse the global .btn / .btn-primary system; provide a safe fallback so a
   modal still has usable buttons even if a page lacks .btn styles. */
.vb-modal-actions .btn,
.vb-modal-actions button { min-height: 44px; }
.vb-modal-actions .vb-btn {
  height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid #dbe7f5;
  background: #fff; color: #185FA5; font-weight: 700; cursor: pointer; font: inherit;
}
.vb-modal-actions .vb-btn-primary { border: 0; background: #185FA5; color: #fff; }
.vb-modal-actions .vb-btn-danger { border: 0; background: #ef4444; color: #fff; }

/* ── Dark mode (matches the app's html.viya-dv convention) ────────────── */
html.viya-dv .vb-modal { background: #111827; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); }
html.viya-dv .vb-modal-head h2,
html.viya-dv .vb-modal-head h3,
html.viya-dv .vb-modal-title { color: #f1f5f9; }
html.viya-dv .vb-modal-head .vb-modal-sub { color: #94a3b8; }
html.viya-dv .vb-field label,
html.viya-dv .vb-modal label { color: #94a3b8; }
html.viya-dv .vb-modal input:not([type=checkbox]):not([type=radio]),
html.viya-dv .vb-modal select,
html.viya-dv .vb-modal textarea { background: #1f2937; border-color: #374151; color: #e2e8f0; }
html.viya-dv .vb-modal input::placeholder,
html.viya-dv .vb-modal textarea::placeholder { color: #64748b; }
html.viya-dv .vb-modal-close { background: #1f2937; color: #cbd5e1; }
html.viya-dv .vb-modal-close:hover { background: #374151; }
html.viya-dv .vb-modal-actions .vb-btn { background: #1f2937; border-color: #374151; color: #cbd5e1; }
html.viya-dv .vb-modal-actions .vb-btn-primary { background: #185FA5; color: #fff; }

/* ── Mobile: bottom-sheet ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .vb-modal-overlay { padding: 0; align-items: flex-end; }
  .vb-modal,
  .vb-modal.vb-modal-sm,
  .vb-modal.vb-modal-lg {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .vb-modal-actions { position: sticky; bottom: 0; background: inherit; }
  .vb-modal-actions .btn,
  .vb-modal-actions button,
  .vb-modal-actions .vb-btn { flex: 1; }
}