/* ═══════════════════════════════════════════════════════════════════
   DentalPro Design System
   Font: Plus Jakarta Sans (headings) + DM Sans (body)
   Theme: Clinical teal-slate, crisp and professional
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --primary:       #0d9488;
  --primary-dark:  #0f766e;
  --primary-light: #ccfbf1;
  --secondary:     #64748b;
  --success:       #16a34a;
  --danger:        #dc2626;
  --warning:       #d97706;
  --info:          #2563eb;
  --purple:        #7c3aed;

  --bg:            #f1f5f9;
  --surface:       #ffffff;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --text-light:    #94a3b8;

  --sidebar-w:     240px;
  --sidebar-bg:    #0f172a;
  --sidebar-text:  #94a3b8;
  --sidebar-hover: #1e293b;
  --sidebar-active:#0d9488;

  --topbar-h:      56px;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,.08);
  --transition:    all .18s ease;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  line-height: 1.5;
}

/* ── App Shell ──────────────────────────────────────────────────────── */
.app-shell { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  transition: width .22s ease;
  z-index: 100;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-icon {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
  flex-shrink:0;
}

.brand-text { min-width:0; }
.brand-name  { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; color:#f8fafc; }
.brand-tenant{ display:block; font-size:11px; color:var(--sidebar-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-nav  { flex:1; padding: 12px 0; }
.nav-section-label {
  font-size: 10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-light); padding: 14px 16px 4px;
}

.nav-item {
  display: flex; align-items:center; gap:10px;
  padding: 10px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 0;
  transition: var(--transition);
  font-size: 13.5px;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.nav-item:hover { background:var(--sidebar-hover); color:#f8fafc; }
.nav-item.active {
  background: rgba(13,148,136,.15);
  color: #2dd4bf;
  border-left-color: var(--primary);
}
.nav-item i { width:18px; text-align:center; font-size:14px; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px;
}

.user-chip  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.user-avatar {
  width:32px; height:32px;
  background:var(--primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}
.user-info   { min-width:0; }
.user-name   { display:block; color:#f1f5f9; font-size:13px; font-weight:600;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role   { display:block; color:var(--sidebar-text); font-size:11px; }

.logout-btn {
  color:var(--sidebar-text); font-size:16px; flex-shrink:0;
  transition:var(--transition); text-decoration:none;
}
.logout-btn:hover { color:#f87171; }

/* ── Main Wrap ──────────────────────────────────────────────────────── */
.main-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center; gap:16px;
  padding: 0 24px;
  flex-shrink:0;
}

.sidebar-toggle {
  background:none; border:none; cursor:pointer; font-size:18px;
  color:var(--secondary); display:none; padding:4px;
}

.topbar-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px; font-weight:700; color:var(--text); flex:1;
}

.topbar-date { color:var(--text-muted); font-size:13px; }
.topbar-date i { margin-right:5px; }
.topbar-right { display:flex; align-items:center; gap:16px; }

/* ── Page Content ───────────────────────────────────────────────────── */
.page-content { flex:1; overflow-y:auto; padding:24px; }

/* ── Card ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card + .card, .card.mt-3, .mt-3 { margin-top:16px; }
.card.mt-4 { margin-top:20px; }

.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.card-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.card-title i { color:var(--primary); }

/* ── Table ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.data-table {
  width:100%; border-collapse:collapse;
  font-size:13.5px;
}
.data-table thead tr { background:#f8fafc; }
.data-table th {
  text-align:left; padding:10px 16px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td {
  padding:11px 16px; border-bottom:1px solid var(--border);
  color:var(--text);
}
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#f8fafc; }
.data-table tfoot tr { background:#f1f5f9; }
.data-table tfoot td {
  padding:12px 16px; font-weight:700;
  border-top:2px solid var(--border-strong);
}
.table-totals td { color:var(--primary-dark); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:20px; white-space:nowrap;
}
.badge-success   { background:#dcfce7; color:#15803d; }
.badge-secondary { background:#f1f5f9; color:#64748b; }
.badge-info      { background:#dbeafe; color:#1d4ed8; }
.badge-warning   { background:#fef9c3; color:#a16207; }
.badge-danger    { background:#fee2e2; color:#b91c1c; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid transparent;
  text-decoration:none; transition:var(--transition);
  white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:var(--surface); color:var(--secondary); border-color:var(--border-strong); }
.btn-secondary:hover { background:#f1f5f9; }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover { background:var(--primary-light); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-block { width:100%; justify-content:center; }

.btn-icon {
  padding:6px 8px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--border);
  color:var(--secondary); font-size:13px;
  transition:var(--transition);
}
.btn-edit:hover   { background:#eff6ff; color:var(--info); border-color:var(--info); }
.btn-delete:hover { background:#fef2f2; color:var(--danger); border-color:var(--danger); }
.btn-xs { padding:3px 6px; font-size:11px; }

.action-cell { white-space:nowrap; text-align:right; width:1%; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-body { padding:20px; }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.form-row { display:flex; gap:14px; flex-wrap:wrap; }
.col-1 { flex:1; min-width:60px; }
.col-2 { flex:2; min-width:80px; }
.col-3 { flex:3; min-width:100px; }
.col-4 { flex:4; min-width:120px; }
.col-5 { flex:5; }
.col-6 { flex:6; min-width:140px; }

label { font-size:12px; font-weight:600; color:var(--text-muted); }
.required { color:var(--danger); }

.form-control {
  padding:8px 11px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  font-size:13.5px;
  background:var(--surface);
  color:var(--text);
  transition:var(--transition);
  outline:none;
  width:100%;
  font-family:inherit;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.form-control[readonly] { background:#f8fafc; color:var(--text-muted); }
.form-control-sm { padding:5px 9px; font-size:12.5px; }
textarea.form-control { resize:vertical; }

.form-actions { display:flex; gap:10px; margin-top:6px; }

.section-divider {
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border);
  padding-bottom:6px; margin:16px 0 10px;
}

/* Toggle checkbox */
.toggle-wrap { display:flex; align-items:center; gap:10px; }
.toggle-input { width:36px; height:20px; cursor:pointer; accent-color:var(--primary); }
.toggle-label { font-size:13px; font-weight:600; color:var(--text); }

/* Input with icon */
.input-icon-wrap { position:relative; }
.input-icon-wrap > i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none; }
.input-icon-wrap .form-control { padding-left:34px; }
.pwd-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted); padding:2px; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius-sm);
  margin-bottom:16px; font-size:13.5px; font-weight:500;
}
.alert-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.alert-error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.validation-summary { background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:14px; font-size:13px; }
.field-error { color:var(--danger); font-size:11.5px; }

/* ── Permissions Table ──────────────────────────────────────────────── */
.permissions-table td:not(:first-child) { width:80px; }
.perm-check { width:16px; height:16px; cursor:pointer; accent-color:var(--primary); }

/* ── Dashboard KPI ──────────────────────────────────────────────────── */
.kpi-row { display:flex; gap:14px; flex-wrap:wrap; }
.kpi-card {
  flex:1; min-width:160px;
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.kpi-icon { font-size:22px; width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; line-height:1.1; }
.kpi-label { font-size:11.5px; color:var(--text-muted); font-weight:500; margin-top:2px; }

.kpi-blue   .kpi-icon { background:#eff6ff; color:#2563eb; }
.kpi-green  .kpi-icon { background:#f0fdf4; color:#16a34a; }
.kpi-teal   .kpi-icon { background:#f0fdfa; color:#0d9488; }
.kpi-purple .kpi-icon { background:#f5f3ff; color:#7c3aed; }
.kpi-orange .kpi-icon { background:#fff7ed; color:#ea580c; }

/* ── Front Desk Layout ──────────────────────────────────────────────── */
.frontdesk-layout { display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start; }

.fd-search-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.mr-badge-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mr-badge {
  background:var(--sidebar-bg); color:#2dd4bf;
  font-family:'Courier New',monospace; font-size:15px; font-weight:700;
  padding:6px 14px; border-radius:6px; letter-spacing:.05em;
}

/* Patient picture */
.picture-row { align-items:center; }
.patient-pic-wrap { position:relative; width:90px; height:90px; }
.patient-pic-wrap img {
  width:90px; height:90px; border-radius:50%;
  object-fit:cover; border:3px solid var(--border-strong);
}
.pic-actions {
  position:absolute; bottom:-6px; right:-6px;
  display:flex; gap:3px;
}
.pic-actions .btn { padding:4px 6px; font-size:12px; background:var(--surface); border:1px solid var(--border-strong); border-radius:50%; }

/* Service grid */
.service-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px;
  padding:14px 16px;
}
.service-tile {
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 10px; cursor:pointer; text-align:center;
  transition:var(--transition);
  background:var(--surface);
}
.service-tile:hover { border-color:var(--primary); background:var(--primary-light); }
.service-tile.selected {
  border-color:var(--primary); background:#f0fdfa;
  box-shadow:0 0 0 2px rgba(13,148,136,.2);
}
.service-tile-icon { color:var(--primary); font-size:20px; margin-bottom:6px; }
.service-tile-name { font-weight:700; font-size:12px; margin-bottom:4px; line-height:1.3; }
.service-tile-price { font-size:13px; font-weight:700; color:var(--primary-dark); }
.service-tile-share { font-size:10px; color:var(--text-muted); }

/* Payment Summary */
.payment-summary {
  background:#f8fafc; border-radius:var(--radius-sm);
  padding:12px 16px; margin:12px 0;
  border:1px solid var(--border);
}
.pay-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:13.5px; }
.pay-total { border-top:1.5px solid var(--border-strong); margin-top:4px; padding-top:8px; font-size:16px; }

/* ── Login Page ─────────────────────────────────────────────────────── */
.login-page { background:var(--bg); }
.login-split { display:flex; min-height:100vh; }

.login-visual {
  width:420px; flex-shrink:0;
  background:linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px;
  position:relative; overflow:hidden;
}
.login-visual::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:280px; height:280px; border-radius:50%;
  background:rgba(13,148,136,.12);
}
.login-visual::after {
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(13,148,136,.08);
}

.login-visual-content { position:relative; z-index:1; color:#fff; }
.login-logo-mark {
  width:56px; height:56px; background:var(--primary);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:20px;
}
.login-visual h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; margin-bottom:8px; }
.login-visual p  { color:rgba(255,255,255,.65); font-size:15px; margin-bottom:28px; }
.login-features  { list-style:none; }
.login-features li { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.8); font-size:14px; margin-bottom:10px; }
.login-features li i { color:#2dd4bf; font-size:13px; }

.login-form-side { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.login-box { width:100%; max-width:400px; }
.login-header { margin-bottom:28px; }
.login-header h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; color:var(--text); }
.login-header p  { color:var(--text-muted); margin-top:4px; }
.login-hint { margin-top:16px; text-align:center; font-size:12px; color:var(--text-muted); }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.modal {
  background:var(--surface); border-radius:var(--radius);
  width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-md);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.modal-header h4 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); }
.modal-body  { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ── Empty State ────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; }
.empty-icon  { font-size:48px; color:var(--border-strong); margin-bottom:16px; }
.empty-state h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700; margin-bottom:6px; }
.empty-state p  { color:var(--text-muted); margin-bottom:20px; }

/* ── Utility ────────────────────────────────────────────────────────── */
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.text-muted   { color:var(--text-muted); }
.text-danger  { color:var(--danger); }
.mono         { font-family:'Courier New',monospace; font-size:12.5px; }

/* ── Report Filters ─────────────────────────────────────────────────── */
.report-filters { border-bottom:1px solid var(--border); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .frontdesk-layout { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .sidebar { position:fixed; left:-240px; top:0; bottom:0; transition:left .22s ease; }
  .sidebar.open { left:0; }
  .sidebar-toggle { display:flex; }
  .main-wrap { width:100%; }
  .login-visual { display:none; }
  .kpi-card { min-width:140px; }
}

/* ── Print styles ───────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .alert, .report-filters, .no-print { display:none !important; }
  .main-wrap { display:block; }
  .page-content { padding:0; }
  .card { border:none; box-shadow:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FRONT DESK  –  Full-width modal redesign
   ═══════════════════════════════════════════════════════════════════ */

/* Override the old two-column layout */
.frontdesk-layout { display: block !important; }

/* ── Main container ─────────────────────────────────────────────── */
.fd-main { display: flex; flex-direction: column; gap: 16px; }

/* ── Top Action Bar ─────────────────────────────────────────────── */
.fd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.fd-topbar-left { display: flex; align-items: center; gap: 0; flex: 1; }
.fd-search-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.fd-search-group .input-icon-wrap { flex: 1; min-width: 160px; max-width: 240px; }

.btn-add-patient {
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
  white-space: nowrap;
}
.btn-add-patient i { font-size: 15px; }

/* ── No-patient hint ────────────────────────────────────────────── */
.no-patient-hint {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
}
.no-patient-hint i { font-size: 48px; color: var(--border-strong); display: block; margin-bottom: 14px; }
.no-patient-hint p { font-size: 14px; }

/* ── Patient Strip ──────────────────────────────────────────────── */
.patient-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
  border-left: 4px solid var(--primary);
}
.patient-strip-avatar img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
}
.patient-strip-info { flex: 1; min-width: 0; }
.patient-strip-name {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 800;
  margin-bottom: 6px;
}
.patient-strip-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 12.5px; color: var(--text-muted);
}
.patient-strip-meta span { display: flex; align-items: center; gap: 5px; }
.patient-strip-meta i   { color: var(--primary); font-size: 11px; }
.patient-strip-actions  { flex-shrink: 0; }

