/* /home/ubuntu/euprime/app/euprime/static/css/app.css
   Lightweight UI kit for EUPrime (tabs, tables with sticky headers, modals, forms)
   Safe to include on all pages. Uses the same CSS variables as base.html.
*/

/* ------------------------------------------------------------------ */
/* Root tokens (fallbacks if base.html didn't define them)            */
/* ------------------------------------------------------------------ */
:root{
  /* Brand */
  --brand:#4e9eff; --brand-600:#2a7df0;

  /* Sidebar (dark) */
  --s-bg:#101318; --s-text:#e8ecf1; --s-muted:#97a2b0; --s-line:#1f2630;

  /* Content (light) */
  --c-bg:#f6f8fb; --c-card:#ffffff; --c-text:#0f172a; --c-muted:#64748b; --c-line:#e5e7eb;

  /* Status */
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;

  /* Controls */
  --ctl-h:38px;
}

/* ------------------------------------------------------------------ */
/* Layout helpers                                                     */
/* ------------------------------------------------------------------ */
.container-fluid{ width:100%; margin:0 auto; padding:0 12px; }
.hdr{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 8px; gap:12px; }
.hdr .title{ margin:0; font-weight:700; }
.hdr .actions{ display:flex; align-items:center; gap:8px; }

/* Cards & panels */
.card{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:12px;
  padding:6px;
}

/* Small utilities */
.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }
.muted{ color:var(--c-muted); }

/* ------------------------------------------------------------------ */
/* Buttons, inputs, labels                                            */
/* ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  height:var(--ctl-h);
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--c-line);
  background:#fff;
  color:var(--c-text);
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand-600); }
.btn.warn{ background:#fff7ed; border-color:#fed7aa; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.icon-btn{ border:none; background:transparent; cursor:pointer; }

/* Input aliases (to match templates using class="input") */
.input,
.inp,
.form-control,
.form-select{
  height:var(--ctl-h);
  border:1px solid var(--c-line);
  border-radius:10px;
  padding:0 10px;
  background:#fff;
  color:var(--c-text);
  outline:none;
  min-width:160px;
}
.input:focus-visible,
.inp:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(78,158,255,.6);
  border-color:var(--brand);
}
.lbl{ font-size:.9rem; color:var(--c-muted); }

/* Read-only input style */
.readonly,
.input[readonly]{
  background:#f8fafc; color:var(--c-muted);
}

/* Simple action group */
.actions{ display:flex; gap:8px; align-items:center; }

/* Typeahead/inline search wrapper (used on Patients page) */
.typeahead-wrap{
  display:block; width:100%;
}
.typeahead-wrap .input{ width:100%; }

/* Search shell used elsewhere */
.srch{ display:flex; align-items:center; border:1px solid var(--c-line); border-radius:10px; padding:0 10px; background:var(--c-card); }
.srch input{ border:0; outline:0; width:100%; height:var(--ctl-h); background:transparent; }

