/* Status/Discount badge row alignment */
.status-badges-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* User Collection Report: Fix Payment Method column width */
.user-collection-table th:nth-child(3),
.user-collection-table td:nth-child(3) {
  min-width: 180px;
  max-width: 260px;
  white-space: nowrap;
  text-align: left;
}
/* ═══════════════════════════════════════════════════════════
   ClinicMS  —  Modern Design System
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables (Light Theme) ── */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --transition: 0.2s cubic-bezier(.4,0,.2,1);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
  --surface-glow: 0 0 0 1px color-mix(in srgb, var(--c-primary) 16%, transparent);

  /* Colors */
  --c-primary: #6366f1;
  --c-primary-light: #818cf8;
  --c-primary-dark: #4f46e5;
  --c-primary-bg: #eef2ff;
  --c-success: #22c55e;
  --c-success-bg: #f0fdf4;
  --c-warning: #f59e0b;
  --c-warning-bg: #fffbeb;
  --c-danger: #ef4444;
  --c-danger-bg: #fef2f2;
  --c-info: #3b82f6;
  --c-info-bg: #eff6ff;

  /* Surfaces */
  --bg: #f3f5f8;
  --bg-card: #fcfdff;
  --bg-sidebar: #f9fbfe;
  --bg-input: #f7f9fc;
  --bg-hover: #e9eef5;
  --bg-active: #e8ecfb;
  --bg-modal-overlay: rgba(15,23,42,.4);
  --bg-skeleton: #e2e8f0;
  --bg-skeleton-shine: #f1f5f9;

  /* Text */
  --text: #1e293b;
  --text-secondary: #526277;
  --text-muted: #8493a8;
  --text-inverse: #ffffff;

  /* Borders */
  --border: #d9e1ec;
  --border-color: #d9e1ec;
  --border-light: #e7edf5;
  --border-focus: var(--c-primary);

  /* Sidebar */
  --sidebar-w: 260px;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: #1e293b;
  --bg-input: #1e293b;
  --bg-hover: #334155;
  --bg-active: #312e81;
  --bg-modal-overlay: rgba(0,0,0,.6);
  --bg-skeleton: #334155;
  --bg-skeleton-shine: #475569;
  --c-primary-bg: #312e81;
  --c-success-bg: #14532d;
  --c-warning-bg: #78350f;
  --c-danger-bg: #7f1d1d;
  --c-info-bg: #1e3a5f;
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border: #334155;
  --border-color: #334155;
  --border-light: #1e293b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.4);
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -12%, color-mix(in srgb, var(--c-primary) 10%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c-info) 10%, transparent) 0%, transparent 36%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, #ffffff 10%) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.hidden { display: none !important; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1,h2,h3,h4,h5,h6 { line-height: 1.3; font-weight: 600; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
/* ── App Loading Splash ── */
.app-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 55%, #c026d3 100%);
  transition: opacity .35s ease, visibility .35s ease;
}
.app-splash.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash-logo {
  animation: splashPop .5s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
.app-splash-name {
  font-size: 32px; font-weight: 900; letter-spacing: 8px;
  color: #fff; opacity: .95;
  animation: splashPop .55s .05s cubic-bezier(.34,1.56,.64,1) both;
}
.app-splash-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-top: 8px;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #a78bfa 50%, #818cf8 100%);
  padding: 16px 12px;
  position: relative;
  overflow: hidden;
}
.login-wrapper-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.login-bg-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
}
.login-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border-radius: 24px;
  padding: 30px 40px 26px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,.14);
  position: relative;
  animation: cardIn .5s ease-out;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-brand {
  text-align: center;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-logo-image.login-brand-logo {
  width: min(100%, 72px);
  margin: 0 auto 4px;
  filter: drop-shadow(0 10px 22px rgba(99,102,241,.18));
}
.brand-logo-image {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 14px 28px rgba(99,102,241,.20));
}
.brand-logo-image-splash {
  width: min(100%, 88px);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.login-logo-ring {
  display: flex; align-items: center; justify-content: center;
}
.sidebar-brand {
  gap: 10px;
}
.login-brand h1 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 2px;
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #c026d3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  position: relative;
  display: inline-block;
}
.login-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 0; }

.login-card .form-group { margin-bottom: 13px; }
.login-card .form-group label { font-size: 13px; margin-bottom: 8px; }
.login-card input { padding: 12px 14px; font-size: 14px; border-radius: 10px; }
.login-card .input-icon-wrap input { padding-left: 42px; }
.login-card .input-icon { left: 14px; }
.login-card .btn-full { padding: 12px 16px; font-size: 14.5px; margin-top: 4px; border-radius: 12px; }

.login-demo { margin-top: 12px; text-align: center; }
.demo-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-muted); margin-bottom: 10px;
}
.demo-accounts { display: flex; flex-direction: column; gap: 6px; }
.demo-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}
.demo-chip:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.demo-role {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-primary);
  color: #fff;
}
.demo-role.doc { background: var(--c-success); }
.demo-role.rec { background: var(--c-warning); }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
#mainApp {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar-header {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-primary);
}
.logo-text {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #c026d3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-collapse,
.sidebar-close { display: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.sidebar-collapse { display: inline-flex; align-items: center; justify-content: center; }
.sidebar-collapse:hover,
.sidebar-close:hover { background: var(--bg-hover); color: var(--text); }

#sideNav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 12px;
}

.nav-module {
  border-radius: 10px;
  margin-bottom: 6px;
}
.nav-module-btn {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13.5px;
  transition: all .2s ease;
  cursor: pointer;
  text-align: left;
}
.nav-module-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-module.module-active > .nav-module-btn {
  color: var(--text);
  background: color-mix(in srgb, var(--c-primary-bg) 40%, transparent);
  border-left: 3px solid var(--c-primary);
  padding-left: 7px;
}
.nav-module-icon svg {
  width: 16px;
  height: 16px;
  opacity: .8;
}
.nav-module-label { flex: 1; min-width: 0; }
.nav-module-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.nav-module.open .nav-module-arrow { transform: rotate(90deg); }
.nav-module-arrow svg { width: 14px; height: 14px; }

.nav-sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
.nav-module.open .nav-sublist {
  max-height: 1200px;   /* generous cap so long menus (e.g. Store) never clip; #sideNav scrolls the whole nav */
}
.nav-quick-wrap {
  padding: 3px 8px 6px 38px;
}
.nav-quick-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--c-primary);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  transition: all .2s ease;
}
.nav-quick-btn:hover {
  background: var(--c-primary-bg);
  border-color: color-mix(in srgb, var(--c-primary) 30%, var(--border) 70%);
}
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 2px 30px;
  border-radius: 8px;
  padding: 7px 8px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 12.5px;
  transition: all .2s ease;
}
.nav-subitem:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-subitem.active {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-weight: 600;
}
.nav-subitem.last-used:not(.active) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent);
}
.nav-sub-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
}
.nav-subitem.active .nav-sub-dot { background: var(--c-primary); }
.nav-sub-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count-badge {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
  color: var(--c-primary);
  font-size: 10px;
  font-weight: 700;
}

body.sidebar-collapsed #sidebar { width: 74px; }
body.sidebar-collapsed .main-wrapper { margin-left: 74px; }
body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .nav-module-label,
body.sidebar-collapsed .nav-module-arrow,
body.sidebar-collapsed .nav-sublist,
body.sidebar-collapsed .user-info,
body.sidebar-collapsed .btn-logout span { display: none !important; }
body.sidebar-collapsed .sidebar-header,
body.sidebar-collapsed .sidebar-footer { padding-left: 10px; padding-right: 10px; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; width: 100%; }
body.sidebar-collapsed .nav-module-btn { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .nav-module.module-active > .nav-module-btn { border-left: 0; }
body.sidebar-collapsed .user-badge,
body.sidebar-collapsed .btn-logout { justify-content: center; padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed #sidebar.temp-expanded { width: var(--sidebar-w); }
body.sidebar-collapsed #sidebar.temp-expanded .logo-text,
body.sidebar-collapsed #sidebar.temp-expanded .nav-module-label,
body.sidebar-collapsed #sidebar.temp-expanded .nav-module-arrow,
body.sidebar-collapsed #sidebar.temp-expanded .nav-sublist,
body.sidebar-collapsed #sidebar.temp-expanded .user-info,
body.sidebar-collapsed #sidebar.temp-expanded .btn-logout span { display: initial !important; }
body.sidebar-collapsed #sidebar.temp-expanded .nav-module-btn { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
body.sidebar-collapsed #sidebar.temp-expanded .sidebar-brand,
body.sidebar-collapsed #sidebar.temp-expanded .user-badge,
body.sidebar-collapsed #sidebar.temp-expanded .btn-logout { justify-content: initial; }

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}
.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.user-badge .avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.user-badge .user-info { flex: 1; min-width: 0; }
.user-badge .user-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-badge .user-role-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: capitalize; }

.sidebar-footer-actions { display: flex; align-items: center; gap: 6px; }
.btn-logout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}
.btn-logout:hover { border-color: var(--c-danger); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-modal-overlay);
  z-index: 99;
  opacity: 0;
  transition: opacity .3s;
}
.sidebar-overlay.show { opacity: 1; }

/* Main wrapper */
.main-wrapper {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg-card) 85%, transparent);
  box-shadow: 0 8px 20px -16px rgba(2, 6, 23, .35);
}
[data-theme="dark"] .topbar {
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .7);
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}
.menu-btn:hover { background: var(--bg-hover); }

.login-copyright { text-align: center; font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.6; margin-top: 14px; }
.sidebar-copyright { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.5; padding: 8px 12px 4px; opacity: .7; }
.topbar-left { flex: 1; min-width: 0; }
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.topbar-clinic-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px; white-space: nowrap; }
.topbar-left h1 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.topbar-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-theme-btn { display: none; }
.topbar-worksite {
  border: 1px solid color-mix(in srgb, var(--c-primary) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--c-primary-bg) 78%, transparent);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1px;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.topbar-worksite.clickable {
  cursor: pointer;
  transition: var(--transition);
}
.topbar-worksite.clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-primary);
}
.topbar-user-wrap { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg-hover); }
.topbar-user-wrap .avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.topbar-user { font-size: 13px; font-weight: 600; color: var(--text); }
.topbar-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; display: block; }
.topbar-user-info { line-height: 1.3; }

.page-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  overflow-x: auto;
}
.page-tab {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.page-tab.drag-over {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.page-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.page-tab.active {
  background: var(--c-primary-bg);
  border-color: color-mix(in srgb, var(--c-primary) 38%, var(--border) 62%);
  color: var(--c-primary);
}
.page-tab.pinned {
  border-style: solid;
}
.page-tab-label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-tab-pin {
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .35px;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.page-tab-pin:hover {
  border-color: var(--border);
  background: var(--bg-hover);
  color: var(--text);
}
.page-tab-pin.active {
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border) 60%);
  background: color-mix(in srgb, var(--c-primary-bg) 82%, transparent);
  color: var(--c-primary);
}
.page-tab-close {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-muted);
}
.page-tab-close:hover {
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  color: var(--c-danger);
}

/* Content area */
#contentArea {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 28px;
  background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--c-primary) 5%, transparent) 0%, transparent 42%);
  animation: fadeContent .3s ease;
}
@keyframes fadeContent {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 94%, white 6%) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.page-hero.compact { padding-top: 13px; padding-bottom: 13px; }
.page-hero-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--text);
}
.page-hero-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 55%, transparent);
  animation: pulse-live 1.8s ease-out infinite;
}
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-success) 0%, transparent); }
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, white 8%) 0%, var(--bg-card) 100%);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
  box-shadow: var(--shadow-xs);
}
.quick-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--border) 65%);
}
.quick-action-btn:active { transform: translateY(0); }
.quick-action-btn svg { width: 16px; height: 16px; color: var(--c-primary); }
.quick-action-btn span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.qa-key {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .35px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--bg-hover);
}

.kpi-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.kpi-mini {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, white 7%) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-xs);
}
.kpi-mini span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.kpi-mini strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.2px;
  color: var(--text);
}

.quick-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}
.quick-dock-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 10px;
  height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: .18s ease;
}
.quick-dock-btn svg { width: 14px; height: 14px; color: var(--c-primary); }
.quick-dock-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--border) 65%);
  box-shadow: var(--shadow-sm);
}
.quick-dock-btn.active {
  background: var(--c-primary-bg);
  border-color: color-mix(in srgb, var(--c-primary) 45%, var(--border) 55%);
}
.quick-dock-help {
  background: color-mix(in srgb, var(--bg-hover) 80%, var(--bg-card) 20%);
}

@keyframes softRiseIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-hero,
.quick-actions-grid,
.kpi-mini-grid,
.card,
.table-wrap {
  animation: softRiseIn .2s ease;
}

.btn,
.tab-btn,
.vt-btn,
.badge,
.card,
.stat-card,
.table-wrap,
.quick-action-btn,
.kpi-mini,
.quick-dock-btn {
  transition: all .18s ease;
}

/* ═══════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { filter: brightness(0.88); box-shadow: 0 3px 10px rgba(0,0,0,0.15); transform: translateY(-1px); }
.btn:active { transform: scale(.96); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.btn-primary {
  background: var(--c-primary); border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover { filter: brightness(1.18); box-shadow: 0 4px 14px rgba(99,102,241,0.45); transform: translateY(-1px); }
.btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.btn-success:hover { filter: brightness(1.18); box-shadow: 0 4px 14px rgba(34,197,94,0.45); transform: translateY(-1px); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.18); box-shadow: 0 4px 14px rgba(239,68,68,0.45); transform: translateY(-1px); }
.btn-outline { background: transparent; }
.btn-outline:hover { background: var(--bg-hover); transform: translateY(-1px); }
.btn-outline-secondary { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--bg-hover); border-color: var(--c-primary); color: var(--c-primary); filter: none; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.10); }
.btn-whatsapp:hover { filter: brightness(1.18); box-shadow: 0 4px 14px rgba(37,211,102,0.45); transform: translateY(-1px); }
.btn-sm {
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  height: 30px;
  line-height: 1;
}
.btn-sm svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.btn-whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.btn-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; filter: brightness(1.1); }
[data-theme="dark"] .btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
[data-theme="dark"] .btn-whatsapp:hover { filter: brightness(1.1); }
.btn-full { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; font-weight: 600; }

.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }

/* ── Action bar ── */
.action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, white 8%) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .page-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .live-chip {
    width: 100%;
    justify-content: center;
  }
  .quick-dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .quick-dock-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
}
.action-bar .search-box { flex: 1 1 320px; min-width: 180px; }
.action-bar .search-box input { height: 38px; min-width: 180px; }
.action-bar .btn { height: 38px; }
.action-bar select.form-select, .action-bar .form-select { height: 38px; }
.action-bar .vt-group { height: 38px; }
.action-bar .vt-btn { height: 100%; }
.action-bar .tabs { margin-bottom: 0; }

/* Patients action bar: keep controls on one line on desktop */
.patient-action-bar {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .patient-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .patient-action-bar > * {
    width: 100%;
    max-width: 100%;
  }
}
.patient-action-bar .patient-mode-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.patient-action-bar .search-box {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 460px;
}
.patient-action-bar .patient-mode-note {
  white-space: nowrap;
  padding: 0 6px;
}
.patient-action-bar .btn,
.patient-action-bar .vt-group,
.patient-action-bar .patient-mode-note {
  flex: 0 0 auto;
}

/* Services action bar alignment (same visual rhythm as Packages) */
.svc-action-bar .svc-cat-filter {
  width: 170px;
  min-width: 170px;
  flex: 0 0 170px;
}

/* Store action bars alignment (same visual rhythm as Services/Packages) */
.store-action-bar {
  flex-wrap: nowrap;
  align-items: center;
}
.store-action-bar .search-box {
  flex: 1 1 360px;
  min-width: 220px;
  max-width: 560px;
}
.store-action-bar .search-box input {
  height: 38px;
}
.store-action-bar .store-action-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.store-action-bar .btn {
  flex: 0 0 auto;
}

/* Shared "Select Items" window (multi-select with quantities) — above dialogs */
.ip-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--bg-modal-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}
.ip-box {
  width: min(760px, 100%);
  height: min(86vh, 680px);   /* fixed, so the window doesn't jump while searching */
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25));
  overflow: hidden;
}
.ip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
.ip-head h3 { margin: 0; font-size: 16px; }
.ip-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--border-light); }
.ip-tools input[type="text"] { flex: 1 1 240px; min-width: 0; }
.ip-only { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.ip-only input { width: 16px; height: 16px; }
.ip-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px; }
.ip-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 96px;
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}
.ip-row:hover { background: var(--bg-hover); }
.ip-row.is-on { background: color-mix(in srgb, var(--c-primary) 9%, transparent); }
.ip-row.is-blocked { opacity: .5; cursor: not-allowed; }
.ip-row > input[type="checkbox"] { width: 17px; height: 17px; pointer-events: none; }
.ip-name { min-width: 0; display: flex; flex-direction: column; }
.ip-name strong { font-size: 13.5px; overflow-wrap: anywhere; }
.ip-name small { font-size: 11.5px; color: var(--text-muted); }
.ip-stock { font-size: 12px; color: var(--c-success); white-space: nowrap; }
.ip-stock.is-zero { color: var(--c-danger); }
.ip-row .ip-qty { width: 96px; padding: 6px 8px; text-align: right; }
.ip-more { padding: 12px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.ip-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border-light); }
.ip-count { font-size: 13px; color: var(--text-muted); }
@media (max-width: 560px) {
  .ip-row { grid-template-columns: 22px minmax(0, 1fr) 80px; }
  .ip-row .ip-stock { grid-column: 2; grid-row: 2; }
  .ip-row .ip-qty { width: 80px; grid-column: 3; grid-row: 1 / span 2; }
}

/* Manual Consumption: optional link to the bill / patient */
.mc-bill-link { margin-bottom: 10px; }
.mc-bill-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-primary) 6%, transparent);
  font-size: 13px;
  min-width: 0;
}
.mc-bill-picked > span { min-width: 0; overflow-wrap: anywhere; }
.mc-bill-clear { background: none; border: 0; color: var(--c-danger); cursor: pointer; padding: 2px 4px; display: inline-flex; flex-shrink: 0; }
.mc-bill-drop {
  display: none;
  position: fixed;
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.mc-bill-drop-head { padding: 7px 10px; font-size: 11.5px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-light); }
.mc-bill-opt { padding: 7px 10px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--border-light); }
.mc-bill-opt:hover { background: var(--bg-hover); }

