/* ==========================================================
   ClinicCare — "Care Rose" Design System
   Palette sampled from assets/img/cliniclogo.jpg: magenta hands
   + purple heart on white. Primary = magenta, secondary = purple,
   sidebar = deep plum so white text stays readable. Semantic hues
   (ok / warning / critical) are kept but retuned to harmonize.
   Signature: the torn ticket-stub tab. Every status in the app —
   waiting, resolved, critical — is shown as a small perforated
   chip, echoing the paper queue ticket a patient holds in the
   lobby. Everything else stays quiet so the tab reads instantly.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Karla:wght@400;500;600;700&display=swap');

:root {
  /* ---- Color tokens ---- */
  --ink:        #2B1A26;   /* primary text — deep plum */
  --slate:      #6E5A68;   /* secondary text */
  --muted:      #9C8B96;   /* tertiary / placeholder text */
  --paper:      #FBF4F8;   /* app background — soft rose */
  --white:      #FFFFFF;   /* card surfaces */
  --line:       #F0DCE8;   /* hairline borders */
  --line-2:     #E2BFD4;   /* stronger hairline (inputs, dividers) */

  --rail:       #3B1230;   /* sidebar / instrument rail — deep plum */
  --rail-2:     #24102B;   /* rail gradient end */

  --teal:       #C2257A;   /* brand / primary actions — logo magenta */
  --teal-2:     #A01E64;   /* primary hover */
  --ochre:      #B45309;   /* attention — waiting, low stock, pending */
  --ochre-2:    #95500A;
  --moss:       #4C7A5D;   /* resolved — done, paid, in stock */
  --moss-2:     #3E6A4D;
  --brick:      #A23E2E;   /* critical — cancelled, failed, out of stock */
  --brick-2:    #8C3325;

  --grape:      #8B4BC4;   /* secondary brand — logo purple */
  --grape-2:    #7438A8;
  --grape-tint: #EFE4FA;

  --ochre-tint: #F9ECD4;
  --moss-tint:  #DCEADF;
  --brick-tint: #F6DCD7;
  --teal-tint:  #F9E3EF;   /* primary tint — pale rose */
  --gray-tint:  #F1E7EF;

  --radius:     10px;
  --radius-sm:  6px;
  --shadow-card: 0 1px 2px rgba(59,18,48,.07);
  --shadow-pop:  0 12px 28px rgba(59,18,48,.16);
  --transition: all .16s ease;
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 72px;
}

* { box-sizing: border-box; }
*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
html { scroll-behavior: smooth; }