/* ------------------------------------------------------------------ */
/* Info banners (success / warning / error)                           */
/* ------------------------------------------------------------------ */
.banner{
  display:none;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--c-line);
  background:#fff;
  color:#0f172a;
}
.banner.ok{ background:#ecfdf5; border-color:#10b98133; color:#065f46; }
.banner.warn{ background:#fffbeb; border-color:#f59e0b33; color:#78350f; }
.banner.err{ background:#fef2f2; border-color:#ef444433; color:#7f1d1d; }

/* ------------------------------------------------------------------ */
/* Toolbars (Vendors & Doctors share these)                           */
/* ------------------------------------------------------------------ */
.vend-toolbar,
.doc-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:12px; }
.vend-toolbar .left,
.doc-toolbar .left{ display:flex; gap:12px; align-items:center; }
.vend-toolbar .right,
.doc-toolbar .right{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.vend-toolbar .w-search,
.doc-toolbar .w-search{ min-width:320px; width:420px; max-width:100%; }

/* ------------------------------------------------------------------ */
/* Tabs (unified across Main & Sub)                                   */
/* ------------------------------------------------------------------ */
.tabs{
  display:flex;
  gap:8px;
  margin:6px 0 10px;
  flex-wrap:wrap;
}
.tab-btn{
  border:1px solid var(--c-line);
  background:#fff;
  padding:8px 12px;
  height:32px;
  line-height:16px;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--c-text);
  white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.tab-btn:hover{
  border-color:#d5d9e2;
  background:#fafbfe;
}
.tab-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(78,158,255,.6);
}
.tab-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.tab-btn.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.tab-btn.active .badge{
  /* keep badges readable on brand background */
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset;
}
.tab-btn .badge{
  margin-left:6px;
  transform:translateY(-1px);
}

/* Filter bars */
.filters{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
}
.filters .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filters .cell{ display:flex; flex-direction:column; gap:6px; }
.filters .cell.page{ margin-left:auto; flex-direction:row; align-items:center; gap:8px; }

/* ------------------------------------------------------------------ */
/* Tables with sticky headers & horizontal scroll                     */
/* ------------------------------------------------------------------ */
.table-wrap{ overflow:auto; }
table,
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:#fff;
}
thead th,
.table thead th{
  position:sticky; top:0; z-index:1;
  background:#fff;
  border-bottom:1px solid var(--c-line);
  text-align:left;
  padding:10px;
  font-weight:600;
  color:var(--c-muted);
}
tbody td,
.table tbody td{
  padding:10px;
  border-bottom:1px solid var(--c-line);
  vertical-align:top;
}
tbody tr:hover,
.table tbody tr:hover{ background:#fafafa; }

.num{ text-align:right; white-space:nowrap; }

/* Optional condensed tables (e.g., modal lines or .table-sm) */
table.tight thead th, table.tight tbody td{ padding:8px 10px; }
.table.table-sm thead th, .table.table-sm tbody td{ padding:8px 10px; }

/* Attribute helper for wide cells (addresses, notes, etc.) */
th[data-wide], td[data-wide]{ white-space:normal; min-width:240px; }

/* Pill label (for transfer numbers, etc.) */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:#fff;
}

/* ------------------------------------------------------------------ */
/* Modal — overlay pattern (used by Patients page modals)             */
/* ------------------------------------------------------------------ */
.modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  z-index:1000;
}
.modal[data-open="true"]{ display:flex; }
.modal .modal-mask{
  position:absolute; inset:0; background:rgba(15,23,42,.45);
}
.modal .modal-card{
  position:relative;
  width:min(1100px,95%); max-height:90vh;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
  border:1px solid var(--c-line);
}
.modal-hdr, .modal-ftr{
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
}
.modal-ftr{ border-top:1px solid var(--c-line); border-bottom:none; display:flex; gap:8px; justify-content:flex-end; }
.modal-body{ padding:12px 14px; overflow:auto; }

/* ------------------------------------------------------------------ */
/* Modal — backdrop pattern (used by vendor/doctor modals)            */
/* NOTE: These rules coexist with the global .modal above.            */
/* ------------------------------------------------------------------ */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:none;               /* toggled by JS */
  align-items:center; justify-content:center;
  z-index:1000;
}

/* When backdrop is shown, force inner .modal to be a visible card */
.modal-backdrop .modal{
  display:block !important;   /* override global .modal display:none */
  position:relative; inset:auto;
  width:min(820px,94vw);      /* a bit wider by default for edit forms */
  max-height:90vh;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--c-line);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  overflow:hidden;
}

/* Header / body / footer blocks used by edit/add modals */
.modal-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--c-line);
}
.modal-b{ padding:16px; }
.modal-f{
  display:flex; gap:10px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid var(--c-line); background:#fafafa;
}

/* Generic form grid used inside modals */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{ display:block; font-size:.9rem; margin-bottom:4px; color:#374151; }
.form-grid input, .form-grid textarea{
  width:100%; height:38px;
  border:1px solid var(--c-line); border-radius:8px;
  padding:6px 10px; background:#fff;
}
.form-grid textarea{ min-height:86px; resize:vertical; }

/* ------------------------------------------------------------------ */
/* Badges (numeric counters)                                          */
/* ------------------------------------------------------------------ */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px; line-height:1;
  border:1px solid var(--c-line);
  background:#fff; color:#fff; /* color overridden by specific variants */
}
.badge.tiny{ min-width:16px; height:16px; font-size:11px; padding:0 5px; }
/* Hide badges when JS hides them or when they have no text content */
.badge[hidden], .badge:empty{ display:none !important; }

.badge.ok{ background:var(--ok); color:#fff; border-color:rgba(0,0,0,.06); }
.badge.warn{ background:var(--warn); color:#fff; border-color:rgba(0,0,0,.06); }
/* Filled red for action-needed (matches templates & base.html) */
.badge.err{ background:var(--err); color:#fff; border-color:rgba(0,0,0,.06); }

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 980px){
  .container-fluid{ padding:0 10px; }
  .filters .cell{ min-width:140px; }
  .grid-2{ grid-template-columns:1fr; }
  .hdr{ flex-wrap:wrap; }

  /* Make form grid single column on small screens */
  .form-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ */
/* Print (basic)                                                      */
/* ------------------------------------------------------------------ */
@media print{
  .tabs, .filters, .btn, .modal, .modal-backdrop, .hdr .actions{ display:none !important; }
  .card{ border:none; padding:0; }
  thead th, .table thead th{ position:static; }
}