/* ============================================================
   NCI Misrata — Histopathology Lab Results Portal
   Design system: Cairo font + institutional navy + clinical teal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Surfaces */
  --bg:           #f5f8fa;
  --surface:      #ffffff;
  --surface-2:    #f0f6f7;
  --surface-3:    #e7eef1;

  /* Text */
  --text:         #17324d;
  --text-soft:    #38546a;
  --text-muted:   #5c7283;
  --text-light:   #9aabb7;

  /* Brand */
  --primary:      #008080;
  --primary-2:    #66b3b3;
  --primary-soft: #e6f4f4;
  --primary-deep: #006666;

  --accent:       #b46b3c;
  --accent-soft:  #f7eee8;

  /* Status */
  --success:      #008080;
  --success-soft: #e6f4f4;
  --warning:      #f0a13c;
  --warning-soft: #fff3cd;
  --danger:       #d04a4a;
  --danger-soft:  #fbe9e9;
  --info:         #3aa9d6;
  --info-soft:    #d6f0f9;

  /* Sidebar */
  --sidebar:           #153149;
  --sidebar-2:         #10283d;
  --sidebar-hover:     #23465d;
  --sidebar-active:    #1d5665;
  --sidebar-text:      #c4d6df;
  --sidebar-text-active: #ffffff;

  /* Lines & shadows */
  --border:        #e3e9ed;
  --border-strong: #cdd6dd;
  --shadow:        0 5px 20px rgba(17, 47, 68, 0.06);
  --shadow-md:     0 12px 34px rgba(17, 47, 68, 0.10);
  --shadow-lg:     0 22px 55px rgba(17, 47, 68, 0.14);

  /* Radius */
  --radius-sm: 9px;
  --radius:    13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* Operational analytics workspace. */