body {
  font-family: 'Karla', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  overflow-x: hidden;
}
::selection { background: var(--teal-tint); color: var(--ink); }

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
h1, h2, h3, h4, h5, h6, .page-title, .sidebar-brand span, .stat-value,
.login-hero h1, .queue-now, .queue-next, .ticket-number {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}
.page-title { font-size: 1.35rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h5 { font-weight: 600; font-family: 'Karla', system-ui, sans-serif; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
.text-teal { color: var(--teal); }
.text-accent { color: var(--ochre-2); }
.text-ochre { color: var(--ochre); }
.text-moss { color: var(--moss); }
.text-brick { color: var(--brick); }
.text-muted-sm { color: var(--slate); }
.text-muted-xs { color: var(--muted); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ==========================================================
   LAYOUT — Rail + Topbar + Main
   ========================================================== */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(23,31,28,.45); z-index: 1040;
  opacity: 0; transition: opacity .2s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

#wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%);
  color: var(--white);
  position: sticky; top: 0;
  display: flex; flex-direction: column; flex-shrink: 0;
  transition: width .2s ease, margin-left .2s ease;
  z-index: 20;
  border-right: 1px solid rgba(255,255,255,.06);
}

.sidebar-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.3rem 1.2rem 1rem;
  font-size: 1.2rem; color: var(--white); white-space: nowrap;
}
.sidebar-brand .brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: #fff; color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.05rem; overflow: hidden;
}
/* Real clinic logo image inside the brand chips (sidebar, queue board, login). */
.sidebar-brand .brand-mark img,
.queue-board-brand .brand-mark img,
.login-hero .hero-logo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.sidebar-role { padding: 0 1.2rem 1.1rem; }
.sidebar-role .badge { font-size: .68rem; padding: .28rem .6rem; letter-spacing: .04em; border: 0; }
.sidebar-role .role-admin { background: linear-gradient(135deg, var(--teal), var(--grape-2)); color: #fff; }
.sidebar-role .role-doctor { background: var(--grape-tint); color: var(--grape-2); }
.sidebar-role .role-receptionist { background: var(--moss-tint); color: var(--moss-2); }
.sidebar-role .role-patient { background: rgba(255,255,255,.14); color: #fff; }

.sidebar-nav { list-style: none; padding: .2rem .5rem 0; margin: 0; }
.sidebar-nav .nav-item { margin-bottom: .15rem; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1.05rem;
  color: rgba(255,255,255,.78);
  border-radius: 0 8px 8px 0;
  font-size: .86rem; font-weight: 500;
  transition: var(--transition);
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: var(--white); border-left-color: var(--grape); }
.sidebar-nav .nav-link.active { background: linear-gradient(90deg, rgba(194,37,122,.32), rgba(139,75,196,.22)); color: var(--white); border-left-color: var(--teal); }
.sidebar-nav .nav-link .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-nav .nav-link span { overflow: hidden; }

.nav-section-title {
  display: block;
  padding: .75rem 1.2rem .3rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.42);
}

.sidebar-bottom { margin-top: auto; padding: .8rem 1.1rem .9rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-bottom .nav-link { border-radius: 6px; justify-content: center; }

.sidebar-collapse-btn {
  margin-left: auto; background: transparent; border: none;
  color: rgba(255,255,255,.55); width: 26px; height: 26px;
  border-radius: 6px; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--white); background: rgba(255,255,255,.08); }

.sidebar.collapsed .sidebar-brand .brand-name,
.sidebar.collapsed .sidebar-role,
.sidebar.collapsed .sidebar-nav .nav-link span,
.sidebar.collapsed .nav-section-title { display: none; }
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }

.main-content { flex: 1; width: 100%; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: .85rem 1.4rem;
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.breadcrumb-trail {
  display: flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--slate); margin-bottom: .2rem;
}
.breadcrumb-trail a { color: var(--slate); }
.breadcrumb-trail a:hover { color: var(--teal); }
.breadcrumb-trail .sep { color: var(--muted); }
.topbar .page-title { font-size: 1.2rem; margin: 0; color: var(--ink); }

/* ==========================================================
   USER MENU
   ========================================================== */
.user-menu-btn {
  display: flex; align-items: center; gap: .6rem;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50px; padding: .38rem .85rem; cursor: pointer;
  transition: var(--transition);
}
.user-menu-btn:hover { background: var(--paper); border-color: var(--line-2); }
.user-menu-btn .avatar-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.user-menu-btn .user-details { display: flex; flex-direction: column; align-items: flex-start; }
.user-menu-btn .user-name { font-size: .8rem; font-weight: 600; color: var(--ink); }
.user-menu-btn .user-role { font-size: .7rem; color: var(--slate); text-transform: capitalize; }

/* ==========================================================
   PAGE HEADER / BODY
   ========================================================== */
.page-header { padding: 1.15rem 1.5rem 0; }
.page-body { padding: 1.25rem 1.5rem 3rem; }

/* ==========================================================
   CARDS
   ========================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-pop); }
.card.p-1 { padding: .7rem !important; }
.card.p-2 { padding: 1rem !important; }
.card.p-3 { padding: 1.25rem !important; }
.card.p-4 { padding: 1.5rem !important; }
.card.p-5 { padding: 2rem !important; }
.card-header {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: .85rem 1.25rem; font-weight: 600; color: var(--ink);
}
.card-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--slate);
}

/* ==========================================================
   TABLES
   ========================================================== */
