/* ========================================
   AL-MANARA — Premium Design System
   ======================================== */

/* === ROOT VARIABLES ===
   Ground + text colours are aliased onto the Al-Manara theme tokens (on <body>,
   so they follow dark navy / light grey automatically). The accent hues stay –
   the stat cards / work tags read as status colour, which is on-system.        */
:root {
  --gold: #DAA520;
  --bright-gold: #e8c56a;
  --soft-gold: #DAA520;
  --radius: 16px;
  --radius-sm: 10px;

  /* Complementary accent palette */
  --teal: #45c8c6;
  --teal-dim: rgba(69, 200, 198, 0.12);
  --blue: #6ea1ff;
  --blue-dim: rgba(110, 161, 255, 0.12);
  --emerald: #45c47d;
  --emerald-dim: rgba(69, 196, 125, 0.12);
  --rose: #ec6a5f;
  --rose-dim: rgba(236, 106, 95, 0.12);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.12);
  --amber: #e0a53a;
  --amber-dim: rgba(224, 165, 58, 0.12);
}
body {
  --dark: var(--bg);
  --card: var(--surface);
  --card-hover: var(--surface-2);
  --border: var(--rule);
  --glow: transparent;
  --glow-strong: transparent;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-dim);
  --text-muted: var(--ink-faint);
}

/* === SCROLLBAR === */

/* === KEYFRAMES === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 15px rgba(201,168,76,0.1); }
  50% { box-shadow: 0 0 30px rgba(255,215,0,0.25); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(201,168,76,0.2); }
  50% { border-color: rgba(255,215,0,0.5); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinning i { animation: spin 0.7s linear infinite; }
@keyframes particleFade {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0) translateY(-30px); }
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === BODY === */
body {
  background: var(--dark);
  background-image: none;
  min-height: 100vh;
}

/* === HERO === */
#hero-animation {
  background: radial-gradient(ellipse at center, #111 0%, #0a0a0a 70%);
}
#hero-text {
  transition: opacity 0.8s ease;
}

/* === PARTICLES === */
.particle {
  position: absolute;
  background: var(--bright-gold);
  border-radius: 50%;
  pointer-events: none;
  animation: particleFade 1s ease-out forwards;
  box-shadow: 0 0 8px var(--bright-gold), 0 0 20px var(--gold);
  z-index: 60;
}

/* === HEADER === */
.app-header {
  animation: fadeInUp 0.8s ease-out;
}
/* h1's color now comes from the theme-aware inline style in app.html (var(--ink)) - this used
   to paint the title with a shimmering gold gradient via background-clip:text, but that's from
   before the light/dark theme system existed and doesn't adapt to it (predating theme.css, this
   file's own --gold/--bright-gold are static, not theme-aware) - it also visibly broke the header
   in light mode (a solid rectangle behind the logo/title instead of clipped shimmer text) once the
   header got an explicit background, which is what made it worth removing rather than reconciling.*/

/* === UPLOAD ZONE === */
.upload-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
}
.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.upload-zone:hover::before { opacity: 1; }
.upload-zone:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.upload-zone.drag-active {
  border-color: var(--bright-gold) !important;
  box-shadow: 0 0 60px rgba(255,215,0,0.2), inset 0 0 60px rgba(255,215,0,0.05) !important;
  transform: scale(1.01);
}
.upload-icon {
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.5));
  transition: all 0.3s ease;
}
.upload-zone:hover .upload-icon {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.7));
}
.path-hint {
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: var(--fs-body);
  color: var(--gold);
  display: inline-block;
  margin-top: 12px;
  word-break: break-all;
}