.analytics-page { display: grid; gap: 18px; }
.analytics-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 26px 28px; background: #fff; border: 1px solid #dbe7ea; border-radius: 18px; }
.analytics-hero h2 { margin: 0 0 7px; color: var(--text); font-size: clamp(23px, 3vw, 31px); }
.analytics-hero p { margin: 0; color: var(--text-soft); font-size: 14px; }
.analytics-hero-period { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; color: var(--primary-deep); background: var(--primary-soft); border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.analytics-hero-period i { font-size: 16px; }
.analytics-filter { display: flex; align-items: end; gap: 12px; padding: 16px; background: #f8fbfb; border: 1px solid #dbe7ea; border-radius: 15px; }
.analytics-filter > div:not(.analytics-filter-actions) { display: grid; gap: 5px; min-width: 180px; }
.analytics-filter label { color: var(--text-soft); font-size: 12px; font-weight: 800; }
.analytics-filter input { min-height: 42px; padding: 8px 11px; color: var(--text); background: #fff; border: 1px solid #cbdde1; border-radius: 9px; }
.analytics-filter input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,128,128,.12); }
.analytics-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.analytics-filter-actions .btn { min-height: 42px; white-space: nowrap; }
.analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.analytics-metric { display: flex; align-items: center; gap: 13px; min-height: 104px; padding: 18px; background: #fff; border: 1px solid #dbe7ea; border-radius: 16px; }
.analytics-metric-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; font-size: 21px; }
.analytics-metric span { display: block; margin-bottom: 3px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.analytics-metric strong { display: block; color: var(--text); font-size: 28px; line-height: 1; }
.analytics-metric-primary .analytics-metric-icon { color: var(--primary-deep); background: var(--primary-soft); }
.analytics-metric-info .analytics-metric-icon { color: #247f9b; background: #e0f2f7; }
.analytics-metric-success .analytics-metric-icon { color: var(--primary-deep); background: #e3f3f1; }
.analytics-metric-warning .analytics-metric-icon { color: #a46c09; background: #fff1cf; }
.analytics-insight { display: flex; align-items: center; gap: 12px; padding: 13px 17px; color: var(--primary-deep); background: #eef8f8; border: 1px solid #cce5e5; border-radius: 13px; }
.analytics-insight > i { font-size: 22px; }
.analytics-insight div { display: grid; gap: 1px; }
.analytics-insight span { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.analytics-insight strong { color: var(--text); font-size: 15px; }
.analytics-insight em { margin-inline-start: auto; color: var(--primary); font-size: 12px; font-style: normal; font-weight: 800; }
.analytics-grid { display: grid; gap: 14px; }
.analytics-grid-top { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); }
.analytics-grid-bottom { grid-template-columns: minmax(260px, .8fr) minmax(280px, 1fr) minmax(280px, 1fr); }
.analytics-panel { min-width: 0; min-height: 270px; padding: 22px; background: #fff; border: 1px solid #dbe7ea; border-radius: 17px; }
.analytics-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 17px; }
.analytics-panel-heading .dashboard-eyebrow { margin-bottom: 3px; }
.analytics-panel-heading h3 { margin: 0; color: var(--text); font-size: 18px; }
.analytics-panel-heading .panel-heading-icon { color: var(--primary); font-size: 20px; }
.analytics-chart-wrap { position: relative; height: 218px; }
.analytics-chart-doughnut { height: 220px; }
.analytics-chart-gender { height: 208px; }
.analytics-panel-table { display: flex; flex-direction: column; }
.analytics-table-scroll { overflow: auto; max-height: 224px; }
.analytics-table { width: 100%; border-collapse: collapse; color: var(--text-soft); font-size: 12px; }
.analytics-table th { padding: 0 0 9px; color: var(--text-muted); font-weight: 800; text-align: start; border-bottom: 1px solid #e7eff0; }
.analytics-table th:last-child, .analytics-table td:last-child { width: 60px; text-align: end; }
.analytics-table td { padding: 10px 0; border-bottom: 1px solid #edf2f3; vertical-align: top; }
.analytics-table tr:last-child td { border-bottom: 0; }
.analytics-table td strong { color: var(--primary-deep); font-size: 14px; }
.analytics-empty { color: var(--text-muted); text-align: center !important; }

@media (max-width: 1100px) {
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid-bottom .analytics-panel:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .analytics-hero { display: grid; align-items: start; padding: 21px 18px; }
  .analytics-hero-period { justify-self: start; white-space: normal; }
  .analytics-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .analytics-filter > div:not(.analytics-filter-actions) { min-width: 0; }
  .analytics-filter-actions { grid-column: 1 / -1; margin-inline-start: 0; }
  .analytics-filter-actions .btn { flex: 1; }
  .analytics-metrics { gap: 9px; }
  .analytics-metric { min-height: 92px; padding: 14px; gap: 9px; }
  .analytics-metric-icon { width: 38px; height: 38px; font-size: 17px; }
  .analytics-metric strong { font-size: 22px; }
  .analytics-metric span { font-size: 11px; }
  .analytics-insight { align-items: flex-start; }
  .analytics-grid-top, .analytics-grid-bottom { grid-template-columns: 1fr; }
  .analytics-grid-bottom .analytics-panel:first-child { grid-column: auto; }
  .analytics-panel { min-height: 0; padding: 18px; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); }
code { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 13px; }

/* ---------- App shell with sidebar (admin/doctor/technician) ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}
/* In RTL, visually: sidebar on the right, content on the left. */
[dir="rtl"] .app-shell { flex-direction: row-reverse; }

.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--sidebar-2);
}
.sidebar-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: white;
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}
.sidebar-brand-text {
  font-size: 18px;
  color: #e7eef7;
  line-height: 1.5;
}
.sidebar-brand-text strong {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}

.sidebar-nav {
  padding: 8px 10px;
  flex: 1;
}
.sidebar-divider {
  height: 1px;
  margin: 14px 14px 12px;
  background: rgba(255,255,255,0.14);
}
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
  position: relative;
  transition: background .15s, color .15s;
}
.sidebar-nav .nav-link i {
  font-size: 18px;
  opacity: 0.85;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-nav .nav-link:hover {
  background: var(--sidebar-hover);
  color: #ffffff;
}
.sidebar-nav .nav-link.active {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
  font-weight: 600;
}
.sidebar-nav .nav-link.active { box-shadow: inset 0 0 0 1px rgba(143, 214, 217, 0.16); }
.sidebar-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff6b6b !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-logout i { font-size: 17px; }
.sidebar-logout:hover { color: #ff9b9b !important; }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--sidebar-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sidebar-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a9bb0;
  font-size: 11px;
}
.sidebar-user > i {
  font-size: 22px;
  flex-shrink: 0;
}
.sidebar-user-details { min-width: 0; }
.sidebar-user-name {
  color: #e7eef7;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Main column ---------- */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app-header {
  background: var(--surface);
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.app-header-main { min-width: 0; }
.app-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.app-header .header-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.app-header .header-meta i { margin-inline-end: 6px; color: var(--primary); }
.app-header .header-actions { display: flex; gap: 10px; align-items: center; }
.app-header-title-row .btn-back {
  width: auto;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.app-header-title-row .btn-back:hover { color: var(--primary-deep); background: transparent; transform: translateX(-2px); }

.app-tabs {
  background: white;
  display: flex;
  gap: 6px;
  padding: 14px 32px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.app-tabs .tab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-tabs .tab:hover { color: var(--primary); }
.app-tabs .tab.active {
  background: var(--primary);
  color: white;
}

.app-content {
  flex: 1;
  padding: 24px 32px;
}

.app-bottom {
  background: white;
  border-top: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Cards ---------- */
.nci-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nci-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
}
.nci-card .card-header i { color: var(--primary); margin-inline-end: 8px; }
.nci-card .card-body { padding: 18px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: all .15s;
  cursor: pointer;
}
.btn i { font-size: 14px; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: white;
}
.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.btn-success:hover { background: #006666; border-color: #006666; color: white; }
.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: white;
}
.btn-warning:hover { background: #c9862a; border-color: #c9862a; color: white; }
.btn-outline-primary {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--text-soft);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline-danger {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}
.btn-outline-danger:hover { background: var(--danger); color: white; }
.btn-link {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
}
.btn-link:hover { color: var(--primary); }
.btn-lg { padding: 11px 22px; font-size: 14.5px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  height: auto;
  min-height: 44px;
  background: white;
  color: var(--text);
  width: 100%;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px rgba(89, 192, 201, 0.15);
  outline: none;
}
.form-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}
.form-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ---------- Tables ---------- */
.table {
  font-size: 14px;
  margin-bottom: 0;
  width: 100%;
  background: var(--surface);
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.sample-actions {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.sample-actions .btn { flex-shrink: 0; }

/* ---------- Alerts ---------- */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success {
  background: var(--success-soft);
  border-color: rgba(0, 128, 128, 0.3);
  color: #186d4d;
}
.alert-danger {
  background: var(--danger-soft);
  border-color: rgba(208, 74, 74, 0.3);
  color: #8b2a2a;
}
.alert-warning {
  background: var(--warning-soft);
  border-color: rgba(240, 161, 60, 0.3);
  color: #6b4a13;
}
.alert-info {
  background: var(--info-soft);
  border-color: rgba(58, 169, 214, 0.3);
  color: #1d5e7a;
}
.alert .btn-close { margin-inline-start: auto; }

/* ---------- Badges & status pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}
.badge.bg-warning { background: var(--warning-soft) !important; color: #856404 !important; }
.badge.bg-info    { background: var(--info-soft)    !important; color: #0c5460 !important; }
.badge.bg-success { background: var(--success-soft) !important; color: #006666 !important; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-soft) !important; }
.badge.bg-primary { background: var(--primary-soft) !important; color: var(--primary-deep) !important; }
.badge.bg-danger  { background: var(--danger-soft)  !important; color: #8b2a2a !important; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-pending   { background: var(--warning-soft); color: #856404; }
.status-in_review { background: var(--info-soft);    color: #0c5460; }
.status-ready     { background: var(--success-soft); color: #006666; }

/* ---------- Stat cards ---------- */
.stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.stat-icon.success { background: var(--success-soft); color: var(--success); }
.stat-icon.warning { background: var(--warning-soft); color: var(--warning); }
.stat-icon.info    { background: var(--info-soft);    color: var(--info); }
.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}

/* ---------- Public layout (homepage, lookup, login) ---------- */
.public-body {
  background: var(--surface-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.public-header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: static;
}
.public-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.public-header .brand img {
  width: 52px;
  height: 52px;
  background: white;
  border-radius: 12px;
  padding: 4px;
  border: 1px solid var(--border);
}
.public-header .brand-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.public-header .brand-info span {
  font-size: 12px;
  color: var(--text-muted);
}
.public-header .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero {
  padding: 60px 32px 40px;
  text-align: center;
}
.hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}
.hero .lead {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.cta-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%;
}
.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-2);
  color: var(--text);
}
.cta-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--primary-deep);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 10px 26px rgba(44, 143, 150, 0.32);
}
.cta-card h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.cta-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

.feature-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: white;
  border: 1px solid var(--border);
  text-align: center;
}
.feature-pill .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.feature-pill strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}
.feature-pill small {
  font-size: 11px;
  color: var(--text-muted);
}

.public-footer {
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 36px 32px 20px;
  margin-top: auto;
}
.public-footer h6 {
  color: white;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.public-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.public-footer .footer-brand strong {
  display: block;
  color: white;
  font-size: 14px;
  font-weight: 700;
}
.public-footer a {
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.public-footer a:hover { color: white; }
.public-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.public-footer ul li { margin-bottom: 6px; }
.public-footer .footer-contact {
  font-size: 13px;
  line-height: 1.8;
}
.public-footer .footer-contact i { margin-inline-end: 8px; color: var(--primary-2); }
.public-footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.public-footer .footer-login {
  color: #8fa5b2;
  font-size: 12px;
  padding: 0;
  opacity: .9;
}
.public-footer .footer-login:hover { color: var(--sidebar-text); }

/* ---------- QR scanner area ---------- */
.qr-reader {
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--primary-soft);
  background: white;
  margin: 0 auto;
}
.qr-reader video { border-radius: 12px; }
#qr-reader__dashboard_section_csr button,
#qr-reader__dashboard_section_swaplink { display: none !important; }

/* ---------- Status / report display ---------- */
.status-illustration {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  margin: 0 auto 18px;
  color: white;
}

/* ---------- Print (receipt) ---------- */
.print-body { background: #fff; padding: 20px; font-family: 'Cairo', sans-serif; }
.receipt {
  width: 190mm;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  color: var(--text);
  page-break-inside: avoid;
  break-inside: avoid;
}
.receipt-head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 8px; margin-bottom: 10px;
}
.receipt-head img { height: 48px; }
.receipt-head .inst { font-weight: 700; color: var(--primary-deep); font-size: 16px; }
.receipt-head .sub { font-size: 11px; color: var(--text-muted); }
.receipt .title { text-align: center; font-size: 17px; color: var(--primary-deep); margin: 6px 0 10px; font-weight: 800; }
.receipt table.meta { width: 100%; border-collapse: collapse; font-size: 12px; }
.receipt table.meta td { border: 1px solid var(--border); padding: 5px 10px; }
.receipt table.meta td.k { background: var(--primary-soft); font-weight: 700; width: 38%; color: var(--primary-deep); }
.receipt table.meta td.ref { font-family: 'Consolas', monospace; font-size: 14px; font-weight: 800; color: var(--accent); }
.receipt .qr-box { text-align: center; margin: 10px 0; }
.receipt .qr-box .qr { width: 180px; height: 180px; }
.receipt .qr-caption { font-family: 'Consolas', monospace; font-size: 12px; color: var(--primary-deep); font-weight: 700; }
.receipt .instructions {
  background: var(--primary-soft);
  border: 1px dashed var(--primary-2);
  border-radius: var(--radius-sm);
  padding: 10px; font-size: 14px; line-height: 1.8; text-align: center;
  color: var(--text);
}
.receipt .instructions .receipt-manual { margin-top: 3px; }
.receipt .instructions .url { color: var(--primary-deep); font-weight: 700; }
.receipt .instructions .receipt-domain { color: var(--primary-deep); font-weight: 800; }
@media print {
  .print-body { padding: 0 !important; }
  .receipt { width: 190mm; max-width: 190mm; }
  .no-print { display: none !important; }
}

/* ---------- Misc ---------- */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* ---------- Login page ---------- */
.login-wrap {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.login-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
}
.login-card .brand-block {
  text-align: center;
  margin-bottom: 24px;
}
.login-card .brand-block img {
  width: 70px;
  height: 70px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 10px;
}
.login-card .brand-block h1 {
  font-size: 18px;
  margin: 0 0 4px;
}
.login-card .brand-block span {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Refinement pass: calm institutional product UI ---------- */
:focus-visible {
  outline: 3px solid rgba(23, 127, 136, .28);
  outline-offset: 2px;
}

.public-header {
  min-height: 76px;
  padding-inline: clamp(16px, 4vw, 48px);
  box-shadow: 0 1px 0 rgba(23, 50, 77, .04);
}
.public-header .brand { min-width: 0; }
.public-header .brand img { border-radius: 11px; }
.public-header .brand-info strong { letter-spacing: -.15px; }
.public-header .header-actions { flex-wrap: wrap; }

.hero {
  padding: clamp(42px, 7vw, 76px) 20px 38px;
}
.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border: 1px solid #c6e1e3;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.25;
  letter-spacing: -.7px;
  text-wrap: balance;
}
.hero .lead { color: var(--text-soft); max-width: 620px; }
.hero > .container > p[style] {
  color: var(--text-soft) !important;
  max-width: 620px !important;
  line-height: 1.8;
}

.cta-card {
  border-color: #d7e4e7;
  min-height: 300px;
  padding: 34px 28px 30px;
  box-shadow: 0 8px 24px rgba(17, 47, 68, .05);
}
.cta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17, 47, 68, .10);
  border-color: var(--primary-2);
}
.cta-card h2 { text-wrap: balance; }
.cta-icon {
  width: 76px;
  height: 76px;
  font-size: 31px;
  box-shadow: 0 10px 22px rgba(11, 89, 101, .20);
}
.cta-card p { max-width: 31ch; }

.feature-pill {
  min-height: 132px;
  justify-content: center;
  background: rgba(255,255,255,.72);
  border-color: #d8e5e8;
  box-shadow: none;
}
.feature-pill .feature-icon {
  background: var(--primary-soft);
  color: var(--primary-deep);
}

.nci-card { border-color: #d8e4e8; box-shadow: 0 7px 22px rgba(17, 47, 68, .055); }
.nci-card .card-header { min-height: 54px; background: var(--surface); }
.verification-panel { border: 1px solid #d8e5e8; border-radius: var(--radius); padding: 16px; background: #f8fbfb; }
.verification-panel legend { float: none; width: auto; padding: 0 4px; margin: 0; }
.verification-help { color: var(--text-muted); font-size: 12px; margin: -4px 0 12px; }
.form-control, .form-select { border-color: #cbdbe0; }
.form-control::placeholder { color: #6d8291; opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 127, 136, .14); }
.btn { min-height: 40px; }
.btn-primary { box-shadow: 0 4px 10px rgba(23, 127, 136, .15); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline-primary { border-color: #7ebfc3; color: var(--primary-deep); }
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary); }

.app-content { padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 36px); }
.app-header { padding: 20px clamp(16px, 3vw, 36px); }
.app-header h1 { font-size: 22px; }
.stat-card { box-shadow: 0 5px 18px rgba(17, 47, 68, .05); }
.stat-card:hover { transform: translateY(-1px); }
.table thead th { color: var(--text-soft); background: #f1f6f7; }
.table tbody tr:hover { background: #f7fbfb; }

.status-illustration { background: var(--primary-deep) !important; }
.status-pill { border: 1px solid transparent; }
.status-pending { border-color: #e7c978; }
.status-in_review { border-color: #88c9d2; }
.status-ready { border-color: #80b3b3; }
.text-success { color: var(--success) !important; }

.login-wrap { min-height: calc(100vh - 76px); }
.login-card { padding: 34px clamp(22px, 5vw, 38px); }

.public-footer { padding: 42px clamp(20px, 5vw, 48px) 20px; }
.public-footer h6 { letter-spacing: 0; text-transform: none; }

@media (max-width: 767.98px) {
  .public-header { padding-block: 12px; align-items: stretch; }
  .public-header .brand { flex: 1 1 100%; justify-content: flex-start; }
  .public-header .brand img { width: 46px; height: 46px; }
  .public-header .brand-info strong { font-size: 13px; }
  .public-header .brand-info span { font-size: 11px; }
  .public-header .header-actions { width: 100%; justify-content: flex-start; padding-inline-start: 58px; }
  .public-header .header-actions .btn { flex: 0 0 auto; }
  .hero { padding-top: 38px; }
  .hero h1 { font-size: 32px; }
  .hero .lead { font-size: 15px; }
  .cta-card { min-height: 0; padding: 28px 22px 24px; }
  .feature-pill { min-height: 124px; padding: 12px 8px; }
  .feature-pill strong { font-size: 12px; }
  .feature-pill small { font-size: 10px; }
  .app-sidebar { width: 224px; }
  .app-header .header-actions { width: 100%; }
  .app-header .header-actions .btn { flex: 1 1 auto; justify-content: center; }
  .app-header-title-row .btn-back { flex: 0 0 auto; }
  .table { min-width: 720px; }
  .public-footer .copyright { flex-direction: column; }
}

/* ---------- Booking visual language — admin shell only ----------
   Visual-only layer: keeps the existing routes, markup, order and behavior intact. */
.app-shell {
  --booking-primary: #58c2ca;
  --booking-primary-dark: #07808c;
  --booking-accent: #e6007e;
  --booking-ink: #101a32;
  --booking-muted: #667085;
  --booking-line: #d8e7ed;
  --booking-page: #edf7f9;
  --booking-shadow: 0 16px 38px rgba(16, 26, 50, 0.08);
  font-family: 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(7, 151, 165, 0.06), transparent 270px),
    var(--booking-page);
}

.app-shell .app-sidebar {
  width: 280px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.12), transparent 18%),
    linear-gradient(180deg, #101a32, #063b48 72%, #082f3b);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -12px 0 36px rgba(12, 42, 61, 0.08);
}

.app-shell .sidebar-brand {
  min-height: 118px;
  padding: 22px 18px;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.app-shell .sidebar-brand img {
  width: 220px;
  max-height: 76px;
}

.app-shell .sidebar-nav {
  padding: 8px 12px 20px;
}

.app-shell .sidebar-nav .nav-link {
  min-height: 46px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: #e9f2f6;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
}

.app-shell .sidebar-nav .nav-link i {
  width: 21px;
  font-size: 18px;
  color: #b8e6e9;
}

.app-shell .sidebar-nav .nav-link:hover,
.app-shell .sidebar-nav .nav-link.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.app-shell .sidebar-nav .nav-link.active {
  box-shadow: inset 3px 0 0 var(--booking-accent), 0 6px 14px rgba(5, 34, 48, 0.18);
}

.app-shell .sidebar-divider {
  margin: 14px 12px 12px;
  background: rgba(255, 255, 255, 0.14);
}

.app-shell .sidebar-footer {
  padding: 16px 14px;
  background: rgba(8, 47, 59, 0.34);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.app-shell .sidebar-user {
  color: #c7d7e1;
  font-size: 12px;
}

.app-shell .sidebar-user-name {
  color: #fff;
}

.app-shell .sidebar-logout {
  color: #ff8ac1 !important;
}

.app-shell .sidebar-logout:hover {
  color: #ffc0df !important;
}

.app-shell .app-main {
  background:
    linear-gradient(180deg, rgba(7, 151, 165, 0.04), transparent 250px),
    var(--booking-page);
}

.app-shell .app-header {
  min-height: 86px;
  padding: 20px clamp(22px, 4vw, 48px);
  border-bottom-color: var(--booking-line);
}

.app-shell .app-header h1 {
  color: var(--booking-ink);
  font-size: 25px;
  letter-spacing: 0;
}

.app-shell .app-header .header-meta {
  color: var(--booking-muted);
  font-size: 13px;
}

.app-shell .app-header .header-meta i,
.app-shell .app-header-title-row .btn-back {
  color: var(--booking-primary-dark);
}

.app-shell .app-content {
  padding: clamp(24px, 4vw, 42px) clamp(22px, 4vw, 48px);
}

.app-shell .btn {
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.app-shell .btn i {
  font-size: 15px;
}

.app-shell .btn-primary {
  background: linear-gradient(135deg, var(--booking-primary-dark), #0b98a5);
  border-color: var(--booking-primary-dark);
  box-shadow: 0 10px 18px rgba(7, 128, 140, 0.22);
}

.app-shell .btn-primary:hover,
.app-shell .btn-primary:focus-visible {
  background: linear-gradient(135deg, #056b78, var(--booking-primary-dark));
  border-color: #056b78;
}

.app-shell .btn-outline-primary {
  border-color: var(--booking-primary);
  color: var(--booking-primary-dark);
}

.app-shell .btn-outline-primary:hover,
.app-shell .btn-outline-primary:focus-visible {
  background: rgba(88, 194, 202, 0.12);
  border-color: var(--booking-primary-dark);
  color: var(--booking-primary-dark);
}

.app-shell .form-control,
.app-shell .form-select {
  min-height: 44px;
  border-color: var(--booking-line);
  border-radius: 8px;
}

.app-shell .form-control:focus,
.app-shell .form-select:focus {
  border-color: var(--booking-primary);
  box-shadow: 0 0 0 3px rgba(88, 194, 202, 0.18);
}

.app-shell .nci-card,
.app-shell .stat-card,
.app-shell .dashboard-panel,
.app-shell .analytics-panel {
  border-color: var(--booking-line);
  border-radius: 12px;
  box-shadow: var(--booking-shadow);
}

.app-shell .nci-card .card-header {
  border-bottom-color: var(--booking-line);
}

.app-shell .nci-card .card-header i,
.app-shell .panel-heading-icon,
.app-shell .dashboard-eyebrow,
.app-shell .panel-link,
.app-shell .quick-action-list a > i:first-child {
  color: var(--booking-primary-dark);
}

.app-shell .dashboard-intro {
  border-color: var(--booking-line);
  border-radius: 12px;
  box-shadow: var(--booking-shadow);
}

.app-shell .dashboard-intro h2,
.app-shell .dashboard-panel-heading h3,
.app-shell .stat-value,
.app-shell .team-stat strong {
  color: var(--booking-ink);
}

.app-shell .team-stat {
  background: var(--soft);
  border: 1px solid rgba(216, 231, 237, 0.72);
  border-radius: 8px;
}

/* ---------- UI/UX Pro Max polish — interaction quality only ---------- */
.app-shell :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--booking-primary-dark);
  outline-offset: 3px;
}

.app-shell .sidebar-nav .nav-link:focus-visible,
.app-shell .sidebar-logout:focus-visible {
  outline-color: #ff8ac1;
}

.app-shell .sidebar-logout {
  min-height: 44px;
  padding: 9px 8px;
  border-radius: 8px;
}

.app-shell .app-tabs .tab {
  min-height: 44px;
}

.app-shell .pagination .page-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-shell .btn {
  transition: background-color .18s ease, border-color .18s ease,
    box-shadow .18s ease, color .18s ease, filter .18s ease;
}

.app-shell .btn:hover {
  filter: brightness(0.98);
}

.app-shell .btn:active {
  transform: none !important;
  filter: brightness(0.94);
}

.app-shell .btn-primary:hover,
.app-shell .btn-primary:focus-visible {
  transform: none;
  box-shadow: 0 12px 22px rgba(7, 128, 140, 0.26);
}

.app-shell .dashboard-intro-actions,
.app-shell .header-actions,
.app-shell .data-actions,
.app-shell .data-filter-actions {
  gap: 8px;
}

@media (max-width: 900px) {
  .app-shell .sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
  }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .app-shell .app-content {
    padding-inline: clamp(22px, 3vw, 32px);
  }

  .app-shell .data-list-card .data-table {
    min-width: 900px;
  }

  .app-shell .data-list-card .data-table td {
    padding-inline: 12px;
  }

  .app-shell .samples-table .data-col-actions {
    width: 220px !important;
  }

  .app-shell .reports-table .data-col-actions {
    width: 210px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767.98px) {
  .app-shell .app-sidebar {
    width: 100%;
  }

  .app-shell .sidebar-brand {
    min-height: 92px;
    padding: 18px 24px;
  }

  .app-shell .sidebar-brand img {
    width: 210px;
    max-height: 58px;
  }

  .app-shell .sidebar-nav {
    padding: 8px 14px 12px;
  }

  .app-shell .sidebar-nav .nav-link {
    min-height: 44px;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cta-card:hover, .btn-primary:hover { transform: none; }
}

/* ---------- Arabic-first 2026 shell ---------- */
body { font-size: 15px; }
.app-shell {
  direction: ltr;
  flex-direction: row-reverse;
  background: #edf3f5;
}
.app-sidebar,
.app-main { direction: rtl; }
.app-sidebar {
  width: 288px;
  background: #102f46;
  border-inline-start: 1px solid rgba(255,255,255,.08);
  box-shadow: -12px 0 36px rgba(12, 42, 61, .08);
}
.sidebar-brand {
  min-height: 132px;
  padding: 28px 24px;
  justify-content: center;
  background: #0d283d;
}
.sidebar-brand img {
  width: 232px;
  height: auto !important;
  max-height: 80px;
  object-fit: contain;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.sidebar-brand-text { display: none; }
.sidebar-nav { padding: 4px 14px 18px; }
.sidebar-nav .nav-link {
  min-height: 48px;
  padding: 11px 14px;
  margin-bottom: 5px;
  border-radius: 10px;
  font-size: 15px;
  gap: 12px;
}
.sidebar-nav .nav-link i { font-size: 19px; }
.sidebar-nav .nav-link.active {
  background: var(--sidebar-hover);
  box-shadow: inset 0 0 0 1px rgba(176, 227, 227, .24), 0 6px 14px rgba(5, 34, 48, .18);
}
.sidebar-footer { padding: 18px 16px; }
.sidebar-footer .sidebar-user > i { font-size: 24px; }
.app-main { background: #f3f7f8; }
.app-header {
  min-height: 92px;
  padding: 22px clamp(22px, 4vw, 52px);
  border-bottom: 1px solid #dce8eb;
}
.app-header h1 { font-size: 28px; letter-spacing: -.45px; }
.app-header .header-meta { font-size: 14px; }
.app-header .header-meta i { margin-inline-end: 5px; }
.app-content { padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 52px); }
.app-content > .row:first-child { margin-top: 0; }
.stat-card {
  min-height: 110px;
  padding: 22px;
  border: 1px solid #dbe7ea;
  border-radius: 16px;
  background: #fff;
}
.stat-icon { width: 56px; height: 56px; border-radius: 16px; }
.stat-value { font-size: 28px; }
.stat-label { font-size: 14px; }
.nci-card { border-radius: 16px; }
.nci-card .card-header { min-height: 62px; padding: 16px 20px; font-size: 16px; }
.nci-card .card-body { padding: 22px; }
.table { font-size: 15px; }
.table td { padding: 15px 16px; }

/* Public brand lockup: the official wordmark owns the header space. */
.public-header { min-height: 88px; padding: 18px clamp(22px, 5vw, 64px); }
.public-header .brand { flex: 0 0 auto; }
.public-header .brand img {
  width: 232px;
  height: auto;
  max-height: 70px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}
.public-header .header-actions { margin-inline-start: auto; }
.public-header .header-actions .btn { font-size: 14px; min-height: 44px; }

/* Modern public landing surface. */
.home-hero { padding: clamp(48px, 8vw, 92px) 20px 54px; }
.home-hero > .container { max-width: 1180px; }
.home-kicker { margin-bottom: 20px; }
.home-hero h1 { font-size: clamp(34px, 5vw, 58px); max-width: 760px; margin-inline: auto; }
.home-hero .lead { font-size: 19px; }
.home-hero > .container > p[style] { font-size: 17px !important; margin-bottom: 44px !important; }
.home-hero .row { align-items: stretch; }
.home-hero .cta-card { min-height: 318px; }
.home-hero .cta-card:first-child { border-color: #9bd0d2; background: #f8ffff; }
.home-hero .cta-card h2 { font-size: 24px; }
.home-hero + section { max-width: 1180px; }
.home-hero + section .feature-pill { min-height: 148px; }
.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f3f8f9;
  background-image: radial-gradient(circle, rgba(0, 128, 128, .15) 1.25px, transparent 1.25px);
  background-size: 22px 22px;
  border-bottom: 1px solid #dbe9eb;
  padding: clamp(52px, 8vw, 104px) 20px 68px;
}
.landing-hero-grid {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.landing-copy { padding-inline-start: clamp(0px, 2vw, 26px); }
.landing-logo {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 18px;
}
.landing-logo img {
  width: 232px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.landing-copy h1 {
  max-width: 700px;
  margin: 0 0 20px;
  color: var(--text);
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.18;
  letter-spacing: -.9px;
  text-wrap: balance;
}
.landing-lead {
  max-width: 620px;
  margin: 0 0 14px;
  color: var(--primary-deep);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.7;
  font-weight: 700;
}
.landing-support {
  max-width: 560px;
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.9;
}
.landing-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}
.landing-trust span { display: inline-flex; align-items: center; gap: 6px; }
.landing-trust i { color: var(--primary); font-size: 17px; }
.landing-actions { display: grid; gap: 12px; }
.landing-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 18px 20px;
  color: var(--text);
  background: #fff;
  border: 1px solid #d7e5e8;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(16, 49, 70, .06);
  transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.landing-action:hover { color: var(--text); border-color: var(--primary-2); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 49, 70, .10); }
.landing-action-primary { color: #fff; background: var(--primary-deep); border-color: var(--primary-deep); }
.landing-action-primary:hover { color: #fff; border-color: var(--primary-deep); }
.landing-action-icon {
  width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px; color: var(--primary-deep); background: var(--primary-soft); font-size: 24px;
}
.landing-action-primary .landing-action-icon { color: #fff; background: rgba(255,255,255,.15); }
.landing-action-copy { display: grid; gap: 4px; min-width: 0; }
.landing-action-copy strong { font-size: 17px; }
.landing-action-copy small { color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.landing-action-primary .landing-action-copy small { color: #c8e3e5; }
.landing-action-arrow { color: var(--primary); font-size: 19px; }
.landing-action-primary .landing-action-arrow { color: #fff; }
.landing-actions-note { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 12px; line-height: 1.7; padding: 5px 8px; }
.landing-actions-note i { color: var(--primary); font-size: 16px; }
.landing-info { max-width: 1180px; padding-top: 48px; padding-bottom: 64px; }
.landing-info-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
.landing-info-heading span { color: var(--primary-deep); font-size: 13px; font-weight: 700; }
.landing-info-heading strong { color: var(--text); font-size: 18px; }
.landing-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.landing-info-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid #dbe7ea; border-radius: 14px; }
.landing-info-number { color: var(--primary); font-size: 13px; font-weight: 800; padding-top: 2px; }
.landing-info-item div { display: grid; gap: 4px; }
.landing-info-item strong { color: var(--text); font-size: 15px; }
.landing-info-item small { color: var(--text-muted); font-size: 12px; line-height: 1.65; }

/* Shared data listings: clearer hierarchy for samples and reports. */
.data-list-card .card-header {
  min-height: 68px;
  padding: 18px 24px;
  font-size: 17px;
}
.data-list-card .card-header > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.data-list-card .card-header > span:first-child i { margin-inline-end: 0; font-size: 17px; }
.data-list-card .card-header .badge {
  min-width: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.data-list-card > .card-body {
  padding: 18px 24px;
}
.data-list-card .data-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(145px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin: 0;
}
.data-list-card .data-filter-form > [class*="col-"] {
  width: auto;
  max-width: none;
  padding-inline: 0;
}
.data-list-card .data-filter-form .form-label {
  display: block;
  margin-bottom: 7px !important;
  font-size: 12px;
  font-weight: 700;
}
.data-list-card .data-filter-form .form-control,
.data-list-card .data-filter-form .form-select {
  min-height: 46px;
  font-size: 14px;
}
.data-list-card .data-filter-actions {
  align-items: center;
  min-height: 46px;
  gap: 8px !important;
}
.data-list-card .data-filter-actions .btn-primary {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}
.data-list-card .data-table {
  table-layout: fixed;
  min-width: 980px;
  font-size: 14px;
}
.data-list-card .data-table thead th {
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.data-list-card .data-table thead th i {
  margin-inline-end: 4px;
  font-size: 13px;
}
.data-list-card .data-table td {
  padding: 16px;
  line-height: 1.5;
}
.data-list-card .data-table tbody tr { transition: background-color .16s ease-out; }
.data-list-card .data-cell-ref {
  direction: ltr;
  text-align: right;
}
.data-list-card .data-cell-ref code {
  display: inline-block;
  direction: ltr;
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15px;
  white-space: nowrap;
}
.data-list-card .data-cell-patient {
  font-size: 15px;
  white-space: nowrap;
}
.data-list-card .data-cell-patient strong { font-weight: 750; }
.data-list-card .data-cell-date { white-space: nowrap; }
.data-list-card .data-cell-actions {
  white-space: nowrap;
}
.data-list-card .data-actions {
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  white-space: nowrap;
}
.data-list-card .data-actions .btn { flex-shrink: 0; }
.data-list-card .data-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid #edf2f3;
  background: #fbfdfd;
}
.data-list-card .data-pagination .pagination { flex-wrap: wrap; justify-content: flex-end; }
.data-list-card .data-pagination .page-link { color: var(--primary-deep); border-color: #d5e3e5; }
.data-list-card .data-pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.data-list-card .data-pagination .page-item.disabled .page-link { color: #9aabb2; pointer-events: none; background: #f5f8f8; }
.data-list-card .data-table .status-pill {
  padding: 5px 11px;
  font-size: 12px;
  white-space: nowrap;
}
.data-list-card .data-col-ref,
.data-list-card .data-cell-ref { width: 15%; }
.data-list-card .data-col-patient,
.data-list-card .data-cell-patient { width: 15%; }
.samples-table .data-col-file,
.samples-table .data-cell-file { width: 10%; }
.samples-table .data-col-city,
.samples-table .data-cell-city { width: 10%; }
.samples-table .data-col-status,
.samples-table .data-cell-status { width: 14%; }
.samples-table .data-col-date,
.samples-table .data-cell-date { width: 15%; }
.samples-table .data-col-actions { width: 260px !important; }
.reports-table .data-col-diagnosis,
.reports-table .data-cell-diagnosis { width: 28%; }
.reports-table .data-col-doctor,
.reports-table .data-cell-doctor { width: 15%; }
.reports-table .data-col-status,
.reports-table .data-cell-status { width: 13%; }
.reports-table .data-col-actions { width: 250px !important; }
.reports-table .data-actions { flex-wrap: nowrap; }
.reports-table .data-cell-diagnosis {
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reports-table .data-status-meta {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .data-list-card .data-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .data-list-card .data-filter-search,
  .data-list-card .data-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .data-list-card > .card-body { padding: 16px; }
  .data-list-card .card-header { padding-inline: 18px; }
  .data-list-card .data-filter-form { grid-template-columns: 1fr; gap: 10px; }
  .data-list-card .data-filter-search,
  .data-list-card .data-filter-actions { grid-column: auto; }
  .data-list-card .data-filter-actions .btn-primary { min-width: 0; }
  .data-list-card .data-table { min-width: 1040px; }
  .data-list-card .data-pagination { flex-direction: column; align-items: stretch; }
  .data-list-card .data-pagination .pagination { justify-content: center; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .app-sidebar { width: 100%; height: auto; position: relative; overflow: visible; }
  .sidebar-brand { min-height: 92px; padding: 18px 24px; justify-content: flex-start; }
  .sidebar-brand img { width: 210px; max-height: 58px; }
  .sidebar-nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px 12px; }
  .sidebar-divider { display: none; }
  .sidebar-nav .nav-link { flex: 0 0 auto; margin: 0; }
  .sidebar-footer { display: none; }
  .app-header { min-height: 82px; }
  .app-header .header-actions { width: auto; }
}
@media (max-width: 767.98px) {
  .public-header { min-height: 72px; padding: 14px 18px; }
  .public-header { flex-wrap: nowrap; gap: 12px; }
  .public-header .brand img { width: 150px; max-height: 52px; }
  .public-header .header-actions { width: auto; }
  .public-header .header-actions .btn { min-height: 40px; padding-inline: 11px; }
  .home-hero { padding-top: 42px; }
  .home-hero h1 { font-size: 35px; }
  .home-hero .lead { font-size: 16px; }
  .home-hero > .container > p[style] { font-size: 15px !important; margin-bottom: 30px !important; }
  .home-hero .cta-card { min-height: 270px; }
  .landing-hero { padding: 42px 18px 36px; }
  .landing-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .landing-copy h1 { font-size: 38px; }
  .landing-logo img { width: 200px; }
  .landing-lead { font-size: 18px; }
  .landing-support { font-size: 15px; }
  .landing-trust { margin-top: 24px; gap: 8px 14px; font-size: 12px; }
  .landing-action { min-height: 94px; padding: 14px; gap: 12px; }
  .landing-action-icon { width: 46px; height: 46px; font-size: 20px; }
  .landing-action-copy strong { font-size: 15px; }
  .landing-action-copy small { font-size: 11px; }
  .landing-info { padding: 30px 18px 42px; }
  .landing-info-heading { display: grid; gap: 6px; }
  .landing-info-heading strong { font-size: 17px; }
  .landing-info-grid { grid-template-columns: 1fr; }
  .app-header { padding: 18px 18px; }
  .app-header h1 { font-size: 23px; }
  .app-header .header-meta { font-size: 13px; }
  .app-content { padding: 20px 16px; }
}

/* Dashboard hierarchy: fewer containers, clearer next actions. */
.dashboard-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 32px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid #dbe7ea;
  border-radius: 18px;
}
.dashboard-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.dashboard-intro h2 { margin: 0 0 9px; color: var(--text); font-size: 1.75rem; line-height: 1.35; max-width: 38ch; text-wrap: balance; letter-spacing: -.02em; }
.dashboard-intro p { margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.7; max-width: 58ch; }
.dashboard-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; align-items: center; }
.dashboard-intro-actions .btn { min-height: 44px; padding: 10px 16px; font-size: .875rem; }
.dashboard-intro-actions .btn i { font-size: 1rem; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.dashboard-metrics .stat-card { min-width: 0; min-height: 104px; padding: 20px 22px; gap: 16px; border-radius: 16px; }
.dashboard-metrics .stat-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.375rem; }
.dashboard-metrics .stat-value { font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dashboard-metrics .stat-label { margin-top: 6px; font-size: .875rem; line-height: 1.4; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr) minmax(240px, .8fr); gap: 16px; align-items: stretch; }
.dashboard-panel {
  display: flex;
  min-height: 268px;
  flex-direction: column;
  padding: 22px 24px 24px;
  background: #fff;
  border: 1px solid #dbe7ea;
  border-radius: 18px;
}
.dashboard-panel-wide { min-width: 0; }
.dashboard-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.dashboard-panel-heading h3 { margin: 0; color: var(--text); font-size: 1.1875rem; line-height: 1.4; }
.panel-heading-icon { color: var(--primary); font-size: 1.25rem; }
.status-list { display: grid; gap: 15px; margin-bottom: 18px; }
.status-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(100px, 1.6fr) 34px; align-items: center; gap: 14px; }
.status-row-label { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .875rem; white-space: nowrap; }
.status-row-label > i { color: var(--primary); font-size: 1rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-progress { height: 7px; overflow: hidden; background: #edf3f5; border-radius: 99px; }
.status-progress span { display: block; height: 100%; min-width: 3px; border-radius: inherit; }
.status-progress .warning { background: #e2a63a; }
.status-progress .info { background: #43a3c0; }
.status-progress .success { background: var(--success); }
.status-progress .secondary { background: #94a7b2; }
.status-dot.warning { background: #e2a63a; }
.status-dot.info { background: #43a3c0; }
.status-dot.success { background: var(--success); }
.status-dot.secondary { background: #94a7b2; }
.status-row strong { color: var(--text); font-size: 1rem; text-align: end; font-variant-numeric: tabular-nums; }
.panel-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; color: var(--primary-deep); font-size: .875rem; font-weight: 800; }
.panel-link:hover { color: var(--primary); }
.panel-link i { font-size: 1rem; transition: transform .2s ease; }
.panel-link:hover i { transform: translateX(-3px); }
.team-summary { display: grid; gap: 10px; margin-bottom: 18px; }
.team-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; background: #f5f9fa; border-radius: 12px; color: var(--text-soft); font-size: .875rem; }
.team-stat strong { color: var(--primary-deep); font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.quick-action-list { display: grid; gap: 2px; }
.quick-action-list a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; color: var(--text-soft); border-bottom: 1px solid #edf2f3; font-size: .875rem; }
.quick-action-list a:last-child { border-bottom: 0; }
.quick-action-list a > i:first-child { color: var(--primary); font-size: 1.125rem; }
.quick-action-list a > i:last-child { color: var(--text-muted); }
.quick-action-list a:hover { color: var(--primary-deep); }

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); }
  .dashboard-panel-wide { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .dashboard-intro { display: grid; align-items: start; gap: 22px; padding: 22px 20px; }
  .dashboard-intro h2 { font-size: 1.5rem; }
  .dashboard-intro p { font-size: .9375rem; }
  .dashboard-intro-actions { width: 100%; }
  .dashboard-intro-actions .btn { flex: 1 1 auto; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard-metrics .stat-card { min-height: 96px; padding: 16px; gap: 12px; }
  .dashboard-metrics .stat-icon { width: 44px; height: 44px; font-size: 1.2rem; }
  .dashboard-metrics .stat-value { font-size: 1.375rem; }
  .dashboard-metrics .stat-label { font-size: .8125rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-panel-wide { grid-column: auto; }
  .dashboard-panel { min-height: 0; padding: 20px; }
  .status-row { grid-template-columns: minmax(130px, .9fr) minmax(80px, 1.2fr) 28px; gap: 9px; }
  .status-row-label { font-size: .8125rem; gap: 5px; }
}

/* English medical report workspace and hospital-style issued report. */
.report-editor-shell { direction: ltr; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .72fr); gap: 16px; align-items: start; }
.report-editor-main, .report-editor-side { min-width: 0; }
.report-form-card, .report-identity-card, .report-images-card { overflow: hidden; }
.report-form-card .card-body, .report-identity-card .card-body, .report-images-card .card-body { text-align: left; }
.report-form-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: left; }
.report-form-header > div { display: grid; gap: 3px; }
.report-form-header strong { color: var(--text); font-size: 18px; }
.report-form-header code { color: var(--primary-deep); font-size: 12px; }
.report-form-kicker { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.report-section-heading { display: flex; align-items: center; gap: 12px; margin: 25px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.report-section-number { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: 0 0 auto; color: #fff; background: var(--primary-deep); border-radius: 9px; font-size: 12px; font-weight: 800; }
.report-section-heading strong { display: block; color: var(--text); font-size: 16px; }
.report-section-heading small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.report-editor-shell .form-label { display: block; color: var(--text); font-size: 13px; font-weight: 800; margin-bottom: 7px; }
.report-editor-shell .form-control { direction: ltr; text-align: left; font-family: 'Cairo', 'Segoe UI', sans-serif; border-color: #cbdde1; }
.report-editor-shell .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(23,127,136,.12); }
.report-editor-shell .form-control:disabled { color: #536975; background: #f2f6f7; opacity: 1; }
.report-textarea { min-height: 94px; line-height: 1.65; resize: vertical; }
.report-diagnosis { min-height: 120px; background: #fbffff; border-color: #8bc7ca !important; }
.report-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.report-action-bar { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.report-editor-side { display: grid; gap: 14px; }
.report-identity-card .card-header, .report-images-card .card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; }
.report-identity-card .card-header i, .report-images-card .card-header i { color: var(--primary); }
.report-meta-list { display: grid; gap: 0; margin: 0; }
.report-meta-list > div { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf2f3; }
.report-meta-list > div:last-child { border-bottom: 0; }
.report-meta-list dt { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.report-meta-list dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }

.issued-report-card { direction: ltr; overflow: hidden; }
.issued-report-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 28px 30px 22px; background: #f5fafb; border-bottom: 1px solid #cfe2e5; text-align: left; }
.issued-report-topbar h1 { margin: 3px 0 5px; color: var(--text); font-size: 28px; text-transform: uppercase; letter-spacing: .02em; }
.issued-report-ref { color: var(--primary-deep); font-size: 13px; font-weight: 700; }
.issued-report-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.issued-report-body { padding: 28px 30px 34px; text-align: left; }
.issued-report-demographics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 15px 17px; background: #eef1f1; border: 1px solid #d8dfdf; }
.issued-report-demographics > div { display: grid; grid-template-columns: minmax(130px, .85fr) minmax(0, 1.15fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid #d8dfdf; }
.issued-report-demographics span, .issued-report-signatures span { color: #4d5c61; font-size: 12px; font-weight: 700; }
.issued-report-demographics strong, .issued-report-signatures strong { color: #17282d; font-size: 13px; overflow-wrap: anywhere; }
.issued-report-section { margin-top: 23px; page-break-inside: avoid; }
.issued-report-section h2 { margin: 0 0 6px; color: #17282d; font-size: 14px; text-decoration: underline; }
.issued-report-section p { margin: 0; color: #24383d; font-size: 14px; line-height: 1.75; white-space: normal; }
.issued-report-diagnosis { padding: 17px 18px; background: #f4fbfb; border: 1px solid #9bcfd1; }
.issued-report-diagnosis p + p { margin-top: 8px; font-size: 13px; }
.issued-report-signatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; margin-top: 34px; padding-top: 16px; border-top: 1px solid #222; }
.issued-report-signatures > div { display: grid; gap: 5px; }
.issued-report-qr { justify-items: end; text-align: right; }
.issued-report-qr img { width: 60px; height: 60px; }
.issued-report-qr small { color: var(--text-muted); font-size: 10px; }

@media (max-width: 900px) {
  .report-editor-shell { grid-template-columns: 1fr; }
  .report-editor-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-images-card { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .report-form-header, .issued-report-topbar { display: grid; }
  .report-form-header .status-pill { justify-self: start; }
  .report-form-footer { align-items: flex-start; flex-direction: column; }
  .report-editor-side { grid-template-columns: 1fr; }
  .report-images-card { grid-column: auto; }
  .issued-report-topbar, .issued-report-body { padding: 20px 18px; }
  .issued-report-topbar h1 { font-size: 23px; }
  .issued-report-actions { justify-content: flex-start; }
  .issued-report-demographics { grid-template-columns: 1fr; padding: 12px 14px; }
  .issued-report-signatures { grid-template-columns: 1fr; }
  .issued-report-qr { justify-items: start; text-align: left; }
}

/* ---------- Mobile navigation drawer ----------
   The same navigation stays intact; only its presentation changes below 900px. */
.app-shell .sidebar-toggle,
.app-shell .sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .app-shell {
    position: relative;
    display: block;
    overflow-x: hidden;
  }

  .app-shell .app-sidebar {
    position: fixed;
    inset-block: 0;
    right: 0;
    left: auto;
    z-index: 1040;
    width: min(86vw, 320px);
    height: 100dvh;
    min-height: 100dvh;
    transform: translateX(105%);
    transition: transform .84s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
    box-shadow: -20px 0 44px rgba(5, 34, 48, .24);
  }

  .app-shell.menu-open .app-sidebar {
    transform: translateX(0);
  }

  .app-shell .sidebar-brand {
    min-height: 106px;
    padding: 22px 20px;
    justify-content: center;
  }

  .app-shell .sidebar-brand img {
    width: min(230px, 100%);
    max-height: 62px;
  }

  .app-shell .sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: visible;
    padding: 16px 14px 18px;
  }

  .app-shell .sidebar-nav .nav-link {
    width: 100%;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 11px 14px;
    margin: 0;
  }

  .app-shell .sidebar-footer {
    display: flex;
    margin-top: auto;
  }

  .app-shell .app-main {
    min-height: 100vh;
  }

  .app-shell .app-header {
    position: relative;
    min-height: 82px;
    padding-inline-start: 76px;
  }

  .app-shell .sidebar-toggle {
    position: absolute;
    inset-inline-start: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--booking-line);
    border-radius: 8px;
    color: var(--booking-primary-dark);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(16, 26, 50, .08);
  }

  .app-shell .sidebar-toggle i {
    font-size: 1.45rem;
    line-height: 1;
  }

  .app-shell .sidebar-toggle:hover {
    color: var(--booking-primary-dark);
    background: #f4fbfc;
  }

  .app-shell .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1030;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(16, 26, 50, .42);
    opacity: 0;
    pointer-events: none;
    transition: none;
    will-change: opacity;
  }

  .app-shell.menu-open .sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  body:has(.app-shell.menu-open) {
    overflow: hidden;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .app-shell .app-sidebar {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1) !important;
    opacity: 1;
  }

  .app-shell .sidebar-backdrop {
    transition: none !important;
  }
}