.table { margin-bottom: 0; font-size: .87rem; }
.table th {
  background: var(--paper); border-bottom: 2px solid var(--line);
  font-weight: 700; color: var(--ink);
  padding: .65rem .9rem; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .04em;
  font-family: 'Karla', sans-serif;
}
.table td { padding: .6rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: var(--teal-tint); }
.table tbody tr:last-child td { border-bottom: none; }
.table-actions { white-space: nowrap; display: flex; gap: .2rem; }

/* ==========================================================
   DASHBOARD — hero banner, stat tiles, quick actions
   ========================================================== */
.dash-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(120deg, var(--rail) 0%, #5B1548 55%, var(--grape-2) 125%);
  color: #fff; padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.dash-hero::before { content: ''; position: absolute; top: -70px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.09); }
.dash-hero::after { content: ''; position: absolute; bottom: -110px; left: 30%; width: 300px; height: 300px; border-radius: 50%; background: rgba(194,37,122,.28); }
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .dash-date { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-bottom: .2rem; }
.dash-hero h3 { margin: 0 0 .25rem; font-size: 1.4rem; font-weight: 700; color: #fff; }
.dash-hero p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.82); max-width: 640px; }
.dash-hero .dash-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dash-hero .btn-light { font-weight: 700; border: 0; }
.dash-hero .btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; font-weight: 600; }
.dash-hero .btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.dash-hero-logo { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #fff; flex-shrink: 0; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.dash-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stat-icon.bg-blue  { background: var(--teal-tint); color: var(--teal); }
.stat-icon.bg-teal  { background: var(--grape-tint); color: var(--grape-2); }
.stat-icon.bg-grape { background: var(--grape-tint); color: var(--grape-2); }
.stat-tile.flag-grape::before { background: linear-gradient(180deg, var(--teal), var(--grape)); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.quick-action {
  display: flex; align-items: center; gap: .6rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .8rem; color: var(--ink); font-size: .82rem; font-weight: 600;
  transition: var(--transition); text-decoration: none;
}
.quick-action:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow-card); text-decoration: none; }
.quick-action svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================
   TICKET TAB — signature status element
   A small perforated stub: solid color body + a punched
   circular notch on the left edge, like a torn queue ticket.
   Applies to stat tiles (as an edge tab) and status chips (.pill).
   ========================================================== */
.stat-tile {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1rem 1.3rem;
  display: flex; align-items: center; gap: .8rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  overflow: hidden;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.stat-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--line-2);
}
.stat-tile::after {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--paper);
  border: 1px solid var(--line);
}
.stat-tile.flag-sage::before, .stat-tile.flag-moss::before { background: var(--moss); }
.stat-tile.flag-amber::before, .stat-tile.flag-warning::before { background: var(--ochre); }
.stat-tile.flag-coral::before, .stat-tile.flag-danger::before { background: var(--brick); }
.stat-tile.flag-blue::before { background: var(--teal); }