/* === SPINNER === */
.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(201,168,76,0.2);
  border-top-color: var(--bright-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

/* === STAT CARDS === */
.stat-card {
  background: var(--card);
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.6s ease-out both;
  box-shadow: var(--shadow-sm);
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* Per-card accent stripe at top */
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.stat-card:nth-child(1)::after { background: linear-gradient(90deg, var(--gold), var(--bright-gold)); }
.stat-card:nth-child(2)::after { background: linear-gradient(90deg, var(--teal), #5EEAD4); }
.stat-card:nth-child(3)::after { background: linear-gradient(90deg, var(--blue), #93C5FD); }
.stat-card:nth-child(4)::after { background: linear-gradient(90deg, var(--emerald), #6EE7B7); }
.stat-card:hover::after { opacity: 1; }

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: all 0.4s ease;
}
.stat-card:nth-child(1)::before { background: radial-gradient(circle, rgba(201,168,76,0.08), transparent 70%); }
.stat-card:nth-child(2)::before { background: radial-gradient(circle, var(--teal-dim), transparent 70%); }
.stat-card:nth-child(3)::before { background: radial-gradient(circle, var(--blue-dim), transparent 70%); }
.stat-card:nth-child(4)::before { background: radial-gradient(circle, var(--emerald-dim), transparent 70%); }

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.stat-card:nth-child(1):hover { border-color: rgba(201,168,76,0.4); }
.stat-card:nth-child(2):hover { border-color: rgba(45,212,191,0.4); }
.stat-card:nth-child(3):hover { border-color: rgba(96,165,250,0.4); }
.stat-card:nth-child(4):hover { border-color: rgba(52,211,153,0.4); }

.stat-card:hover::before {
  transform: scale(1.8);
}
.stat-icon {
  font-size: var(--fs-kpi);
  margin-bottom: 8px;
  animation: float 3s ease-in-out infinite;
}
.stat-card:nth-child(2) .stat-icon { animation-delay: 0.5s; }
.stat-card:nth-child(3) .stat-icon { animation-delay: 1s; }
.stat-card:nth-child(4) .stat-icon { animation-delay: 1.5s; }

.stat-value {
  font-size: var(--fs-kpi);
  font-weight: 700;
  line-height: 1.1;
}
/* Per-card value colors */
.stat-card:nth-child(1) .stat-value { color: var(--bright-gold); text-shadow: none; }
.stat-card:nth-child(2) .stat-value { color: var(--teal); text-shadow: none; }
.stat-card:nth-child(3) .stat-value { color: var(--blue); text-shadow: none; }
.stat-card:nth-child(4) .stat-value { color: var(--emerald); text-shadow: none; }

.stat-label {
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* === CHART CARDS === */
.chart-card {
  height: fit-content;
  background: var(--card);
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out both;
}
.chart-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.chart-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--text-primary);
  font-size: var(--fs-heading);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* === PRODUCTION TIME FILTER BUTTONS === */
.prod-time-btn {
  background: transparent;
  color: #6b7280;
  border-color: #374151;
}
.prod-time-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-dim);
}
.prod-time-btn.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* === TABLE === */
.table-section {
  background: var(--card);
  backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out both;
  animation-delay: 0.3s;
}
.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.table-header h3 {
  font-family: 'Playfair Display', serif;
  color: var(--text-primary);
  font-size: var(--fs-heading);
}
.table-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.table-controls input,
.table-controls select {
  background: var(--card-hover);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: var(--fs-title);
  transition: all 0.3s ease;
  outline: none;
}
.table-controls input:focus,
.table-controls select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.table-controls select option {
  background: #1a1a1a;
  color: #fff;
}

.table-wrapper {
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-title);
}
thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
thead th {
  background: var(--card-hover);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
thead th:hover { color: var(--text-secondary); }
thead th.sorted-asc::after { content: ' ↑'; color: var(--bright-gold); }
thead th.sorted-desc::after { content: ' ↓'; color: var(--bright-gold); }

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: all 0.25s ease;
  animation: fadeIn 0.4s ease both;
}
tbody tr:nth-child(even) {
  background: transparent;
}
tbody tr:hover {
  background: var(--card-hover);
}
tbody td {
  padding: 10px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}
tbody td:first-child {
  font-family: 'Consolas', monospace;
  color: var(--text-muted);
  font-size: var(--fs-value);
}
.patient-name { color: var(--ink, #fff) !important; font-weight: 500; }   /* was a fixed white: invisible on the light table (2026-10-27) */
.shade-badge {
  display: inline-block;
  background: rgba(201,168,76,0.15);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-body);
  font-weight: 600;
  transition: all 0.2s;
}
.shade-badge:hover {
  background: rgba(201,168,76,0.25);
  transform: scale(1.08);
}
.unit-count {
  color: var(--teal) !important;
  font-weight: 700;
  font-size: var(--fs-heading);
}
.work-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: var(--fs-caption);
  margin: 1px 2px;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.work-tag:hover { transform: translateY(-1px); }
/* Color-coded work tags */
.work-tag--coping     { background: var(--teal-dim); color: var(--teal); border-color: rgba(45,212,191,0.2); }
.work-tag--crown      { background: var(--blue-dim); color: var(--blue); border-color: rgba(96,165,250,0.2); }
.work-tag--pontic     { background: var(--purple-dim); color: var(--purple); border-color: rgba(167,139,250,0.2); }
.work-tag--default    { background: rgba(201,168,76,0.08); color: var(--text-secondary); border-color: rgba(201,168,76,0.1); }
/* Material tags */
.mat-tag--zi          { background: var(--blue-dim); color: var(--blue); border-color: rgba(96,165,250,0.2); }
.mat-tag--pmma        { background: var(--emerald-dim); color: var(--emerald); border-color: rgba(52,211,153,0.2); }
.mat-tag--default     { background: rgba(251,191,36,0.08); color: var(--amber); border-color: rgba(251,191,36,0.15); }

.teeth-list {
  font-family: 'Consolas', monospace;
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.empty-state svg {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-state p { font-size: var(--fs-title); }

/* === INFO BANNERS above the case table (stage filter, cases without clinic / doctor): from the theme tokens, readable in both themes === */
.dm-banner-blue { background: var(--blue-wash, rgba(59,130,246,.15)); border: 1px solid color-mix(in srgb, var(--blue, #3b82f6) 35%, transparent); color: var(--blue-strong, #93c5fd); }
.dm-banner-amber { background: var(--amber-wash, rgba(245,158,11,.12)); border: 1px solid color-mix(in srgb, var(--amber, #f59e0b) 40%, transparent); color: var(--gold-ink, #fcd34d); }

/* === TOAST NOTIFICATION === */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #1a1a1a, #111);
  border: 1px solid var(--border);
  border-left: 4px solid var(--emerald);
  color: var(--text-primary);
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-title);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 100;
  animation: fadeInUp 0.4s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.toast-exit {
  animation: fadeOut 0.3s ease-in forwards;
}
.toast.toast-error { border-left-color: #e55; }
.toast.toast-success { border-left-color: var(--emerald); }
@keyframes fadeOut {
  to { opacity: 0; transform: translateY(10px); }
}

/* === EXPORT BUTTON === */
.export-btn:not(.hidden) { display: flex; }
.export-btn {
  background: linear-gradient(135deg, var(--gold), var(--bright-gold));
  color: var(--dark);
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: var(--fs-value);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 15px rgba(201,168,76,0.2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.export-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255,215,0,0.4);
}
.export-btn:active { transform: translateY(0); }

/* Invoice Button in Table */
.invoice-btn {
  background: var(--blue-dim);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.invoice-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: none;
}

/* Edit / Delete on a manually-entered case (Exocad-sourced rows don't get these -
   that data is owned by Exocad and re-synced from there, not editable here) */
.man-edit-btn, .man-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  transition: color 0.2s;
}
.man-edit-btn:hover { color: var(--blue); }
.man-delete-btn:hover { color: var(--rose); }

/* the Privacy action of the case detail (Erase patient data): a real outlined danger button, not the faint icon style of the row buttons */
.cd-erase-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--rose); border: 1px solid var(--rose);
  font-size: var(--fs-body); transition: background 0.2s;
}
.cd-erase-btn:hover { background: rgba(244, 63, 94, 0.12); }

.action-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

/* Send-for-doctor-approval, same shape as .invoice-btn, its own accent so it
   doesn't compete with Invoice/Edit/Delete for attention */
.review-btn {
  background: var(--purple-wash, rgba(168,85,247,.12));
  border: 1px solid color-mix(in srgb, var(--purple, #a855f7) 30%, transparent);
  color: var(--purple, #a855f7);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.review-btn:hover {
  background: var(--purple, #a855f7);
  color: #fff;
  border-color: var(--purple, #a855f7);
}

.log-btn {
  background: rgba(20,184,166,.12);
  border: 1px solid color-mix(in srgb, #14b8a6 30%, transparent);
  color: #14b8a6;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.log-btn:hover { background: #14b8a6; color: #fff; border-color: #14b8a6; }
.log-btn.active { background: #14b8a6; color: #fff; border-color: #14b8a6; }

/* Case Detail Modal */
.patient-name.cd-clickable { cursor: pointer; transition: color 0.15s; }
.patient-name.cd-clickable:hover { color: #14b8a6 !important; text-decoration: underline; text-underline-offset: 3px; }

#case-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#case-detail-overlay.open { display: flex; }
#case-detail-modal {
  background: var(--card, #0d0f14);
  border: 1px solid var(--border, #252830);
  border-radius: 12px;
  width: 560px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.85);
  animation: cdSlideIn 0.16s ease;
}
@keyframes cdSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#cd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.2rem 0.85rem;
  border-bottom: 1px solid var(--border, #1e2028);
  flex-shrink: 0;
}
#cd-header-left { flex: 1; min-width: 0; }
#cd-case-num { font-size: var(--fs-caption); font-weight: 600; color: #14b8a6; letter-spacing: 0.06em; }
#cd-patient-name { font-size: var(--fs-heading); font-weight: 600; color: var(--ink, #f1f5f9); margin-top: 3px; }
#cd-close {
  background: none; border: none; color: var(--ink-dim, #6b7280); cursor: pointer;
  font-size: var(--fs-heading); padding: 2px 4px; flex-shrink: 0; margin-right: -4px;
  transition: color 0.15s;
}
#cd-close:hover { color: var(--ink, #d1d5db); }
#cd-body { overflow-y: auto; flex: 1; padding: 1rem 1.2rem; }

.cd-section { margin-bottom: 1.1rem; }
.cd-section:last-child { margin-bottom: 0; }
.cd-section-title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ink-dim, #6b7280);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.cd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
.cd-field { display: flex; flex-direction: column; gap: 1px; }
.cd-label { font-size: var(--fs-label); color: var(--ink-dim, #6b7280); text-transform: uppercase; letter-spacing: 0.05em; }
.cd-value { font-size: var(--fs-value); color: var(--ink, #d1d5db); }
.cd-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.cd-timeline { display: flex; flex-direction: column; }
.cd-tl-entry {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.28rem 0; border-bottom: 1px solid var(--border, #1a1c24); font-size: var(--fs-body);
}
.cd-tl-entry:last-child { border-bottom: none; }
.cd-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cd-tl-stage { min-width: 100px; font-weight: 600; }
.cd-tl-who { color: var(--ink, #d1d5db); flex: 1; }
.cd-tl-when { color: var(--ink-dim, #6b7280); font-size: var(--fs-caption); white-space: nowrap; }
.cd-tl-empty { color: var(--ink-dim, #6b7280); font-size: var(--fs-body); font-style: italic; }

.cd-notes {
  background: var(--surface-2, #111318);
  border: 1px solid var(--border, #1e2028);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-value);
  color: var(--ink, #d1d5db);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cd-notes.doctor { border-color: rgba(20,184,166,0.3); }

/* delivery proof (assets/delivery-proof.js): the courier's photo in the case drawer and the "Delivery failed" mark in the table */
.cd-proof { margin-top: .6rem; }
.cd-proof-img { display: block; max-width: 100%; max-height: 240px; width: auto; border-radius: 8px; border: 1px solid var(--rule, #2a3140); object-fit: contain; background: var(--surface-2, #1f2530); }
.cd-delivery-attempt.warn { border-color: var(--amber, #e0a53a); color: var(--amber, #e0a53a); }
.dl-fail-badge { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; font-size: var(--fs-caption); font-weight: 650; white-space: nowrap; color: var(--amber, #e0a53a); background: var(--amber-wash, rgba(224,165,58,.15)); }
.review-badge {
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.review-badge.pending  { background: var(--amber-wash); color: var(--amber); }
.review-badge.changes  { background: color-mix(in srgb, var(--rose) 13%, transparent); color: var(--rose); }
.review-badge.approved { background: var(--green-wash); color: var(--green); }
.dr-note-inline {
  font-size: var(--fs-caption);
  color: var(--rose);
  background: color-mix(in srgb, var(--rose) 8%, transparent);
  border-left: 2px solid var(--rose);
  padding: 3px 8px;
  margin-top: 4px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
  max-width: 180px;
  word-break: break-word;
}
.dr-note-inline i { margin-right: 3px; font-size: var(--fs-label); }
.review-btn.resend {
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  border-color: color-mix(in srgb, var(--rose) 40%, transparent);
  color: var(--rose);
  animation: pulse-resend 2s ease-in-out infinite;
}
.review-btn.resend:hover {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}
@keyframes pulse-resend {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
tr.row-changes-requested { background: color-mix(in srgb, var(--rose) 5%, transparent) !important; }

/* === PAGINATION === */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  gap: 16px;
  flex-wrap: wrap;
}
.pagination-info {
  font-size: var(--fs-value);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--fs-title);
  font-weight: 500;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
  transform: translateY(-1px);
}
.page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.page-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 700;
  box-shadow: none;
}
.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-ellipsis {
  color: var(--text-muted);
  font-size: var(--fs-value);
  padding: 0 4px;
}
.pagination-size {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-size-select {
  background: rgba(26,26,26,0.8);
  border: 1px solid rgba(201,168,76,0.2);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: var(--fs-value);
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}
.page-size-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.15);
}
.page-size-select option {
  background: #1a1a1a;
  color: #fff;
}

/* === PRICE MODAL === */
.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,168,76,0.06);
  transition: background 0.2s;
}
.price-row:hover {
  background: rgba(201,168,76,0.03);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
}
.price-row:last-child {
  border-bottom: none;
}
.price-row-label {
  flex: 1;
  font-size: var(--fs-title);
  color: var(--text-primary);
  font-weight: 500;
}
.price-row-input {
  width: 120px;
  background: rgba(26,26,26,0.8);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--bright-gold);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--fs-title);
  font-weight: 600;
  text-align: right;
  outline: none;
  transition: all 0.2s;
}
.price-row-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.2);
}
.price-row-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.price-currency {
  color: var(--gold);
  font-weight: 600;
  font-size: var(--fs-title);
  min-width: 24px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .stat-value { font-size: var(--fs-kpi); }
  .stat-card { padding: 16px; }
  thead th, tbody td { padding: 8px 10px; }
  .table-controls { width: 100%; }
  .table-controls input,
  .table-controls select { width: 100%; }
  .hide-mobile { display: none !important; }
  .chart-card { padding: 16px; }
  .table-header { padding: 16px; }
  .toast { left: 16px; right: 16px; bottom: 16px; }
  .pagination-bar { flex-direction: column; padding: 12px 16px; }
  .pagination-info { order: -1; width: 100%; text-align: center; }
  .pagination-size { width: 100%; justify-content: center; }
  .page-btn { width: 32px; height: 32px; font-size: var(--fs-body); }
  #page-first, #page-last, #atomica-page-first, #atomica-page-last { display: none !important; }
}

@media (max-width: 480px) {
  .stat-value { font-size: var(--fs-kpi); }
  .stat-label { font-size: var(--fs-label); letter-spacing: 1px; }
  table { font-size: var(--fs-body); }
  .path-hint { font-size: var(--fs-label); padding: 6px 10px; }
  .export-btn { width: 100%; text-align: center; }
  .app-header h1 { font-size: var(--fs-display); }
}

/* === Walk-through 2026-10-08 === */
/* quiet top buttons: only Manual Case stays filled. light-mode.css forces every .export-btn gold with !important, so these are
   !important too and carry one more class / the body.light-mode prefix to win. */
.export-btn.is-quiet { background: var(--surface-2) !important; background-image: none !important; color: var(--ink-dim) !important; border: 1px solid var(--rule) !important; box-shadow: none !important; font-weight: 600; }
.export-btn.is-quiet:hover { color: var(--ink) !important; border-color: var(--ink-faint) !important; filter: none; transform: none; }
body.light-mode .export-btn.is-quiet { background: var(--surface-2) !important; background-image: none !important; color: var(--ink-dim) !important; border-color: var(--rule) !important; box-shadow: none !important; }
body.light-mode .export-btn.is-quiet:hover { color: var(--ink) !important; border-color: var(--ink-faint) !important; filter: none; }
/* light-mode.css makes every h1-h5 ink coloured; the bottleneck name is the alert, keep it red */
body.light-mode #bottleneck-container h4 { color: var(--red) !important; }

/* === Dentomate toolbar (2026-10-08): chip, then the actions right next to it, back button at the far end - one row, no empty strip === */
.dm-toolbar #top-header-buttons { display: flex !important; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 0 0 6px; flex: 1 1 auto; }
@media (max-width: 767px) { .dm-toolbar #top-header-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; order: 3; } }
/* ONE button size for the whole toolbar, like the web's best apps (Linear / Stripe / GitHub): 34 px high, 13 px text, 8 px radius, 14 px side padding.
   Emphasis comes from colour (the blue primary), not from size. The "Exocad Analysis" chip and the back button are the same quiet button. */
.dm-toolbar .export-btn, .dm-toolbar #btn-toggle-exocad, .dm-toolbar #btn-return-tools { height: 34px; padding: 0 14px !important; font-size: var(--fs-value) !important; font-weight: 600 !important; border-radius: 8px !important; display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.dm-toolbar #btn-toggle-exocad, .dm-toolbar #btn-return-tools, body.light-mode .dm-toolbar #btn-toggle-exocad, body.light-mode .dm-toolbar #btn-return-tools { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--rule)) !important; box-shadow: none !important; }
.dm-toolbar #btn-toggle-exocad:hover, .dm-toolbar #btn-return-tools:hover { border-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)) !important; }
.dm-toolbar #btn-toggle-exocad i, .dm-toolbar #btn-return-tools i, .dm-toolbar .export-btn i, .dm-toolbar .export-btn svg { color: var(--gold-ink); }
.dm-toolbar #add-manual-case-btn i { color: var(--on-primary); }
.dm-toolbar #top-header-buttons { gap: 8px; }
/* quiet buttons: clearly visible (ink text, gold icon, a gold-tinted border), not faint */
.export-btn.is-quiet { color: var(--ink) !important; border-color: color-mix(in srgb, var(--gold) 35%, var(--rule)) !important; }
.export-btn.is-quiet svg, .export-btn.is-quiet i { color: var(--gold-ink); }
.export-btn.is-quiet:hover { border-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)) !important; }
body.light-mode .export-btn.is-quiet { color: var(--ink) !important; border-color: color-mix(in srgb, var(--gold) 35%, var(--rule)) !important; }
body.light-mode .export-btn.is-quiet:hover { border-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)) !important; }
/* the one primary action is the one that catches the eye */
.dm-toolbar #add-manual-case-btn { font-weight: 700 !important; }
body.light-mode .dm-toolbar #add-manual-case-btn.export-btn { box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 38%, transparent) !important; }

/* one primary colour for the whole system (theme.css --primary): Manual Case is blue like the other modules' main action */
.dm-toolbar #add-manual-case-btn.export-btn, body.light-mode .dm-toolbar #add-manual-case-btn.export-btn { background: var(--primary) !important; background-image: none !important; color: var(--on-primary) !important; border-color: transparent !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 38%, transparent) !important; }
.dm-toolbar #add-manual-case-btn.export-btn:hover, body.light-mode .dm-toolbar #add-manual-case-btn.export-btn:hover { background: var(--primary-hover) !important; filter: none; }

/* === Cases table (2026-10-08): one main scroll area, header always visible, calmer controls in both themes === */
.table-wrapper { max-height: calc(100vh - 170px); min-height: 320px; }
.action-cell { flex-wrap: nowrap; }
#table-body td:nth-child(5) { white-space: nowrap; }                        /* designer name on one line (5th column since 2026-10-27) */
.custom-status-select { background-color: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; font-size: var(--fs-caption) !important; padding: 5px 28px 5px 10px !important; border-radius: 8px !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%3E%3Cpath%20fill%3D%22%239ca3af%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important; }
.custom-status-select[style*="4ade80"] { color: var(--green) !important; }                           /* completed / delivered keep their colour cue */
.custom-status-select[style*="fb923c"] { color: var(--amber) !important; }                           /* on hold */
.custom-status-select option { background-color: var(--surface) !important; color: var(--ink) !important; }
#table-body select[onchange*="assignDoctor"] { background: transparent !important; border: 1px dashed var(--rule) !important; color: var(--ink-dim) !important; font-size: var(--fs-caption) !important; border-radius: 6px !important; padding: 2px 6px !important; }
#table-body select[onchange*="assignDoctor"]:hover { color: var(--ink) !important; border-color: var(--gold) !important; }
#table-body select[onchange*="assignDoctor"] option { background-color: var(--surface) !important; color: var(--ink) !important; }
body.light-mode .custom-status-select { color: var(--ink) !important; }
body.light-mode .custom-status-select[style*="4ade80"] { color: var(--green) !important; }
body.light-mode .custom-status-select[style*="fb923c"] { color: var(--amber) !important; }

/* === Dentomate cards in the same language as Storex / Accounting (2026-10-08) === */
.stat-card { text-align: left !important; align-items: flex-start !important; }
.stat-card::before { display: none !important; }                                 /* the coloured top strip */
.stat-card .stat-label { font-size: var(--fs-label) !important; letter-spacing: .08em !important; color: var(--ink-dim) !important; }
.stat-card .stat-value, body.light-mode .stat-card:nth-child(n) .stat-value { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-size: var(--fs-kpi) !important; }
.chart-card h3, body.light-mode .chart-card h3 { font-family: var(--font-sans, 'Inter', sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 12px !important; }
.chart-card h3 i, #production-funnel-chart ~ h3 i { color: var(--gold-ink); }
#dashboard h3.text-deepGold, #dashboard h3[class*="text-deepGold"] { color: var(--ink) !important; font-size: var(--fs-title) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }
#dashboard h3[class*="text-deepGold"] i { color: var(--gold-ink); }

/* === ENTERPRISE DENSITY (2026-10-08, Manar: "still too big"): the scale of dense work tools (GitHub, Linear, Jira, Stripe dashboard) ===
   controls 32 px high, 12-13 px text, 12 px card radius, 16 px card padding, 16 px between blocks, a slim 56 px module header. */
.dm-toolbar .export-btn, .dm-toolbar #btn-toggle-exocad, .dm-toolbar #btn-return-tools { height: 32px; padding: 0 12px !important; }
#exocad-dashboard-elements > * + * { margin-top: 16px !important; }
#exocad-dashboard-elements > div:first-child { padding: 10px 12px !important; gap: 10px !important; border-radius: 12px !important; }
#exocad-dashboard-elements > div:first-child label { font-size: var(--fs-label) !important; margin-bottom: 4px !important; }
#exocad-dashboard-elements > div:first-child select, #exocad-dashboard-elements > div:first-child input[type="search"] { height: 32px !important; padding: 0 10px !important; font-size: var(--fs-body) !important; border-radius: 8px !important; }
#exocad-dashboard-elements > div:first-child .items-stretch > button { width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 8px !important; }
.stat-card { padding: 10px 14px !important; border-radius: 12px !important; }
.chart-card { padding: 14px 16px !important; border-radius: 12px !important; }
.chart-card h3 { margin-bottom: 8px !important; }
#dm-head { padding: 8px 24px !important; }
#dm-head-inner { gap: 12px !important; }
#dm-head img { width: 40px !important; height: 40px; object-fit: contain; }
@media (min-width: 768px) { #dm-head img { width: 56px !important; height: 56px; } }   /* same logo size as the Storex header (md:w-14) */
#dm-head h1 { font-size: var(--fs-display) !important; letter-spacing: 0 !important; }
#dm-head p { margin-top: 2px !important; }
#dm-ws-box { padding: 4px 10px !important; margin-top: 0 !important; }

/* touch screens (phone PWA): the dense 32 px controls are for a mouse; fingers need ~40 px (Apple / Material touch-target guidance) */
@media (max-width: 767px), (pointer: coarse) {
  .dm-toolbar .export-btn, .dm-toolbar #btn-toggle-exocad, .dm-toolbar #btn-return-tools { height: 40px; }
  #exocad-dashboard-elements > div:first-child select, #exocad-dashboard-elements > div:first-child input[type="search"] { height: 40px !important; font-size: var(--fs-value) !important; }
  #exocad-dashboard-elements > div:first-child .items-stretch > button { width: 40px !important; height: 40px !important; }
}

/* === Statistics strip (2026-10-08, Manar: "smaller, less space, still clear and tidy") ===
   On a desktop the four stat cards become ONE slim strip: number first (20 px), label next to it, thin dividers - about 40 px high
   instead of 69 px of four separate boxes. Phones keep the swipeable cards. Ids (#stat-cases ...) and the numbers are untouched. */
@media (min-width: 768px) {
  #dashboard div:has(> .stat-card) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; padding: 0 !important; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
  #dashboard div:has(> .stat-card) > .stat-card { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 9px 16px !important; flex-direction: row !important; align-items: baseline !important; justify-content: center !important; gap: 8px; width: auto !important; text-align: left !important; transform: none !important; animation: none !important; opacity: 1 !important; }
  #dashboard div:has(> .stat-card) > .stat-card + .stat-card { border-left: 1px solid var(--rule) !important; }
  #dashboard .stat-card .stat-value, body.light-mode #dashboard .stat-card:nth-child(n) .stat-value { order: 1; font-size: var(--fs-heading) !important; font-weight: 600 !important; line-height: 1.1 !important; margin: 0 !important; font-variant-numeric: tabular-nums; }
  #dashboard .stat-card .stat-label { order: 2; margin: 0 !important; font-size: var(--fs-caption) !important; letter-spacing: .06em !important; }
  #dashboard div:has(> .stat-card) > .stat-card::after, #dashboard div:has(> .stat-card) > .stat-card::before { display: none !important; }   /* the 3 px coloured line on top of every card (it showed as four coloured ticks on the strip) */
}

/* chart cards: a lighter shadow (the heavy shadow was clipped by the scrolling row and showed as a grey band behind the three charts) */
.chart-card { box-shadow: var(--shadow-sm) !important; }

/* the table title in the same style as the chart titles (it was a serif heading with an emoji) */
#exocad-table-section > div:first-of-type h3, #exocad-table-section h3 { font-family: var(--font-sans, 'Inter', sans-serif) !important; font-size: var(--fs-title) !important; font-weight: 700 !important; color: var(--ink) !important; letter-spacing: 0 !important; text-transform: none !important; }
#exocad-table-section h3 i { color: var(--gold-ink); }

/* one vertical rhythm on the dashboard: 16 px between the strip, the two analytics rows and the table
   (the card rows carried their own 16 px bottom padding on top of the next row's 16 px margin = 32 px) */
#dashboard div:has(> .chart-card) { padding-bottom: 0 !important; margin-top: 16px !important; }

/* Cases table: one "Teeth" column (upper + lower stacked), whole row opens the case detail */
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover td { background: rgba(255, 255, 255, 0.04); }
.teeth-cell .teeth-line { display: block; font-size: 0.75rem; font-family: ui-monospace, monospace; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teeth-cell .teeth-line i { font-size: 0.6rem; opacity: 0.6; margin-right: 4px; }

/* Pricing dialog on a phone (2026-10-09, Manar's real phone, 360 px): a long material name (PINK_AD_TEETH_AD) pushed the "JOD" label ABOVE its
   price box. The currency + input stay together on one line (they never wrap), the name takes the rest of the row and breaks inside itself. */
.price-input-wrapper { display: flex; align-items: center; gap: 6px; flex: none; }
.price-row-label { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .price-row-input { width: 96px; } .price-row { gap: 8px; } }

/* pagination controls on a phone / touch screen (2026-10-09): 31-32 px -> 40 px */
@media (max-width: 767px), (pointer: coarse) { .page-btn { width: 40px; height: 40px; } #page-size { min-height: 40px; } }

/* === Phone toolbar (2026-10-09, Manar: "the buttons take too much of the screen, not tidy, one left one right, like a 3-line menu") ===
   Before: 4 rows of buttons (190 px) above the filters. Now: ONE row = [+ Manual Case] [menu]; Exocad Analysis, Al-Manara, PDF Summary, Pricing,
   Security, Logout and Excel Export open as a full-width list under it (#dm-menu-btn toggles .dm-menu-open, see the script at the end of app.html). */
.dm-menu-btn { display: none; }
@media (max-width: 767px) {
  .dm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
  .dm-toolbar #top-header-buttons { display: contents !important; }
  .dm-toolbar #add-manual-case-btn { order: 1; flex: 1 1 0; width: auto; height: 40px; justify-content: center; }
  .dm-toolbar .dm-menu-btn { display: inline-flex; order: 2; flex: none; width: 44px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); cursor: pointer; }
  .dm-toolbar.dm-menu-open .dm-menu-btn { background: var(--blue-wash); border-color: var(--blue); }
  .dm-toolbar > div:first-child, .dm-toolbar #btn-return-tools, .dm-toolbar #pdf-summary-btn, .dm-toolbar #price-settings-btn, .dm-toolbar #change-pass-btn, .dm-toolbar #logout-btn, .dm-toolbar #export-btn, .dm-toolbar #dm-layout-btn { display: none !important; order: 3; flex: 1 1 100%; width: 100%; height: 40px; justify-content: flex-start; }
  .dm-toolbar.dm-menu-open > div:first-child { display: flex !important; height: auto; }
  .dm-toolbar.dm-menu-open > div:first-child #btn-toggle-exocad { width: 100%; justify-content: flex-start; }
  .dm-toolbar.dm-menu-open #btn-return-tools, .dm-toolbar.dm-menu-open #pdf-summary-btn, .dm-toolbar.dm-menu-open #price-settings-btn, .dm-toolbar.dm-menu-open #change-pass-btn, .dm-toolbar.dm-menu-open #dm-layout-btn, .dm-toolbar.dm-menu-open #logout-btn, .dm-toolbar.dm-menu-open #export-btn { display: inline-flex !important; }
}

/* the Design Review button picks a file with the desktop's native dialog: it does not work on a phone, so it is not shown there (the status badge stays) */
@media (max-width: 767px) { .review-btn { display: none !important; } }

/* FLAT KPI CARDS (2026-10-12, Manar: the coloured strip on top of the cards makes the design look AI-made): no coloured top strip (the ::after gradient), no glow, no entrance animation,
   no lift or coloured border on hover. The number stays in the normal ink colour (set above); colour is kept for meaning only. */
.stat-card::after, .stat-card::before { display: none !important; }
.stat-card { animation: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }   /* opacity: the .animate-card class starts at 0 and relied on the animation to fade in */
.stat-card:hover, .stat-card:nth-child(n):hover { transform: none !important; box-shadow: none !important; border-color: var(--rule, var(--border)) !important; }
.stat-card .stat-icon { animation: none !important; }

/* Cases table (2026-10-27): a row is at most two lines tall. The second line of a cell (jaw and shade, material) stays on ONE line, cut with an ellipsis and the full text in the tooltip. */
.mn-cell-sub { font-size: var(--fs-caption); color: var(--ink-dim, #a1a1aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mn-cell-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-cell-line + .mn-cell-line { margin-top: 3px; }
/* Cases table on a desktop window (2026-10-27): ten columns that FIT a 1366 screen without a sideways scroll. Fixed layout with set shares, so a long clinic or patient name is cut with an ellipsis instead of widening the table;
   below 1080 px the table keeps that width and scrolls. A phone keeps its own layout (this block is desktop only). The widths follow the order Case, Patient, Date, Clinic, Designer, Units, Teeth, Work / material, Stage, Actions. */
@media (min-width: 769px) {
  table:has(#table-body) { table-layout: fixed; width: 100%; min-width: 1080px; }
  table:has(#table-body) thead th, #table-body td { padding-left: 10px; padding-right: 10px; }
  table:has(#table-body) thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #table-body td { overflow: hidden; text-overflow: ellipsis; }
  table:has(#table-body) thead th:nth-child(1) { width: 11.2%; }
  table:has(#table-body) thead th:nth-child(2) { width: 12%; }
  table:has(#table-body) thead th:nth-child(3) { width: 8.3%; }
  table:has(#table-body) thead th:nth-child(4) { width: 11.5%; }
  table:has(#table-body) thead th:nth-child(5) { width: 7%; }
  table:has(#table-body) thead th:nth-child(6) { width: 5.2%; }
  table:has(#table-body) thead th:nth-child(7) { width: 10.3%; }
  table:has(#table-body) thead th:nth-child(8) { width: 10.7%; }
  table:has(#table-body) thead th:nth-child(8) { letter-spacing: 0.4px; }
  table:has(#table-body) thead th:nth-child(9) { width: 11%; }
  table:has(#table-body) thead th:nth-child(10) { width: 12.8%; }
  #table-body .action-cell { flex-wrap: wrap; row-gap: 4px; }
  /* when the buttons do not fit one line they make TWO rows, never three: Invoice with the edit / delete icons first, the long Design Review button and the badges after them */
  #table-body .action-cell > * { order: 4; }
  #table-body .action-cell > .invoice-btn { order: 1; }
  #table-body .action-cell > .man-edit-btn, #table-body .action-cell > .man-delete-btn { order: 2; }
  #table-body .action-cell > .review-btn { order: 3; }
  #table-body td select { max-width: 100%; }
  #table-body td select.custom-status-select { width: 100%; min-width: 0 !important; }
  #table-body td:nth-child(4) select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }   /* the doctor list under the clinic name stays inside its column */
}

/* Case detail on a wide screen (2026-10-27, Manar: the card scrolled while the sides were empty; scrolling is the LAST resort): a wider card whose sections flow in TWO columns, in the same order. CSS only: the sections and their buttons are untouched.
   A phone and a narrow window keep the single column. */
@media (min-width: 900px) {
  #case-detail-modal { width: 880px; }
  #cd-body .cd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
}

/* The notes of the case card (2026-10-27, assets/case-notes.js): a list of messages, each with its author, a Doctor / Lab tag and its time; the internal block has a dashed edge: only the lab sees it. Theme tokens only. */
.cd-thread-sub { margin: 0 0 8px; font-size: var(--fs-caption); color: var(--ink-dim, #6b7280); }
/* each block is ONE bordered card (dashed gold for the internal one: only the lab sees it); its message list scrolls on its own after a few messages, like a chat, so the card never grows with the conversation */
.cd-thread { background: var(--surface-2, #111318); border: 1px solid var(--border, #1e2028); border-radius: 10px; padding: 10px 12px; }
.cd-thread-internal { border-style: dashed; border-color: var(--gold, #DAA520); }
.cd-thread-list { max-height: 240px; overflow-y: auto; padding-right: 4px; }   /* the card sets the real height with fitNoteLists (dentomate/app.js) from the room the window has */
.cd-msg { padding: 8px 0; border-top: 1px solid var(--border, #1e2028); }
.cd-msg:first-child { border-top: none; }
.cd-msg-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); margin-bottom: 2px; }
.cd-msg-who { font-weight: 600; color: var(--ink, #d1d5db); }
.cd-msg-tag { font-size: var(--fs-label); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--rule, #2a3140); color: var(--ink-dim, #6b7280); }
.cd-msg-tag.dr { color: var(--green, #14b8a6); border-color: color-mix(in srgb, var(--green, #14b8a6) 45%, transparent); }
.cd-msg-tag.lab { color: var(--blue, #60a5fa); border-color: color-mix(in srgb, var(--blue, #60a5fa) 45%, transparent); }
.cd-msg-time { margin-left: auto; color: var(--ink-dim, #6b7280); white-space: nowrap; }
.cd-msg-b { font-size: var(--fs-value); line-height: 1.5; color: var(--ink, #d1d5db); white-space: pre-wrap; word-break: break-word; }
.cd-msg-empty { margin: 8px 0; font-size: var(--fs-caption); color: var(--ink-dim, #6b7280); font-style: italic; }
/* the conversation as a chat (2026-10-27): the lab is "me" on the right edge (tinted), the doctor on the left (neutral); a long message shows five lines and "Show more" */
#cd-conv-list { display: flex; flex-direction: column; gap: 8px; }
.cd-bub { max-width: 88%; padding: 7px 10px; border-radius: 14px; }
.cd-bub.me { align-self: flex-end; background: color-mix(in srgb, var(--blue, #60a5fa) 18%, transparent); border-bottom-right-radius: 4px; }
.cd-bub.them { align-self: flex-start; background: color-mix(in srgb, var(--ink, #d1d5db) 8%, transparent); border: 1px solid var(--rule, #2a3140); border-bottom-left-radius: 4px; }
.cd-bub-who { font-size: var(--fs-label); font-weight: 600; color: var(--ink-dim, #6b7280); margin-bottom: 2px; }
.cd-bub.me .cd-bub-who { text-align: right; }
.cd-bub-b { font-size: var(--fs-value); line-height: 1.45; color: var(--ink, #d1d5db); white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-bub-b.clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cd-bub-more { background: none; border: none; padding: 2px 0 0; font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--blue, #60a5fa); cursor: pointer; }
.cd-bub-time { margin-top: 3px; font-size: var(--fs-label); color: var(--ink-dim, #6b7280); }
.cd-bub.me .cd-bub-time { text-align: right; }
/* each block's messages and its writing bar are ONE panel (a deeper ground than the card, a hairline border); the bar is its last row: a pill box that grows to about four lines + a round icon button, both 34 px */
.cd-chat { background: color-mix(in srgb, #000 28%, var(--surface-2, #111318)); border: 1px solid var(--rule, #2a3140); border-radius: 12px; overflow: hidden; }
.cd-chat .cd-thread-list { padding: 8px; }
.cd-chat .cd-thread-list:empty { display: none; }   /* no notes yet: no empty band above the writing bar */
.cd-thread-list:empty + .cd-thread-composer { border-top: none; }
.cd-thread-composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--rule, #2a3140); background: var(--surface-2, #111318); }
.cd-thread-composer textarea { flex: 1; min-width: 0; height: 34px; min-height: 34px; max-height: 110px; resize: none; background: var(--surface, #0b0d11); color: var(--ink, #d1d5db); border: 1px solid var(--rule, #2a3140); border-radius: 17px; padding: 6px 14px; font: inherit; font-size: var(--fs-value); line-height: 1.35; outline: none; }
.cd-thread-composer textarea:focus { border-color: var(--blue, #60a5fa); }
.cd-send { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--blue, #60a5fa); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cd-send svg { width: 16px; height: 16px; }
.cd-send:disabled { opacity: .5; cursor: default; }
/* the reply to the doctor leaves 10 seconds after "Send to doctor"; this bar says so and lets the lab take it back (dentomate/app.js sendDoctorReply) */
.cd-undo:empty { display: none; }
.cd-undo { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--rule, #2a3140); border-radius: 8px; font-size: var(--fs-caption); color: var(--ink, #d1d5db); }
.cd-undo button { margin-left: auto; background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--blue, #60a5fa); cursor: pointer; }
/* in the light theme the list sits on the card colour (the grey list background gave small grey text only 4.2:1; on white it is 4.8:1 and the green tag 5:1) */
html.mn-light .cd-thread, body.light-mode .cd-thread { background: var(--surface, #fff); }
html.mn-light .cd-chat, body.light-mode .cd-chat { background: color-mix(in srgb, var(--ink, #111827) 7%, var(--surface, #fff)); }
html.mn-light .cd-thread-composer, body.light-mode .cd-thread-composer { background: var(--surface, #fff); }
html.mn-light .cd-thread-composer textarea, body.light-mode .cd-thread-composer textarea { background: var(--surface-2, #f3f4f6); }