/* ── Billing Grid ───────────────────────────────────────────────── */
.fd-billing-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}

.fd-services-card .service-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.fd-payment-card .form-body { padding: 20px; }

/* ── Patient Modal ──────────────────────────────────────────────── */
.patient-modal {
  max-width: 680px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  animation: modalSlideIn .22s ease;
}

@keyframes modalSlideIn {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-title-icon {
  width: 38px; height: 38px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.modal-title-row h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800;
  margin-bottom: 2px;
}

.mr-badge-inline {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.mr-badge-val {
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 2px 8px; border-radius: 4px;
}

/* Photo row inside modal */
.modal-photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.modal-photo-hint { font-size: 12px; color: var(--text-muted); line-height: 1.8; }

/* ── Toast notification ─────────────────────────────────────────── */
.fd-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(12px);
  transition: all .25s ease;
  max-width: 380px;
}
.fd-toast.show { opacity: 1; transform: translateY(0); }
.fd-toast-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.fd-toast-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.fd-toast-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.fd-toast-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fd-billing-grid { grid-template-columns: 1fr; }
  .fd-payment-card { order: -1; }
  .patient-strip   { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .fd-topbar        { flex-direction: column; align-items: stretch; }
  .fd-topbar-right  { display: flex; justify-content: flex-end; }
  .fd-search-group .input-icon-wrap { max-width: 100%; }
}

/* ── Visit Pin badge ────────────────────────────────────────────── */
.visit-pin {
  display: inline-flex;
  align-items: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 20px;
  letter-spacing: .04em;
}

/* ── Services cell truncate ─────────────────────────────────────── */
.services-cell {
  max-width: 220px;
}
.services-cell span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE TILES v2 — #7: icon left, name middle, price right
   ═══════════════════════════════════════════════════════════════════ */
.service-grid-v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}

.svc-tile-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--surface);
  transition: var(--transition);
}
.svc-tile-v2:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.svc-tile-v2.selected {
  border-color: var(--primary);
  background: #f0fdfa;
  box-shadow: 0 0 0 2px rgba(13,148,136,.18);
}