.stat-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon.bg-blue  { background: var(--teal-tint); color: var(--teal); }
.stat-icon.bg-teal  { background: var(--teal-tint); color: var(--teal); }
.stat-icon.bg-sage  { background: var(--moss-tint); color: var(--moss); }
.stat-icon.bg-amber { background: var(--ochre-tint); color: var(--ochre); }
.stat-icon.bg-coral { background: var(--brick-tint); color: var(--brick); }
.stat-value { font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat-label { font-size: .74rem; color: var(--slate); }

/* ==========================================================
   PILLS & BADGES — small ticket-stub chips
   ========================================================== */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem .2rem .5rem; border-radius: 999px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  position: relative;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.pill-amber  { background: var(--ochre-tint); color: var(--ochre-2); }
.pill-amber::before  { background: var(--ochre); }
.pill-sage   { background: var(--moss-tint);  color: var(--moss-2); }
.pill-sage::before   { background: var(--moss); }
.pill-coral  { background: var(--brick-tint); color: var(--brick-2); }
.pill-coral::before  { background: var(--brick); }
.pill-blue   { background: var(--teal-tint);  color: var(--teal-2); }
.pill-blue::before   { background: var(--teal); }
.pill-purple { background: var(--grape-tint); color: var(--grape-2); }
.pill-purple::before { background: var(--grape); }
.pill-gray   { background: var(--gray-tint); color: var(--slate); }
.pill-gray::before   { background: var(--muted); }

.badge { font-size: .7rem; font-weight: 700; padding: .25rem .55rem; border-radius: var(--radius-sm); }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  font-family: 'Karla', system-ui, sans-serif;
  font-weight: 700; border-radius: 8px; border: 1px solid transparent;
  padding: .5rem 1.05rem; font-size: .85rem; transition: var(--transition);
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(194,37,122,.25); }
.btn-accent { background: var(--ochre); color: var(--white); border-color: var(--ochre); }
.btn-accent:hover { background: var(--ochre-2); box-shadow: 0 4px 12px rgba(180,83,9,.22); }
.btn-outline-secondary { background: transparent; color: var(--slate); border-color: var(--line-2); }
.btn-outline-secondary:hover { background: var(--paper); color: var(--ink); }
.btn-outline-primary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline-primary:hover { background: var(--teal); color: var(--white); }
.btn-sm { padding: .32rem .7rem; font-size: .8rem; }
.btn-success { background: var(--moss); border-color: var(--moss); color: var(--white); }
.btn-danger  { background: var(--brick); border-color: var(--brick); color: var(--white); }

/* ==========================================================
   FORMS
   ========================================================== */
.form-control, .form-select {
  border-radius: 8px; border: 1px solid var(--line-2);
  padding: .5rem .75rem; font-size: .87rem; transition: var(--transition); width: 100%;
  font-family: 'Karla', sans-serif; background: var(--white); color: var(--ink);
}
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(194,37,122,.14); }
.form-label { font-size: .81rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.input-group .form-control { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-control-sm { padding: .35rem .6rem; font-size: .82rem; }
.form-select-sm { padding: .35rem .6rem; font-size: .82rem; }

/* ==========================================================
   TOOLBAR & EMPTY STATE
   ========================================================== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.toolbar .toolbar-left { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.toolbar .toolbar-right { display: flex; gap: .4rem; flex-wrap: wrap; }
.toolbar-search { position: relative; width: 220px; height: 34px; }
.toolbar-search .form-control { padding-left: 2rem; height: 100%; }
.toolbar-search .search-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }

.empty-state { text-align: center; padding: 2.2rem 1rem; color: var(--slate); border-radius: var(--radius); background: var(--paper); }
.empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto 1rem; opacity: .45; color: var(--teal); }
.empty-state h6 { color: var(--ink); font-weight: 700; margin-bottom: .4rem; }
.empty-state p { font-size: .85rem; margin: 0; max-width: 380px; margin-left: auto; margin-right: auto; }

.alert { border-radius: var(--radius); border: none; padding: .8rem 1rem; font-size: .86rem; }
.alert-success { background: var(--moss-tint); color: var(--moss-2); }
.alert-danger  { background: var(--brick-tint); color: var(--brick-2); }
.alert-warning { background: var(--ochre-tint); color: var(--ochre-2); }
.alert-info    { background: var(--teal-tint); color: var(--teal-2); }

/* ==========================================================
   MODAL
   ========================================================== */
.lightbox-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(23,31,28,.5); z-index: 1100;
  align-items: center; justify-content: center; padding: 1.5rem;
}
.lightbox-backdrop.show { display: flex; }
.lightbox-box {
  background: var(--white); border-radius: var(--radius);
  max-width: 700px; width: 100%; max-height: 85vh;
  overflow-y: auto; box-shadow: var(--shadow-pop);
  border: 1px solid var(--line); position: relative;
}
.lightbox-header { border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; font-weight: 700; color: var(--ink); }
.lightbox-body { padding: 1.25rem; }
.lightbox-footer { border-top: 1px solid var(--line); padding: .8rem 1.25rem; display: flex; justify-content: flex-end; gap: .5rem; }
.lightbox-close { position: absolute; top: .7rem; right: .9rem; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.3rem; }

/* ==========================================================
   PROGRESS STEPS
   ========================================================== */
.steps { display: flex; margin-bottom: 1.5rem; }
.step { flex: 1; text-align: center; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: 50%; right: -50%; height: 2px; background: var(--line); }
.step.active { color: var(--teal); }
.step.active .step-num { background: var(--teal); color: var(--white); border: 2px solid var(--teal); }
.step .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; margin: 0 auto .3rem; font-size: .75rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }

