/* =========================================================================
   Hospital Management System ERP -- Design System
   Base font size: 16px, set once near the bottom of this file. Everything
   else here is rem-based off that, so the whole app scales consistently
   and headings/body text keep a real size hierarchy.
   ========================================================================= */

:root{
  --navy:#10233d;
  --navy-dark:#0a1626;
  --primary:#1955c4;
  --primary-dark:#123f96;
  --primary-light:#4d80e0;
  --teal:#0f8a7e;
  --teal-light:#14b8a6;
  --amber:#d97706;
  --red:#dc2626;
  --green:#15803d;
  --ink:#1c2430;
  --muted:#65708a;
  --bg:#f2f4f9;
  --card:#ffffff;
  --border:#e4e8f0;
  --radius:10px;
  --shadow:0 1px 3px rgba(16,24,50,0.06), 0 1px 2px rgba(16,24,50,0.05);
  --shadow-lg:0 8px 24px rgba(16,24,50,0.12);
}

/* base font-size is set once, near the bottom of this file, so it's easy to find and tune */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:1rem;
  line-height:1.5;
}

/* ---------- beautiful ambient background (no external image needed) ---- */
.bg-scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(25,85,196,0.14), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(16,35,61,0.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(217,119,6,0.08), transparent 40%),
    linear-gradient(160deg,#eef1f8 0%, #eef2fa 40%, #f6f7fb 100%);
}
.bg-scene svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }

/* ---------- layout shell --------------------------------------------- */
.app-shell{ display:flex; min-height:100vh; }

/* ---------- header ----------------------------------------------------- */
.app-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(100deg,var(--navy),var(--primary-dark));
  color:#fff; box-shadow:var(--shadow-lg);
}
.app-header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.65rem 1.25rem;
}
.app-header-subbar{
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  padding:.35rem 1.25rem .55rem; font-size:.78rem; opacity:.92;
  border-top:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.08);
}
.app-header-subbar span{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.brand{ display:flex; align-items:center; gap:.65rem; min-width:0; }
.logo-holder{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex:none;
  border:1px solid rgba(255,255,255,.35);
}
.logo-holder img{ width:30px; height:30px; display:block; }
.brand-text{ min-width:0; }
.brand-text .name{ font-weight:700; font-size:1.15rem; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text .tag{ font-size:.72rem; opacity:.85; letter-spacing:.5px; text-transform:uppercase; }
.header-right{ display:flex; align-items:center; gap:.9rem; }
.header-clock{ font-size:.78rem; opacity:.9; }

.user-chip{
  display:flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.14);
  padding:.3rem .8rem .3rem .35rem; border-radius:999px; font-size:.85rem;
}
.user-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--amber); color:#1f2937;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:none;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.15; gap:.1rem; }
.user-name{ font-weight:600; white-space:nowrap; }
.role-badge{
  align-self:flex-start; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.05rem .45rem; border-radius:999px; background:rgba(255,255,255,.22); color:#fff;
}
.role-badge.role-admin{ background:var(--amber); color:#1f2937; }
.icon-btn{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:.4rem .75rem; border-radius:8px; font-size:.82rem; cursor:pointer; text-decoration:none;
}
.icon-btn:hover{ background:rgba(255,255,255,.26); }
.menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; }
@media (max-width:900px){ .menu-toggle{ display:block; } }