.svc-tile-icon {
  width: 36px; height: 36px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.svc-tile-v2.selected .svc-tile-icon {
  background: var(--primary);
  color: #fff;
}

.svc-tile-body {
  flex: 1;
  min-width: 0;
}
.svc-tile-name {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-tile-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svc-tile-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Previous Balance warning row ────────────────────────────────── */
.prev-balance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #c2410c;
  margin-bottom: 12px;
}
.prev-balance-row i { font-size: 15px; }

/* ── Hint box (info note in forms) ──────────────────────────────── */
.hint-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  color: #1e40af;
  margin-bottom: 12px;
}
.hint-box i { margin-right: 6px; }
.hint-box a { color: #1d4ed8; font-weight: 600; }

/* ── Input with suffix (e.g. % sign) ────────────────────────────── */
.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-suffix {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 15px;
}

/* ── Field hint (small label sub-text) ──────────────────────────── */
.field-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ── Invoice info strip (edit page header) ──────────────────────── */
.invoice-info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.iis-item {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 4px 0;
  min-width: 100px;
}
.iis-item span:first-child {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ROLE / USER CONFIG MODALS
   ═══════════════════════════════════════════════════════════════════ */

/* Role modal — wider to fit permission matrix */
.role-modal {
  max-width: 780px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  animation: modalSlideIn .2s ease;
}

/* User config modal */
.user-config-modal {
  max-width: 600px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  animation: modalSlideIn .2s ease;
}

/* Loading spinner inside modal body */
.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.modal-loading i { font-size: 20px; color: var(--primary); }

/* Permission matrix inside modal */
.perm-matrix-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.perm-matrix-wrap .data-table th { font-size: 11px; padding: 8px 12px; }
.perm-matrix-wrap .data-table td { padding: 8px 12px; }

.perm-module-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Larger clickable checkboxes in permission table */
.perm-check {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* Modal title row */
.modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-title-row h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE GRID v3 — Compact multi-column with search
   ═══════════════════════════════════════════════════════════════════ */

/* Search bar row */
.svc-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
}
.svc-search-bar .input-icon-wrap { flex: 1; }

/* Compact grid — 3 columns by default */
.svc-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px;
  max-height: 380px;
  overflow-y: auto;
}

/* Individual compact tile */
.svc-tile-compact {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--surface);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.svc-tile-compact:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(13,148,136,.12);
}
.svc-tile-compact.selected {
  border-color: var(--primary);
  background: #f0fdfa;
  box-shadow: 0 0 0 2px rgba(13,148,136,.2);
}

/* Icon inside compact tile */
.svc-tc-icon {
  width: 30px; height: 30px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: var(--transition);
}
.svc-tile-compact.selected .svc-tc-icon {
  background: var(--primary);
  color: #fff;
}

/* Name + price stack */
.svc-tc-body { flex: 1; min-width: 0; }
.svc-tc-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.svc-tc-price {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-top: 1px;
}

/* Checkmark shown when selected */
.svc-tc-check {
  font-size: 15px;
  color: var(--primary);
  opacity: 0;
  transition: opacity .15s ease;
  flex-shrink: 0;
}
.svc-tile-compact.selected .svc-tc-check { opacity: 1; }

/* No-results message */
.svc-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.svc-no-results i { margin-right: 6px; color: var(--danger); }