/* ==========================================================
   NOTIFICATIONS — topbar bell + Facebook-style dropdown panel
   ========================================================== */
.notif-wrap { position: relative; }

/* Round icon button, like the Facebook top-bar bell */
.notif-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--slate);
  transition: var(--transition);
  cursor: pointer;
}
.notif-bell:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
.notif-bell[aria-expanded='true'] { background: var(--teal-tint); border-color: transparent; color: var(--teal); }
.notif-bell svg { width: 20px; height: 20px; }

/* Red unread badge — removed the instant the panel opens */
.notif-badge {
  position: absolute;
  top: -1px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brick);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Panel: 360px card, rounded, floating shadow, quick pop-in.
   The bell uses data-bs-display="static" so Popper never touches
   this menu — top:100% + right:0 anchors it deterministically
   under the bell, and the pin helper in script.js skips it too. */
.notif-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: .3rem;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: notif-pop .14s ease-out;
}
/* Animate the `translate` property, NOT `transform` — Popper
   positions the panel with an inline transform, and keyframes on
   transform would replace it for the animation's duration. */
@keyframes notif-pop {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem .7rem;
}
.notif-panel-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.notif-mark-all {
  border: 0;
  background: none;
  padding: 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-mark-all:disabled { opacity: .55; cursor: default; text-decoration: none; }

.notification-list { max-height: 380px; overflow-y: auto; }

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: var(--transition);
}
.notification-item:hover { background: var(--paper); }
.notification-item.unread { background: var(--teal-tint); }
.notification-item.unread .notif-type { font-weight: 700; }

/* Round type-avatar chip */
.notif-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-tint);
  color: var(--teal);
}
.notif-ico svg { width: 17px; height: 17px; }
.notif-ico.is-remind { background: var(--gray-tint); color: var(--slate); }
.notif-ico.is-alert { background: var(--ochre-tint); color: var(--ochre); }

.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.notif-type { font-size: .8rem; font-weight: 600; color: var(--ink); }
.notif-time { font-size: .7rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.notif-msg {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: .1rem;
  font-size: .78rem;
  color: var(--slate);
}

/* Unread marker dot — disappears when the row is read */
.notif-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .5rem;
  border-radius: 50%;
  background: var(--teal);
}

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.8rem 1rem;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
}

.notif-panel-foot {
  display: block;
  padding: .65rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--white);
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.notif-panel-foot:hover { background: var(--paper); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .notif-panel { animation: none; }
}