/* Manual Consumption: barcode scan box */
.mc-scan {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1.5px dashed var(--c-primary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-primary) 5%, transparent);
}
.mc-scan-icon { display: inline-flex; color: var(--c-primary); }
.mc-scan input { flex: 1 1 260px; min-width: 0; font-size: 14px; }
.mc-scan-msg { font-size: 12.5px; font-weight: 600; }
.mc-scan-msg.is-ok { color: var(--c-success); }
.mc-scan-msg.is-err { color: var(--c-danger); }
@keyframes mcRowFlash { from { background: color-mix(in srgb, var(--c-success) 22%, transparent); } to { background: transparent; } }
.mc-row-flash td { animation: mcRowFlash 1.2s ease-out; }

.mc-grid-table select,
.mc-grid-table input {
  width: 100%;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
}
.mc-grid-table .mc-qty,
.mc-grid-table .mc-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mc-grid-table .mc-total {
  font-variant-numeric: tabular-nums;
}
.mc-stock-low {
  color: var(--c-danger);
  font-weight: 700;
}

/* Billing action bar alignment */
.bill-action-bar {
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--c-primary) 6%) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .bill-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bill-action-bar > * {
    width: 100%;
    max-width: 100%;
  }
  .bill-filter-group {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
}
.bill-action-bar .search-box {
  flex: 1 1 360px;
  min-width: 240px;
  max-width: 560px;
}
.bill-action-bar .search-box input {
  height: 38px;
  border-radius: 10px;
}
.bill-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.bill-filter-group input[type="date"] {
  width: 150px;
  min-width: 150px;
  height: 38px;
  padding: 8px 10px;
}
/* Dropdowns and number filters in the same toolbars need the same treatment —
   without this the global `input, select { width: 100% }` stretches each one to
   the full toolbar width and the filter row wraps into a tall stack. */
.bill-filter-group select,
.bill-filter-group input[type="number"],
.bill-filter-group input[type="search"] {
  width: auto;
  min-width: 150px;
  max-width: 220px;
  height: 38px;
  padding: 8px 10px;
  flex: 0 0 auto;
}
.bill-filter-group .report-apply-btn,
.bill-filter-group .report-clear-btn {
  height: 38px;
  padding: 0 14px;
  flex-shrink: 0;
}
.bill-action-bar .bill-action-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.bill-action-bar .btn,
.bill-action-bar .vt-group {
  flex: 0 0 auto;
}
.bill-action-bar .bill-vt-wrap {
  display: flex;
  align-items: center;
}

.expense-notes-cell {
  max-width: 320px;
  white-space: normal;
}

.expense-amount {
  color: var(--c-danger);
  font-variant-numeric: tabular-nums;
}