/* Responsive: 2 cols on narrower billing panel */
@media (max-width: 1200px) {
  .svc-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .svc-grid-compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .svc-grid-compact { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   TOP-NAV LAYOUT  —  replaces sidebar shell
   Keeps the same teal-slate colour theme, new horizontal structure
   ═══════════════════════════════════════════════════════════════════ */

body.topnav-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

/* ── Row 1: Header bar (brand + user) ──────────────────────────── */
.tn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 52px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Brand */
.tn-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.tn-brand-icon {
  width: 34px; height: 34px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
}
.tn-brand-name {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.tn-brand-tenant {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Right side of header */
.tn-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.tn-date {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tn-date i { color: var(--primary); }

/* User chip */
.tn-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 5px 10px 5px 5px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: var(--transition);
  user-select: none;
}
.tn-user-chip:hover { background: #f1f5f9; border-color: var(--border-strong); }

.tn-user-avatar {
  width: 30px; height: 30px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.tn-user-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.tn-user-role {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
}
.tn-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.tn-chevron-open { transform: rotate(180deg); }

/* User dropdown */
.tn-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
  animation: ddFadeIn .15s ease;
}

/* ── Row 2: Nav bar ────────────────────────────────────────────── */
.tn-navbar {
  background: var(--sidebar-bg);   /* same dark bg as old sidebar */
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 46px;
  flex-shrink: 0;
  position: sticky;
  top: 52px;
  z-index: 190;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.tn-nav-items {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.tn-nav-items::-webkit-scrollbar { display: none; }

/* Nav link / button */
.tn-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 46px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  font-family: 'DM Sans', sans-serif;
  border-radius: 0;
  flex-shrink: 0;
}
.tn-nav-item i { font-size: 13px; }
.tn-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.tn-nav-item.tn-active {
  color: #2dd4bf;
  border-bottom-color: #2dd4bf;
  background: rgba(45,212,191,.08);
  font-weight: 600;
}
/* dropdown open state */
.tn-nav-btn.dd-open {
  color: #fff;
  background: rgba(255,255,255,.10);
}
.tn-dd-chevron {
  font-size: 9px;
  margin-left: 2px;
  opacity: .7;
  transition: transform .2s ease;
}
.tn-nav-btn.dd-open .tn-dd-chevron { transform: rotate(180deg); }

/* Dropdown wrapper */
.tn-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Dropdown menu */
.tn-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 9999;
  overflow: hidden;
  animation: ddFadeIn .15s ease;
}
@keyframes ddFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown items */
.tn-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
  border-bottom: 1px solid var(--border);
}
.tn-dd-item:last-child { border-bottom: none; }
.tn-dd-item i { color: var(--primary); font-size: 13px; width: 16px; text-align: center; }
.tn-dd-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.tn-dd-item.tn-dd-active { background: #f0fdfa; color: var(--primary); font-weight: 700; }
.tn-dd-item.tn-dd-danger { color: var(--danger); }
.tn-dd-item.tn-dd-danger i { color: var(--danger); }
.tn-dd-item.tn-dd-danger:hover { background: #fef2f2; }

/* ── Page area ─────────────────────────────────────────────────── */
.tn-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.tn-page-titlebar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 28px;
  display: flex;
  align-items: center;
}
.tn-page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.tn-content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

/* ── Mobile hamburger ──────────────────────────────────────────── */
.tn-hamburger {
  display: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tn-hamburger { display: flex; align-items: center; justify-content: center; }
  .tn-nav-items {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 98px;   /* header + navbar height */
    left: 0; right: 0;
    background: var(--sidebar-bg);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    z-index: 999;
    padding: 8px 0;
    gap: 0;
    height: auto;
    max-height: calc(100vh - 98px);
    overflow-y: auto;
  }
  .tn-nav-items.tn-nav-open { display: flex; }
  .tn-nav-item { height: auto; padding: 13px 20px; width: 100%; justify-content: flex-start; }
  .tn-nav-dropdown { flex-direction: column; width: 100%; }
  .tn-dd-menu {
    position: static;
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    box-shadow: none;
    background: rgba(255,255,255,.04);
  }
  .tn-dd-item { padding: 11px 32px; }
  .tn-date { display: none; }
  .tn-user-info { display: none; }
  .tn-content { padding: 16px; }
  .tn-page-titlebar { padding: 10px 16px; }
}

/* ── Hide old sidebar styles when in topnav mode ─────────────────── */
body.topnav-layout .app-shell,
body.topnav-layout .sidebar,
body.topnav-layout .main-wrap,
body.topnav-layout .topbar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   TOP-NAV v2 — Fixed dropdowns, 5-col service grid
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────── */
.tn-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff; border-bottom: 1px solid var(--border);
  padding: 0 24px; height: 52px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.tn-brand { display:flex; align-items:center; gap:10px; }
.tn-brand-icon { width:34px;height:34px;background:var(--primary);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px; }
.tn-brand-name { display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;
  font-weight:800;color:var(--text);line-height:1.1; }
.tn-brand-tenant { display:block;font-size:10.5px;color:var(--text-muted); }
.tn-header-right { display:flex;align-items:center;gap:16px;position:relative; }
.tn-date { font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px; }
.tn-date i { color:var(--primary); }

/* User chip */
.tn-user-chip { display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:5px 10px 5px 5px;border-radius:30px;border:1px solid var(--border);
  background:var(--surface);transition:var(--transition);user-select:none; }
.tn-user-chip:hover { background:#f1f5f9; }
.tn-user-avatar { width:30px;height:30px;background:var(--primary);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px; }
.tn-user-name { display:block;font-size:13px;font-weight:700;color:var(--text);line-height:1.2; }
.tn-user-role { display:block;font-size:10.5px;color:var(--text-muted); }
.tn-chevron { font-size:10px;color:var(--text-muted);transition:transform .2s; }
.tn-chevron-open { transform:rotate(180deg); }

/* User dropdown popup */
.tn-user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  z-index:9999; display:none;
}
.tn-user-dropdown.open { display:block; }
.tn-dd-menu-popup {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  min-width:180px;overflow:hidden;
  animation:ddFadeIn .15s ease;
}
.tn-dd-user-header {
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:#f8fafc;
}
.tn-dd-user-header strong { display:block;font-size:13px;color:var(--text); }
.tn-dd-user-header span  { font-size:11px;color:var(--text-muted); }
.tn-dd-popup-item {
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;
  transition:var(--transition);
}
.tn-dd-popup-item:hover { background:#f1f5f9; }
.tn-dd-popup-item.tn-dd-danger { color:var(--danger); }
.tn-dd-popup-item.tn-dd-danger:hover { background:#fef2f2; }

/* ── Nav bar ─────────────────────────────────────────────────────── */
.tn-navbar {
  background: var(--sidebar-bg);
  display: flex; align-items: center;
  padding: 0 12px; height: 44px;
  position: sticky; top: 52px; z-index: 290;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.tn-nav-items {
  display:flex; align-items:center; gap:0; flex:1;
  overflow-x:auto; scrollbar-width:none;
}
.tn-nav-items::-webkit-scrollbar { display:none; }

/* Plain nav link */
.tn-nav-link {
  display:inline-flex; align-items:center; gap:7px;
  padding:0 15px; height:44px;
  color:rgba(255,255,255,.75); text-decoration:none;
  font-size:13px; font-weight:500;
  background:none; border:none; cursor:pointer;
  border-bottom:3px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
  font-family:'DM Sans',sans-serif; white-space:nowrap; flex-shrink:0;
}
.tn-nav-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.tn-nav-link.tn-active {
  color:#2dd4bf; border-bottom-color:#2dd4bf;
  background:rgba(45,212,191,.09); font-weight:600;
}
.tn-nav-link.dd-open { color:#fff; background:rgba(255,255,255,.1); }
.tn-nav-dd-btn { /* same as tn-nav-link */ }

/* Dropdown wrap — must be relative so panel positions correctly */
.tn-nav-dd-wrap {
  position:relative; display:inline-flex; align-items:center;
}

/* Dropdown panel */
.tn-nav-dd-panel {
  display:none;
  position:absolute;
  top:100%; left:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--primary);
  border-radius:0 0 8px 8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  min-width:210px;
  z-index:9999;
  overflow:hidden;
  animation:ddFadeIn .14s ease;
}
.tn-nav-dd-panel.open { display:block; }

@keyframes ddFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Panel items */
.tn-dd-panel-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px;
  font-size:13.5px; font-weight:500;
  color:var(--text); text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.tn-dd-panel-item:last-child { border-bottom:none; }
.tn-dd-panel-item i { color:var(--primary); font-size:13px; width:16px; text-align:center; }
.tn-dd-panel-item:hover { background:var(--primary-light); color:var(--primary-dark); }
.tn-dd-panel-item.tn-ddp-active { background:#f0fdfa; color:var(--primary); font-weight:700; }

/* ── Page ────────────────────────────────────────────────────────── */
.tn-page { flex:1; display:flex; flex-direction:column; }
.tn-page-titlebar {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 24px; display:flex; align-items:center;
}
.tn-page-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px;
  font-weight:700; color:var(--text); }
.tn-content { flex:1; padding:20px 24px; overflow-y:auto; }

/* Hamburger */
.tn-hamburger { display:none;background:none;border:none;color:rgba(255,255,255,.8);
  font-size:18px;cursor:pointer;padding:8px;margin-right:4px; }

/* ── Service grid: 5 columns ─────────────────────────────────────── */
.svc-grid-compact {
  grid-template-columns: repeat(5, 1fr) !important;
  max-height: 340px;
}
.svc-tc-name { font-size: 11.5px; }
.svc-tc-price { font-size: 11px; }
.svc-tile-compact { padding: 8px 9px; gap: 7px; }
.svc-tc-icon { width:26px;height:26px;font-size:12px;border-radius:6px; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width:860px) {
  .tn-hamburger { display:flex;align-items:center;justify-content:center; }
  .tn-nav-items {
    display:none; flex-direction:column; align-items:stretch;
    position:fixed; top:96px; left:0; right:0; bottom:0;
    background:var(--sidebar-bg); z-index:9998;
    padding:8px 0; overflow-y:auto;
  }
  .tn-nav-items.tn-nav-open { display:flex; }
  .tn-nav-link { height:auto; padding:13px 20px; width:100%; justify-content:flex-start; }
  .tn-nav-dd-wrap { flex-direction:column; width:100%; }
  .tn-nav-dd-panel {
    position:static; border:none; border-top:1px solid rgba(255,255,255,.08);
    border-radius:0; box-shadow:none;
    background:rgba(255,255,255,.05); animation:none;
  }
  .tn-dd-panel-item { padding:11px 32px; color:rgba(255,255,255,.8); }
  .tn-dd-panel-item i { color:rgba(255,255,255,.5); }
  .tn-dd-panel-item:hover { background:rgba(255,255,255,.08); color:#fff; }
  .tn-date,.tn-user-info { display:none; }
  .tn-content { padding:14px 16px; }
  .svc-grid-compact { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:500px) {
  .svc-grid-compact { grid-template-columns:repeat(2,1fr) !important; }
}

/* Hide old sidebar shell */
body.topnav-layout .app-shell,
body.topnav-layout .sidebar,
body.topnav-layout .main-wrap { display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HISTORY MODAL + MULTI-PATIENT + REPORT SUMMARY BAR
   ═══════════════════════════════════════════════════════════════════ */

/* History modal — wide, scrollable table */
.history-modal {
  max-width: 1000px;
  width: 96%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn .2s ease;
}
.history-modal .modal-body { flex: 1; overflow-y: auto; padding: 0; }
.history-modal .data-table { min-width: 780px; }

/* ── Multi-patient selection wrap ────────────────────────────────── */
.multi-patient-wrap { margin-top: 0; }
.multi-patient-list { display: flex; flex-direction: column; gap: 0; }

.mp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.mp-row:last-child { border-bottom: none; }
.mp-row:hover { background: var(--primary-light); }

.mp-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
}
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.mp-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--text-muted);
}
.mp-meta i { color: var(--primary); margin-right: 3px; }

/* Patient strip action buttons spacing */
.patient-strip-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Report summary bar ──────────────────────────────────────────── */
.report-summary-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-muted);
}
.report-summary-bar strong { color: var(--text); font-weight: 700; }
.report-summary-bar span.text-danger strong { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════
   NAV DROPDOWN FIX — prevent page content from clipping dropdowns
   ═══════════════════════════════════════════════════════════════════ */

/* The full page shell must NOT clip overflow so dropdowns can escape */
body.topnav-layout {
  overflow-x: hidden;
}

/* Header and navbar must sit above everything */
.tn-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
}

.tn-navbar {
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Push page content down to clear the fixed bars */
.tn-page {
  margin-top: 96px !important;   /* 52px header + 44px navbar */
  overflow: visible !important;
}

/* Page content area must NOT create a new stacking context via overflow */
.tn-content {
  overflow-y: visible !important;
  overflow-x: visible !important;
  min-height: calc(100vh - 96px - 41px);
}

/* Dropdown panel must always float above everything */
.tn-nav-dd-panel {
  position: fixed !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* User dropdown also needs to be above all */
.tn-user-dropdown {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Scrollable content wrapper inside tn-content for pages that need scroll */
.tn-scroll-wrap {
  overflow-y: auto;
  height: calc(100vh - 137px);
  padding: 0;
}

/* Override old relative positioning on dropdown wrap — panel is now fixed */
.tn-nav-dd-wrap {
  position: static !important;
}
.tn-nav-dd-panel {
  top: 96px !important;  /* default fallback, overridden by JS */
  left: 0   !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAV DROPDOWN POSITION FIX v2
   ═══════════════════════════════════════════════════════════════════ */

/* Remove the forced left:0 override — JS sets the correct position */
.tn-nav-dd-panel {
  top:  96px !important;
  left: 0    !important;  /* JS overrides this via inline style */
  min-width: 210px;
}

/* Allow inline style to win over !important by using the attribute selector */
.tn-nav-dd-panel[style] {
  top:  unset !important;
  left: unset !important;
}

/* ── Final nav panel position rules — JS inline style wins ──────── */
.tn-nav-dd-panel.open {
  display: block;
  position: fixed;
  z-index: 99999;
  /* top and left set by JS getBoundingClientRect — no CSS override */
}

/* ═══════════════════════════════════════════════════════════════════
   PATIENT REGISTRATION MODAL — final clean version
   4 fields per row, full viewport centered, above nav
   ═══════════════════════════════════════════════════════════════════ */

/* Backdrop — sits ABOVE fixed nav bars (z-index 10000/9999) */
.pm-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;        /* higher than nav (10000) */
  background: rgba(0,0,0,.6) !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
/* JS sets style="display:flex" to open */
.pm-backdrop[style*="flex"] {
  display: flex !important;
}

/* Modal box */
.pm-modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);    /* top+bottom margin from viewport */
  margin: 60px auto;                  /* 60px top margin clears nav bars */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pmIn .2s ease;
}
@keyframes pmIn {
  from { transform: translateY(-20px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}

/* Header */
.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.pm-header h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

/* Scrollable body */
.pm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Photo strip */
.pm-photo-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* 4-column grid */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
  margin-bottom: 12px;
}

/* 3-column grid for last row */
.pm-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Compact labels & inputs inside modal */
.pm-body label        { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pm-body .form-control { font-size: 13px; padding: 7px 10px; }
.pm-body .form-group   { margin-bottom: 0; }

/* Footer */
.pm-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

/* Responsive */
@media (max-width: 900px)  {
  .pm-grid   { grid-template-columns: repeat(2, 1fr); }
  .pm-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pm-modal  { width: calc(100vw - 24px); margin: 70px 12px 12px; }
}
@media (max-width: 500px) {
  .pm-grid   { grid-template-columns: 1fr; }
  .pm-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE MODAL
   ═══════════════════════════════════════════════════════════════════ */
.svc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.svc-modal-backdrop.svc-modal-open {
  display: flex;
}
.svc-modal-box {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  margin: 70px auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: svcModalIn .2s ease;
}
@keyframes svcModalIn {
  from { transform: translateY(-16px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}
.svc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.svc-modal-header h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}
.svc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.svc-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   REPORT PRINT STYLES  — A4 for Patient Info + Patient Visit
   ═══════════════════════════════════════════════════════════════════ */

/* Screen-only: print header hidden */
.rpt-print-header  { display: none; }
.rpt-summary-print { display: none; }

/* Report table: allow to wrap across pages */
.rpt-table { font-size: 11px; }
.rpt-table th, .rpt-table td { padding: 5px 7px; }

/* ── @print rules ────────────────────────────────────────────────── */
@media print {

  /* A4 page */
  @page { size: A4 landscape; margin: 10mm 8mm; }

  /* Hide everything not needed */
  .no-print,
  .tn-header,
  .tn-navbar,
  .tn-page-titlebar,
  .report-summary-bar,
  .svc-search-bar,
  .fd-topbar,
  button,
  .btn   { display: none !important; }

  /* Remove page chrome */
  body   { background: #fff !important; }
  .tn-page  { margin-top: 0 !important; }
  .tn-content { padding: 0 !important; overflow: visible !important; }
  .card  {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .table-wrap { overflow: visible !important; }

  /* Show print-only elements */
  .rpt-print-header  { display: block; text-align: center; margin-bottom: 6mm; }
  .rpt-clinic-name   { font-size: 16pt; font-weight: 800; letter-spacing: 1px; }
  .rpt-report-title  { font-size: 13pt; font-weight: 600; margin: 1mm 0; }
  .rpt-meta          { font-size: 9pt; color: #555; }

  .rpt-summary-print {
    display: flex;
    gap: 8mm;
    flex-wrap: wrap;
    font-size: 9pt;
    font-weight: 600;
    border: 1px solid #ccc;
    padding: 3mm 5mm;
    margin-bottom: 4mm;
    border-radius: 3px;
  }

  /* Table for print */
  .rpt-table {
    font-size: 8pt;
    width: 100%;
    border-collapse: collapse;
  }
  .rpt-table th {
    background: #1e293b !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 4px 6px;
    font-size: 8pt;
  }
  .rpt-table td { padding: 3px 6px; border-bottom: 1px solid #e5e7eb; }
  .rpt-table tfoot tr { font-weight: 700; border-top: 2px solid #000; }

  /* Keep rows together when possible */
  .rpt-table tr { page-break-inside: avoid; }
  .rpt-table thead { display: table-header-group; }
  .rpt-table tfoot { display: table-footer-group; }

  /* Badges print in color */
  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Services cell wraps in print */
  .services-cell span { white-space: normal !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLE ALIGNMENT — global fix for all data-table instances
   ═══════════════════════════════════════════════════════════════════ */

/* Base reset: consistent font, padding, vertical alignment */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.data-table th,
.data-table td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.data-table thead th {
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #475569;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-strong);
}
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tfoot tr {
  background: #f1f5f9;
  border-top: 2px solid var(--border-strong);
}
.data-table tfoot td { padding: 10px 14px; font-weight: 700; }

/* ── Semantic alignment classes ──────────────────────────────────── */
/* Numbers / amounts → right-align both header AND data */
.data-table th.text-right,
.data-table td.text-right { text-align: right !important; }

/* Centered items: badges, checkboxes, short codes */
.data-table th.text-center,
.data-table td.text-center { text-align: center !important; }

/* ── Column-type rules ───────────────────────────────────────────── */

/* Row counter # — always narrow + center */
.data-table td:first-child:not(.no-first),
.data-table th:first-child:not(.no-first) {
  /* don't force width; just let content dictate */
}

/* Serial number cell */
.col-serial {
  text-align: center !important;
  width: 42px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Action buttons cell — flex row, right-aligned, no wrap */
.data-table td.action-cell {
  display: table-cell !important;   /* override old display:flex */
  white-space: nowrap;
  text-align: right;
  width: 1%;                        /* shrink to content */
  padding-right: 10px;
}
.data-table td.action-cell .btn-icon { margin-left: 4px; }
.data-table td.action-cell .btn-icon:first-child { margin-left: 0; }

/* Status badge cell — centered */
.data-table td .badge { display: inline-flex; }

/* MR No / Invoice No — monospace, no wrap */
.data-table td .mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: nowrap;
}

/* Visit pin badge */
.data-table td .visit-pin {
  display: inline-block;
  text-align: center;
  min-width: 36px;
}

/* Date cells — no wrap */
.data-table td.col-date,
.data-table td[data-col="date"] { white-space: nowrap; }

/* Services cell — truncate with ellipsis */
.data-table td.services-cell {
  max-width: 220px;
}
.data-table td.services-cell span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Amount cells — tabular numbers, right-align */
.data-table td.amount,
.data-table th.amount {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Permissions table (Role form) */
.permissions-table th,
.permissions-table td { padding: 8px 12px; }
.permissions-table th:first-child,
.permissions-table td:first-child { text-align: left; }
.permissions-table td:not(:first-child) { text-align: center; }

/* ── Report tables ───────────────────────────────────────────────── */
.rpt-table th,
.rpt-table td { padding: 8px 12px; }
.rpt-table th { font-size: 10.5px; }
.rpt-table td.text-right,
.rpt-table th.text-right { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-table td.text-center,
.rpt-table th.text-center { text-align: center !important; }

/* ── Selected services mini-table (FrontDesk billing) ───────────── */
.data-table.billing-services td:nth-child(2) { text-align: right; }
.data-table.billing-services td:nth-child(3) { text-align: center; width: 40px; }

/* ═══════════════════════════════════════════════════════════════════
   TABLE ALIGNMENT — final overrides & fixes
   ═══════════════════════════════════════════════════════════════════ */

/* Fix action-cell: must be table-cell not flex */
.data-table .action-cell {
  display: table-cell !important;
  text-align: right;
  white-space: nowrap;
  width: 1%;
  padding-right: 10px;
  vertical-align: middle;
}
.data-table .action-cell .btn-icon + .btn-icon { margin-left: 4px; }

/* Serial number column */
.data-table .col-serial {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  width: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.data-table th.col-serial { text-align: center; }

/* Status badge — center in both th and td */
.data-table td.text-center .badge { vertical-align: middle; }

/* Visit pin — always center */
.data-table td .visit-pin {
  display: inline-block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* Amount columns — tabular nums, no wrap */
.data-table td.text-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th.text-right { white-space: nowrap; }

/* Services cell — fixed max-width with ellipsis */
.data-table td.services-cell {
  max-width: 200px;
  overflow: hidden;
}
.data-table td.services-cell span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mono cells — consistent sizing */
.data-table td .mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Ensure thead background is always consistent */
.data-table thead tr {
  background: #f1f5f9 !important;
}
.data-table thead th {
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 2px solid #cbd5e1;
}

/* Tfoot totals row */
.data-table tfoot .table-totals td {
  background: #f8fafc;
  color: var(--primary-dark);
  font-weight: 700;
  border-top: 2px solid #cbd5e1;
  padding: 10px 14px;
}

/* Report table compact version */
.rpt-table.data-table th { font-size: 10px; padding: 8px 10px; }
.rpt-table.data-table td { font-size: 12px; padding: 8px 10px; }

/* Billing selected services mini-table */
.billing-services th,
.billing-services td { padding: 8px 12px; }
.billing-services tbody tr:last-child td { border-bottom: none; }

/* Permissions matrix */
.permissions-table th:not(:first-child),
.permissions-table td:not(:first-child) {
  text-align: center;
  width: 80px;
}
.permissions-table th:first-child,
.permissions-table td:first-child {
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════
   FRONTDESK LAYOUT SPACING FIXES
   1. Remove excess top space (page titlebar + content padding)
   2. Remove excess space between topbar and patient strip
   3. Align service + payment cards to same top edge
   ═══════════════════════════════════════════════════════════════════ */

/* Fix 1 — reduce top padding of page content area */
.tn-page-titlebar {
  padding: 6px 24px !important;   /* was ~10-12px — thinner titlebar */
}
.tn-content {
  padding: 12px 24px 20px !important;  /* was 20px top — cut in half */
}

/* Fix 2 — reduce gaps between topbar card, strip, billing */
.fd-main {
  gap: 8px !important;   /* was 16px — tighter vertical rhythm */
}
.fd-topbar {
  padding: 10px 20px !important;  /* was 14px top/bottom — slimmer */
}
.patient-strip {
  padding: 10px 20px !important;  /* was 14px — match topbar */
}

/* Fix 3 — billing grid: both cards align to the same top edge,
   payment card must NOT have any extra top margin/padding */
.fd-billing-grid {
  align-items: start !important;
  gap: 12px !important;
}
.fd-services-card,
.fd-payment-card {
  margin-top: 0 !important;
  align-self: start !important;   /* each card starts at row top */
}
.fd-payment-card > .card-header {
  /* ensure payment card header matches services card header height */
  min-height: 52px;
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — Laptop · Tablet · Mobile
   Breakpoints:
     ≤1280px  Laptop / small desktop
     ≤1024px  Large tablet / landscape iPad
     ≤768px   Tablet portrait
     ≤480px   Mobile landscape
     ≤360px   Mobile portrait
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base: all screens — ensure overflow never breaks layout ─────── */
html, body { overflow-x: hidden; }
img         { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─────────────────────────────────────────────────────────────────
   LAPTOP  ≤1280px
   Slightly tighter spacing, narrower payment panel
───────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .tn-content { padding: 12px 16px 20px !important; }

  /* Billing: narrower payment card */
  .fd-billing-grid { grid-template-columns: 1fr 340px !important; }

  /* Service grid: 4 cols */
  .svc-grid-compact { grid-template-columns: repeat(4, 1fr) !important; }

  /* Report filters: wrap earlier */
  .report-filters .form-row { flex-wrap: wrap; gap: 8px 12px; }

  /* KPI cards: smaller */
  .kpi-card { min-width: 130px; padding: 14px; }
  .kpi-value { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────────────────
   LARGE TABLET / LANDSCAPE  ≤1024px
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav: shrink items */
  .tn-nav-link { padding: 0 10px; font-size: 12.5px; }

  /* Billing: stack vertically */
  .fd-billing-grid {
    grid-template-columns: 1fr !important;
  }
  /* Payment card goes above services on tablet */
  .fd-payment-card { order: -1; }

  /* Service grid: 3 cols */
  .svc-grid-compact { grid-template-columns: repeat(3, 1fr) !important; }

  /* Patient modal: 2-col grid */
  .pm-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .pm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .pm-modal  { width: min(760px, calc(100vw - 32px)) !important; margin: 70px auto !important; }

  /* Role/User modals */
  .role-modal, .user-config-modal { width: calc(100vw - 32px) !important; }

  /* Tables: allow scroll */
  .data-table { min-width: 600px; }

  /* KPI row: 2 per row */
  .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kpi-card { min-width: unset; }

  /* Report filters: 2 cols */
  .report-filters .form-group { flex: 0 0 calc(50% - 8px) !important; }

  /* Page title bar compact */
  .tn-page-titlebar { padding: 6px 16px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   TABLET PORTRAIT  ≤768px
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav: hamburger already handles this — ensure items are full width */
  .tn-nav-items { gap: 0; }

  /* Content padding tight */
  .tn-content { padding: 10px 12px 16px !important; }
  .tn-page-titlebar { padding: 5px 12px !important; }

  /* Cards */
  .card-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .card-header .card-title { font-size: 14px; }

  /* FrontDesk top bar */
  .fd-topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px !important; }
  .fd-topbar-right { display: flex; justify-content: flex-end; }
  .fd-search-group { flex-wrap: wrap; gap: 8px; }
  .fd-search-group .input-icon-wrap { flex: 1; min-width: 140px; max-width: 100%; }
  .btn-add-patient { width: 100%; justify-content: center; }

  /* Patient strip */
  .patient-strip { flex-wrap: wrap; padding: 12px 14px !important; }
  .patient-strip-meta { gap: 10px; }
  .patient-strip-actions { width: 100%; display: flex; gap: 8px; }
  .patient-strip-actions .btn { flex: 1; justify-content: center; }

  /* Service grid: 2 cols */
  .svc-grid-compact { grid-template-columns: repeat(2, 1fr) !important; max-height: 280px; }

  /* Patient modal: 2-col, near full width */
  .pm-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .pm-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .pm-modal  {
    width: calc(100vw - 20px) !important;
    margin: 60px 10px 10px !important;
    max-height: calc(100vh - 80px) !important;
  }
  .pm-body { padding: 14px 14px !important; }
  .pm-photo-strip { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Billing payment card */
  .fd-payment-card .form-body { padding: 14px !important; }
  .fd-payment-card .form-row { flex-direction: column; }

  /* KPI: 2 per row */
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-card { padding: 12px; }
  .kpi-value { font-size: 16px; }
  .kpi-icon  { width: 36px; height: 36px; font-size: 15px; }

  /* Report filters: 1 col each */
  .report-filters .form-group { flex: 1 1 100% !important; min-width: 0 !important; }
  .report-filters .form-row   { flex-direction: column; gap: 8px; }

  /* Report summary bar: wrap */
  .report-summary-bar { gap: 12px 20px; font-size: 12.5px; }

  /* Role/User/Service modals */
  .role-modal, .user-config-modal, .svc-modal-box {
    width: calc(100vw - 16px) !important;
    margin: 60px 8px 8px !important;
    max-height: calc(100vh - 80px) !important;
  }
  .perm-matrix-wrap { overflow-x: auto; }

  /* Dashboard stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* History modal */
  .history-modal { width: calc(100vw - 16px) !important; }

  /* Form layout */
  .col-6, .col-4, .col-3, .col-2 { flex: 1 1 100% !important; min-width: 0 !important; }

  /* Tables */
  .data-table { min-width: 500px; font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE LANDSCAPE  ≤480px
───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .tn-header { padding: 0 12px; height: 48px; }
  .tn-brand-name   { font-size: 14px; }
  .tn-brand-tenant { display: none; }
  .tn-date         { display: none; }
  .tn-user-info    { display: none; }
  .tn-navbar { top: 48px !important; }
  .tn-page   { margin-top: 92px !important; }

  /* Content */
  .tn-content { padding: 8px 10px 12px !important; }
  .tn-page-titlebar { padding: 4px 10px !important; }

  /* Patient modal: single column */
  .pm-grid   { grid-template-columns: 1fr !important; }
  .pm-grid-3 { grid-template-columns: 1fr !important; }
  .pm-modal  {
    width: 100vw !important;
    margin: 48px 0 0 !important;
    border-radius: 0 !important;
    max-height: calc(100vh - 48px) !important;
  }

  /* Service grid: 2 cols small */
  .svc-grid-compact { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-tc-name  { font-size: 11px; }
  .svc-tc-price { font-size: 10.5px; }

  /* FrontDesk search */
  .fd-search-group .input-icon-wrap { min-width: 100%; }

  /* KPI: 1 per row */
  .kpi-row  { grid-template-columns: 1fr 1fr; }
  .kpi-card { padding: 10px; gap: 8px; }
  .kpi-value { font-size: 14px; }
  .kpi-label { font-size: 10px; }

  /* Cards */
  .card-header { padding: 10px 12px; }
  .card-header .btn { font-size: 12px; padding: 5px 10px; }

  /* Billing payment */
  .pay-row { font-size: 13px; }
  .payment-summary { padding: 12px; }

  /* Modals */
  .role-modal, .user-config-modal, .svc-modal-box {
    width: 100vw !important;
    margin: 48px 0 0 !important;
    border-radius: 0 !important;
    max-height: calc(100vh - 48px) !important;
  }

  /* Tables */
  .data-table { font-size: 11.5px; }
  .data-table th, .data-table td { padding: 7px 8px; }
  .action-cell .btn-icon { padding: 4px 6px; font-size: 12px; }

  /* Report summary */
  .report-summary-bar { flex-direction: column; gap: 6px; font-size: 12px; }
  .rpt-summary-print { flex-direction: column; }

  /* Multi-patient list */
  .mp-row { padding: 10px 12px; gap: 10px; }
  .mp-avatar { width: 38px; height: 38px; }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE PORTRAIT  ≤360px
───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .tn-brand-icon { width: 28px; height: 28px; font-size: 14px; }
  .tn-brand-name { font-size: 13px; }

  .svc-grid-compact { grid-template-columns: 1fr !important; }

  .kpi-row  { grid-template-columns: 1fr; }

  .fd-topbar { padding: 8px 10px !important; }
  .fd-search-group { gap: 6px; }

  .data-table th, .data-table td { padding: 6px 7px; font-size: 11px; }

  .badge { font-size: 10px; padding: 2px 6px; }
  .btn-sm { font-size: 11px; padding: 4px 8px; }

  .pm-body { padding: 10px !important; }
  .pm-grid { gap: 8px 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   TOUCH IMPROVEMENTS — all mobile/tablet
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Larger tap targets */
  .btn        { min-height: 38px; }
  .btn-icon   { min-height: 34px; min-width: 34px; }
  .form-control { min-height: 38px; font-size: 16px; } /* 16px prevents iOS zoom */
  select.form-control { font-size: 16px; }             /* iOS zoom prevention */

  /* Nav dropdown panels: full width on mobile nav */
  .tn-nav-dd-panel { min-width: 180px; }

  /* Svc tiles: easier to tap */
  .svc-tile-compact { padding: 10px 11px; }

  /* Table horizontal scroll indicator */
  .table-wrap::after {
    content: '';
    display: block;
    height: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   TABLE SCROLL HINT on mobile
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .table-wrap {
    position: relative;
  }
  /* fade-right gradient to hint at horizontal scroll */
  .table-wrap.has-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
    pointer-events: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   FORM COLS — prevent overflow on small screens
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-row { flex-direction: column; gap: 0; }
  .form-group.col-1,
  .form-group.col-2,
  .form-group.col-3,
  .form-group.col-4,
  .form-group.col-5,
  .form-group.col-6 {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────
   REPORT PAGES — filter forms stack on mobile
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-body { padding: 12px 14px; }

  /* Inline flex groups inside report filters */
  .report-filters [style*="flex:0 0"],
  .report-filters [style*="flex: 0 0"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .report-filters [style*="flex:2"],
  .report-filters [style*="flex: 2"],
  .report-filters [style*="flex:1"],
  .report-filters [style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   MODAL BACKDROP SCROLL FIX — ensure modals scroll on mobile
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pm-backdrop { align-items: flex-start !important; overflow-y: auto !important; }
  .pm-modal    { margin: 60px auto 20px !important; }
  .svc-modal-backdrop { align-items: flex-start !important; overflow-y: auto !important; }
  .svc-modal-box { margin: 60px auto 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   INVOICE EDIT page — responsive
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .invoice-info-strip { flex-wrap: wrap; gap: 4px 0; padding: 10px 14px; }
  .iis-item { min-width: 50%; padding-right: 10px; }
}

/* ─────────────────────────────────────────────────────────────────
   PATIENT STRIP — stack on very small screens
───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .patient-strip-avatar { display: none; }   /* hide photo on very small */
  .patient-strip-name   { font-size: 15px; }
  .patient-strip-meta   { gap: 8px; font-size: 11.5px; flex-wrap: wrap; }
  .prev-balance-row     { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FRONTDESK — 3-column billing layout
   ═══════════════════════════════════════════════════════════════════ */

/* Reduce space between filter strip and patient strip */
.fd-main { gap: 6px !important; }

/* 3-column equal grid: Services | Cart | Payment */
.fd-billing-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 360px !important;
  gap: 10px !important;
  align-items: start !important;
}

/* ── Cart card (middle) ─────────────────────────────────────────── */
.fd-cart-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.cart-empty-hint {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--text-muted);
  gap: 10px;
  text-align: center;
}
.cart-empty-hint i {
  font-size: 36px;
  color: var(--border-strong);
}
.cart-empty-hint p { font-size: 13px; }

.cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 2px solid var(--border-strong);
  background: #f8fafc;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-dark);
}
.cart-subtotal strong { font-size: 15px; }

/* billing-services table inside cart */
.billing-services { font-size: 13px; }
.billing-services th, .billing-services td { padding: 8px 12px; }
.billing-services tbody tr:last-child td { border-bottom: none; }

/* ── Payment card: 3 fields in one row ─────────────────────────── */
.fd-pay-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.fd-pay-row-3 .form-group { margin-bottom: 0; }
.fd-pay-row-3 label { font-size: 11px; }
.fd-pay-row-3 .form-control { font-size: 13px; padding: 6px 8px; }

/* 2 fields in a row: Amount Received + Change */
.fd-pay-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.fd-pay-row-2 .form-group { margin-bottom: 0; }

/* Payment card form body tighter */
.fd-payment-card .form-body { padding: 14px 16px !important; }
.fd-payment-card .form-group { margin-bottom: 10px; }

/* ── Service grid: 2 cols inside narrower card ──────────────────── */
.fd-services-card .svc-grid-compact {
  grid-template-columns: repeat(2, 1fr) !important;
  max-height: 420px;
}

/* ── Responsive: 3-col → 1-col on tablet ───────────────────────── */
@media (max-width: 1100px) {
  .fd-billing-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Payment goes full width below the two top cards */
  .fd-payment-card {
    grid-column: 1 / -1;
  }
  .fd-pay-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .fd-services-card .svc-grid-compact {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .fd-billing-grid {
    grid-template-columns: 1fr !important;
  }
  .fd-payment-card { grid-column: auto; order: 3; }
  .fd-cart-card    { order: 2; }
  .fd-services-card { order: 1; }
  .fd-pay-row-3 { grid-template-columns: 1fr; }
  .fd-pay-row-2 { grid-template-columns: 1fr 1fr; }
  .fd-services-card .svc-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BILLING GRID: 3 cards, top-aligned, 2:1:2 ratio
   ═══════════════════════════════════════════════════════════════════ */
.fd-billing-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 2fr !important;
  gap: 10px !important;
  align-items: start !important;   /* top-align all three cards */
}

/* All three cards start at the same top edge */
.fd-services-card,
.fd-cart-card,
.fd-payment-card {
  align-self: start !important;
  margin-top: 0 !important;
}

/* Service grid inside narrower card — 2 columns */
.fd-services-card .svc-grid-compact {
  grid-template-columns: repeat(2, 1fr) !important;
  max-height: 400px;
}

/* ── Cart card (middle — 1fr, narrower) ─────────────────────────── */
.fd-cart-card { display: flex; flex-direction: column; min-height: 180px; }

.cart-empty-hint {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 28px 12px; color: var(--text-muted);
  gap: 8px; text-align: center;
}
.cart-empty-hint i  { font-size: 30px; color: var(--border-strong); }
.cart-empty-hint p  { font-size: 12px; }

.cart-subtotal {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 2px solid var(--border-strong);
  background: #f8fafc;
  font-weight: 700; font-size: 13px; color: var(--primary-dark);
}

/* Cart table compact */
.billing-services th, .billing-services td { padding: 7px 10px; font-size: 12.5px; }
.billing-services tbody tr:last-child td { border-bottom: none; }

/* ── Payment card: 3 fields in one row ─────────────────────────── */
.fd-pay-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.fd-pay-row-3 .form-group { margin-bottom: 0; }
.fd-pay-row-3 label { font-size: 11px; margin-bottom: 3px; }
.fd-pay-row-3 .form-control { font-size: 13px; padding: 6px 8px; }

.fd-pay-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 10px;
}
.fd-pay-row-2 .form-group { margin-bottom: 0; }

.fd-payment-card .form-body { padding: 14px 16px !important; }
.fd-payment-card .form-group { margin-bottom: 10px; }

/* ── Responsive: 2:1:2 → stacked ───────────────────────────────── */
@media (max-width: 1200px) {
  .fd-billing-grid { grid-template-columns: 1fr 1fr !important; }
  .fd-payment-card { grid-column: 1 / -1; }
  .fd-pay-row-3    { grid-template-columns: 1fr 1fr 1fr; }
  .fd-services-card .svc-grid-compact { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 768px) {
  .fd-billing-grid { grid-template-columns: 1fr !important; }
  .fd-payment-card { grid-column: auto; order: 3; }
  .fd-cart-card    { order: 2; }
  .fd-services-card { order: 1; }
  .fd-pay-row-3    { grid-template-columns: 1fr; }
  .fd-pay-row-2    { grid-template-columns: 1fr 1fr; }
  .fd-services-card .svc-grid-compact { grid-template-columns: repeat(2,1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   INVOICE ATTACHMENT — upload UI on Edit page
   ═══════════════════════════════════════════════════════════════════ */
.inv-attachment-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}
.inv-attachment-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.inv-attachment-preview img {
  width: 140px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.inv-attach-label {
  font-size: 11px;
  color: var(--text-muted);
}
.inv-attach-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.inv-attach-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.inv-attach-pdf {
  padding: 12px 16px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400e;
}
.inv-attach-pdf i { margin-right: 6px; color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════
   HISTORY MODAL — thumbnail image in table
   ═══════════════════════════════════════════════════════════════════ */
.hist-thumb-link {
  display: inline-block;
  line-height: 0;
}
.hist-thumb {
  width: 48px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hist-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   PAYMENT CARD — 4-item single row (button + received + change + balance)
   ═══════════════════════════════════════════════════════════════════ */
.pay-received-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}
.pay-full-btn {
  white-space: nowrap;
  height: 38px;
  align-self: end;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  font-size: 12.5px;
}
.pay-full-btn:hover { background: var(--primary-light); }
.pay-field-grow { /* amount received — slightly wider */ }
.pay-field-sm label { font-size: 11px; }

@media (max-width: 768px) {
  .pay-received-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pay-full-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   INVOICE EDIT MODAL — wide popup
   ═══════════════════════════════════════════════════════════════════ */
.inv-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.inv-modal-backdrop.inv-modal-open { display: flex; }

.inv-modal-box {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: invModalIn .2s ease;
}
@keyframes invModalIn {
  from { transform: translateY(-16px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.inv-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.inv-modal-header h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 800; margin: 0;
}
.inv-modal-body {
  flex: 1; overflow-y: auto; padding: 18px 22px;
}
.inv-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* Info strip inside modal */
.inv-modal-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 16px;
  margin-bottom: 16px;
}
.ims-item {
  display: flex; flex-direction: column;
  padding: 4px 20px 4px 0; min-width: 120px;
}
.ims-item span:first-child {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 2px;
}
.ims-item strong, .ims-item .visit-pin, .ims-item .badge { font-size: 13px; }

/* Two-column grid: services + summary */
.inv-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

/* Four-col edit row: amount · balance · method · checkno */
.inv-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.inv-modal-row .form-group { margin-bottom: 0; }

@media (max-width: 768px) {
  .inv-modal-grid { grid-template-columns: 1fr; }
  .inv-modal-row  { grid-template-columns: 1fr 1fr; }
  .inv-modal-box  { width: calc(100vw - 16px); max-height: calc(100vh - 40px); margin: 20px 8px; }
}
@media (max-width: 480px) {
  .inv-modal-row  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAYMENT CARD — Full button + single-line received/change/balance
   ═══════════════════════════════════════════════════════════════════ */
.pay-received-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.pay-full-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: 0;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
  font-weight: 700;
}
.pay-full-btn:hover { background: var(--primary); color: #fff; }
.pay-field-grow { flex: 2; min-width: 0; margin-bottom: 0; }
.pay-field-sm   { flex: 1; min-width: 0; margin-bottom: 0; }
.pay-field-grow label,
.pay-field-sm   label { font-size: 11px; margin-bottom: 3px; }
.pay-field-grow .form-control,
.pay-field-sm   .form-control { font-size: 13px; padding: 6px 8px; }

/* ═══════════════════════════════════════════════════════════════════
   INVOICE EDIT MODAL
   ═══════════════════════════════════════════════════════════════════ */
.inv-modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.inv-modal-backdrop.inv-modal-open { display: flex; }

.inv-modal-box {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  margin: auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: invModalIn .2s ease;
}
@keyframes invModalIn {
  from { transform: translateY(-16px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.inv-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.inv-modal-header h4 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px;
  font-weight: 800; margin: 0;
}
.inv-modal-body { flex: 1; overflow-y: auto; padding: 0; }
.inv-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* Info strip inside modal */
.inv-modal-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  background: #f8fafc; border-bottom: 1px solid var(--border);
  padding: 10px 22px;
}
.ims-item {
  display: flex; flex-direction: column;
  padding: 4px 20px 4px 0; min-width: 110px;
}
.ims-item span:first-child {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 2px;
}

/* 2-column body grid: services+totals | edit fields */
.inv-modal-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 18px 22px;
  gap: 20px;
}

@media (max-width: 768px) {
  .inv-modal-box { width: calc(100vw - 16px); max-height: calc(100vh - 40px); }
  .inv-modal-body-grid { grid-template-columns: 1fr; }
  .pay-received-row { flex-wrap: wrap; }
  .pay-field-sm { flex: 1 1 40%; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAY RECEIVED ROW — Full button + fields aligned on same baseline
   ═══════════════════════════════════════════════════════════════════ */
.pay-received-row {
  display: flex !important;
  align-items: flex-start !important;   /* align from top so labels match */
  gap: 8px !important;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

/* Wrapper gives the Full button the same label+input height as other fields */
.pay-full-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 0;
}
.pay-full-wrap label {
  font-size: 11px;
  line-height: 1.4;
  color: transparent;   /* invisible spacer — same height as other labels */
  user-select: none;
}

/* Full button matches input height exactly */
.pay-full-btn {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
  margin-bottom: 0;
  align-self: auto !important;  /* let flex-start on parent control */
}
.pay-full-btn:hover { background: var(--primary); color: #fff; }

/* Field sizing */
.pay-field-grow { flex: 2; min-width: 0; margin-bottom: 0; }
.pay-field-sm   { flex: 1; min-width: 0; margin-bottom: 0; }
.pay-field-grow label,
.pay-field-sm   label { font-size: 11px; margin-bottom: 3px; }
.pay-field-grow .form-control,
.pay-field-sm   .form-control { font-size: 13px; padding: 6px 8px; height: 36px; }
.pay-field-grow .form-control  { height: 36px; }