/* ==========================================================
   LOGIN PAGE
   ========================================================== */
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--paper) 0%, var(--teal-tint) 55%, var(--grape-tint) 100%); padding: 1.5rem; }
.login-container { display: flex; max-width: 960px; width: 100%; background: var(--white); border-radius: 20px; box-shadow: var(--shadow-pop); overflow: hidden; border: 1px solid var(--line); }
.login-hero { flex: 1.05; background: linear-gradient(165deg, var(--rail) 0%, #5B1548 55%, var(--grape-2) 130%); color: var(--white); padding: 3rem 2.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; }
.login-hero::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08); }
.login-hero::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(194,37,122,.25); }
.login-hero .hero-logo { width: 88px; height: 88px; border-radius: 22px; background: #fff; color: var(--rail); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; font-size: 1.7rem; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 1; }
.login-hero h1 { font-size: 1.65rem; font-weight: 700; margin-bottom: .35rem; position: relative; z-index: 1; }
.login-hero .hero-tag { font-size: .86rem; opacity: .85; position: relative; z-index: 1; margin-bottom: 0; }
.login-hero .hero-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; position: relative; z-index: 1; text-align: left; }
.login-hero .hero-points li { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: rgba(255,255,255,.92); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: .55rem .8rem; }
.login-hero .hero-points svg { width: 17px; height: 17px; flex-shrink: 0; }
.login-hero .hero-stats { display: flex; gap: 1.4rem; justify-content: center; margin-top: 1.6rem; position: relative; z-index: 1; }
.login-hero .hero-stats > div { text-align: center; }
.login-hero .hero-stats .hero-num { font-size: 1.3rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.login-hero .hero-stats .hero-lbl { font-size: .72rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.login-form { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.login-form .login-title { font-size: 1.7rem; font-weight: 600; font-family: 'Space Grotesk', sans-serif; color: var(--ink); margin-bottom: .35rem; }
.login-form .login-subtitle { color: var(--slate); font-size: .88rem; margin-bottom: 1.5rem; }
.login-form .form-control { padding: .7rem .9rem; }
.login-form .form-label { font-size: .8rem; }
.login-form .btn-primary { background: linear-gradient(135deg, var(--teal) 0%, var(--grape-2) 140%); border-color: var(--teal); font-weight: 700; padding: .7rem; border-radius: 10px; }
.login-form .btn-primary:hover { background: var(--teal-2); border-color: var(--teal-2); }
.login-divider { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .75rem; margin: 1.3rem 0 .9rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================
   QUEUE DISPLAY BOARD — full-screen lobby ticket board
   ========================================================== */
.queue-board {
  min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 0%, var(--rail) 0%, var(--rail-2) 70%);
  color: var(--white); padding: 3rem 2rem; font-family: 'Karla', sans-serif;
}
.queue-board-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; opacity: .8; font-size: 1rem; margin-bottom: 2.5rem; }
.queue-board-brand .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--rail); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.queue-now-wrap { text-align: center; margin-bottom: 2.5rem; }
.queue-now-label { text-transform: uppercase; letter-spacing: .15em; font-size: .95rem; color: rgba(255,255,255,.6); margin-bottom: .5rem; }
.queue-now {
  font-size: 7rem; font-weight: 700; line-height: 1;
  color: var(--white);
  display: inline-block; position: relative; padding: 0 .3em;
}
.queue-now::before, .queue-now::after {
  content: ''; position: absolute; top: 50%; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rail-2); transform: translateY(-50%);
}
.queue-now::before { left: -9px; }
.queue-now::after { right: -9px; }
.queue-token-name { font-size: 1.3rem; color: rgba(255,255,255,.85); margin-top: .3rem; }
.queue-next-wrap { text-align: center; margin-bottom: 2.5rem; color: rgba(255,255,255,.7); }
.queue-next-label { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; margin-bottom: .3rem; }
.queue-next { font-size: 2.3rem; color: var(--ochre); }
.queue-waiting-label { text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: .8rem; }
.queue-waiting-list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 900px; margin: 0 auto; }
.ticket-chip {
  position: relative; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.25);
  border-radius: 8px; padding: .55rem 1rem .55rem 1.1rem; display: flex; align-items: center; gap: .5rem;
  font-size: .95rem;
}
.ticket-chip::before {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--rail-2);
}
.ticket-chip .ticket-number { font-size: 1.05rem; color: var(--ochre); }
.queue-board-footer { margin-top: auto; text-align: center; color: rgba(255,255,255,.4); font-size: .8rem; padding-top: 2rem; }

/* ==========================================================
   PRINT STYLES
   ========================================================== */