/* ---------- sidebar ----------------------------------------------------- */
.sidebar{
  width:260px; flex:none; background:var(--navy-dark); color:#e7eef2;
  padding:1rem .75rem 2rem; overflow-y:auto;
  position:sticky; top:0; height:100vh; align-self:flex-start;
}
.nav-search{ padding:0 .3rem .6rem; position:sticky; top:0; background:var(--navy-dark); z-index:2; }
.nav-search input{
  width:100%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff;
  border-radius:8px; padding:.45rem .6rem; font-size:.82rem;
}
.nav-search input::placeholder{ color:#8493ad; }
.nav-search input:focus{ outline:2px solid var(--primary-light); outline-offset:1px; background:rgba(255,255,255,.14); }

.nav-dashboard{
  display:flex; align-items:center; justify-content:flex-start; text-align:left; gap:.55rem;
  padding:.65rem .7rem; border-radius:8px;
  color:#fff; text-decoration:none; font-size:1.15rem; font-weight:800; margin:.3rem 0 .7rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.nav-dashboard:hover{ background:rgba(255,255,255,.16); }
.nav-dashboard.active{ background:var(--primary); border-color:var(--primary); }
.nav-dashboard .dot{ width:8px; height:8px; }
.nav-dashboard.nav-users{ font-size:1rem; background:rgba(255,255,255,.06); margin-top:0; }
.nav-dashboard.nav-users:hover{ background:rgba(255,255,255,.12); }

.nav-group{ margin:0 .05rem; border-top:1px solid rgba(255,255,255,.06); }
.nav-group:first-of-type{ border-top:none; }
.sidebar button.group-title{
  width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left;
  font-size:.98rem; text-transform:none; letter-spacing:normal; color:#fff; font-weight:700;
  padding:.75rem .6rem .35rem; background:none; border:none; cursor:pointer; font-family:inherit;
}
.sidebar button.group-title span:first-child{ text-align:left; }
.sidebar button.group-title:hover{ color:var(--primary-light); }
.sidebar button.group-title .chev{ font-size:.68rem; transition:transform .15s ease; color:#7d93b3; }
.nav-group.collapsed .chev{ transform:rotate(-90deg); }
.nav-group.collapsed .group-body{ display:none; }
.sidebar a.nav-link{
  display:flex; align-items:center; justify-content:flex-start; text-align:left; gap:.55rem;
  padding:.4rem .6rem .4rem 1rem; border-radius:8px;
  color:#c3ccdc; text-decoration:none; font-size:.78rem; margin:.03rem 0;
}
.sidebar a.nav-link:hover{ background:rgba(255,255,255,.08); }
.sidebar a.nav-link.active{ background:var(--primary); color:#fff; font-weight:600; }
.sidebar .dot{ width:6px; height:6px; border-radius:50%; background:#7d93b3; flex:none; }
.sidebar a.nav-link.active .dot{ background:#fff; }
.nav-empty{ color:#7d93b3; font-size:.8rem; padding:.6rem; text-align:left; }
@media (max-width:900px){
  .sidebar{ position:fixed; left:-280px; top:0; z-index:30; transition:left .2s ease; box-shadow:var(--shadow-lg); }
  .sidebar.open{ left:0; }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:25; }
  .sidebar-backdrop.open{ display:block; }
}

/* ---------- main content ------------------------------------------------ */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.content{ flex:1; padding:1.4rem 1.6rem 2rem; max-width:1300px; width:100%; margin:0 auto; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1.1rem; }
.page-head h1{ font-size:1.5rem; margin:0 0 .2rem; color:var(--navy); }
.breadcrumb{ font-size:.8rem; color:var(--muted); }
.breadcrumb a{ color:var(--primary); text-decoration:none; }

/* ---------- footer -------------------------------------------------------*/
.app-footer{
  padding:.85rem 1.6rem; text-align:center; font-size:.78rem; color:var(--muted); line-height:1.6;
  border-top:1px solid var(--border); background:rgba(255,255,255,.6);
}
.app-footer a{ color:var(--primary-light); text-decoration:none; }
.app-footer .creator-credit{ font-size:.72rem; opacity:.85; }
.app-footer .creator-credit strong{ color:var(--navy); }

/* ---------- cards --------------------------------------------------------*/
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); transition:box-shadow .15s ease, transform .15s ease; }
.card:hover{ box-shadow:var(--shadow-lg); }
.card .card-body{ padding:1.1rem 1.25rem; }
.card .card-header{
  padding:.9rem 1.25rem; border-bottom:1px solid var(--border); font-weight:600; color:var(--navy);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}

/* ---------- KPI grid ------------------------------------------------------*/
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.9rem; margin-bottom:1.4rem; }
.kpi{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border);
  padding:1.15rem 1.25rem; position:relative; overflow:hidden; transition:box-shadow .15s ease;
}
.kpi:hover{ box-shadow:var(--shadow-lg); }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--primary),var(--navy)); }
.kpi .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.kpi .value{ font-size:2.3rem; font-weight:800; color:var(--navy); margin-top:.25rem; line-height:1.1; }
.kpi.warn::before{ background:linear-gradient(180deg,var(--amber),#92400e); }
.kpi.warn .value{ color:#92400e; }
.kpi.danger::before{ background:linear-gradient(180deg,var(--red),#7f1d1d); }
.kpi.danger .value{ color:#b91c1c; }

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:8px; border:1px solid transparent;
  padding:.5rem .95rem; font-size:.88rem; cursor:pointer; text-decoration:none; font-weight:600;
  transition:filter .12s ease, box-shadow .12s ease;
}
.btn:hover{ filter:brightness(0.95); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 1px 2px rgba(25,85,196,.35); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-outline{ background:#fff; border-color:var(--border); color:var(--primary-dark); }
.btn-danger{ background:#fff; border-color:#fca5a5; color:var(--red); }
.btn-sm{ padding:.32rem .65rem; font-size:.78rem; }
.btn-amber{ background:var(--amber); color:#fff; }

/* ---------- tables -------------------------------------------------------*/
.table-wrap{ overflow-x:auto; border-radius:var(--radius); }
table.data{ width:100%; border-collapse:collapse; background:#fff; font-size:.87rem; }
table.data th, table.data td{ padding:.6rem .75rem; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
table.data th{ background:#f0f3fa; color:var(--navy); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
table.data tbody tr:hover{ background:#f6f8fd; }
.badge{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-green{ background:#dcfce7; color:#166534; }
.badge-amber{ background:#fef3c7; color:#92400e; }
.badge-red{ background:#fee2e2; color:#991b1b; }
.badge-grey{ background:#eef2f2; color:#374151; }
.badge-blue{ background:#dbeafe; color:#1e40af; }

/* ---------- forms ---------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.3rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.8rem; font-weight:600; color:var(--navy); }
.field .req{ color:var(--red); }
.field input, .field select, .field textarea{
  border:1px solid var(--border); border-radius:8px; padding:.5rem .6rem; font-size:.9rem;
  font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--primary-light); outline-offset:1px; }
.field input[readonly]{ background:#f1f5f4; color:#4b5563; }
.field textarea{ min-height:80px; resize:vertical; }
.help{ font-size:.72rem; color:var(--muted); }

.search-bar{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.search-bar input[type=search]{
  border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; font-size:.9rem; min-width:220px; flex:1;
}

/* ---------- flash messages -------------------------------------------- */
.flash{ padding:.7rem 1rem; border-radius:10px; margin-bottom:.6rem; font-size:.88rem; border:1px solid transparent; }
.flash-success{ background:#e8f8f0; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fdecec; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fef7e6; color:#92400e; border-color:#fde68a; }
.flash-info{ background:#eaf1fb; color:var(--navy); border-color:#bfd6f0; }

/* ---------- pagination -------------------------------------------------- */
.pagination{ display:flex; gap:.4rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.pagination a, .pagination span{
  padding:.35rem .65rem; border-radius:6px; border:1px solid var(--border); font-size:.82rem; text-decoration:none; color:var(--navy);
}
.pagination .current{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---------- misc ---------------------------------------------------------*/
.muted{ color:var(--muted); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
.detail-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem 1.4rem; }
.detail-list .dt{ font-size:.72rem; text-transform:uppercase; color:var(--muted); letter-spacing:.03em; }
.detail-list .dd{ font-size:.95rem; color:var(--ink); font-weight:500; word-break:break-word; }
hr.soft{ border:none; border-top:1px solid var(--border); margin:1.2rem 0; }

/* ---------- login page --------------------------------------------------*/
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  position:relative; isolation:isolate;
  background:
    radial-gradient(circle at 20% 20%, rgba(77,128,224,0.25), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(25,85,196,0.2), transparent 45%),
    linear-gradient(150deg, var(--navy-dark), var(--navy) 55%, var(--primary-dark));
}
/* Drop a real photo at app/static/img/hospital-bg.svg to use it as the
   backdrop instead of the gradient above -- see README "Branding" section. */
.auth-wrap.has-photo{
  background-image:
    linear-gradient(rgba(10,22,38,.6), rgba(10,22,38,.78)),
    url("/static/img/hospital-bg.svg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.auth-card{
  width:100%; max-width:740px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:720px){ .auth-card{ grid-template-columns:1fr; } .auth-hero{ display:none; } }
.auth-hero{
  background:linear-gradient(150deg,var(--navy),var(--primary-dark));
  color:#fff; padding:1.6rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-hero .pattern{ position:absolute; inset:0; opacity:.15; }
.auth-hero .content{ position:relative; z-index:1; }
.auth-hero h2{ font-size:1.3rem; margin:.5rem 0 0.3rem; }
.auth-hero p{ opacity:.9; font-size:.85rem; line-height:1.5; margin:0; }
.auth-hero .hero-contact{ display:flex; flex-direction:column; gap:.35rem; margin-top:.9rem; font-size:.78rem; opacity:.92; }
.auth-hero .hero-contact span{ display:flex; align-items:center; gap:.5rem; }
.hero-footer{ margin-top:auto; }
.hero-divider{ border-top:1px solid rgba(255,255,255,.2); margin-bottom:.7rem; }
.hero-trust{ display:flex; gap:.4rem; flex-wrap:wrap; }
.hero-trust span{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:.2rem .55rem; font-size:.68rem;
}
.auth-form{ padding:1.7rem 1.6rem; }
.auth-form h1{ color:var(--navy); font-size:1.25rem; margin:0 0 .15rem; }
.auth-form .sub{ color:var(--muted); font-size:.82rem; margin-bottom:1rem; }
.auth-form .field{ margin-bottom:.75rem; }
.auth-form .field label{ font-size:.76rem; }
.auth-form .field input{ padding:.45rem .55rem; font-size:.85rem; }
.auth-form button{ width:100%; justify-content:center; padding:.55rem; font-size:.88rem; margin-top:.2rem; }
.demo-accounts{ margin-top:1rem; padding:.6rem .7rem; background:#f3f5fb; border-radius:8px; font-size:.72rem; color:var(--muted); line-height:1.5; }
.demo-accounts b{ color:var(--navy); }
.demo-accounts .creator-line{ margin-top:.3rem; font-size:.68rem; opacity:.85; }

/* ---------- print document (screen preview) ------------------------------*/
.doc-preview{ max-width:800px; margin:0 auto; background:#fff; padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow); }
.doc-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-bottom:1rem; }

/* ---------- accessibility / focus ----------------------------------------*/
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary-light); outline-offset:2px;
}
.btn-danger:hover{ background:#fef2f2; }

/* =========================================================================
   Base font size -- change this one number to scale the whole app up or
   down. 16px is a comfortable default (matches a browser's normal text
   size). Everything else in this file is sized in rem off of this, so
   headings, KPI numbers and card titles keep their intended visual
   hierarchy relative to body text instead of all collapsing to one size.
   ========================================================================= */
html{ font-size:16px; }