/* Billing list visual refresh */
.billing-table-wrap {
  border-radius: 14px;
  overflow: hidden;
}
.billing-table thead th {
  background: linear-gradient(180deg, var(--bg-hover) 0%, color-mix(in srgb, var(--bg-hover) 80%, var(--bg-card) 20%) 100%);
  font-weight: 700;
}
.billing-table tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}
.billing-row {
  transition: background .18s ease, transform .12s ease;
}
.billing-table tbody .billing-row:hover {
  background: color-mix(in srgb, var(--c-primary-bg) 42%, var(--bg-card) 58%);
}
.billing-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.billing-patient-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 140px;
}
.billing-patient-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 70%, #7c3aed 30%) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.billing-patient-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
  flex: 0 1 auto;
  margin-bottom: 0;
  min-width: 0;
}
.billing-patient {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.billing-patient-doctor {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-items-cell {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-total {
  color: var(--c-success);
  font-size: 13px;
}
.billing-splits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.billing-split-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  padding: 3px 8px;
  background: var(--bg-hover);
  color: var(--text);
}
/* Pending bill: what is still owed (and paid so far) under the status badge */
.billing-due {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-danger);
  white-space: nowrap;
}
.billing-due span {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
}
.billing-due-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}
/* New Bill / Add Services: "Patient pays later" (bill saved unpaid or part-paid) */
.bill-pay-later {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  cursor: pointer;
}
.bill-pay-later input { flex-shrink: 0; margin: 1px 0 0; padding: 0; }
.bill-pay-later strong { color: var(--text); }
.bill-pay-later:has(input:checked) {
  border-style: solid;
  border-color: var(--c-warning, #b45309);
  background: color-mix(in srgb, var(--c-warning, #b45309) 10%, transparent);
}
.bill-split-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Collect Payment dialog */
.modal-collect-pay { max-width: 620px; }
.collect-pay-head { margin-bottom: 12px; }
.collect-pay-patient { font-size: 15px; font-weight: 700; color: var(--text); }
.collect-pay-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.collect-pay-kpi {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0;
}
.collect-pay-kpi span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.collect-pay-kpi strong { font-size: 15px; white-space: nowrap; }
.collect-pay-kpi.is-due { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 10%, transparent); }
.collect-pay-kpi.is-due strong { color: var(--c-danger); }
.collect-pay-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.collect-pay-history { width: 100%; margin-bottom: 14px; }
.collect-pay-history th, .collect-pay-history td { padding: 6px 8px; }
.collect-pay-preview {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-muted);
}
.collect-pay-preview.is-ok { background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); }
.collect-pay-preview.is-partial { background: color-mix(in srgb, var(--c-warning, #b45309) 14%, transparent); color: var(--c-warning, #b45309); }
.collect-pay-preview.is-error { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); }
@media (max-width: 520px) {
  .collect-pay-kpis { grid-template-columns: 1fr; }
  /* Cancel / Collect & Print / Collect don't fit one row on a phone */
  .modal-collect-pay .modal-footer { flex-wrap: wrap; padding: 12px 16px; }
  .modal-collect-pay .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}

/* Reports → Outstanding Dues: bills owed for over 90 days */
.dues-age-90 { color: var(--c-danger); font-weight: 700; }

.billing-table thead th:nth-child(10),
.billing-table tbody td:nth-child(10) {
  white-space: nowrap;
  min-width: 150px;
}
.billing-table thead th:nth-child(11),
.billing-table tbody td:nth-child(11) {
  width: 1%;
  white-space: nowrap;
}
.billing-actions {
  display: inline-grid;
  gap: 4px;
  min-width: 0;
}
.billing-actions-top,
.billing-actions-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.billing-actions-top:empty,
.billing-actions-bottom:empty {
  display: none;
}
.billing-actions .btn.btn-sm {
  padding: 4px 8px;
  white-space: nowrap;
}
tbody td.td-actions {
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

tbody td.payroll-emp-actions-cell {
  width: 1%;
}

.payroll-emp-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.payroll-emp-actions .btn.btn-sm {
  height: 30px;
  justify-content: center;
}

.payroll-emp-actions .btn-icon {
  min-width: 30px;
  padding-left: 0;
  padding-right: 0;
}

/* ── Payroll filter panel ────────────────────────────────────── */
.pf-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.pf-bar-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 130px;
}
.pf-field.pf-wide {
  flex: 0 0 180px;
}
.pf-field label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pf-field input,
.pf-field select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-main, #111827);
  font-size: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.pf-field input::placeholder,
.pf-field select::placeholder {
  color: var(--text-muted, #6b7280);
}
.pf-field input:focus,
.pf-field select:focus {
  border-color: var(--c-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.pf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.pf-actions button {
  flex-shrink: 0;
}
.pf-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-primary, #6366f1);
  text-align: right;
  min-width: 40px;
}
[data-theme="dark"] .pf-bar {
  background: rgba(255,255,255,.04);
  border-color: var(--border-color);
}
[data-theme="dark"] .pf-field input,
[data-theme="dark"] .pf-field select {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* ── Attendance Filter Bar ── */
.att-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.att-filter-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 170px;
}
.att-filter-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted, #9ca3af);
  pointer-events: none;
}
.att-filter-input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-hover, #f8fafc);
  color: var(--text-main, #111827);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.att-filter-input:focus {
  border-color: var(--c-primary, #6366f1);
  background: var(--bg-card, #fff);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.att-filter-input::placeholder { color: var(--text-muted, #9ca3af); }
.att-filter-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color, #e5e7eb);
  flex-shrink: 0;
}
.att-filter-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.att-chip {
  height: 32px;
  padding: 0 13px;
  border: 1.5px solid var(--border-color, #e5e7eb);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
}
.att-chip:hover {
  border-color: var(--c-primary, #6366f1);
  color: var(--c-primary, #6366f1);
  background: rgba(99,102,241,.06);
}
.att-chip.active {
  border-color: var(--c-primary, #6366f1);
  background: var(--c-primary, #6366f1);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(99,102,241,.3);
}
.att-filter-select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-hover, #f8fafc);
  color: var(--text-main, #111827);
  font-size: 12px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: auto;
  flex-shrink: 0;
  width: auto;
  transition: border-color .15s, box-shadow .15s;
}
.att-filter-select:focus {
  border-color: var(--c-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.att-filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.att-filter-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary, #6366f1);
  min-width: 44px;
  text-align: right;
  white-space: nowrap;
}
.att-filter-clear {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.att-filter-clear:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239,68,68,.06);
}
[data-theme="dark"] .att-filter-bar {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: none;
}
[data-theme="dark"] .att-filter-input,
[data-theme="dark"] .att-filter-select {
  background: rgba(255,255,255,.06);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* ===== Collapsible permission group cards ===== */
.perm-group-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.perm-group-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: var(--bg-hover, #f9fafb);
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.perm-group-summary::-webkit-details-marker { display: none; }
.perm-group-summary::marker { display: none; }
.perm-group-card[open] > .perm-group-summary {
  border-bottom-color: var(--border-color, #e5e7eb);
  background: var(--bg-hover, #f3f4f6);
}
.perm-group-summary:hover { background: var(--bg-hover, #f3f4f6); }
.perm-group-chevron {
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  transition: transform .2s;
  flex-shrink: 0;
}
.perm-group-card[open] .perm-group-chevron { transform: rotate(90deg); }
.perm-group-label {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-primary, #111827);
  flex: 1;
}
.perm-group-meta {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  background: var(--bg-input, #f3f4f6);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Report filters: compact spacing and widths */
.report-filter-bar {
  gap: 8px;
  margin-bottom: 10px;
}
.report-filter-bar .search-box {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: none;
}
.report-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}
.report-filter-group input[type="date"],
.report-filter-group select {
  width: 220px;
  min-width: 180px;
  max-width: 320px;
  height: 36px;
}
.report-filter-group .btn {
  height: 36px;
  white-space: nowrap;
}
.report-filter-group .report-apply-btn {
  background: var(--c-primary);
  color: #fff;
  border: 1px solid var(--c-primary);
}
.report-filter-group .report-apply-btn:hover {
  filter: brightness(.95);
}
.report-filter-group .report-apply-btn:active {
  transform: translateY(1px);
}
.report-filter-group .report-clear-btn,
.report-clear-btn {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.report-filter-group .report-clear-btn:hover,
.report-clear-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.report-filter-group-users {
  width: 100%;
  flex-wrap: wrap !important;
}
.report-filter-group-users select {
  width: 140px;
  min-width: 120px;
}
.report-filter-group-users input[type="number"],
.report-filter-group-users input[type="date"] {
  width: 130px;
  min-width: 100px;
}

/* --- Report toolbar filters -------------------------------------------------
   The global `input, select, textarea { width: 100% }` rule stretches every
   filter control to the full width of its toolbar. In a wrapping flex toolbar
   that forces each control onto its own line, so the card header grows into a
   tall stacked block and leaves a large empty gap above the content (this is
   what broke the Discount, Refund and Cancelled Bills reports). Inside report
   toolbars, size these controls to their content instead.
   Scoped to #reportViewPanel so form fields elsewhere keep their full width. */
#reportViewPanel input[type="date"],
#reportViewPanel input[type="number"] {
  width: auto;
  min-width: 138px;
  flex: 0 0 auto;
}
#reportViewPanel .flex-between select {
  width: auto;
  min-width: 140px;
  flex: 0 0 auto;
}
/* Report headers are a title on the left and filters on the right; let the
   filter cluster keep its own line on narrow screens rather than squashing. */
#reportViewPanel .flex-between {
  gap: 10px;
  flex-wrap: wrap;
}
/* An empty result inside a report already sits under a summary row, so it does
   not need the full standalone empty-state padding. */
#reportViewPanel .empty-state {
  padding: 26px 24px;
}

/* Stock-take effective-date sits inline next to its label — keep it compact. */
#stkDate {
  width: auto;
  min-width: 150px;
}

.ucr-breakdown summary {
  cursor: pointer;
  color: var(--c-primary);
  font-weight: 600;
}
.ucr-breakdown-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
}
.ucr-breakdown-item {
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 6px 8px;
}

/* ── Appointment filter bar ── */
.apt-filter-bar {
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.apt-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .apt-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .apt-filter-toolbar > * {
    width: 100%;
    max-width: 100%;
  }
  .apt-filter-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.apt-filter-fields {
  flex: 1 1 760px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) repeat(2, minmax(130px, 150px));
  gap: 8px;
  align-items: center;
}

.apt-filter-field {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
}

/* Expenses filter bar responsive fix (always on) */
.expense-action-bar {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.expense-action-bar > * {
  width: 100%;
  max-width: 100%;
}
.expense-filter-group {
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.apt-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.apt-filter-actions .btn {
  height: 38px;
}

/* ── Setup page layout ── */
.setup-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.setup-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text);
}
.setup-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.setup-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 14px;
  box-shadow: var(--shadow-xs);
}
.setup-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.setup-section-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.setup-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
}
.setup-section-icon svg {
  width: 12px;
  height: 12px;
}
.setup-section-clinic {
  border-left: 4px solid var(--c-info);
}
.setup-section-clinic .setup-section-title {
  color: var(--c-info);
}
.setup-section-clinic .setup-section-icon {
  color: var(--c-info);
  border-color: color-mix(in srgb, var(--c-info) 35%, var(--border));
  background: color-mix(in srgb, var(--c-info) 10%, var(--bg));
}
.setup-section-doctor {
  border-left: 4px solid var(--c-primary);
}
.setup-section-doctor .setup-section-title {
  color: var(--c-primary);
}
.setup-section-doctor .setup-section-icon {
  color: var(--c-primary);
  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--c-primary) 10%, var(--bg));
}
.setup-section-store {
  border-left: 4px solid var(--c-success);
}
.setup-section-store .setup-section-title {
  color: var(--c-success);
}
.setup-section-store .setup-section-icon {
  color: var(--c-success);
  border-color: color-mix(in srgb, var(--c-success) 35%, var(--border));
  background: color-mix(in srgb, var(--c-success) 10%, var(--bg));
}
.setup-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}
.setup-grid-2 {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

@media (max-width: 980px) {
  .setup-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1300px) {
  .apt-filter-fields {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}

@media (max-width: 980px) {
  .apt-filter-fields {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .apt-filter-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .apt-filter-fields {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 480px) {
  .apt-filter-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: var(--transition);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
input[type="checkbox"], .theme-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--c-primary);
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--bg-input);
}
input[type="checkbox"]:disabled, .theme-checkbox:disabled {
  cursor: not-allowed;
  opacity: .65;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
select { cursor: pointer; }

.input-icon-wrap { position: relative; }
.input-icon-wrap input { padding-left: 38px; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.search-box { position: relative; }
.search-box input { padding-left: 36px; background: var(--bg-hover); border-color: transparent; }
.search-box input:focus { border-color: var(--c-primary); background: var(--bg-input); }
.search-box::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  background: var(--text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Patient search dropdown */
.psd-wrap { position: relative; }
.psd-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  max-height: 180px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.psd-list div {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.psd-list div:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.psd-list .psd-empty, .psd-list .psd-empty:hover { background: transparent; color: inherit; cursor: default; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; }
.psd-empty-text { font-size: 13px; color: var(--text-muted, #888); }

/* ── Alerts ── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}
.alert-error { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid rgba(239,68,68,.2); }
.alert-success { background: var(--c-success-bg); color: var(--c-success); }
.alert-info { background: var(--c-info-bg); color: var(--c-info); }
/* Used for time-limited warnings such as a subscription nearing its end. */
.alert-warning { background: var(--c-warning-bg, #fef3c7); color: var(--c-warning, #92400e); border: 1px solid rgba(217,119,6,.25); }
[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.14); color: #f0c069; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.badge-scheduled { background: var(--c-info-bg); color: var(--c-info); }
.badge-confirmed { background: rgba(6,182,212,.1); color: #0891b2; }
.badge-arrived { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-completed { background: var(--c-success-bg); color: var(--c-success); }
.badge-cancelled { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-no-show { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-admin { background: var(--c-primary-bg); color: var(--c-primary); }
.badge-doctor { background: var(--c-success-bg); color: var(--c-success); }
.badge-receptionist { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-paid { background: var(--c-success-bg); color: var(--c-success); }
.badge-service-consultation { background: rgba(14, 165, 233, .14); color: #0369a1; }
.badge-service-diagnostic { background: rgba(79, 70, 229, .12); color: #4338ca; }
.badge-service-procedure { background: rgba(249, 115, 22, .14); color: #c2410c; }
.badge-service-therapy { background: rgba(34, 197, 94, .14); color: #15803d; }
.badge-service-other { background: rgba(100, 116, 139, .14); color: #475569; }

/* Status badge large (for emphasis) */
.badge-scheduled, .badge-confirmed, .badge-arrived, .badge-completed, .badge-cancelled, .badge-no-show { text-transform: uppercase; letter-spacing: .5px; }
.badge-unpaid { background: var(--c-danger-bg); color: var(--c-danger); }
.badge-discounted { background: rgba(245,158,11,.12); color: #b45309; }
.status-badges-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Cards ── */
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 96%, white 4%) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-info) 70%, var(--c-primary) 30%));
  opacity: .6;
}
.card:hover {
  box-shadow: var(--shadow-md), var(--surface-glow);
  transform: translateY(-1px);
}
.card-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ── KPI / Stats Grid ── */
/* ── Dashboard stat grids ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.stats-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.stat-card::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 90px; height: 90px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 7%, transparent);
  pointer-events: none;
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c-primary) 20%, var(--border) 80%);
}
.stat-card-sm {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  cursor: default;
}
.stat-card-sm:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.stat-card-alert { border-color: color-mix(in srgb, var(--c-danger) 40%, var(--border) 60%) !important; background: color-mix(in srgb, var(--c-danger-bg) 30%, var(--bg-card) 70%) !important; }
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
}
.stat-icon-sm {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon.blue, .stat-icon-sm.blue { background: var(--c-info-bg); color: var(--c-info); }
.stat-icon.green, .stat-icon-sm.green { background: var(--c-success-bg); color: var(--c-success); }
.stat-icon.amber, .stat-icon-sm.amber { background: var(--c-warning-bg); color: var(--c-warning); }
.stat-icon.purple, .stat-icon-sm.purple { background: var(--c-primary-bg); color: var(--c-primary); }
.stat-icon.red, .stat-icon-sm.red { background: var(--c-danger-bg); color: var(--c-danger); }
.stat-content { flex: 1; min-width: 0; }
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.5px; margin-top: 1px; line-height: 1.15; }
.stat-value-sm { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px; line-height: 1.2; }
.stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Tables ── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, white 6%) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.table-wrap:hover {
  box-shadow: var(--shadow-md);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead {
  position: sticky; top: 0;
  z-index: 2;
}
thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--c-primary); }
thead th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: .4; }
thead th.sorted .sort-arrow { opacity: 1; color: var(--c-primary); }
tbody tr { transition: var(--transition); }
tbody tr:hover { background: var(--bg-hover); }
tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
.apt-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.po-actions {
  justify-content: flex-start;
  gap: 6px;
}
.po-actions .btn {
  min-width: 72px;
  justify-content: center;
}
.btn-outline-primary {
  background: var(--c-primary-bg);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn-outline-primary:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 12.5px; color: var(--text-muted);
}
.pagination-btns { display: flex; gap: 4px; }
.pagination-btns button {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
}
.pagination-btns button:hover:not(:disabled) { background: var(--bg-hover); }
.pagination-btns button:disabled { opacity: .4; cursor: not-allowed; }
.pagination-btns button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ── Modals ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-modal-overlay);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlayIn .2s ease;
  backdrop-filter: blur(4px);
}
.modal-overlay-stack {
  z-index: 1015;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalIn .3s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid var(--border);
}
.modal-compact {
  max-width: 420px;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
}
.modal-header h3 { font-size: 17px; font-weight: 700; color: var(--text); }
.modal-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  font-size: 18px;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 1080px; }

/* ── Dashboard low-stock banner ───────────────────────── */
.lowstock-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .04));
  border: 1px solid rgba(245, 158, 11, .35);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  cursor: pointer;
  flex-wrap: wrap;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lowstock-banner:hover {
  border-color: rgba(245, 158, 11, .6);
  box-shadow: 0 4px 14px rgba(245, 158, 11, .18);
}
.lowstock-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .4);
}
.lowstock-head {
  display: flex; align-items: baseline; gap: 5px;
  flex-shrink: 0;
}
.lowstock-count {
  font-size: 18px; font-weight: 800;
  color: #b45309;
  line-height: 1;
}
.lowstock-label {
  font-size: 12px; font-weight: 600;
  color: #92400e;
  text-transform: uppercase; letter-spacing: .3px;
}
.lowstock-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; min-width: 0;
}
.lowstock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 999px;
  padding: 3px 6px 3px 11px;
  font-size: 12px; font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.lowstock-chip-qty {
  display: inline-flex; align-items: center; gap: 1px;
  background: rgba(245, 158, 11, .15);
  color: #b45309;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}
.lowstock-chip-sep { opacity: .5; font-weight: 500; margin: 0 1px; }
.lowstock-chip.is-critical {
  border-color: rgba(220, 38, 38, .4);
}
.lowstock-chip.is-critical .lowstock-chip-qty {
  background: rgba(220, 38, 38, .15);
  color: #dc2626;
}
.lowstock-more {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600;
  color: #b45309;
  padding: 3px 4px;
}
.lowstock-view {
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: #f59e0b !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
}
.lowstock-view:hover { background: #d97706 !important; }
@media (max-width: 640px) {
  .lowstock-chips { order: 3; flex-basis: 100%; }
}

/* Low-stock table row — theme aware */
.lowstock-row > td { background: rgba(220, 38, 38, .06); }
.lowstock-row:hover > td { background: rgba(220, 38, 38, .10); }

/* Dashboard — Top Supporting Staff */
.top-staff-list { display: flex; flex-direction: column; gap: 8px; }
.top-staff-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-hover);
  border: 1px solid transparent;
  transition: border-color .15s ease;
}
.top-staff-row:hover { border-color: var(--border); }
.top-staff-medal {
  flex-shrink: 0; width: 26px; text-align: center;
  font-size: 18px;
}
.top-staff-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--border); color: var(--text-muted);
  font-size: 12px; font-weight: 700;
}
.top-staff-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.top-staff-info { flex: 1; min-width: 0; }
.top-staff-name {
  font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-staff-role {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .3px; margin-top: 1px;
}
.top-staff-metric { flex-shrink: 0; text-align: right; }
.top-staff-count { font-size: 20px; font-weight: 800; color: var(--c-primary, #6366f1); line-height: 1; }
.top-staff-count-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

/* Supporting Staff Activity — summary cards */
.ssr-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ssr-summary-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ssr-summary-card:hover {
  border-color: var(--c-primary, #6366f1);
  box-shadow: 0 3px 12px rgba(99,102,241,.12);
}
.ssr-summary-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.ssr-summary-body { min-width: 0; flex: 1; }
.ssr-summary-name {
  font-weight: 700; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssr-summary-role {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .3px;
  margin-top: 1px;
}
.ssr-summary-stats {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px; font-size: 12px; color: var(--text-muted);
}
.ssr-summary-stat strong { color: var(--text); font-size: 13px; }
.ssr-summary-dot { opacity: .5; }
.ssr-summary-amount { color: #16a34a; font-weight: 600; }

/* Supporting staff multi-select chips */
.support-staff-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
}
.support-staff-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all .12s ease;
}
.support-staff-chip:hover { border-color: var(--c-primary, #6366f1); }
.support-staff-chip.selected {
  background: var(--c-primary, #6366f1);
  border-color: var(--c-primary, #6366f1);
  color: #fff;
}
.support-staff-chip .support-staff-role {
  font-size: 10px; opacity: .7;
  padding-left: 6px; border-left: 1px solid currentColor;
}

/* Table total/summary row — theme aware */
.table-total-row > td {
  font-weight: 700;
  background: var(--bg-hover);
  border-top: 2px solid var(--border);
  color: var(--text);
}
.modal-punch-calendar {
  width: min(1360px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  max-height: 94vh;
}
.modal-punch-calendar .modal-body {
  overflow-x: hidden;
  padding: 14px 16px;
}
.modal-patient-profile {
  width: min(1220px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 94vh;
}
.modal-patient-profile .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-patient-profile #phRxs table {
  table-layout: fixed;
}
.modal-patient-profile #phRxs th:nth-child(1),
.modal-patient-profile #phRxs td:nth-child(1) { width: 130px; }
.modal-patient-profile #phRxs th:nth-child(2),
.modal-patient-profile #phRxs td:nth-child(2) { width: 120px; }
.modal-patient-profile #phRxs th:nth-child(7),
.modal-patient-profile #phRxs td:nth-child(7) { width: 150px; }
.modal-patient-profile #phRxs .td-actions {
  text-align: right;
  white-space: nowrap;
}
.modal-patient-profile #phRxs .td-actions .btn {
  min-width: 64px;
  justify-content: center;
}
.modal-emr {
  max-width: 1180px;
  width: 97vw;
  max-height: 94vh;
}
.modal-emr .modal-body {
  padding: 14px 16px;
  background: var(--bg);
}
.modal-po {
  width: min(1160px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 92vh;
}
.modal-po-view {
  width: min(1080px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 92vh;
}
.modal-po .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.modal-po-view .modal-body {
  overflow-y: auto;
  overflow-x: auto;
}

.po-meta-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap: 10px;
}
.po-meta-grid .form-group {
  margin-bottom: 4px;
}
.po-quick-add-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-quick-product-panel {
  display: none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-hover) 100%);
  border-radius: 12px;
  padding: 14px;
}
.po-quick-product-panel.open {
  display: block;
}
.po-quick-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}
.po-quick-product-actions {
  display: flex;
  align-items: flex-end;
}
.po-quick-product-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ── Bill modal – wide two-column layout ── */
.modal-bill {
  max-width: 1020px;
  width: 96vw;
  max-height: 96vh;
}
.modal-bill .modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bill-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Patient action buttons in table */
.patient-actions-cell { min-width: 260px; }
.patient-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.patient-row-emr-btn {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 700;
}

/* Patient EMR modal */
.patient-emr {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.patient-emr-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}
.patient-emr-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  flex: 1;
}
.patient-emr-filters .form-group {
  margin-bottom: 0;
}
.patient-emr-filters .form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.patient-emr-filters input,
.patient-emr-filters select {
  background: var(--bg-input);
  border-color: var(--border);
  min-height: 38px;
}
.patient-emr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.patient-emr-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  min-height: 0;
}
.patient-emr-left,
.patient-emr-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.patient-emr-right { min-width: 0; }
.patient-emr-patient-card,
.patient-emr-summary-card {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}
.patient-emr-summary-card h5,
.patient-emr-patient-card h4,
.patient-emr-timeline-header h4 {
  margin: 0 0 10px;
}
.patient-emr-patient-card h4 {
  font-size: 18px;
  font-weight: 700;
}
.patient-emr-patient-card .text-sm,
.patient-emr-summary-card .text-sm {
  font-size: 13px;
}
.patient-emr-counts {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.patient-emr-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.patient-emr-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.patient-emr-entry {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.patient-emr-entry > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 14px;
  background: var(--bg-elev-1, var(--bg-input));
}
.patient-emr-entry > summary::-webkit-details-marker { display: none; }
.patient-emr-entry[open] > summary {
  border-bottom: 1px solid var(--border-light);
}
.patient-emr-entry-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.patient-emr-entry-main { min-width: 0; }
.patient-emr-entry-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.patient-emr-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.patient-emr-entry-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.patient-emr-entry-body section h5 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.patient-emr-pill-wrap,
.patient-emr-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.patient-emr-pill,
.patient-emr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  background: var(--bg-elev-1, var(--bg-input));
}
.patient-emr-pill-soft { background: var(--c-primary-bg, var(--bg-input)); }
.patient-emr-chip small {
  color: var(--text-muted);
}
.patient-emr-note-list {
  display: grid;
  gap: 8px;
}
.patient-emr-note-item {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-elev-1, var(--bg-input));
}
.patient-emr-note-item p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.patient-emr-rx-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 11px;
  margin-bottom: 8px;
  background: var(--bg-elev-1, var(--bg-input));
}
.patient-emr-rx-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.patient-emr-rx-fields {
  display: grid;
  gap: 10px;
}
.patient-emr-rx-field {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-card);
}
.patient-emr-rx-field strong {
  display: block;
  margin-bottom: 6px;
}
.patient-emr-rx-field div {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: normal;
}
.patient-emr-med-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.patient-emr-med-item {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px;
  background: var(--bg-card);
}
.patient-emr-med-item strong,
.patient-emr-med-item span,
.patient-emr-med-item small {
  display: block;
}
.patient-emr-med-item span,
.patient-emr-med-item small {
  color: var(--text-muted);
  font-size: 12px;
}
.patient-emr-inline-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.patient-emr-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.patient-emr-attachment {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elev-1, var(--bg-input));
}
.patient-emr-attachment:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

@media (max-width: 1024px) {
  .patient-emr-layout {
    grid-template-columns: 1fr;
  }
  .patient-emr-filters {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 640px) {
  .patient-emr-filters {
    grid-template-columns: 1fr;
  }
  .patient-emr-entry > summary {
    grid-template-columns: 1fr;
  }
}

/* LEFT panel */
.bill-left {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  gap: 12px;
  border-right: 1px solid var(--border-light);
  overflow: hidden;
  min-height: 0;
}
.bill-patient-row {
  flex-shrink: 0;
}
.bill-patient-fixed {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bill-patient-name-badge {
  background: var(--c-primary-light, #ede9fe);
  color: var(--c-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 20px;
}
.bill-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bill-tab {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; gap: 5px;
}
.bill-tab:hover { background: var(--bg-card); color: var(--text); }
.bill-tab.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }
.bill-tab-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bill-pkg-session-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.bill-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.bill-search-row svg { color: var(--text-muted); flex-shrink: 0; }
.bill-search-row input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.bill-search-row input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light, #ede9fe); }
/* grids fill the remaining height */
.bill-svc-grid {
  display: grid;
  flex: 1;
  min-height: 0;
}
.bill-pkg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 28px;
  scrollbar-gutter: stable both-edges;
  scroll-padding-bottom: 28px;
  overscroll-behavior: contain;
}
/* RIGHT panel */
.bill-right {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  gap: 14px;
  overflow: hidden;
  min-height: 0;
}
.bill-right-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .12em;
  flex-shrink: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.bill-right-title::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(99,102,241,.35);
}
.bill-items-list-tall {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
.bill-payment-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.bill-payment-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
  letter-spacing: .2px;
}
.bill-payment-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 40px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.bill-payment-row select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-light, #ede9fe);
}
.bill-doctor-row {
  flex-shrink: 0;
  margin-top: 10px;
}
.bill-doctor-row label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.bill-doctor-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  background: var(--bg-card);
  color: var(--text);
  height: 42px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.bill-doctor-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-light, #ede9fe);
}

.bill-amend-note {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--c-info-bg);
  border: 1px solid color-mix(in srgb, var(--c-info) 30%, transparent);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bill-amend-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-info);
  flex-shrink: 0;
}
.bill-amend-note-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.bill-amend-note-text {
  line-height: 1.35;
}

/* ── Tabs ── */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-hover);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  width: fit-content;
}
.tab-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; gap: 6px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  background: var(--bg-card);
  color: var(--c-primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.empty-state-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bg-hover);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state p { font-size: 13px; color: var(--text-muted); max-width: 300px; }

/* ═══════════════════════════════════════════════════════════
   SKELETON LOADERS
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-shine) 50%, var(--bg-skeleton) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-xs);
}
.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 6px; }
.skeleton-text.w60 { width: 60%; }
.skeleton-text.w80 { width: 80%; }
.skeleton-text.w40 { width: 40%; }
.skeleton-heading { height: 24px; width: 50%; margin-bottom: 16px; border-radius: 6px; }
.skeleton-card { height: 100px; border-radius: var(--radius); }
.skeleton-stat { height: 88px; border-radius: var(--radius); }
.skeleton-table-row { height: 44px; margin-bottom: 4px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════ */
.cal-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.cal-header h3 { font-size: 16px; font-weight: 700; min-width: 180px; }
.cal-header .btn { padding: 6px 10px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.cal-day-name {
  padding: 12px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}
.cal-cell {
  min-height: 130px;
  padding: 8px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell.other-month { opacity: .35; }
.cal-cell.today { background: var(--c-primary-bg); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--c-primary); border-radius: 2px; }
.cal-cell .day-num { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cal-cell.today .day-num { color: var(--c-primary); font-weight: 700; }
.cal-pill {
  display: block;
  font-size: 11px;
  padding: 3px 6px;
  margin-bottom: 3px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.cal-pill.scheduled { background: var(--c-info-bg); color: var(--c-info); }
.cal-pill.confirmed { background: rgba(6,182,212,.1); color: #0891b2; }
.cal-pill.arrived { background: rgba(13,148,136,.14); color: #0d9488; }
.cal-pill.completed { background: var(--c-success-bg); color: var(--c-success); }
.cal-pill.cancelled { background: var(--c-danger-bg); color: var(--c-danger); }
/* was the same amber as .arrived, so the two were indistinguishable here too */
.cal-pill.no-show { background: rgba(168,85,247,.12); color: #a855f7; }

/* Day detail sidebar */
.cal-day-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}
.cal-day-detail h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cal-day-appt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-xs);
  margin-bottom: 6px;
  font-size: 13px;
  transition: var(--transition);
}
.cal-day-appt:hover { background: var(--c-primary-bg); }
.cal-day-appt .time { font-weight: 600; color: var(--c-primary); min-width: 50px; }
.cal-day-appt .patient { flex: 1; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   DETAIL VIEW
   ═══════════════════════════════════════════════════════════ */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.detail-item { }
.detail-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.detail-value { font-size: 14px; font-weight: 500; color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1);
  max-width: 380px;
}
.toast.success { border-left: 4px solid var(--c-success); }
.toast.error { border-left: 4px solid var(--c-danger); }
.toast.info { border-left: 4px solid var(--c-info); }
.toast-exit { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 12px; }
.fw-600 { font-weight: 600; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Standard formatting for identifiers (MR#, Bill#, Visit ID, etc.) */
.code-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
  white-space: nowrap;
}
.code-id-primary { color: var(--c-primary); }
.code-id-muted { color: var(--text-secondary); }

/* Compliance module */
.compliance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.compliance-kpi {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--bg-card);
  padding: 12px;
}
.compliance-kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.compliance-kpi-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.compliance-kpi-blue { border-left-color: #2563eb; }
.compliance-kpi-green { border-left-color: #16a34a; }
.compliance-kpi-amber { border-left-color: #d97706; }
.compliance-kpi-red { border-left-color: #dc2626; }

.compliance-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}
.compliance-filter-grid .form-group {
  margin-bottom: 0;
}
.compliance-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.compliance-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.compliance-doc-title {
  font-weight: 700;
  color: var(--text);
}
.compliance-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.compliance-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.compliance-report-btn {
  height: auto;
  min-height: 62px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.compliance-report-btn small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 1200px) {
  .compliance-filter-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}
@media (max-width: 780px) {
  .compliance-filter-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}
@media (max-width: 560px) {
  .compliance-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   DOCTOR SCHEDULER
   ═══════════════════════════════════════════════════════════ */
.sched-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--c-primary);
}
.sched-toolbar-side { display: flex; align-items: center; gap: 8px; }
.sched-toolbar-center { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.sched-nav-group { display: flex; align-items: center; gap: 6px; }
.sched-nav-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-hover);
  color: var(--text); cursor: pointer; transition: var(--transition); font-size: 13px;
}
.sched-nav-arrow:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.sched-today-pill {
  height: 32px; padding: 0 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.sched-today-pill:hover, .sched-today-pill.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.sched-date-big { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.sched-hours-badge {
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-hover); border-radius: 20px;
  padding: 1px 10px; display: inline-block;
}
.sched-jump-date {
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 0 10px; height: 32px; font-size: 13px; background: var(--bg-input); color: var(--text);
}
.sched-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 12px; color: var(--text-secondary);
}
.sched-legend-item { display: flex; align-items: center; gap: 5px; }
.sched-legend-dot {
  width: 10px; height: 10px; border-radius: 3px;
}
.sched-legend-dot.booked    { background: #d97706; }
.sched-legend-dot.confirmed { background: #2563eb; }
.sched-legend-dot.arrived   { background: #0d9488; }
.sched-legend-dot.completed { background: var(--c-success); }
.sched-legend-dot.cancelled { background: var(--c-danger); }
.sched-legend-dot.no-show   { background: #a855f7; }

.sched-container {
  overflow-x: auto; overflow-y: auto;
  max-height: calc(100vh - 230px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.sched-grid {
  display: grid;
  grid-template-columns: 80px repeat(var(--col-count), minmax(180px, 1fr));
  grid-template-rows: auto 1fr;
  min-width: fit-content;
}

/* Header cells */
.sched-time-header {
  position: sticky; top: 0; left: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 4px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted);
}
.sched-col-header {
  position: sticky; top: 0; z-index: 3;
  padding: 10px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border-light);
  text-align: center;
}
.sched-col-header:last-of-type { border-right: none; }
.sched-doc-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-doc-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sched-doc-tooltip { position: relative; cursor: default; }
.sched-doc-tooltip::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tooltip, #1e293b);
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre;
  padding: 7px 11px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  min-width: 180px;
}
.sched-doc-tooltip:hover::after { opacity: 1; }

/* Time column */
.sched-time-col {
  position: sticky; left: 0; z-index: 2;
  width: 80px; min-width: 80px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  position: relative;
}
.sched-time-label {
  position: absolute; left: 0; right: 0;
  padding: 0;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
}
.sched-time-label.sched-hour {
  border-top: 2px solid var(--border);
}

/* 2x2 quarter-hour grid inside each hour label */
.sched-hour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%; height: 100%;
}
.sched-q {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  border-right: 1px dashed var(--border-light);
  border-bottom: 1px dashed var(--border-light);
  line-height: 1;
}
.sched-q:nth-child(2), .sched-q:nth-child(4) { border-right: none; }
.sched-q:nth-child(3), .sched-q:nth-child(4) { border-bottom: none; }
.sched-q:nth-child(1) { font-weight: 700; color: var(--text-secondary); font-size: 11px; }

/* Body / columns */
.sched-body {
  display: grid;
  grid-template-columns: repeat(var(--col-count), minmax(180px, 1fr));
  position: relative;
  grid-column: 2 / -1;
}
.sched-gridline {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--border-light);
  z-index: 0;
  pointer-events: none;
}
.sched-gridline.sched-gridline-hour {
  border-top: 2px solid var(--border);
}
.sched-gridline.sched-gridline-half {
  border-top: 1px solid var(--border-light);
}
.sched-now-line {
  position: absolute; left: 0; right: 0;
  border-top: 2px solid var(--c-danger);
  z-index: 3;
  pointer-events: none;
}
.sched-now-line span {
  position: absolute; top: -9px; left: -2px;
  background: var(--c-danger); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  line-height: 1.3;
}

/* Slot row backgrounds */
.sched-slot-row {
  position: absolute; left: 0; right: 0;
  box-sizing: border-box;
  border-bottom: 1px dashed var(--border-light);
  transition: background .1s;
  pointer-events: none;
}
.sched-slot-row.even { background: transparent; }
.sched-slot-row.odd  { background: rgba(0,0,0,.018); }
[data-theme="dark"] .sched-slot-row.odd { background: rgba(255,255,255,.02); }

.sched-col-body {
  position: relative;
  border-right: 1px solid var(--border-light);
  min-width: 180px;
  cursor: pointer;
}
.sched-col-body:hover .sched-slot-row {
  border-bottom-color: var(--border);
}
.sched-col-body:last-child { border-right: none; }

/* Appointment blocks */
.sched-apt-block {
  position: absolute; left: 4px; right: 4px;
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  cursor: pointer;
  overflow: visible;
  display: flex; gap: 6px;
  transition: box-shadow .15s, transform .15s;
  z-index: 1;
  border-left: 3px solid transparent;
}
.sched-apt-block:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  z-index: 20;
}

.sched-apt-booked {
  background: rgba(251,191,36,.15);
  border-left-color: #d97706;
}
.sched-apt-confirmed {
  background: rgba(59,130,246,.12);
  border-left-color: #2563eb;
}
/* Arrived was amber (#f59e0b) on an amber tint, one shade from Booked's #d97706 —
   the two were unreadable side by side in a doctor column. Teal is clear of
   Booked's amber, Confirmed's blue and Completed's green. */
.sched-apt-arrived {
  background: rgba(13,148,136,.14);
  border-left-color: #0d9488;
}
.sched-apt-completed {
  background: var(--c-success-bg);
  border-left-color: var(--c-success);
}
.sched-apt-no-show {
  background: rgba(168,85,247,.12);
  border-left-color: #a855f7;
}
.sched-apt-cancelled {
  background: var(--c-danger-bg);
  border-left-color: var(--c-danger);
  opacity: .65;
}

.sched-apt-status {
  width: 4px; flex-shrink: 0; border-radius: 2px;
  display: none; /* color is on the border-left instead */
}
.sched-apt-info { min-width: 0; flex: 1; overflow: hidden; }
.sched-apt-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-apt-meta {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.sched-apt-time {
  font-size: 10px; color: var(--text-secondary); font-weight: 500;
  margin-top: 2px;
}
/* Billed visit that still owes money: a label in the block's top-right corner
   (beside the drag handle), visible even in a short 15-minute block */
.sched-apt-block.has-due .sched-apt-info { padding-right: 78px; }
.sched-apt-due {
  position: absolute;
  top: 6px;
  right: 20px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  white-space: nowrap;
}
.sched-tooltip-due { font-size: 12px; font-weight: 700; color: var(--c-danger); }

/* Hover tooltip */
.sched-tooltip {
  display: none;
  position: absolute;
  left: 0;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  z-index: 200;
  pointer-events: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}
.sched-tooltip.visible { display: block; }
.sched-tooltip.above { bottom: calc(100% + 8px); }
.sched-tooltip.below { top: calc(100% + 8px); }
.sched-tooltip::before {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
}
.sched-tooltip.above::before {
  bottom: -12px;
  border-top-color: var(--border);
}
.sched-tooltip.below::before {
  top: -12px;
  border-bottom-color: var(--border);
}
.sched-tooltip-header {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.sched-tooltip-row {
  display: flex; gap: 6px; align-items: center;
  padding: 2px 0;
  color: var(--text-secondary);
}
.sched-tooltip-row strong {
  color: var(--text);
  min-width: 52px;
  font-weight: 600;
}
.sched-tooltip-row .badge {
  font-size: 10px;
  padding: 1px 6px;
}
.sched-tooltip-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.sched-tooltip-actions .btn {
  width: 100%;
  justify-content: center;
  font-size: 12px;
}
/* Hover card: the patient's last / next appointment */
.sched-tooltip-visits {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 6px;
}
.sched-tooltip-visit-label {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-muted);
}
.sched-tooltip-visit-label .badge { font-size: 9.5px; padding: 1px 6px; }
.sched-tooltip-visit-body { color: var(--text); font-variant-numeric: tabular-nums; }
.sched-tooltip-visit-note {
  color: var(--text-secondary); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Drag handle */
.sched-drag-handle {
  position: absolute; top: 4px; right: 4px;
  font-size: 14px; line-height: 1;
  color: var(--text-muted);
  opacity: 0;
  cursor: grab;
  transition: opacity .15s;
  user-select: none;
}
.sched-apt-block:hover .sched-drag-handle { opacity: .6; }
.sched-apt-block:hover .sched-drag-handle:hover { opacity: 1; }

/* Dragging state */
.sched-apt-block.sched-dragging {
  opacity: .35;
  transform: scale(.96);
  box-shadow: none;
}
.sched-apt-block[draggable="true"] { cursor: grab; }
.sched-apt-block[draggable="true"]:active { cursor: grabbing; }

/* Drop target columns */
.sched-col-body.sched-drop-target {
  outline: 2px dashed var(--c-primary);
  outline-offset: -2px;
  background: rgba(99,102,241,.02);
}
.sched-col-body.sched-drop-hover {
  background: rgba(99,102,241,.06);
  outline-color: var(--c-primary);
  outline-style: solid;
}

/* Drop preview line */
.sched-drop-preview {
  position: absolute; left: 4px; right: 4px;
  background: rgba(99,102,241,.15);
  border: 2px dashed var(--c-primary);
  border-radius: var(--radius-xs);
  z-index: 5;
  pointer-events: none;
  transition: top .08s ease;
}

/* Dark mode overrides */
[data-theme="dark"] .sched-apt-booked    { background: rgba(251,191,36,.2); }
[data-theme="dark"] .sched-apt-confirmed { background: rgba(59,130,246,.2); }
[data-theme="dark"] .sched-apt-arrived   { background: rgba(45,212,191,.16); }
[data-theme="dark"] .sched-apt-completed { background: rgba(34,197,94,.15); }
[data-theme="dark"] .sched-apt-no-show   { background: rgba(168,85,247,.18); }
[data-theme="dark"] .sched-apt-cancelled { background: rgba(239,68,68,.12); }

/* Responsive */
@media (max-width: 768px) {
  .sched-toolbar { flex-direction: column; align-items: flex-start; }
  .sched-grid { grid-template-columns: 64px repeat(var(--col-count), minmax(150px, 1fr)); }
  .sched-time-col { width: 64px; min-width: 64px; }
  .sched-q { font-size: 9px; }
  .sched-col-body { min-width: 150px; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@page { size: auto; margin: 8mm; }
@page.a4-rx { size: A4 portrait; margin: 14mm 16mm; }
@media print {
  html { height: auto; margin: 0; padding: 0; }
  body { height: auto; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: flex-start; width: 100%; }
  body > * { display: none !important; }
  body > #printArea { display: block !important; }
  #printArea {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 72mm;
    padding: 2mm 2mm 3mm 2mm;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    background: #fff;
    box-sizing: border-box;
  }
  #printArea.a4-print {
    width: 210mm;
    min-width: 210mm;
    max-width: 210mm;
    padding: 0;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    background: #fff;
    box-sizing: border-box;
  }
  #printArea.receipt-print {
    width: 80mm;
    min-width: 80mm;
    max-width: 80mm;
    padding: 1.5mm 2mm 2.5mm 2mm;
    margin: 0 auto;
    text-align: center;
  }
  #printArea.receipt-print .receipt-logo-wrap {
    width: 100% !important;
    margin: 0 auto 6px auto !important;
    text-align: center !important;
    display: block !important;
    padding: 0 !important;
    line-height: 0 !important;
  }
  #printArea.receipt-print .receipt-logo-img {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 90px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    image-rendering: auto !important;
  }
  #printArea h2 { font-size: 16px !important; margin: 0 0 2px !important; }
  #printArea table { border-collapse: collapse; width: 100%; }
  #printArea th, #printArea td { padding: 2px 2px; text-align: left; color: #000; font-size: 11px; }
  #printArea th:first-child, #printArea td:first-child { padding-left: 2px; }
  #printArea th:last-child, #printArea td:last-child { padding-right: 2px; }
  #printArea th { background: #e0e0e0; font-weight: 700; border-bottom: 1px solid #000; color: #000; font-size: 10px; }
  #receiptItemsTable tbody tr td { border-bottom: 1px dashed #bbb; }
  #printArea.receipt-print table, #printArea.receipt-print tr, #printArea.receipt-print td { page-break-inside: avoid; }
  #printArea tfoot td { font-weight: 700; font-size: 11px; padding: 3px 2px !important; border-top: 1px solid #000; color: #000; }
  #printArea th:last-child, #printArea td:last-child { text-align: right; }
  #printArea p, #printArea div, #printArea span { color: #000; }

  /* ── A4 Prescription Document ── */
  .rx-doc { width: 100%; padding: 16mm 18mm; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; color: #000; line-height: 1.5; page-break-after: always; }
  .rx-header { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid #333; margin-bottom: 16px; }
  .rx-logo { max-height: 80px; max-width: 140px; object-fit: contain; }
  .rx-logo-placeholder { width: 70px; height: 70px; border-radius: 6px; background: #333; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }
  .rx-clinic-info { flex: 1; }
  .rx-clinic-name { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.3; margin: 0; }
  .rx-clinic-sub  { font-size: 12px; color: #333; margin-top: 2px; }
  .rx-clinic-meta { font-size: 11px; color: #555; margin-top: 1px; }
  .rx-title-block { text-align: right; flex-shrink: 0; }
  .rx-title-word  { font-size: 24px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #333; margin: 0; }
  .rx-title-sub   { font-size: 14px; color: #777; margin-top: 2px; }

  .rx-info-row { display: flex; flex-wrap: wrap; gap: 0; background: #f5f5f5; border: 2px solid #ccc; border-radius: 3px; margin-bottom: 14px; }
  .rx-info-cell { flex: 1 1 18%; min-width: 100px; padding: 10px 14px; border-right: 1px solid #ddd; }
  .rx-info-cell:last-child { border-right: none; }
  .rx-lbl { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #666; margin-bottom: 3px; }
  .rx-val { display: block; font-size: 13px; font-weight: 500; color: #000; word-break: break-word; }

  .rx-section { margin-bottom: 16px; page-break-inside: avoid; }
  .rx-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #000; border-bottom: 2px solid #333; padding-bottom: 4px; margin-bottom: 8px; }
  .rx-section-body { font-size: 13px; color: #000; line-height: 1.6; white-space: pre-wrap; padding: 6px 0; }

  .rx-med-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
  .rx-med-table thead { background: #f0f0f0; }
  .rx-med-table thead th { font-size: 11px; font-weight: 700; padding: 9px 10px; text-align: left; border-bottom: 2px solid #333; color: #000; }
  .rx-med-cell { padding: 9px 10px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .rx-dos-cell { padding: 9px 10px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .rx-med-table tbody tr:last-child td { border-bottom: none; }

  .rx-signatures { display: flex; justify-content: space-between; margin-top: 32mm; gap: 20mm; page-break-inside: avoid; }
  .rx-sig-box { flex: 1; text-align: center; }
  .rx-sig-line { border-top: 1px solid #333; margin-bottom: 8px; height: 40px; }
  .rx-sig-label { font-size: 10px; font-weight: 600; color: #333; }

  .rx-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12mm; padding-top: 8px; border-top: 1px solid #ccc; font-size: 9px; color: #666; page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .sidebar-close { display: flex; }
  .main-wrapper { margin-left: 0; }
  .menu-btn { display: flex; }
  .topbar { padding: 14px 16px; }
  .page-tabs { padding: 8px 10px; }
  .topbar-theme-btn { display: flex; }
  .topbar-worksite { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .topbar-user-info { display: none; }
  #contentArea { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-grid-sm { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 14px 16px; }
  .stat-card-sm { padding: 10px 12px; }
  .stat-value { font-size: 22px; }
  .stat-value-sm { font-size: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .modal { max-width: calc(100vw - 32px); }
  .cal-cell { min-height: 64px; }
  .cal-pill { font-size: 9px; padding: 1px 3px; }
  .toast-container { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid-sm { grid-template-columns: 1fr 1fr; }
  .action-bar { flex-direction: column; align-items: stretch; }
  .svc-action-bar .svc-cat-filter { width: 100%; min-width: 0; flex: 1 1 100%; }
  .store-action-bar .search-box { flex: 1 1 100%; min-width: 0; max-width: none; }
  .store-action-bar .store-action-spacer { display: none; }
  .bill-action-bar { flex-wrap: wrap; }
  .bill-action-bar .search-box { flex: 1 1 100%; min-width: 0; max-width: none; }
  .bill-filter-group { width: 100%; }
  .bill-filter-group input[type="date"] { width: 100%; min-width: 0; }
  .bill-action-bar .bill-action-spacer { display: none; }
  .bill-action-bar .bill-vt-wrap { width: 100%; justify-content: flex-start; }
  .topbar-left h1 { font-size: 16px; }
  .login-card { padding: 22px 16px; }
}

@media (max-width: 900px) {
  .patient-action-bar {
    flex-wrap: wrap;
  }
  .patient-action-bar .search-box {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .store-action-bar {
    flex-wrap: wrap;
  }
  .store-action-bar .search-box {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .store-action-bar .store-action-spacer {
    display: none;
  }

  .bill-action-bar {
    flex-wrap: wrap;
  }
  .bill-action-bar .search-box {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .bill-action-bar .bill-filter-group {
    width: 100%;
  }
  .bill-action-bar .bill-action-spacer {
    display: none;
  }
  .report-filter-bar .search-box {
    flex: 1 1 100%;
    min-width: 0;
  }
  .report-filter-group {
    width: 100%;
  }
  .report-filter-group input[type="date"],
  .report-filter-group select,
  .report-filter-group .btn {
    flex: 1 1 140px;
    min-width: 0;
  }
}

/* ── Services & Packages ─────────────────────────── */
.badge-secondary { background: var(--bg-hover); color: var(--text-secondary); }

.svc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px; font-weight: 500;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border, var(--c-primary-bg));
  white-space: nowrap;
}

/* Package select wrap (inline service picker inside bill modal) */
.pkg-svc-checklist { gap: 0; border: none; padding: 0; }
.pkg-select-wrap { border:1px solid var(--border); border-radius:var(--radius-xs); margin-bottom:4px; overflow:hidden; }
.pkg-check-header { background:var(--bg-hover); border-radius:0; margin:0; }
.pkg-svc-picker { background:var(--bg); border-top:1px solid var(--border-light); padding:4px 4px 4px 20px; }
.pkg-svc-picker-label { font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; padding:4px 8px 2px; margin-bottom:2px; }
.svc-check-sub { font-size:12px; padding:4px 8px; }

/* ── Modern Service Grid ─────────────────────────────── */
.bill-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
  padding: 10px 2px 4px;
  overflow-y: auto;
}
.bill-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;
}
.bill-svc-card:hover { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg); }
.bill-svc-card.selected {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.bill-svc-card-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.bill-svc-card-cat { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.bill-svc-card-price { font-size: 13px; font-weight: 700; color: var(--c-primary); margin-top: 6px; }
.bill-svc-card-check {
  position: absolute; top: 7px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: transparent;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.bill-svc-card.selected .bill-svc-card-check { background: var(--c-primary); color: #fff; }

/* Billing products tab layout */
#billProdGrid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.bill-prod-card {
  cursor: default;
  gap: 8px;
}
.bill-prod-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border, var(--c-primary-bg));
}
.bill-prod-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}
.bill-prod-stepper {
  width: 124px;
  flex: 0 0 124px;
}
.bill-prod-add-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

@media (max-width: 720px) {
  #billProdGrid {
    grid-template-columns: 1fr;
  }
  .bill-prod-actions {
    flex-wrap: wrap;
  }
  .bill-prod-stepper,
  .bill-prod-add-btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ── Modern Package List ─────────────────────────────── */
.bill-pkg-list { padding: 8px 2px 4px; }
.bill-pkg-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .15s;
}
.bill-pkg-card.selected { border-color: var(--c-primary); }
.bill-pkg-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--bg-card);
  transition: background .12s;
}
.bill-pkg-card-header:hover { background: var(--bg-hover); }
.bill-pkg-card.selected .bill-pkg-card-header { background: var(--c-primary-bg); }
.bill-pkg-card-check-wrap { flex-shrink: 0; }
.bill-pkg-card-checkbox {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg-card);
  transition: border-color .15s, background .15s;
  position: relative;
}
.bill-pkg-card-checkbox.checked {
  border-color: var(--c-primary); background: var(--c-primary);
}
.bill-pkg-card-checkbox.checked::after {
  content: '\2713'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.bill-pkg-card-info { flex: 1; min-width: 0; }
.bill-pkg-card-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.bill-pkg-card-svcs { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-pkg-card-right { text-align: right; flex-shrink: 0; }
.bill-pkg-card-price { display: block; font-size: 14px; font-weight: 700; color: var(--c-primary); }
.bill-pkg-card-count { display: block; font-size: 10px; color: var(--text-secondary); margin-top: 1px; }
.bill-pkg-svc-picker {
  border-top: 1.5px dashed var(--c-primary);
  background: var(--c-primary-bg);
  padding: 10px 14px 12px;
}
.bill-pkg-svc-picker-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-primary); margin-bottom: 8px;
}
.bill-pkg-svc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-pkg-svc-tile {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  border: 1.5px solid var(--c-primary);
  background: var(--bg-card); cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--c-primary);
  transition: background .12s, color .12s;
  user-select: none;
}
.bill-pkg-svc-tile:hover { background: rgba(99,102,241,.08); }
.bill-pkg-svc-tile.selected { background: var(--c-primary); color: #fff; }
.bill-pkg-svc-tile-name { }
.bill-pkg-svc-tile-check { font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .12s; }
.bill-pkg-svc-tile.selected .bill-pkg-svc-tile-check { opacity: 1; }

/* ── Custom item modern ──────────────────────────────── */
.bill-custom-modern {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 2px 4px;
}
.bill-custom-modern-fields { display: flex; gap: 8px; }
.bill-custom-desc { flex: 1; min-width: 0; }
.bill-custom-amt { width: 110px; flex-shrink: 0; }

/* Service checklist in package modal */
.svc-checklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px;
  background: var(--bg);
}
.svc-check-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.svc-check-item:hover { background: var(--bg-hover); }
.svc-check-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--c-primary); flex-shrink: 0; }
.svc-check-item span:nth-child(2) { flex: 1; }
.svc-check-price { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.svc-price-summary {
  margin-top: 8px; padding: 6px 10px;
  background: var(--bg-hover);
  border-radius: var(--radius-xs);
  font-size: 13px; color: var(--text-secondary);
}
.svc-price-summary strong { color: var(--text); }
.text-success { color: var(--c-success, #16a34a); }
.small { font-size: 11px; }
.text-muted { color: var(--text-muted, var(--text-secondary)); }

/* ── Bill modal ──────────────────────────────────────── */
.bill-tabs {
  display: flex; gap: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 3px;
  margin-bottom: 6px;
}
.bill-tab {
  flex: 1; padding: 5px 10px;
  border: none; background: transparent;
  border-radius: calc(var(--radius-xs) - 1px);
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: background .12s, color .12s;
}
.bill-pkg-card-header { align-items: flex-start; }
.bill-pkg-card-header:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-2px); }
.bill-pkg-card-info { flex: 1; min-width: 0; }
.bill-pkg-card-name { font-weight: 700; display: block; }
.bill-pkg-card-svcs {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 6px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
}
.bill-pkg-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 120px;
}
.bill-pkg-card-price { font-weight: 700; color: var(--c-success); margin-right: 0; }
.bill-pkg-card-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.bill-pkg-svc-tile { display:flex; align-items:center; gap:8px; padding:8px; border-radius:6px; cursor:pointer; transition:background .12s; }
.bill-pkg-svc-tile:hover { background:var(--bg-hover); }
.bill-pkg-svc-tile-name { font-size:13px }

@media (max-width: 720px) {
  .bill-pkg-card-header { gap: 10px; }
  .bill-pkg-card-right { max-width: 96px; }
  .bill-pkg-card-svcs { font-size: 11px; }
}
/* ── Package Create/Edit Service Grid ── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 4px;
}

/* Make service table description wrap like package UI */
#svcWrap .table-wrap table td { white-space: normal; word-break: break-word; }
#svcWrap .table-wrap table td:nth-child(2) { min-width: 160px; }
#svcWrap .table-wrap table td:nth-child(5) { white-space: nowrap; }
.svc-load-state {
  padding: 10px 4px 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.svc-load-more-sentinel {
  height: 2px;
}
.svc-card {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.svc-card:hover { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg); }
.svc-card:has(input[type=checkbox]:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-bg, #eef3ff);
  box-shadow: 0 0 0 3px var(--c-primary-bg);
}
.svc-card-body { flex: 1; }
.svc-card-title { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.3; }
.svc-card-desc  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.svc-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.svc-card-price { font-weight: 700; font-size: 13px; color: var(--c-primary); }
.svc-select { cursor: pointer; display: flex; align-items: center; }
.svc-select input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-primary); }
.svc-qty { width: 56px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); font-size: 13px; text-align: center; }

/* ── Purchase Order Row Inputs ── */
.po-item-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px 96px 128px 108px 120px 104px 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}
.po-item-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px 96px 128px 108px 120px 104px 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.po-disc-cell { display: flex; gap: 4px; align-items: center; }
.po-disc-cell .po-disc-val { flex: 1; min-width: 0; }
.po-disc-cell .po-disc-type { width: 46px; flex: 0 0 46px; padding: 6px 2px; }
.po-items-shell {
  overflow-x: auto;
  padding-bottom: 4px;
}
.po-item-row .po-prod-sel,
.po-item-row .po-uom-sel,
.po-item-row .po-expiry,
.po-item-row .po-qty,
.po-item-row .po-cost {
  width: 100%;
  height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
}
.po-line-total {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.po-items-wrap {
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 2px;
}
.po-item-head,
.po-item-row,
.po-items-wrap {
  min-width: 945px;
}
.po-total-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.po-total-main {
  font-weight: 700;
  color: var(--c-primary);
}
.po-view-table-wrap {
  overflow-x: auto;
}
.po-expiry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--c-primary-bg);
  color: var(--c-primary-dark);
  font-weight: 700;
  white-space: nowrap;
}
.expiry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-primary-bg);
  color: var(--c-primary-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.expiry-chip.expired {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.expiry-chip.missing {
  background: #fff3cd;
  color: #b45309;
}
.po-total-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ── Generic number stepper ── */
.num-stepper {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
}
.num-stepper input[type="number"] {
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-radius: 0;
  height: 36px;
  text-align: center;
  padding: 0 6px;
  width: 100%;
  background: transparent;
  color: var(--text);
  -moz-appearance: textfield;
}
.num-stepper input[type="number"]::-webkit-outer-spin-button,
.num-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-step-btn {
  border: none;
  background: var(--bg-hover);
  color: var(--text);
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.num-step-btn:hover { background: var(--c-primary-bg); color: var(--c-primary-dark); }
/* bill custom amount stepper inside flex row */
.bill-custom-amt { width: 140px; flex-shrink: 0; }
/* inline UOM factor row: make stepper work in tight 150px cell */
.prod-uom-factor-wrap.num-stepper { min-width: 0; }

/* ── PO stepper (existing, kept for compatibility) ── */
.po-num-wrap {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
}
.po-num-wrap .po-qty {
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-radius: 0;
  height: 34px;
  text-align: center;
  padding: 0 6px;
}
.po-step-btn {
  border: none;
  background: var(--bg-hover);
  color: var(--text);
  height: 34px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.po-step-btn:hover { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.po-remove-btn {
  border: none;
  background: transparent;
  color: var(--c-danger);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.po-remove-btn:hover { background: var(--c-danger-bg); }
.po-item-row .po-qty,
.po-item-row .po-expiry,
.po-item-row .po-cost {
  -moz-appearance: textfield;
}
.po-item-row .po-qty::-webkit-outer-spin-button,
.po-item-row .po-qty::-webkit-inner-spin-button,
.po-item-row .po-cost::-webkit-outer-spin-button,
.po-item-row .po-cost::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 980px) {
  .modal-po {
    max-width: calc(100vw - 20px);
    width: calc(100vw - 20px);
  }
  .modal-po .modal-body {
    overflow-y: auto;
  }
  .po-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .po-quick-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .po-item-head {
    display: none;
  }
  .po-items-shell {
    overflow-x: visible;
  }
  .po-items-wrap {
    max-height: 36vh;
    min-width: 0;
  }
  .po-item-row {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }
  .po-quick-product-actions {
    grid-column: 1 / -1;
  }
  .po-total-bar {
    flex-wrap: wrap;
  }
  .po-total-actions {
    width: 100%;
  }
  .po-total-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .po-item-row .po-remove-btn {
    justify-self: end;
  }
}
.bill-tab.active { background: var(--bg-card); color: var(--c-primary); box-shadow: var(--shadow-sm); }
.bill-tab-panel { /* shown by default for first tab */ }

.bill-custom-row {
  display: flex; gap: 6px; align-items: center;
  margin-top: 4px;
}
.bill-custom-row > input { flex: 1; min-width: 0; }
.bill-custom-row > .num-stepper { width: 140px; flex-shrink: 0; }

/* ── Cart items list ───────────────────────────────── */
.bill-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: transparent;
  min-height: 44px;
  max-height: 280px;
  padding: 2px 0 2px 2px;
}
.bill-items-list-tall {
  flex: 1;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
}
.bill-line-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px 9px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  flex-shrink: 0;
}
.bill-line-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--c-primary), #a855f7);
  border-radius: 12px 0 0 12px;
}
.bill-line-item:hover {
  border-color: var(--c-primary);
  box-shadow: 0 2px 10px rgba(99,102,241,.10);
}
.bill-line-item.bill-item-locked {
  opacity: 0.65;
  background: var(--bg-hover);
}
.bill-line-item.bill-item-locked::before {
  background: var(--text-muted);
}
/* top row: badge + optional qty + spacer + amount + remove */
.bill-line-item-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.bill-line-item-top-spacer { flex: 1; }
.bill-item-locked-badge { font-size: 12px; flex-shrink: 0; }
.bill-item-type {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.bill-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  padding-left: 2px;
}
.bill-line-item-doc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-left: 2px;
}
.bill-line-doc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  flex-shrink: 0;
}
.bill-line-doc-select {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
}
.bill-line-doc-select:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.bill-item-qty-ctrl {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
.qty-btn {
  border: none;
  background: transparent;
  color: var(--c-primary);
  width: 24px;
  height: 24px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.qty-btn:hover { background: var(--c-primary-bg); }
.qty-val {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  padding: 0 4px;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.bill-item-amount {
  font-weight: 800;
  font-size: 13px;
  color: var(--c-primary);
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-icon-sm {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); border-radius: 6px;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.btn-icon-sm:hover { background: var(--c-danger-bg); color: var(--c-danger); }

/* ── Cart total row ────────────────────────────────── */
.bill-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(34,197,94,.10) 0%, rgba(16,185,129,.06) 100%);
  border-radius: 12px;
  border: 1.5px solid rgba(34,197,94,.25);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.bill-total-row strong {
  color: var(--c-success);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Setup / card header row */
.card-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 16px 0 14px;
}

/* ══════════════════════════════════════════
   PACKAGES PAGE — Card Grid
══════════════════════════════════════════ */
.pkg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 4px 0;
}
.pkg-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: box-shadow .18s, border-color .18s, transform .15s;
  overflow: hidden;
}
.pkg-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.pkg-card-inactive { opacity: .65; }

.pkg-card-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 65%;
}

.pkg-card-badge {
  background: var(--c-success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
}
.pkg-card-badge-off { background: var(--text-muted); }

.pkg-card-top { display: flex; flex-direction: column; gap: 4px; }
.pkg-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-primary-bg, #eef3ff);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 4px;
}
.pkg-card-name { font-size: 16px; font-weight: 700; color: var(--text); padding-right: 60px; }
.pkg-card-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.pkg-card-svcs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pkg-svc-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.pkg-svc-chip em { font-style: normal; font-weight: 700; color: var(--c-primary); }

.pkg-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.pkg-card-price-wrap { display: flex; flex-direction: column; gap: 1px; }
.pkg-card-mrp {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.pkg-card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-success);
}
.pkg-card-sessions {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  padding: 3px 10px;
  border-radius: 20px;
}
.pkg-card-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
}
.pkg-card-btn { flex: 1; justify-content: center; }

/* ══════════════════════════════════════════
   PATIENT PACKAGES — Subscription Cards
══════════════════════════════════════════ */
.pp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.pp-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .18s, border-color .18s;
}
.pp-card:hover { border-color: var(--c-primary); box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.pp-card-done { border-color: var(--c-success); background: var(--c-success-bg, #f0fdf4); }

.pp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pp-card-mr {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.pp-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pp-card-pkg-name {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.pp-card-progress-wrap {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
}
.pp-overall-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pp-overall-pct { font-weight: 700; color: var(--c-primary); }

.pp-progress-track {
  background: var(--border);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.pp-progress-track-lg { height: 10px; border-radius: 99px; }
.pp-progress-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: 99px;
  transition: width .4s ease;
}
.pp-progress-done { background: var(--c-success); }

.pp-services-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.pp-svc-row { display: flex; flex-direction: column; gap: 4px; }
.pp-svc-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.pp-svc-count { font-weight: 600; color: var(--text); }

.pp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}
.pp-purchased { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

.pp-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.pp-filter-fields {
  flex: 1 1 720px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) repeat(3, minmax(130px, 150px));
  gap: 8px;
  align-items: center;
}

.pp-filter-field {
  height: 38px;
  min-width: 0;
}

.pp-filter-fields .search-box.pp-filter-field {
  width: 100%;
}

.pp-filter-fields .search-box.pp-filter-field input {
  width: 100%;
}

.pp-filter-fields input[type="date"].pp-filter-field,
.pp-filter-fields input[type="datetime-local"].pp-filter-field,
.pp-filter-fields select.pp-filter-field {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  -webkit-appearance: auto;
  appearance: auto;
}

.pp-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.pp-filter-actions .btn {
  height: 38px;
  white-space: nowrap;
}

.pp-filter-toggle {
  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  .pp-filter-fields {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 820px) {
  .pp-filter-fields {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .pp-filter-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .pp-filter-fields {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════
   BILLING — Package Session Picker (bps)
══════════════════════════════════════════ */
.bps-pkg-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.bps-pkg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}
.bps-pkg-name { font-weight: 700; font-size: 13px; color: var(--text); }
.bps-pkg-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.bps-pkg-pct  { font-size: 12px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-bg,#eef3ff); padding: 2px 8px; border-radius: 20px; }

.bps-svc-list { padding: 4px 0; }
.bps-svc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background .12s;
}
.bps-svc-row:last-child { border-bottom: none; }
.bps-svc-row:not(.bps-svc-done):hover { background: var(--bg-hover); }
.bps-svc-done { opacity: .5; }

.bps-svc-info { flex: 1; min-width: 0; }
.bps-svc-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.bps-svc-rem  { font-size: 11px; margin-top: 1px; display: block; }
.bps-rem-ok   { color: var(--c-success); }
.bps-rem-zero { color: var(--c-danger); }
.bps-done-label { font-size: 12px; color: var(--c-success); font-weight: 600; }

.bps-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.bps-step-btn {
  background: var(--bg-hover);
  border: none;
  width: 28px; height: 28px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.bps-step-btn:hover { background: var(--c-primary-bg,#eef3ff); color: var(--c-primary); }
.bps-step-plus { border-left: 1.5px solid var(--border); }
.bps-step-val {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-left: 1.5px solid var(--border);
  border-right: none;
  padding: 0 4px;
}

.bps-add-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--c-primary);
  background: transparent;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.bps-add-btn:hover { background: var(--c-primary-bg,#eef3ff); }
.bps-add-active {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════
   BILLING — Split Payment Builder
══════════════════════════════════════════ */
.bill-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.bill-split-balance {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.bill-split-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bill-split-row .bsplit-method {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
}
.bsplit-amt-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  flex-shrink: 0;
  width: 140px;
  transition: border-color .15s;
}
.bsplit-amt-wrap:focus-within { border-color: var(--c-primary); }
.bsplit-prefix {
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  border-right: 1px solid var(--border-light);
  background: var(--bg-hover);
  white-space: nowrap;
  line-height: 36px;
  height: 36px;
  display: flex;
  align-items: center;
}
.bsplit-amt-wrap .bsplit-amt {
  border: none;
  background: transparent;
  padding: 0 8px;
  width: 100%;
  height: 36px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  text-align: right;
  -moz-appearance: textfield;
}
.bsplit-amt-wrap .bsplit-amt::-webkit-outer-spin-button,
.bsplit-amt-wrap .bsplit-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bsplit-remove {
  background: none;
  border: none;
  color: var(--c-danger);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.bsplit-remove:hover { background: var(--c-danger-bg, #fff0f0); }
.bill-split-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  background: none;
  border: 1.5px dashed var(--c-primary);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  transition: background .12s;
}
.bill-split-add-btn:hover { background: var(--c-primary-bg, #eef3ff); }
.modal-bill-row .btn-full {
  font-size: 13px;
  font-weight: 600;
}

.svc-check-disabled { opacity: 0.5; pointer-events: none; }
.text-danger { color: var(--c-danger, #ef4444); }

/* Package session tab */
.pkg-session-pkg {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px;
  background: var(--bg);
}
.pkg-session-pkg-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

/* Patient subscriptions table */
.svc-chip-done { opacity: 0.45; text-decoration: line-through; }
.session-progress {
  height: 6px; background: var(--border);
  border-radius: 99px; overflow: hidden; width: 80px; margin-bottom: 2px;
}
.session-progress-bar {
  height: 100%; background: var(--c-primary);
  border-radius: 99px; transition: width .3s;
}

/* Patient package log modal */
.pat-pkg-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 16px; margin-bottom: 14px;
  padding: 10px; background: var(--bg-hover);
  border-radius: var(--radius-xs); font-size: 13px;
}
.pat-pkg-services {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs); overflow: hidden;
}
.pat-pkg-svc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border-light); font-size: 13px;
}
.pat-pkg-svc-row:last-child { border-bottom: none; }
.pat-pkg-svc-name { flex: 1; }
.pat-pkg-svc-count { font-weight: 600; font-size: 12px; }
.pat-pkg-log-title {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.pat-pkg-log-entry {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 10px; margin-bottom: 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); font-size: 12px;
}
.pat-pkg-log-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-primary-bg); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.pat-pkg-log-date { color: var(--text-secondary); flex-shrink: 0; min-width: 80px; }
.pat-pkg-log-svcs { flex: 1; color: var(--text); }

/* Locked badge */
.locked-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  border-radius: 10px;
  height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  cursor: default;
  flex-shrink: 0;
}
.locked-paid {
  color: var(--c-success);
  background: var(--c-success-bg);
  border: 1px solid rgba(34,197,94,.25);
}
.locked-cancelled {
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border: 1px solid rgba(239,68,68,.25);
}

/* ── View Toggle Buttons ─────────────────────────────── */
.vt-group { display:flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.vt-btn { background:var(--bg-hover); border:none; padding:7px 10px; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; transition:background .12s,color .12s; }
.vt-btn + .vt-btn { border-left:1px solid var(--border); }
.vt-active { background:var(--c-primary-bg,#eef3ff); color:var(--c-primary); }

/* ── Grid View CSS Transform ─────────────────────────── */
.table-wrap.view-grid { overflow:visible; }
.table-wrap.view-grid table { display:block; }
.table-wrap.view-grid thead { display:none; }
.table-wrap.view-grid tbody { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:4px; }
.table-wrap.view-grid tr { display:flex; flex-direction:column; background:var(--bg-card); border:1.5px solid var(--border); border-radius:12px; padding:14px; gap:4px; transition:box-shadow .15s,border-color .15s; cursor:default; }
.table-wrap.view-grid tr:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); border-color:var(--c-primary); }
.table-wrap.view-grid td { display:block; border:none !important; padding:2px 0; font-size:13px; }
.table-wrap.view-grid td:first-child { font-size:11px; color:var(--text-muted); }
.table-wrap.view-grid .td-actions { margin-top:8px; padding-top:8px; border-top:1px solid var(--border) !important; display:flex; gap:4px; flex-wrap:wrap; }

/* ── Store Module ──────────────────────────────────────── */
.store-overview-shell {
  display: grid;
  gap: 16px;
}

.store-overview-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--c-primary) 20%, var(--border));
  border-radius: 16px;
  padding: 20px;
  background:
    radial-gradient(1200px 280px at -8% -30%, color-mix(in oklab, var(--c-primary) 22%, transparent), transparent 65%),
    radial-gradient(720px 200px at 108% 115%, color-mix(in oklab, var(--c-success) 16%, transparent), transparent 65%),
    linear-gradient(135deg, color-mix(in oklab, var(--c-primary-bg) 74%, var(--bg-card)) 0%, var(--bg-card) 100%);
}

.store-overview-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.store-overview-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  color: color-mix(in oklab, var(--text) 88%, var(--c-primary));
}

.store-overview-subtitle {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--text-muted);
}

.store-overview-meta {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.store-overview-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-hover) 70%, white 30%);
  font-size: 12px;
}

.store-overview-actions {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.store-overview-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-kpi-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 14px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.store-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
}

.store-kpi-value {
  font-size: 32px;
  line-height: 1;
  margin-top: 8px;
  font-weight: 800;
}

.store-kpi-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.store-kpi-card.accent-products { border-color: color-mix(in oklab, var(--c-primary) 30%, var(--border)); }
.store-kpi-card.accent-alert { border-color: color-mix(in oklab, #d97706 34%, var(--border)); }
.store-kpi-card.accent-stores { border-color: color-mix(in oklab, var(--c-success) 28%, var(--border)); }
.store-kpi-card.accent-orders { border-color: color-mix(in oklab, var(--c-danger) 26%, var(--border)); }

.store-overview-panels {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.store-spotlight-list,
.store-order-list {
  display: grid;
  gap: 8px;
}

.store-spotlight-item,
.store-order-item {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: color-mix(in oklab, var(--bg-card) 78%, var(--bg-hover));
}

.store-spotlight-name {
  font-weight: 700;
}

.store-spotlight-metrics,
.store-order-right {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.store-spotlight-gap {
  font-size: 12px;
  color: #b45309;
  font-weight: 700;
}

.store-spotlight-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  background: color-mix(in oklab, var(--bg-hover) 58%, var(--bg-card));
}

.store-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.store-store-card.new-look {
  padding: 12px;
  border-radius: 14px;
}

.store-store-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.store-health-row {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.store-health-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-hover) 76%, var(--bg-card));
}

.store-health-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #22c55e 45%, #84cc16 100%);
}

.store-mini-metrics {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.store-mini-metrics span {
  font-size: 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--bg-card) 74%, var(--bg-hover));
}

.store-product-stack {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  min-height: 404px;
  max-height: 404px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.store-product-item {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in oklab, var(--bg-card) 82%, var(--bg-hover));
}

.store-product-item.is-low {
  border-color: color-mix(in oklab, #d97706 36%, var(--border));
  background: color-mix(in oklab, #fff7ed 78%, var(--bg-card));
}

.store-product-main {
  min-width: 0;
}

.store-product-main strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-product-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.store-product-cost {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-hover) 70%, var(--bg-card));
  white-space: nowrap;
}

.store-product-item-placeholder {
  border-style: dashed;
  background: transparent;
  opacity: 0.45;
  min-height: 64px;
}

.store-card-pagination {
  margin-top: 10px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
}

.store-card-pagination input[type="range"] {
  width: 100%;
  accent-color: color-mix(in oklab, var(--c-primary) 86%, #0ea5e9);
}

.store-store-card { padding: 0; }
.store-store-card .card-header-row { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.store-store-card .table-wrap { border-radius: 0 0 12px 12px; }

@media (max-width: 1040px) {
  .store-overview-hero,
  .store-overview-panels {
    grid-template-columns: 1fr;
  }

  .store-overview-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .store-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .store-overview-title {
    font-size: 26px;
  }

  .store-overview-actions {
    grid-template-columns: 1fr;
  }

  .store-overview-kpis {
    grid-template-columns: 1fr;
  }

  .store-product-stack {
    min-height: 0;
    max-height: 320px;
  }
}

/* ══════════════════ User Collection Report ══════════════════ */
.ucr-modern-wrap { display: flex; flex-direction: column; gap: 18px; }
.ucr-modern-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; background: var(--bg-hover); border-radius: var(--radius); border: 1px solid var(--border); }
.ucr-modern-title { font-size: 17px; font-weight: 700; color: var(--text); }
.ucr-modern-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ucr-modern-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ucr-tag { background: var(--c-primary-bg, #eef3ff); color: var(--c-primary); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.ucr-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ucr-kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.ucr-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ucr-kpi-value { font-size: 20px; font-weight: 700; color: var(--text); }
.ucr-kpi-negative { color: var(--c-danger, #e53e3e); }
.ucr-modern-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ucr-modern-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.ucr-modern-section-head h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.ucr-modern-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ucr-pill { background: var(--bg-hover); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); padding: 2px 8px; border-radius: 20px; }
.ucr-table-wrap { overflow-x: auto; }
.user-collection-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.user-collection-table th { background: var(--bg-hover); color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.user-collection-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-light, var(--border)); color: var(--text); vertical-align: middle; }
.user-collection-table tr:last-child td { border-bottom: none; }
.ucr-summary-table .ucr-total-row td { background: var(--bg-hover); font-weight: 700; }
.ucr-amt { text-align: right !important; white-space: nowrap; }
.ucr-neg { color: var(--c-danger, #e53e3e); }
.ucr-type { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }
.ucr-type-receipt { background: #d1fae5; color: #065f46; }
.ucr-type-refund { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .ucr-type-receipt { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .ucr-type-refund { background: #7f1d1d; color: #fca5a5; }
.ucr-group-grid { display: flex; flex-direction: column; gap: 0; }
.ucr-group-card { border-bottom: 1px solid var(--border); }
.ucr-group-card:last-child { border-bottom: none; }
.ucr-group-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--bg-hover); border-bottom: 1px solid var(--border); }

/* ══════════════════ Reports — Unified Layout ══════════════════ */
/* Report selector grid */
.report-select-box { transition: border-color .15s, background .15s; }
.report-select-box:hover { border-color: var(--c-primary) !important; background: var(--bg-hover) !important; }

/* Report panel card */
#reportViewPanel .card { margin: 0; border: 1px solid var(--border-light, var(--border)); }

/* Report header row */
.report-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

/* Filter bar */
.report-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 10px 14px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.report-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.report-filter-group input[type="date"],
.report-filter-group select { height: 34px; min-width: 130px; }
.report-filter-group-users select { min-width: 160px; }

/* Filter action buttons */
.report-apply-btn { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.report-apply-btn:hover { opacity: .88; }
.report-clear-btn { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); }
.report-clear-btn:hover { background: var(--border); color: var(--text); }

/* Report tables — shared */
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { background: var(--bg-hover); color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; }
.report-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light, var(--border)); color: var(--text); vertical-align: middle; }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:hover td { background: var(--bg-hover); }
.report-table .col-num { text-align: right; white-space: nowrap; }
.report-table .col-center { text-align: center; }
.report-table tfoot td { background: var(--bg-hover); font-weight: 700; border-top: 2px solid var(--border); }

/* KPI summary row */
.report-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.report-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.report-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.report-kpi-value { font-size: 20px; font-weight: 700; color: var(--text); }
.report-kpi-value.neg { color: var(--c-danger, #e53e3e); }
.report-kpi-value.pos { color: var(--c-success, #16a34a); }

/* Section divider inside a report panel */
.report-section { margin-top: 18px; }
.report-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Status badges */
.report-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; }
.report-badge-green  { background: #d1fae5; color: #065f46; }
.report-badge-red    { background: #fee2e2; color: #991b1b; }
.report-badge-yellow { background: #fef9c3; color: #854d0e; }
.report-badge-blue   { background: #dbeafe; color: #1e40af; }
.report-badge-gray   { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); }
[data-theme="dark"] .report-badge-green  { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .report-badge-red    { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .report-badge-yellow { background: #713f12; color: #fde68a; }
[data-theme="dark"] .report-badge-blue   { background: #1e3a5f; color: #93c5fd; }

/* Override bill-action-bar styles when used as a report filter bar */
#reportViewPanel .bill-action-bar.report-filter-bar {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  box-shadow: none;
  margin: 10px 0 14px;
}

/* ══════════════════════════════════════════════════════════════
   PAYROLL MODULE — Enhanced UI
   ══════════════════════════════════════════════════════════════ */

/* ── Payroll page header ─────────────────────────────────────── */
.pr-page-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 96%, white 4%) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  color: var(--text);
}
.pr-page-header::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-info) 70%, var(--c-primary) 30%));
  opacity: .6;
}
.pr-page-header-left { display: flex; align-items: center; gap: 12px; }
.pr-page-header-icon {
  width: 42px; height: 42px;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.pr-page-header-title { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.pr-page-header-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pr-page-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-month-control     { display: flex; align-items: center; gap: 6px; }
.pr-month-control label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pr-month-control input[type="month"] {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.pr-month-control input[type="month"]:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent);
}
.pr-header-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: background .15s;
  white-space: nowrap;
}
.pr-header-btn:hover { background: color-mix(in srgb, var(--bg-hover) 80%, var(--c-primary-bg) 20%); }

/* ── Payroll KPI strip ───────────────────────────────────────── */
.pr-kpi-strip {
  display: grid;
  /* 6 tiles: one row on wide screens, otherwise even rows of 3 or 2 (never 5 + 1) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 760px)  { .pr-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .pr-kpi-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pr-kpi-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--bg-card) 95%, white 5%) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-color, var(--border));
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.pr-kpi-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  pointer-events: none;
}
.pr-kpi-card:hover { box-shadow: var(--shadow-lg), var(--surface-glow); transform: translateY(-2px); }
.pr-kpi-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.pr-kpi-icon.blue   { background: #eff6ff; }
.pr-kpi-icon.green  { background: #f0fdf4; }
.pr-kpi-icon.red    { background: #fff1f2; }
.pr-kpi-icon.purple { background: #f5f3ff; }
.pr-kpi-icon.amber  { background: #fffbeb; }
.pr-kpi-body        { display: flex; flex-direction: column; min-width: 0; }
.pr-kpi-label       { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted, #6b7280); }
/* Amounts are never cut off with "…": tiles are wide enough, and the strip wraps to a second row instead */
.pr-kpi-value       { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-kpi-sub         { font-size: 11px; color: var(--text-muted, #6b7280); }

/* ── Payroll tab bar ─────────────────────────────────────────── */
.pr-tab-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 4px 4px;
  scrollbar-width: thin;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  margin-bottom: 16px;
}
.pr-tab-bar::-webkit-scrollbar { height: 4px; }
.pr-tab-bar::-webkit-scrollbar-track { background: transparent; }
.pr-tab-bar::-webkit-scrollbar-thumb { background: var(--border-color, #e5e7eb); border-radius: 4px; }
.pr-tab-btn {
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 14px;
  border: none; border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color .15s, background .15s;
  position: relative; bottom: -2px;
}
.pr-tab-btn:hover { color: var(--text); background: var(--bg-hover, #f8fafc); }
.pr-tab-btn.active {
  color: var(--c-primary, #6366f1);
  border-bottom-color: var(--c-primary, #6366f1);
  background: var(--bg-hover, #f8fafc);
}
.pr-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 9px; line-height: 1;
}
.pr-tab-badge.amber { background: #f59e0b; }

/* ── Master sub-tab pills ────────────────────────────────────── */
.pr-subtab-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px 12px;
  background: var(--bg-hover, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin: -16px -20px 16px;
}
.pr-subtab-btn {
  height: 30px; padding: 0 14px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 20px;
  background: var(--bg-card, #fff);
  color: var(--text-muted, #6b7280);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pr-subtab-btn:hover { border-color: var(--c-primary, #6366f1); color: var(--c-primary, #6366f1); }
.pr-subtab-btn.active {
  background: var(--c-primary, #6366f1);
  border-color: var(--c-primary, #6366f1);
  color: #fff;
}

/* ── Processing tab sections ─────────────────────────────────── */
.pr-section {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.pr-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-hover, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.pr-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted, #6b7280);
  display: flex; align-items: center; gap: 6px;
}
.pr-section-body { padding: 14px 16px; }
.pr-action-row   { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Reports grid ────────────────────────────────────────────── */
.pr-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.pr-report-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 14px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.pr-report-card:hover {
  border-color: var(--c-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
  transform: translateY(-1px);
}
.pr-report-card-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 2px;
}
.pr-report-card-title { font-size: 13px; font-weight: 700; color: var(--text); }
.pr-report-card-desc  { font-size: 11px; color: var(--text-muted, #6b7280); line-height: 1.4; }

/* ── Run details KPI bar ─────────────────────────────────────── */
.pr-run-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.pr-run-kpi {
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.pr-run-kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted, #6b7280); }
.pr-run-kpi-value { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 3px; }
.pr-run-kpi-value.green  { color: #16a34a; }
.pr-run-kpi-value.red    { color: #dc2626; }
.pr-run-kpi-value.purple { color: #7c3aed; }
.pr-run-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.pr-run-status.processed { background: #eff6ff; color: #1d4ed8; }
.pr-run-status.approved  { background: #f0fdf4; color: #15803d; }
.pr-run-status.locked    { background: #fef9c3; color: #92400e; }

/* ── Leave header controls ─────────────────────────────────────── */
.pr-leave-header {
  align-items: flex-end;
}
.pr-leave-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pr-leave-year-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.pr-leave-year-wrap label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.pr-leave-year-wrap select {
  height: 34px;
  min-width: 120px;
}
.pr-leave-controls .btn {
  height: 34px;
}
@media (max-width: 760px) {
  .pr-leave-header {
    align-items: flex-start;
  }
  .pr-leave-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .pr-kpi-card,
[data-theme="dark"] .pr-run-kpi,
[data-theme="dark"] .pr-report-card,
[data-theme="dark"] .pr-section { border-color: var(--border-color); background: var(--bg-card); }
[data-theme="dark"] .pr-section-header,
[data-theme="dark"] .pr-subtab-bar,
[data-theme="dark"] .pr-run-kpi { background: rgba(255,255,255,.04); }
[data-theme="dark"] .pr-kpi-icon.blue   { background: rgba(59,130,246,.15); }
[data-theme="dark"] .pr-kpi-icon.green  { background: rgba(34,197,94,.15); }
[data-theme="dark"] .pr-kpi-icon.red    { background: rgba(239,68,68,.15); }
[data-theme="dark"] .pr-kpi-icon.purple { background: rgba(139,92,246,.15); }
[data-theme="dark"] .pr-kpi-icon.amber  { background: rgba(245,158,11,.15); }
[data-theme="dark"] .pr-month-control input[type="month"] { color-scheme: dark; }
[data-theme="dark"] .pr-run-status.processed { background: rgba(59,130,246,.18); color: #93c5fd; }
[data-theme="dark"] .pr-run-status.approved  { background: rgba(34,197,94,.18); color: #86efac; }
[data-theme="dark"] .pr-run-status.locked    { background: rgba(245,158,11,.18); color: #fcd34d; }

/* ── Attendance panel cards ── */
.pr-att-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--bg-card, #fff);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
}
.pr-att-head {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px 10px;
}
.pr-att-head:hover {
  background: rgba(59, 130, 246, 0.08);
}
.pr-att-head:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 1px;
}
[data-theme="dark"] .pr-att-head:hover {
  background: rgba(96, 165, 250, 0.14);
}
.pr-att-row.is-priority-high {
  border-left: 4px solid #dc2626;
}
.pr-att-row.is-priority-medium {
  border-left: 4px solid #d97706;
}
.pr-att-row.is-priority-low {
  border-left: 4px solid #16a34a;
}
.pr-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.pr-att-mini {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-secondary);
  margin: -2px 0 8px;
}
.pr-att-mini span {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 3px 8px;
}
.pr-punch-link {
  border: none;
  background: rgba(59, 130, 246, 0.12);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.pr-punch-link:hover {
  background: rgba(59, 130, 246, 0.22);
}
.pr-punch-link strong {
  color: var(--text);
}
.pr-att-mini strong {
  color: var(--text);
  font-weight: 700;
}
.pr-att-mini small {
  font-size: 10px;
  color: var(--text-muted);
}
.pr-att-row.focus-active {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 10px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.pr-att-row.focus-dim {
  opacity: 0.5;
}
.pr-att-row.compact {
  padding: 10px 12px;
}
.pr-att-row.compact .pr-att-grid {
  display: none !important;
}
.pr-att-row.compact .pr-att-mini {
  display: flex;
}
.pr-att-row.compact .pr-att-panel.ot,
.pr-att-row.compact .pr-att-panel.add,
.pr-att-row.compact .pr-att-panel.deduct {
  display: none;
}
.pr-att-panel {
  border-radius: 8px;
  padding: 10px;
}
.pr-att-panel-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.pr-att-panel.days   { background: #f0f9ff; }
.pr-att-panel.ot     { background: #f0fdf4; }
.pr-att-panel.add    { background: #fefce8; }
.pr-att-panel.deduct { background: #fff1f2; }
.pr-att-panel.days   .pr-att-panel-title { color: #0369a1; }
.pr-att-panel.ot     .pr-att-panel-title { color: #15803d; }
.pr-att-panel.add    .pr-att-panel-title { color: #a16207; }
.pr-att-panel.deduct .pr-att-panel-title { color: #be123c; }
[data-theme="dark"] .pr-att-panel.days   { background: rgba(59,130,246,.1); }
[data-theme="dark"] .pr-att-panel.ot     { background: rgba(34,197,94,.1); }
[data-theme="dark"] .pr-att-panel.add    { background: rgba(234,179,8,.1); }
[data-theme="dark"] .pr-att-panel.deduct { background: rgba(239,68,68,.1); }
[data-theme="dark"] .pr-att-panel.days   .pr-att-panel-title { color: #7dd3fc; }
[data-theme="dark"] .pr-att-panel.ot     .pr-att-panel-title { color: #86efac; }
[data-theme="dark"] .pr-att-panel.add    .pr-att-panel-title { color: #fcd34d; }
[data-theme="dark"] .pr-att-panel.deduct .pr-att-panel-title { color: #fca5a5; }
.pr-att-label {
  font-size: 12px;
  color: var(--text, #374151);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.pr-att-label-stack {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}
.pr-att-auto-note {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(14, 116, 144, 0.08);
  color: #0f172a;
  font-size: 11px;
  line-height: 1.4;
}
.pr-att-auto-note > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pr-att-auto-note strong {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  min-width: 60px;
}
[data-theme="dark"] .pr-att-auto-note {
  background: rgba(125, 211, 252, 0.14);
  color: var(--text, #e5e7eb);
}
.pr-att-unit { font-size: 11px; color: var(--text-muted, #6b7280); }
.pr-att-loan-hint {
  font-size: 11px;
  color: var(--c-info, #3b82f6);
  background: var(--c-info-bg, #eff6ff);
  border-radius: 4px;
  padding: 3px 6px;
}
.pr-att-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.pr-att-priority-badge.high {
  color: #7f1d1d;
  background: #fee2e2;
}
.pr-att-priority-badge.medium {
  color: #78350f;
  background: #fef3c7;
}
.pr-att-priority-badge.low {
  color: #14532d;
  background: #dcfce7;
}
[data-theme="dark"] .pr-att-row.focus-active {
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.32), 0 14px 24px rgba(2, 6, 23, 0.45);
}
[data-theme="dark"] .pr-att-mini span {
  background: rgba(148, 163, 184, 0.16);
}
[data-theme="dark"] .pr-punch-link {
  background: rgba(96, 165, 250, 0.18);
}
[data-theme="dark"] .pr-punch-link:hover {
  background: rgba(96, 165, 250, 0.28);
}

.pr-punch-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pr-punch-weekhead,
.pr-punch-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.pr-punch-weekhead {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.pr-punch-day {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px;
  min-height: 64px;
  background: var(--bg-card);
}
.pr-punch-day.empty {
  border: none;
  background: transparent;
  min-height: 64px;
}
.pr-punch-day.present {
  background: #ecfdf5;
  border-color: #86efac;
}
.pr-punch-day.missing {
  background: #fef3c7;
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.25);
}
.pr-punch-day.missing .pr-punch-day-status {
  color: #78350f;
  font-weight: 700;
}
.pr-punch-day.late {
  background: #fee2e2;
  border-color: #f87171;
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.45);
}
.pr-punch-day.late .pr-punch-day-status {
  color: #991b1b;
  font-weight: 700;
}
.pr-punch-day.no-data {
  background: #f8fafc;
}
.pr-punch-day.before-joining {
  background: transparent;
  border-color: var(--border-light);
  opacity: 0.45;
}
.pr-punch-day.holiday {
  background: #dbeafe;
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.28);
}
.pr-punch-day.week-off,
.pr-punch-day.weekend {
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.pr-punch-day-num {
  font-size: 12px;
  font-weight: 700;
}
.pr-punch-day-status {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.pr-punch-day-time {
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.35;
  white-space: normal;
}
.pr-punch-day-worked {
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-punch-calendar .pr-punch-weekhead,
.modal-punch-calendar .pr-punch-grid {
  gap: 7px;
}
.modal-punch-calendar .pr-punch-day {
  min-height: 98px;
}

@media (max-width: 1100px) {
  .modal-punch-calendar {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
  }
  .modal-punch-calendar .pr-punch-weekhead,
  .modal-punch-calendar .pr-punch-grid {
    gap: 6px;
  }
  .modal-punch-calendar .pr-punch-day {
    min-height: 92px;
  }
}
.pr-punch-day-holiday {
  font-size: 10px;
  font-weight: 700;
  color: #1d4ed8;
  margin-top: 2px;
}
.pr-punch-day-weekoff {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  margin-top: 2px;
}
[data-theme="dark"] .pr-punch-day.present {
  background: rgba(22, 163, 74, 0.22);
  border-color: rgba(34, 197, 94, 0.5);
}
[data-theme="dark"] .pr-punch-day.missing {
  background: rgba(217, 119, 6, 0.35);
  border-color: rgba(251, 191, 36, 0.85);
  box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.35);
}
[data-theme="dark"] .pr-punch-day.missing .pr-punch-day-status {
  color: #fde68a;
}
[data-theme="dark"] .pr-punch-day.late {
  background: rgba(127, 29, 29, 0.45);
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.55);
}
[data-theme="dark"] .pr-punch-day.late .pr-punch-day-status {
  color: #fecaca;
}
[data-theme="dark"] .pr-punch-day.no-data {
  background: rgba(51, 65, 85, 0.55);
}
[data-theme="dark"] .pr-punch-day.holiday {
  background: rgba(30, 58, 138, 0.4);
  border-color: rgba(96, 165, 250, 0.85);
  box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.4);
}
[data-theme="dark"] .pr-punch-day-weekoff {
  color: #cbd5e1;
}
[data-theme="dark"] .pr-punch-day-holiday {
  color: #bfdbfe;
}
[data-theme="dark"] .pr-att-priority-badge.high {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.2);
}
[data-theme="dark"] .pr-att-priority-badge.medium {
  color: #fde68a;
  background: rgba(217, 119, 6, 0.24);
}
[data-theme="dark"] .pr-att-priority-badge.low {
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.24);
}

/* ── Attendance cutoff warning ── */
.pr-att-cutoff-warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.pr-att-cutoff-warn strong { color: #9a3412; }
.pr-att-cutoff-warn p { font-size: 13px; color: #c2410c; margin: 0; }
[data-theme="dark"] .pr-att-cutoff-warn {
  background: rgba(234,88,12,.12);
  border-color: rgba(234,88,12,.3);
}
[data-theme="dark"] .pr-att-cutoff-warn strong { color: #fb923c; }
[data-theme="dark"] .pr-att-cutoff-warn p { color: #fdba74; }

/* ── Payroll reports aligned with Clinic Reports selector cards ── */
.payroll-report-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.payroll-report-box {
  position: relative;
  overflow: hidden;
  text-align: left;
  border: 1.5px solid var(--border);
  background: linear-gradient(140deg, color-mix(in srgb, var(--bg-card) 95%, white 5%) 0%, var(--bg-card) 100%);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.payroll-report-box::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -36px;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
  pointer-events: none;
}
.payroll-report-box:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-lg), var(--surface-glow);
  transform: translateY(-2px);
}
.payroll-report-box:focus,
.payroll-report-box:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 25%, transparent);
}
.payroll-report-box-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 7px;
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
.payroll-report-box-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.report-select-box-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.report-select-box-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Payroll report card icons ── */
.pr-rci.blue   { background: #eff6ff; }
.pr-rci.green  { background: #f0fdf4; }
.pr-rci.red    { background: #fff1f2; }
.pr-rci.purple { background: #f5f3ff; }
.pr-rci.yellow { background: #fefce8; }
.pr-rci.teal   { background: #ecfdf5; }
.pr-rci.pink   { background: #fdf2f8; }
.pr-rci.sky    { background: #f0f9ff; }
.pr-rci.orange { background: #fff7ed; }
.pr-rci.amber  { background: #fffbeb; }
.pr-rci.violet { background: #fdf4ff; }
[data-theme="dark"] .pr-rci.blue   { background: rgba(59,130,246,.15); }
[data-theme="dark"] .pr-rci.green  { background: rgba(34,197,94,.15); }
[data-theme="dark"] .pr-rci.red    { background: rgba(239,68,68,.15); }
[data-theme="dark"] .pr-rci.purple { background: rgba(139,92,246,.15); }
[data-theme="dark"] .pr-rci.yellow { background: rgba(234,179,8,.15); }
[data-theme="dark"] .pr-rci.teal   { background: rgba(20,184,166,.15); }
[data-theme="dark"] .pr-rci.pink   { background: rgba(236,72,153,.15); }
[data-theme="dark"] .pr-rci.sky    { background: rgba(14,165,233,.15); }
[data-theme="dark"] .pr-rci.orange { background: rgba(249,115,22,.15); }
[data-theme="dark"] .pr-rci.amber  { background: rgba(245,158,11,.15); }
[data-theme="dark"] .pr-rci.violet { background: rgba(168,85,247,.15); }

/* ── Report catalog toolbar (search + category tabs) ── */
.pr-report-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.pr-report-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pr-report-search-row input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input, var(--bg-card));
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: var(--transition);
}
.pr-report-search-row input[type="search"]:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 20%, transparent);
}
.pr-cat-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pr-cat-tab {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.pr-cat-tab:hover { color: var(--text); border-color: var(--c-primary); }
.pr-cat-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-weight: 600;
}

/* ── Report parameter panel ── */
.pr-params-panel {
  background: var(--bg-card);
  flex-wrap: nowrap;
  gap: 10px;
  padding: 24px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  max-width: none;
}
.pr-params-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
  flex: 0 0 170px;
  border-bottom: 1px solid var(--border);
}
.pr-params-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border-radius: 10px;
  flex-shrink: 0;
}
.pr-params-title { font-size: 17px; font-weight: 700; color: var(--text); }
.pr-params-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pr-params-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 2px;
}
.pr-params-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.pr-params-field.full { flex: 0 0 auto; }
.pr-params-field label {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pr-params-field input,
.pr-params-field select {
  height: 38px;
  width: 180px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input, var(--bg));
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: var(--transition);
}
.pr-params-field input:focus,
.pr-params-field select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 20%, transparent);
}
.pr-params-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0;
  margin-left: auto;
  flex: 0 0 auto;
}
.pr-params-actions .btn { height: 38px; white-space: nowrap; }

/* Tune specific report controls so one-line filters stay readable */
.pr-params-field #rp_emp { width: 300px; }
.pr-params-field #rp_from,
.pr-params-field #rp_to,
.pr-params-field #rp_month { width: 170px; }
.pr-params-field #rp_year,
.pr-params-field #rp_days { width: 130px; }
.pr-params-note {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 10px;
}
/* ── Back breadcrumb in report output ── */
.pr-back-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pr-back-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pr-back-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pr-change-params-btn {
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--c-primary) 26%, var(--border) 74%);
  color: var(--c-primary-dark);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}
.pr-change-params-btn:hover {
  background: color-mix(in srgb, var(--c-primary-bg) 68%, var(--bg-card) 32%);
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--border) 60%);
  color: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.pr-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
}

/* ── Dark theme overrides for report catalog & params panel ── */
[data-theme="dark"] .pr-report-search-row input[type="search"] {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .pr-params-panel {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .pr-params-field input,
[data-theme="dark"] .pr-params-field select {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .pr-params-note {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
[data-theme="dark"] .pr-back-btn {
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .pr-cat-tab {
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .pr-cat-tab:hover {
  color: var(--text);
  border-color: var(--c-primary);
}
[data-theme="dark"] .pr-cat-tab.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* ── Payroll guide card ── */
.pr-guide-card {
  background: var(--bg-card, #f9f7f4);
  border: 1px solid var(--border, #e8dcc8);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--text, #333);
}
.pr-guide-title {
  font-size: 18px; font-weight: 700;
  color: var(--text, #5a4a40);
  margin-bottom: 16px;
}
.pr-guide-step-title {
  font-size: 16px; font-weight: 600;
  color: var(--text, #5a4a40);
  margin-bottom: 12px;
}
.pr-guide-step-body {
  background: var(--bg-hover, white);
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid var(--c-warning, #d4a574);
}
.pr-guide-tips {
  background: var(--c-warning-bg, #fffbf0);
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid var(--c-warning, #e8a87c);
}
.pr-guide-tips p { margin: 0; font-weight: 600; color: var(--text, #5a4a40); }
.pr-guide-tips ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-secondary, #555); }

/* ── Payroll summary table rows ── */
.pr-tfoot-row { font-weight: 700; background: var(--bg-hover, #f9fafb); }

/* ── Payroll loan progress bar ── */
.pr-loan-bar-track {
  margin-top: 3px;
  background: var(--border, #e5e7eb);
  border-radius: 4px;
  height: 5px;
  width: 80px;
}
.pr-loan-bar-fill {
  background: var(--c-success, #22c55e);
  height: 5px;
  border-radius: 4px;
}

/* ── Payroll leave encash info box ── */
.pr-info-box {
  background: var(--c-info-bg, #f0f9ff);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text, #1e293b);
}

/* ── Employee attachment list ── */
.pr-att-file-icon {
  font-size: 10px; font-weight: 700;
  min-width: 34px; text-align: center;
  background: var(--c-primary-bg, #eef2ff);
  color: var(--text, #374151);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  padding: 2px 4px;
  margin-top: 2px;
}
.pr-att-meta { font-size: 11px; color: var(--text-muted, #888); }

/* ═══════════════════════════════════════════════════════════
   MOTION GRAPHICS LAYER
   Rich, cohesive animation system layered over the design
   system. Everything below is additive and respects
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

/* ── Motion tokens ── */
:root {
  --mo-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mo-out: cubic-bezier(.16, 1, .3, 1);
  --mo-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ══════════ 1. SPLASH — animated gradient + breathing logo ══════════ */
.app-splash {
  background: linear-gradient(120deg, #4338ca, #7c3aed, #c026d3, #7c3aed, #4338ca);
  background-size: 300% 300%;
  animation: moGradientDrift 6s ease-in-out infinite;
}
.app-splash-logo {
  animation: splashPop .5s var(--mo-spring) both, moFloat 3s 0.6s ease-in-out infinite;
}
.app-splash-name {
  animation: splashPop .55s .05s var(--mo-spring) both, moTextGlow 2.4s 0.7s ease-in-out infinite;
}
.app-splash.fade-out {
  transition: opacity .45s ease, visibility .45s ease, transform .45s var(--mo-inout);
  transform: scale(1.06);
  /* stop the infinite gradient once dismissed — the element stays
     in the DOM as visibility:hidden and would keep ticking */
  animation: none;
}
.app-splash.fade-out .app-splash-logo,
.app-splash.fade-out .app-splash-name { animation: none; }
@keyframes moGradientDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes moFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes moTextGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(255,255,255,.25); }
  50% { text-shadow: 0 0 34px rgba(255,255,255,.6); }
}

/* ══════════ 2. LOGIN — aurora background, floating orbs, staggered card ══════════ */
.login-wrapper {
  background: linear-gradient(130deg, #4f46e5, #7c3aed, #a78bfa, #6366f1, #4f46e5);
  background-size: 400% 400%;
  animation: moGradientDrift 14s ease-in-out infinite;
}
.login-bg-art::before,
.login-bg-art::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: transform;
}
.login-bg-art::before {
  width: 46vmax; height: 46vmax;
  left: -12vmax; top: -14vmax;
  background: radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 70%);
  animation: moOrbA 18s ease-in-out infinite;
}
.login-bg-art::after {
  width: 38vmax; height: 38vmax;
  right: -10vmax; bottom: -12vmax;
  background: radial-gradient(circle, rgba(192,38,211,.5) 0%, rgba(192,38,211,0) 70%);
  animation: moOrbB 22s ease-in-out infinite;
}
@keyframes moOrbA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(9vmax, 6vmax) scale(1.15); }
  66% { transform: translate(3vmax, 12vmax) scale(.9); }
}
@keyframes moOrbB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-8vmax, -9vmax) scale(1.2); }
  70% { transform: translate(-13vmax, -2vmax) scale(.95); }
}
.login-card {
  animation: moCardDrop .7s var(--mo-spring) both;
  transition: box-shadow .4s ease, transform .4s var(--mo-out);
}
.login-card:hover {
  box-shadow: 0 40px 90px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.2);
}
@keyframes moCardDrop {
  from { opacity: 0; transform: translateY(42px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-brand-logo { animation: moFloat 4.5s 1s ease-in-out infinite; }
.login-brand h1,
.login-brand .login-sub,
.login-card .form-group,
.login-card .btn-full {
  animation: moRiseIn .55s var(--mo-out) both;
}
.login-brand h1 { animation-delay: .12s; }
.login-brand .login-sub { animation-delay: .2s; }
.login-card .form-group:nth-of-type(1) { animation-delay: .28s; }
.login-card .form-group:nth-of-type(2) { animation-delay: .36s; }
.login-card .btn-full { animation-delay: .44s; }
.login-copyright { animation: moRiseIn .6s .6s var(--mo-out) both; }
@keyframes moRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sign-in button shine sweep */
.login-card .btn-primary { position: relative; overflow: hidden; }
.login-card .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: moShine 3.2s 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes moShine {
  0% { left: -80%; }
  28% { left: 130%; }
  100% { left: 130%; }
}

/* ══════════ 3. PAGE TRANSITIONS — content sweeps in with stagger ══════════ */
@keyframes fadeContent {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
#contentArea { animation-duration: .45s; animation-timing-function: var(--mo-out); }
#contentArea > * { animation: moRiseIn .5s var(--mo-out) both; }
#contentArea > *:nth-child(1) { animation-delay: .03s; }
#contentArea > *:nth-child(2) { animation-delay: .09s; }
#contentArea > *:nth-child(3) { animation-delay: .15s; }
#contentArea > *:nth-child(4) { animation-delay: .21s; }
#contentArea > *:nth-child(5) { animation-delay: .27s; }
#contentArea > *:nth-child(n+6) { animation-delay: .32s; }

/* Page title swap */
.mo-title-swap { animation: moTitleSwap .4s var(--mo-out) both; }
@keyframes moTitleSwap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ 4. STAT CARDS — staggered pop, hover lift, alert pulse ══════════ */
.stats-grid .stat-card,
.stats-grid-sm .stat-card-sm {
  animation: moPopIn .55s var(--mo-spring) both;
  transition: transform .25s var(--mo-out), box-shadow .25s ease, border-color .25s ease;
}
.stats-grid .stat-card:nth-child(1), .stats-grid-sm .stat-card-sm:nth-child(1) { animation-delay: .05s; }
.stats-grid .stat-card:nth-child(2), .stats-grid-sm .stat-card-sm:nth-child(2) { animation-delay: .12s; }
.stats-grid .stat-card:nth-child(3), .stats-grid-sm .stat-card-sm:nth-child(3) { animation-delay: .19s; }
.stats-grid .stat-card:nth-child(4), .stats-grid-sm .stat-card-sm:nth-child(4) { animation-delay: .26s; }
.stats-grid .stat-card:nth-child(5), .stats-grid-sm .stat-card-sm:nth-child(5) { animation-delay: .33s; }
.stats-grid .stat-card:nth-child(n+6), .stats-grid-sm .stat-card-sm:nth-child(n+6) { animation-delay: .4s; }
@keyframes moPopIn {
  from { opacity: 0; transform: translateY(18px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--surface-glow); }
.stat-card-sm:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card-alert { animation: moPopIn .55s var(--mo-spring) both, moAlertPulse 2.4s 1s ease-in-out infinite; }
@keyframes moAlertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,.12); }
}

/* ══════════ 5. CARDS & TABLES ══════════ */
.card {
  transition: transform .25s var(--mo-out), box-shadow .25s ease;
}
#contentArea tbody tr {
  animation: moRowIn .3s var(--mo-out) both;
  transition: background-color .18s ease;
}
#contentArea tbody tr:nth-child(1) { animation-delay: .02s; }
#contentArea tbody tr:nth-child(2) { animation-delay: .05s; }
#contentArea tbody tr:nth-child(3) { animation-delay: .08s; }
#contentArea tbody tr:nth-child(4) { animation-delay: .11s; }
#contentArea tbody tr:nth-child(5) { animation-delay: .14s; }
#contentArea tbody tr:nth-child(6) { animation-delay: .17s; }
#contentArea tbody tr:nth-child(7) { animation-delay: .2s; }
#contentArea tbody tr:nth-child(8) { animation-delay: .23s; }
#contentArea tbody tr:nth-child(n+9) { animation-delay: .26s; }
/* Large lists: skip animating beyond the first screenful so
   thousand-row tables render at full speed */
#contentArea tbody tr:nth-child(n+26) { animation: none; }
@keyframes moRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ 6. SIDEBAR NAV — indicator glide + micro-interactions ══════════ */
.nav-module-btn { transition: background .2s ease, color .2s ease, transform .18s var(--mo-out); }
.nav-module-btn:active { transform: scale(.97); }
.nav-module-arrow { transition: transform .3s var(--mo-spring); }
.nav-subitem {
  transition: background .18s ease, color .18s ease, transform .18s var(--mo-out);
}
.nav-subitem:hover { transform: translateX(3px); }
.nav-subitem:active { transform: translateX(3px) scale(.98); }
.nav-sub-dot { transition: transform .25s var(--mo-spring), background .2s ease, box-shadow .25s ease; }
.nav-subitem:hover .nav-sub-dot { transform: scale(1.5); }
.nav-subitem.active .nav-sub-dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent);
}
.nav-count-badge { animation: moBadgePop .4s var(--mo-spring) both; }
@keyframes moBadgePop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════ 7. PAGE TABS — chip pop-in ══════════ */
.page-tab {
  animation: moTabIn .35s var(--mo-spring) both;
  transition: background .2s ease, color .2s ease, transform .18s var(--mo-out), box-shadow .2s ease;
}
.page-tab:hover { transform: translateY(-1px); }
.page-tab:active { transform: translateY(0) scale(.97); }
@keyframes moTabIn {
  from { opacity: 0; transform: translateY(6px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════ 8. BUTTONS — lift, press, ripple ══════════ */
.btn {
  position: relative;
  overflow: hidden;
  /* overflow:hidden (ripple containment) zeroes the flex min-size,
     letting flex/table cells crush buttons; restore the nowrap
     text-width floor buttons had when overflow was visible */
  min-width: max-content;
  transition: transform .18s var(--mo-out), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1.5px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primary) 40%, transparent); }
.btn-icon { transition: transform .2s var(--mo-spring), background .2s ease, color .2s ease; }
.btn-icon:hover { transform: scale(1.12); }
.btn-icon:active { transform: scale(.94); }
.mo-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .25;
  transform: scale(0);
  animation: moRipple .55s var(--mo-out) forwards;
  pointer-events: none;
}
@keyframes moRipple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ══════════ 9. MODALS — spring pop + blurred overlay ══════════ */
.modal-overlay {
  animation: moOverlayIn .3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes moOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal { animation: moModalIn .42s var(--mo-spring); }
@keyframes moModalIn {
  from { opacity: 0; transform: translateY(30px) scale(.93); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════ 10. INPUTS — focus glow ══════════ */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.input-icon { transition: color .2s ease, transform .25s var(--mo-spring); }
.input-icon-wrap:focus-within .input-icon { color: var(--c-primary); transform: scale(1.12); }

/* ══════════ 11. THEME SWITCH — smooth crossfade ══════════ */
html.mo-theme-switching,
html.mo-theme-switching *,
html.mo-theme-switching *::before,
html.mo-theme-switching *::after {
  transition: background-color .4s ease, background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}

/* ══════════ 12. AVATAR ══════════ */
.avatar { transition: transform .25s var(--mo-spring), box-shadow .25s ease; }
.topbar-user-wrap:hover .avatar { transform: scale(1.1) rotate(-4deg); }

/* ══════════ 13. REDUCED MOTION — switch it all off ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Leave entries table: sticky header inside its own scroll container */
.leave-entries-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-hover, #eef2f7);
}

/* ═══════════════════ LANGUAGE TOGGLE + RTL (Arabic) ═══════════════════
   The UI is translated incrementally: any string without a translation still
   renders in English, so partial coverage looks intentional rather than broken.
   These rules mirror the app shell when <html dir="rtl"> is set. */

.topbar-lang-btn {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-width: 34px;
}

/* --- Shell mirroring --------------------------------------------------- */
[dir="rtl"] body { text-align: right; }

/* Sidebar moves to the right edge and the content shifts across. */
[dir="rtl"] #sidebar { left: auto; right: 0; }
[dir="rtl"] .main-wrapper { margin-left: 0; margin-right: var(--sidebar-w, 260px); }
[dir="rtl"] .sidebar-overlay { left: 0; right: 0; }

/* Collapse arrow and close icon point the other way. */
[dir="rtl"] .sidebar-collapse svg,
[dir="rtl"] .nav-module-chevron { transform: scaleX(-1); }

/* Tables, forms and lists read right-to-left. */
[dir="rtl"] th,
[dir="rtl"] td { text-align: right; }
[dir="rtl"] .form-group label { text-align: right; }
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea { text-align: right; }
/* Keep machine-readable values left-to-right even in Arabic: phone numbers,
   money, dates and IDs are misread when mirrored. */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .code-id,
[dir="rtl"] .mono,
[dir="rtl"] .stat-value { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* Toolbars, action bars and button rows flip their order. */
[dir="rtl"] .action-bar,
[dir="rtl"] .apt-actions,
[dir="rtl"] .td-actions > div,
[dir="rtl"] .modal-footer,
[dir="rtl"] .bill-filter-group,
[dir="rtl"] .sidebar-footer-actions,
[dir="rtl"] .topbar-right { flex-direction: row-reverse; }

/* The page-tab strip and its close button. */
[dir="rtl"] #pageTabs { flex-direction: row-reverse; }
[dir="rtl"] .page-tab { flex-direction: row-reverse; }

/* Nav items: icon on the right, active marker on the right edge. */
[dir="rtl"] .nav-subitem,
[dir="rtl"] .nav-module-btn { flex-direction: row-reverse; }
[dir="rtl"] .nav-subitem { border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .nav-subitem.active { border-right-color: var(--c-primary); }

@media (max-width: 768px) {
  [dir="rtl"] .main-wrapper { margin-right: 0; }
}

/* Collapsed sidebar, border side, and the mobile off-canvas slide all need
   mirroring too — these are set with physical properties elsewhere. */
[dir="rtl"] #sidebar { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] body.sidebar-collapsed .main-wrapper { margin-left: 0; margin-right: 74px; }
@media (max-width: 768px) {
  [dir="rtl"] #sidebar { transform: translateX(100%); }
  [dir="rtl"] #sidebar.open { transform: translateX(0); }
}

/* ── Appointment booking: patient snapshot (new/returning + history at a glance) ── */
.apt-snap { margin-top: 10px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.apt-snap.is-new { border-left-color: var(--c-success); }
.apt-snap.is-ret { border-left-color: var(--c-primary); }
[dir="rtl"] .apt-snap { border-left: 1px solid var(--border); border-right: 4px solid var(--border); }
[dir="rtl"] .apt-snap.is-new { border-right-color: var(--c-success); }
[dir="rtl"] .apt-snap.is-ret { border-right-color: var(--c-primary); }
.apt-snap-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.apt-snap-badge { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; padding: 4px 10px; border-radius: 100px; color: #fff; white-space: nowrap; }
.apt-snap-badge.new { background: var(--c-success); }
.apt-snap-badge.ret { background: var(--c-primary); }
.apt-snap-meta { font-size: 12px; color: var(--text-muted, #888); }
.apt-snap-link { margin-left: auto; font-size: 12px; color: var(--c-primary); cursor: pointer; font-weight: 600; }
[dir="rtl"] .apt-snap-link { margin-left: 0; margin-right: auto; }
.apt-snap-link:hover { text-decoration: underline; }
.apt-snap-rows { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.apt-snap-row { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.apt-snap-lbl { color: var(--text-muted, #888); min-width: 96px; flex: none; }
.apt-snap-val { font-weight: 600; }
.apt-snap-row.tone-danger .apt-snap-val { color: var(--c-danger); }
.apt-snap-row.tone-ok .apt-snap-val { color: var(--c-success); }
.apt-snap-row.tone-primary .apt-snap-val { color: var(--c-primary); }
.apt-snap-loading { padding: 10px 12px; font-size: 12px; color: var(--text-muted, #888); }

/* ── Recurring / multi-date appointment booking ── */
.recur-wrap { display: flex; flex-direction: column; gap: 12px; }
.recur-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--bg-hover); border-radius: 8px; }
.recur-quick label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.recur-cal { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.recur-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.recur-cal-title { font-weight: 700; }
.recur-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.recur-dow { margin-bottom: 2px; }
.recur-dow-cell { text-align: center; font-size: 11px; color: var(--text-muted, #888); padding: 4px 0; font-weight: 600; }
.recur-day { height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; font-size: 13px; border: 1px solid transparent; user-select: none; font-variant-numeric: tabular-nums; }
.recur-day:hover:not(.past):not(.empty) { background: var(--bg-hover); border-color: var(--border); }
.recur-day.empty { cursor: default; }
.recur-day.past { color: var(--text-muted, #888); opacity: .4; cursor: not-allowed; }
.recur-day.today { border-color: var(--c-primary); }
.recur-day.sel { background: var(--c-primary); color: #fff; font-weight: 700; }
.recur-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recur-chip { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.recur-chip-x { cursor: pointer; color: var(--c-danger); font-weight: 800; }
.recur-day.off { color: var(--c-danger); cursor: not-allowed; opacity: .8; background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(239,68,68,.12) 4px, rgba(239,68,68,.12) 8px); }
.recur-day.off:hover { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(239,68,68,.12) 4px, rgba(239,68,68,.12) 8px); border-color: transparent; }

/* ── Doctor days off / leave (Setup → Doctor Schedules) ── */
.ds-off-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ds-off-add .form-group { margin: 0; flex: 1 1 130px; min-width: 130px; }
.ds-off-add .ds-off-reason { flex: 2 1 160px; }
.ds-off-add > .btn { margin-bottom: 2px; }
.ds-off-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ds-off-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--border); border-left: 3px solid var(--c-danger); border-radius: 8px; font-size: 13px; background: var(--bg-card); }
.ds-off-item.past { opacity: .55; border-left-color: var(--border); }
.ds-off-range { font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-off-days { font-size: 12px; color: var(--text-muted, #888); }
.ds-off-why { flex: 1; min-width: 80px; }
.ds-off-x { margin-left: auto; border: 0; background: none; color: var(--c-danger); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
[dir="rtl"] .ds-off-item { border-left: 1px solid var(--border); border-right: 3px solid var(--c-danger); }
[dir="rtl"] .ds-off-item.past { border-right-color: var(--border); }
[dir="rtl"] .ds-off-x { margin-left: 0; margin-right: auto; }
.ds-off-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; background: rgba(239,68,68,.12); color: var(--c-danger); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ── Doctor weekly timings: holiday + own hours per weekday ── */
.ds-week { display: flex; flex-direction: column; gap: 6px; }
.ds-week-row { display: grid; grid-template-columns: minmax(84px, 1fr) 64px minmax(108px, 1.3fr) minmax(108px, 1.3fr) 28px; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.ds-week-row.ds-week-head { border: 0; background: none; padding: 0 9px; font-size: 11.5px; font-weight: 700; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: .3px; }
.ds-week-head span:nth-child(2) { text-align: center; }
.ds-week-day { font-weight: 600; font-size: 13px; }
.ds-week .ds-week-off { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; cursor: pointer; }
.ds-week-off-txt { display: none; font-size: 12.5px; font-weight: 500; }
.ds-week-row input[type="time"] { padding: 6px 8px; font-size: 13px; }
.ds-week-row.is-custom { border-left: 3px solid var(--c-primary); padding-left: 6px; background: rgba(99,102,241,.06); }
.ds-week-row.is-off { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(239,68,68,.06) 6px, rgba(239,68,68,.06) 12px); }
.ds-week-row.is-off .ds-week-day { color: var(--c-danger); }
.ds-week-row.is-off input[type="time"] { opacity: .45; }
.ds-week-row.is-invalid input[type="time"] { border-color: var(--c-danger); }
.ds-week-reset { border: 0; background: none; color: var(--c-primary); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px; visibility: hidden; }
.ds-week-row.is-custom .ds-week-reset { visibility: visible; }
[dir="rtl"] .ds-week-row.is-custom { border-left: 1px solid var(--border); border-right: 3px solid var(--c-primary); padding-left: 8px; padding-right: 6px; }
.ds-hours-extra { font-size: 12px; color: var(--c-primary); font-weight: 600; margin-top: 2px; white-space: nowrap; }
@media (max-width: 560px) {
  .ds-week-row.ds-week-head { display: none; }
  .ds-week-row { grid-template-columns: 1fr 1fr 28px; grid-template-areas: "day off reset" "start end ."; row-gap: 6px; padding: 6px 8px; }
  .ds-week-day { grid-area: day; }
  .ds-week .ds-week-off { grid-area: off; justify-content: flex-start; }
  .ds-week-off-txt { display: inline; }
  .ds-wk-start { grid-area: start; }
  .ds-wk-end { grid-area: end; }
  .ds-week-reset { grid-area: reset; }
}

/* ── WhatsApp: clear message log dialog ── */
.wa-clear-opts { display: flex; flex-direction: column; gap: 6px; }
.wa-clear-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin: 0; font-weight: 500; }
.wa-clear-opt:has(input:checked) { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 6%, transparent); }
.wa-clear-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.wa-clear-opt input { width: auto; margin: 0; }
.wa-clear-count { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
[dir="rtl"] .wa-clear-count { margin-left: 0; margin-right: auto; }

/* ── Email Reports page ── */
.er-section-title { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; }
.er-schedule { display: flex; flex-direction: column; gap: 8px; }
.er-sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.er-sched-row input[type="time"], .er-sched-row select { width: auto; min-width: 120px; padding: 6px 8px; }
.er-sched-on { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 92px; margin: 0; cursor: pointer; }
.er-sched-hint { font-size: 12px; color: var(--text-muted); }
.er-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.er-actions select { width: auto; min-width: 130px; }
.er-actions-sep { flex: 1 1 0; min-width: 0; }
.er-preview { display: block; width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; background: #f3f4f8; }

/* Recurring calendar: a picked date that no longer fits the doctor's hours */
.recur-day.sel.off, .recur-day.sel.off:hover { background: var(--c-danger); color: #fff; opacity: 1; cursor: pointer; }
.recur-chip.warn { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.5); color: var(--c-danger); }
.recur-warn { margin-top: 6px; font-size: 12px; color: var(--c-danger); }

/* ══════════ CTMS Payroll edition ══════════
   Applied when <html data-edition="payroll"> (set from the signed licence).
   The clinic edition never matches these selectors, so its purple brand is untouched. */
html:not([data-edition="payroll"]) .ed-payroll { display: none !important; }
html[data-edition="payroll"] .ed-clinic { display: none !important; }

html[data-edition="payroll"] {
  --c-primary: #0d9488;
  --c-primary-light: #2dd4bf;
  --c-primary-dark: #0f766e;
  --c-primary-bg: #e6f6f4;
  --bg-active: #e3f4f1;
}
html[data-edition="payroll"][data-theme="dark"] {
  --c-primary: #2dd4bf;
  --c-primary-light: #5eead4;
  --c-primary-dark: #14b8a6;
  --c-primary-bg: #134e4a;
  --bg-active: #16403d;
}
html[data-edition="payroll"] .app-splash {
  background: linear-gradient(120deg, #0f766e, #0d9488, #0891b2, #0d9488, #0f766e);
  background-size: 400% 400%;
}
html[data-edition="payroll"] .login-wrapper {
  background: linear-gradient(130deg, #0f766e, #0d9488, #5eead4, #0891b2, #0f766e);
  background-size: 400% 400%;
}
html[data-edition="payroll"] .login-brand h1,
html[data-edition="payroll"] .logo-text {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-edition="payroll"] .btn-primary:hover { box-shadow: 0 4px 14px rgba(13,148,136,.45); }
html[data-edition="payroll"] .brand-logo-image { filter: drop-shadow(0 10px 22px rgba(13,148,136,.22)); }
html[data-edition="payroll"] .logo-text { font-size: 17px; letter-spacing: 1.5px; white-space: nowrap; }
.sidebar-brand img.ed-payroll { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }

/* Payroll dashboard */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.pd-trend { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 6px; }
.pd-trend-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 6px; cursor: default; }
.pd-trend-val { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; min-height: 16px; }
.pd-trend-track { flex: 1 1 auto; width: 100%; max-width: 44px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border); }
.pd-trend-bar { width: 100%; background: var(--c-primary); border-radius: 4px 4px 0 0; transition: filter var(--transition); }
.pd-trend-col:hover .pd-trend-bar { filter: brightness(1.12); }
.pd-trend-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.pd-sr-table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pd-bars { display: grid; gap: 10px; }
.pd-bar-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 36px; align-items: center; gap: 10px; }
.pd-bar-name { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bar-track { height: 10px; background: var(--bg-hover); border-radius: 999px; overflow: hidden; }
.pd-bar-fill { height: 100%; background: var(--c-primary); border-radius: 999px; }
.pd-bar-num { font-size: 13px; font-weight: 700; color: var(--text); text-align: right; }
.pd-days { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pd-days.pd-overdue { background: var(--c-danger-bg); color: var(--c-danger); }
.pd-days.pd-soon { background: var(--c-warning-bg); color: #b45309; }
.pd-days.pd-later { background: var(--c-info-bg); color: var(--c-info); }
[data-theme="dark"] .pd-days.pd-soon { color: #fbbf24; }