@media print {
  .no-print, .no-print * { display: none !important; }
  body { background: var(--white); }
  .card { border: none; box-shadow: none; page-break-inside: avoid; }
  .stat-tile { break-inside: avoid; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 991.98px) {
  .stat-value { font-size: 1.2rem; }
  .login-hero, .login-form { padding: 2rem; }
  .queue-now { font-size: 5rem; }
}
@media (max-width: 767.98px) {
  .login-wrapper { padding: 1rem; }
  .login-container { flex-direction: column; max-width: 480px; }
  .login-hero { padding: 2rem 1.5rem; }
  .login-hero .hero-points { width: 100%; }
  .login-form { padding: 1.8rem 1.5rem; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; margin-left: calc(-1 * var(--sidebar-width)); z-index: 1050; width: var(--sidebar-width) !important; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  .sidebar.show { margin-left: 0; }
  .sidebar.collapsed .sidebar-brand .brand-name,
  .sidebar.collapsed .sidebar-role,
  .sidebar.collapsed .sidebar-nav .nav-link span,
  .sidebar.collapsed .nav-section-title { display: inline !important; }
  .main-content { width: 100%; }
  .stat-tile { padding: .8rem; }
  .stat-value { font-size: 1.1rem; }
  .queue-now { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* theme: active outline buttons, switches and checkboxes use the brand colour, not Bootstrap blue */
.btn-outline-primary.active, .btn-outline-primary:active, .btn-check:checked + .btn-outline-primary { background: var(--teal); border-color: var(--teal); color: var(--white); }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(194,37,122,.18); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e7a6c9'/%3e%3c/svg%3e"); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--teal); border-color: var(--teal); color: var(--white); opacity: .45; }

/* Prescriptions list: expanded medicines row */
.rx-details > td { background: var(--paper); padding: .75rem 1rem; }
.rx-details .table { background: transparent; --bs-table-bg: transparent; }
.toolbar-search .search-icon { display: inline-flex; align-items: center; pointer-events: none; }
.toolbar-search .search-icon svg { width: 16px; height: 16px; }
.toolbar-search .form-control { padding-left: 2.1rem; }

/* Queue (hospital style): doctor room cards + lane-coloured ticket chips */
.q-room { border-top: 4px solid var(--line-2); }
.q-room.is-busy { border-top-color: var(--teal); }
.q-room-head { padding: .8rem 1rem 0; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.q-room-body { padding: .6rem 1rem .8rem; text-align: center; }
.q-room-label { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--muted); }
.q-ticket { font-size: 2.6rem; font-weight: 700; line-height: 1.1; color: var(--teal); letter-spacing: .02em; }
.q-ticket.is-empty { color: var(--line-2); }
.q-room-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: 0 1rem 1rem; }
.q-chip { display: inline-block; font-weight: 700; font-size: 1rem; padding: .2rem .55rem; border-radius: 6px; background: var(--paper); border: 1px solid var(--line-2); border-left: 4px solid var(--slate); letter-spacing: .02em; }
.q-chip.lane-emergency { border-left-color: var(--brick); color: var(--brick-2); }
.q-chip.lane-priority { border-left-color: var(--ochre); color: var(--ochre-2); }
.q-next-row > td { background: var(--paper); }

/* Reports: dark header strip + SVG charts */
.rep-head { background: #1c0f1e; color: #fff; border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.rep-head h5 { margin: 0; font-weight: 700; color: #fff; }
.rep-head .rep-period { color: #d6c9d4; font-size: .85rem; margin-top: .15rem; }
.rep-head .btn-outline-light { border-color: rgba(255,255,255,.4); color: #fff; }
.rep-head .btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-base { stroke: var(--line-2); stroke-width: 1; }
.chart-axis { font-size: 12px; fill: var(--muted); }
.chart-val { font-size: 12px; fill: var(--slate); font-weight: 600; }
.chart-label { font-size: 12px; fill: var(--ink); }
.chart-total { font-size: 26px; font-weight: 700; fill: var(--ink); }
.chart-empty { color: var(--muted); font-size: .85rem; margin: 1rem 0; }
.chart-donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.chart-donut { width: 150px; height: 150px; flex: 0 0 auto; }
.chart-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 140px; font-size: .85rem; }
.chart-legend li { display: flex; align-items: center; gap: .45rem; padding: .18rem 0; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.chart-legend span { flex: 1; }
.chart-legend small { color: var(--muted); width: 2.6rem; text-align: right; }

/* ==========================================================
   PHONE: app-like layout (bottom tab bar, cards instead of
   wide tables, 16px inputs so iPhone does not zoom, bigger
   tap targets)
   ========================================================== */
.mobile-tabbar { display: none; }
@media (max-width: 767.98px) {
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: var(--white); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(43, 26, 38, .07);
  }
  .mobile-tabbar a, .mobile-tabbar button {
    flex: 1 1 0; min-width: 0; min-height: 58px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; color: var(--slate); text-decoration: none;
    font-size: .68rem; font-weight: 600; -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar svg { width: 22px; height: 22px; }
  .mobile-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tabbar .active { color: var(--teal); }
  .mobile-tabbar .active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
  .page-body { padding: 1rem .85rem calc(84px + env(safe-area-inset-bottom)); }

  /* iPhone zooms into any field under 16px: keep every field at 16px. */
  .form-control, .form-select, .form-control-sm, .form-select-sm, input.form-control, textarea { font-size: 16px; }
  .btn-sm { min-height: 36px; }
  .btn { min-height: 40px; }
  .btn-sm.btn { min-height: 36px; }
  .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
  .notif-panel { position: fixed !important; left: 10px !important; right: 10px !important; top: 64px !important; width: auto !important; max-width: none !important; transform: none !important; }

  /* Data tables -> stacked cards ("LABEL ..... value" per row). */
  .table-responsive:has(> .table-stack) { overflow: visible; }
  .table-stack, .table-stack > tbody { display: block; width: 100%; }
  .table-stack > thead { display: none; }
  .table-stack > tbody > tr {
    display: block; margin: .6rem; padding: .55rem .85rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  }
  .table-stack > tbody > tr.collapse:not(.show) { display: none; }
  .table-stack > tbody > tr > td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    padding: .32rem 0; border: 0; text-align: right; background: none; box-shadow: none !important;
    overflow-wrap: anywhere;
  }
  .table-stack > tbody > tr > td::before {
    content: attr(data-label); flex: 0 0 36%; text-align: left; padding-top: .15rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  .table-stack > tbody > tr > td:not([data-label])::before,
  .table-stack > tbody > tr > td[data-label=""]::before { display: none; }
  .table-stack > tbody > tr > td[data-label=""] { justify-content: flex-end; }
  .table-stack > tbody > tr > td:last-child[data-label=""],
  .table-stack > tbody > tr > td[data-label="Actions"] { border-top: 1px dashed var(--line); margin-top: .3rem; padding-top: .55rem; justify-content: flex-end; }
  .table-stack > tbody > tr > td.td-full { display: block; text-align: left; padding: 0; }
  .table-stack > tbody > tr:has(> td.td-full:only-child) { padding: 0; border: 0; background: none; }
  .table-stack .table-actions { flex-wrap: wrap; justify-content: flex-end; }
  .table-stack > tbody > tr > td > .form-control,
  .table-stack > tbody > tr > td > .form-select,
  .table-stack > tbody > tr > td > .input-group { max-width: 62%; }
  .card > .table-responsive > .table-stack { margin: .1rem 0; }
}
@media (max-width: 767.98px) {
  .table-stack .td-v { min-width: 0; flex: 1 1 auto; }
  .table-stack .td-v .text-nowrap { white-space: normal; }
  .table-stack .td-v > .table-actions, .table-stack .td-v > form { justify-content: flex-end; }
  .table-stack .td-v > .form-control, .table-stack .td-v > .form-select { margin-left: auto; }
}

/* Role badges outside the sidebar (Users table): they had no colour there, so white text on white. */
.badge.role-admin { background: var(--teal-tint); color: var(--teal-2); }
.badge.role-doctor { background: var(--grape-tint); color: var(--grape-2); }
.badge.role-receptionist { background: var(--moss-tint); color: var(--moss-2); }
.badge.role-patient { background: var(--gray-tint); color: var(--slate); }