/* ==========================================================================
   KAFOO DESIGN SYSTEM — Palette C: Parchment · Indigo · Taupe
   Premium & Confident | Arabic-first RTL | CSS logical properties
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */

:root {

  /* --- Colors: Background --- */
  --bg-canvas:          #FDFBF7;   /* parchment white page bg */
  --bg-surface:         #FFFFFF;   /* card bg */
  --bg-elevated:        #F7F3ED;   /* table headers, hover bg */
  --bg-sidebar:         #1A1A2E;   /* deep indigo sidebar */
  --bg-sidebar-hover:   #2D2D4A;
  --bg-sidebar-active:  rgba(184, 151, 126, 0.15); /* taupe glow */

  /* --- Colors: Text --- */
  --text-primary:             #1A1A2E;
  --text-secondary:           #4A4A5A;
  --text-tertiary:            #8A8A96;
  --text-on-dark:             #F5F0EB;
  --text-on-dark-secondary:   rgba(245, 240, 235, 0.65);

  /* --- Colors: Accent --- */
  --accent:        #B8977E;
  --accent-hover:  #A6856C;
  --accent-subtle: rgba(184, 151, 126, 0.12);

  /* --- Colors: Status --- */
  --success:       #22C55E;
  --success-bg:    rgba(34, 197, 94, 0.1);
  --success-text:  #16A34A;

  --warning:       #F59E0B;
  --warning-bg:    rgba(245, 158, 11, 0.1);
  --warning-text:  #D97706;

  --danger:             #EF4444;
  --danger-bg:          rgba(239, 68, 68, 0.1);
  --danger-text:        #DC2626;
  --status-danger-text: #DC2626;

  --info:          #3B82F6;
  --info-bg:       rgba(59, 130, 246, 0.1);
  --info-text:     #2563EB;

  /* --- Colors: Borders --- */
  --border-default: #E8E0D4;
  --border-subtle:  #F0EBE3;
  --border-on-dark: rgba(255, 255, 255, 0.08);

  /* --- Shadows (warm-tinted with indigo) --- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-md: 0 2px 8px rgba(26, 26, 46, 0.06),
               0 1px 2px rgba(26, 26, 46, 0.04);
  --shadow-lg: 0 4px 16px rgba(26, 26, 46, 0.08),
               0 2px 4px  rgba(26, 26, 46, 0.04);

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 20px;

  /* --- Spacing (4px grid) --- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;

  /* --- Typography --- */
  --font-primary: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Layout --- */
  --sidebar-width:     260px;
  --sidebar-collapsed: 64px;
  --topbar-height:     56px;

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family:      var(--font-primary);
  background-color: var(--bg-canvas);
  color:            var(--text-primary);
  font-size:        14px;
  font-weight:      400;
  line-height:      1.6;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY CLASSES
   -------------------------------------------------------------------------- */

.display {
  font-size:      32px;
  font-weight:    300;
  line-height:    1.1;
  letter-spacing: -0.5px;
}

.h1 {
  font-size:      24px;
  font-weight:    600;
  line-height:    1.2;
  letter-spacing: -0.3px;
}

.h2 {
  font-size:      18px;
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: -0.2px;
}

.h3 {
  font-size:   15px;
  font-weight: 600;
  line-height: 1.4;
}

.body {
  font-size:   14px;
  font-weight: 400;
  line-height: 1.6;
}

.body-strong {
  font-size:   14px;
  font-weight: 500;
  line-height: 1.6;
}

.small {
  font-size:   13px;
  font-weight: 400;
  line-height: 1.5;
}

.caption {
  font-size:      12px;
  font-weight:    500;
  line-height:    1.4;
  letter-spacing: 0.3px;
}

.micro {
  font-size:      11px;
  font-weight:    600;
  line-height:    1.3;
  letter-spacing: 0.5px;
}

/* Text color utilities */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }

/* Font utilities */
.font-mono { font-family: var(--font-mono); }

.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.ltr-isolate {
  direction:    ltr;
  unicode-bidi: isolate;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   LAYOUT: SHELL
   -------------------------------------------------------------------------- */

.shell {
  display:    flex;
  height:     100vh;
  overflow:   hidden;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */

.sidebar {
  width:            var(--sidebar-width);
  background-color: var(--bg-sidebar);
  display:          flex;
  flex-direction:   column;
  flex-shrink:      0;
  transition:       width var(--transition-normal);
  overflow:         hidden;
}

.sidebar-header {
  padding:       var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-on-dark);
  flex-shrink:   0;
}

.sidebar-logo {
  font-size:      28px;
  font-weight:    300;
  color:          var(--text-on-dark);
  letter-spacing: -0.5px;
  white-space:    nowrap;
}

.sidebar-subtitle {
  font-size:  11px;
  color:      var(--text-on-dark-secondary);
  margin-top: var(--sp-1);
  white-space: nowrap;
}

.sidebar-nav {
  padding:    var(--sp-3) var(--sp-2);
  flex:       1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-on-dark) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-on-dark);
  border-radius: 2px;
}

.nav-item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         var(--sp-2) var(--sp-3);
  border-radius:   var(--radius-md);
  color:           var(--text-on-dark-secondary);
  font-size:       14px;
  font-weight:     400;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
  position:        relative;
  text-decoration: none;
  user-select:     none;
  white-space:     nowrap;
}

.nav-item:hover {
  background-color: var(--bg-sidebar-hover);
  color:            var(--text-on-dark);
}

.nav-item.active {
  background-color: var(--bg-sidebar-active);
  color:            var(--accent);
  font-weight:      500;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-icon {
  width:           20px;
  height:          20px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  opacity:         0.7;
  transition:      opacity var(--transition-fast);
}

.nav-item:hover .nav-icon {
  opacity: 1;
}

.nav-badge {
  margin-inline-start: auto;
  background-color:    var(--accent);
  color:               #ffffff;
  font-size:           11px;
  font-weight:         600;
  border-radius:       var(--radius-pill);
  padding:             1px 8px;
  flex-shrink:         0;
}

/* Notification bell */
.notif-dot {
  position:         absolute;
  top:              4px;
  inset-inline-end: 4px;
  width:            8px;
  height:           8px;
  background:       var(--danger-text);
  border-radius:    50%;
  border:           2px solid var(--bg-canvas);
}

.notif-item {
  padding:       12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor:        pointer;
  transition:    background 0.15s;
}
.notif-item:hover { background: var(--bg-elevated); }
.notif-item:last-child { border-bottom: none; }

.nav-dot {
  position:         absolute;
  top:              6px;
  inset-inline-end: 6px;
  width:            8px;
  height:           8px;
  background-color: var(--danger);
  border-radius:    50%;
  flex-shrink:      0;
}

.sidebar-footer {
  padding:       var(--sp-3) var(--sp-3);
  border-top:    1px solid var(--border-on-dark);
  flex-shrink:   0;
}

.user-info {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  min-width:   0;
}

.user-avatar {
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background-color: var(--accent);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  color:            #ffffff;
  font-size:        14px;
  font-weight:      600;
}

.user-name {
  font-size:    13px;
  font-weight:  500;
  color:        var(--text-on-dark);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size:  11px;
  color:      var(--text-on-dark-secondary);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   MAIN CONTENT
   -------------------------------------------------------------------------- */

.main {
  flex:       1;
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
  min-width:  0;
}

.topbar {
  height:           var(--topbar-height);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 32px;
  background-color: var(--bg-surface);
  border-bottom:    1px solid var(--border-subtle);
  flex-shrink:      0;
}

.topbar-title {
  font-size:      20px;
  font-weight:    600;
  letter-spacing: -0.3px;
  color:          var(--text-primary);
}

.topbar-actions {
  display: flex;
  gap:     12px;
  align-items: center;
}

.content {
  flex:       1;
  overflow-y: auto;
  padding:    28px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-thumb {
  background:    var(--border-default);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         8px 18px;
  border-radius:   var(--radius-sm);
  font-size:       13px;
  font-weight:     500;
  font-family:     var(--font-primary);
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast),
                   box-shadow var(--transition-fast);
  border:          1px solid transparent;
  text-decoration: none;
  white-space:     nowrap;
  user-select:     none;
  line-height:     1.4;
  touch-action:    manipulation; /* Eliminates 300ms tap delay on iOS */
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor:  not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background-color: var(--text-primary);
  color:            var(--bg-canvas);
  border-color:     var(--text-primary);
}

.btn-primary:hover {
  background-color: var(--bg-sidebar-hover);
  border-color:     var(--bg-sidebar-hover);
}

/* Secondary */
.btn-secondary {
  background-color: var(--bg-elevated);
  color:            var(--text-primary);
  border-color:     var(--border-default);
}

.btn-secondary:hover {
  background-color: var(--border-default);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  color:            var(--text-secondary);
  border-color:     transparent;
}

.btn-ghost:hover {
  background-color: var(--accent-subtle);
}

/* Danger */
.btn-danger {
  background-color: var(--danger-bg);
  color:            var(--danger-text);
  border-color:     #FECACA;
}

.btn-danger:hover {
  background-color: #FEE2E2;
}

/* Accent */
.btn-accent {
  background-color: var(--accent);
  color:            #ffffff;
  border-color:     var(--accent);
}

.btn-accent:hover {
  background-color: var(--accent-hover);
  border-color:     var(--accent-hover);
}

/* Icon button */
.btn-icon {
  padding: 8px;
  width:   36px;
  height:  36px;
}

/* Language toggle */
.lang-toggle {
  padding:          6px 12px;
  border-radius:    var(--radius-sm);
  font-size:        12px;
  font-weight:      500;
  font-family:      var(--font-primary);
  background-color: transparent;
  border:           1px solid var(--border-default);
  color:            var(--text-tertiary);
  cursor:           pointer;
  transition:       color var(--transition-fast),
                    border-color var(--transition-fast);
}

.lang-toggle:hover {
  color:        var(--text-primary);
  border-color: var(--border-default);
}

/* --------------------------------------------------------------------------
   SECTION TOOLBAR
   -------------------------------------------------------------------------- */

.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-toolbar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .section-toolbar { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--bg-surface);
  border:           1px solid var(--border-subtle);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-sm);
  transition:       box-shadow var(--transition-fast),
                    border-color var(--transition-fast);
}

.card:hover {
  box-shadow:   var(--shadow-md);
  border-color: var(--border-default);
}

.card-body {
  padding: 20px;
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border-subtle);
}

.card-title {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text-primary);
}

/* --------------------------------------------------------------------------
   STAT CARDS
   -------------------------------------------------------------------------- */

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
}

.stat-card {
  padding: 20px;
}

.stat-label {
  font-size:     12px;
  color:         var(--text-tertiary);
  font-weight:   500;
  margin-bottom: 8px;
}

.stat-value {
  font-size:      32px;
  font-weight:    600;
  color:          var(--text-primary);
  letter-spacing: -1px;
  line-height:    1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.stat-change {
  font-size:   12px;
  margin-top:  8px;
  display:     flex;
  align-items: center;
  gap:         4px;
}

.stat-change.up   { color: var(--success-text); }
.stat-change.down { color: var(--danger-text); }

.stat-sparkline {
  margin-top: 8px;
  height:     32px;
}

.stat-sparkline svg {
  width:  100%;
  height: 100%;
}

.stat-sparkline svg path {
  fill:               none;
  stroke:             var(--accent);
  stroke-width:       1.5;
  stroke-linecap:     round;
  stroke-linejoin:    round;
}

/* --------------------------------------------------------------------------
   MY DAY WIDGET
   -------------------------------------------------------------------------- */

.myday-card {
  position:        relative;
  padding:         24px 28px;
  background:      linear-gradient(135deg, var(--accent-subtle), var(--bg-surface) 65%);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-sm);
  overflow:        hidden;
}

.myday-card::before {
  content:         "";
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  background:      radial-gradient(circle at 85% -20%, var(--accent-subtle), transparent 55%);
  opacity:         0.85;
}

html[dir="rtl"] .myday-card::before {
  background:      radial-gradient(circle at 15% -20%, var(--accent-subtle), transparent 55%);
}

.myday-dismiss {
  position:           absolute;
  top:                12px;
  inset-inline-end:   12px;
  width:              28px;
  height:             28px;
  display:            inline-flex;
  align-items:        center;
  justify-content:    center;
  background:         transparent;
  border:             1px solid transparent;
  border-radius:      50%;
  color:              var(--text-tertiary);
  cursor:             pointer;
  transition:         background-color var(--transition-fast),
                      color var(--transition-fast),
                      border-color var(--transition-fast);
  z-index:            1;
}

.myday-dismiss:hover {
  background-color:   var(--border-subtle);
  color:              var(--text-primary);
  border-color:       var(--border-default);
}

.myday-greeting {
  position:        relative;
  font-size:       28px;
  font-weight:     700;
  color:           var(--text-primary);
  letter-spacing:  -0.5px;
  line-height:     1.15;
  margin-bottom:   10px;
}

.myday-summary {
  position:        relative;
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px 12px;
  margin-bottom:   18px;
}

.myday-chip {
  display:         inline-flex;
  align-items:     baseline;
  gap:             6px;
  padding:         6px 12px;
  background:      var(--bg-surface);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-pill);
  font-size:       13px;
  color:           var(--text-secondary);
}

.myday-chip strong {
  font-size:       15px;
  font-weight:     700;
  color:           var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.myday-actions {
  position:        relative;
  display:         flex;
  flex-wrap:       wrap;
  gap:             10px;
}

.myday-actions .btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
}

@media (max-width: 640px) {
  .myday-card     { padding: 20px; }
  .myday-greeting { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   ACTIVITY HEATMAP (Today)
   -------------------------------------------------------------------------- */

.heatmap {
  width:           100%;
  overflow:        hidden;
}

.heatmap-svg {
  display:         block;
  width:           100%;
  height:          96px;
  overflow:        visible;
}

.heatmap-bar {
  fill:            var(--accent);
  transition:      opacity var(--transition-fast);
}

.heatmap-bar:hover {
  opacity:         1 !important;
}

.heatmap-bar-now {
  stroke:          var(--accent);
  stroke-width:    1;
}

.heatmap-baseline {
  stroke:          var(--border-subtle);
  stroke-width:    1;
}

.heatmap-label {
  fill:            var(--text-tertiary);
  font-size:       10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* RTL: mirror the heatmap so 0h reads from the right */
html[dir="rtl"] .heatmap-svg {
  transform:       scaleX(-1);
}

html[dir="rtl"] .heatmap-label {
  transform:       scaleX(-1);
  transform-box:   fill-box;
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   STATUS PILLS
   -------------------------------------------------------------------------- */

.pill {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         3px 12px;
  border-radius:   var(--radius-pill);
  font-size:       12px;
  font-weight:     500;
}

.pill-dot {
  width:       6px;
  height:      6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill-success {
  background-color: var(--success-bg);
  color:            var(--success-text);
}

.pill-success .pill-dot {
  background-color: var(--success);
}

.pill-warning {
  background-color: var(--warning-bg);
  color:            var(--warning-text);
}

.pill-warning .pill-dot {
  background-color: var(--warning);
}

.pill-danger {
  background-color: var(--danger-bg);
  color:            var(--danger-text);
}

.pill-danger .pill-dot {
  background-color: var(--danger);
}

.pill-neutral {
  background-color: var(--bg-elevated);
  color:            var(--text-secondary);
}

.pill-neutral .pill-dot {
  background-color: var(--text-tertiary);
}

.pill-accent {
  background-color: var(--accent-bg, var(--bg-elevated));
  color:            var(--accent, var(--text-secondary));
}

.pill-accent .pill-dot {
  background-color: var(--accent, var(--text-tertiary));
}

.pill-info {
  background-color: var(--info-bg);
  color:            var(--info-text);
}

.pill-info .pill-dot {
  background-color: var(--info);
}

/* --- Qualification stage pills --- */
.qual-pills {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.pill-stage {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs, 11px);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.pill-stage-captured {
  background: var(--success-bg);
  color: var(--success-text);
}
.pill-stage-missing {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}
.qual-score-badge {
  margin-inline-start: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
}
.qual-score-hot  { color: var(--success-text); }
.qual-score-warm { color: var(--warning-text); }
.qual-score-cold { color: var(--text-tertiary); }

/* --- Label pills (conversation tagging) --- */
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
  transition: opacity var(--transition-fast);
}
.label-pill:hover { opacity: 0.85; }
.label-pill .label-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.12);
  color: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.label-pill:hover .label-remove { opacity: 1; }

.label-hot_lead      { background: #FEE2E2; color: #991B1B; }
.label-follow_up     { background: #DBEAFE; color: #1E40AF; }
.label-vip           { background: #FEF3C7; color: #92400E; }
.label-new_client    { background: #D1FAE5; color: #065F46; }
.label-negotiating   { background: #EDE9FE; color: #5B21B6; }
.label-closed_won    { background: #D1FAE5; color: #047857; }
.label-closed_lost   { background: #F3F4F6; color: #6B7280; }

.label-pills-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.label-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: 50;
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  margin-top: 4px;
}
.label-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: start;
  color: var(--text-primary);
  font-family: var(--font-primary);
  transition: background var(--transition-fast);
}
.label-dropdown-item:hover { background: var(--bg-elevated); }
.label-dropdown-item .label-emoji { width: 18px; text-align: center; flex-shrink: 0; }
.label-dropdown-item .label-check { width: 16px; text-align: center; color: var(--accent); flex-shrink: 0; margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

/* Reaction badge */
.reaction-badge {
  position:      absolute;
  bottom:        -8px;
  inset-inline-end: 8px;
  background:    var(--bg-canvas);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding:       2px 6px;
  font-size:     14px;
  line-height:   1;
  box-shadow:    0 2px 4px rgba(0,0,0,0.1);
}

/* Typing indicator */
.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Quick Replies */
.quick-replies {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  padding:     8px 16px;
  border-top:  1px solid var(--border-subtle);
  background:  var(--bg-elevated);
}
.quick-reply-btn {
  background:    var(--bg-canvas);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding:       4px 12px;
  font-size:     12px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background var(--transition-fast), border-color var(--transition-fast);
}
.quick-reply-btn:hover {
  background:   var(--bg-elevated);
  border-color: var(--accent);
}

/* Gallery & Lightbox */
.gallery-strip {
  display:        flex;
  gap:            8px;
  overflow-x:     auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.gallery-thumb {
  width:          140px;
  height:         100px;
  object-fit:     cover;
  border-radius:  var(--radius-md);
  cursor:         pointer;
  scroll-snap-align: start;
  flex-shrink:    0;
  transition:     transform var(--transition-fast);
}
.gallery-thumb:hover { transform: scale(1.03); }

.lightbox {
  position:       fixed;
  inset:          0;
  z-index:        10000;
  background:     rgba(0,0,0,0.85);
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
}

.feature-tag {
  display:        inline-block;
  padding:        3px 10px;
  font-size:      12px;
  border-radius:  var(--radius-pill);
  background:     var(--bg-elevated);
  color:          var(--text-secondary);
  border:         1px solid var(--border-subtle);
}

.table-pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 20px;
  border-top:      1px solid var(--border-subtle);
}

table {
  width:           100%;
  border-collapse: collapse;
}

th {
  text-align:      start;
  padding:         12px 20px;
  font-size:       11px;
  font-weight:     600;
  color:           var(--text-tertiary);
  text-transform:  uppercase;
  letter-spacing:  0.5px;
  background-color: var(--bg-elevated);
  border-bottom:   1px solid var(--border-subtle);
  position:        sticky;
  top:             0;
  z-index:         5;
}

td {
  padding:       14px 20px;
  font-size:     13px;
  color:         var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background-color: rgba(184, 151, 126, 0.04);
}

/* Active row — keyboard navigation highlight */
tr.row-active td {
  background-color: var(--bg-elevated);
  transition:       background-color var(--transition-fast);
}
tr.row-active td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.row-active:focus {
  outline: none;
}

tr.row-unread td:first-child {
  border-inline-start: 3px solid var(--accent);
}
tr.row-unread td {
  font-weight: 600;
}

.td-primary {
  color:       var(--text-primary);
  font-weight: 500;
}

/* Sortable headers */
.th-sortable {
  cursor:     pointer;
  user-select: none;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.th-sortable:hover {
  color:            var(--text-secondary);
  background-color: rgba(184, 151, 126, 0.08);
}

.th-sortable .sort-indicator {
  display:      inline-block;
  margin-inline-start: 4px;
  font-size:    10px;
  opacity:      0.4;
  transition:   opacity var(--transition-fast);
}

.th-sortable .sort-indicator.active {
  opacity: 1;
  color:   var(--accent);
}

/* --------------------------------------------------------------------------
   INPUTS
   -------------------------------------------------------------------------- */

.input {
  padding:          8px 14px;
  border:           1px solid var(--border-default);
  border-radius:    var(--radius-md);
  background-color: var(--bg-canvas);
  font-size:        13px;
  font-family:      var(--font-primary);
  color:            var(--text-primary);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
  outline:          none;
  width:            100%;
}

.input:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(184, 151, 126, 0.1);
}

.input:disabled, .input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-elevated);
}

.input:readonly, .input[readonly] {
  background-color: var(--bg-elevated);
  border-color: var(--border-subtle);
  cursor: default;
}

.input::placeholder {
  color: var(--text-tertiary);
}

.input-search {
  width: 220px;
}

.input-date {
  width: auto;
  min-width: 130px;
  padding: 6px 10px;
  font-size: 12px;
}

.date-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.date-range-group {
  flex-wrap: wrap;
}

.input-label {
  display:       block;
  font-size:     12px;
  font-weight:   500;
  color:         var(--text-secondary);
  margin-bottom: 4px;
}

.input-label.required::after {
  content: " *";
  color: var(--status-danger-text);
}

/* --------------------------------------------------------------------------
   CHAT BUBBLES
   -------------------------------------------------------------------------- */

.msg {
  max-width:     80%;
  padding:       12px 16px;
  border-radius: 12px;
  font-size:     13px;
  line-height:   1.5;
  margin-bottom: 12px;
}

.msg-in {
  background-color:       var(--bg-elevated);
  color:                  var(--text-primary);
  border-end-end-radius:  4px;
}

.msg-out {
  background-color:        var(--text-primary);
  color:                   var(--bg-canvas);
  border-end-start-radius: 4px;
  margin-inline-start:     auto;
}

.msg-time {
  font-size:   10px;
  color:       var(--text-tertiary);
  margin-top:  4px;
}

.msg-out .msg-time {
  color: rgba(253, 251, 247, 0.5);
}

/* Delivery status indicators (sent / delivered / read) */
.msg-status {
  display:        inline-flex;
  align-items:    center;
  vertical-align: middle;
  margin-inline-end: 4px;
}

.msg-status svg {
  width:  12px;
  height: 12px;
  stroke-width: 2.5;
}

.msg-status--muted svg {
  color: var(--text-tertiary);
}

.msg-out .msg-status--muted svg {
  color: rgba(253, 251, 247, 0.5);
}

.msg-status--read svg {
  color: var(--accent);
}

.msg-status--failed svg {
  color: var(--danger, #ef4444);
}

/* --------------------------------------------------------------------------
   CHAT COMPOSE
   -------------------------------------------------------------------------- */

.chat-compose {
  display:          flex;
  align-items:      flex-end;
  gap:              8px;
  padding:          12px 16px;
  border-top:       1px solid var(--border-subtle);
  background:       var(--bg-surface);
  position:         sticky;
  bottom:           0;
}

.chat-compose-input {
  flex:             1;
  resize:           none;
  border:           1px solid var(--border-default);
  border-radius:    var(--radius-md);
  padding:          10px 14px;
  font-size:        14px;
  font-family:      inherit;
  line-height:      1.5;
  background:       var(--bg-canvas);
  color:            var(--text-primary);
  overflow-y:       auto;
  max-height:       96px; /* ~4 lines */
  transition:       border-color var(--transition-fast);
}

.chat-compose-input:focus {
  outline:          none;
  border-color:     var(--accent);
  box-shadow:       0 0 0 3px var(--accent-subtle);
}

.chat-compose-input:disabled {
  opacity:          0.6;
  cursor:           not-allowed;
}

.chat-compose-input::placeholder {
  color:            var(--text-tertiary);
}

.chat-compose-send {
  flex-shrink:      0;
  width:            40px;
  height:           40px;
  padding:          0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--radius-md);
}

.chat-compose-send:disabled {
  opacity:          0.4;
  cursor:           not-allowed;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

/* --------------------------------------------------------------------------
   TOASTS
   -------------------------------------------------------------------------- */

.toast-container {
  position:          fixed;
  top:               16px;
  inset-inline-start: 16px;
  z-index:           9999;
  display:           flex;
  flex-direction:    column;
  gap:               8px;
  pointer-events:    none;
}

.toast {
  display:          flex;
  align-items:      flex-start;
  gap:              12px;
  padding:          16px 20px;
  border-radius:    var(--radius-md);
  background-color: var(--bg-surface);
  box-shadow:       var(--shadow-lg);
  border:           1px solid var(--border-default);
  pointer-events:   auto;
  min-width:        300px;
  max-width:        420px;
  animation:        toast-in 0.2s ease forwards;
  position:         relative;
  overflow:         hidden;
}

.toast-success {
  border-inline-start: 3px solid var(--success);
}

.toast-warning {
  border-inline-start: 3px solid var(--warning);
}

.toast-danger {
  border-inline-start: 3px solid var(--danger);
}

.toast-info {
  border-inline-start: 3px solid var(--info);
}

.toast-message {
  flex:        1;
  font-size:   13px;
  color:       var(--text-primary);
  line-height: 1.5;
}

.toast-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--text-tertiary);
  font-size:   16px;
  line-height: 1;
  padding:     0;
  flex-shrink: 0;
  transition:  color var(--transition-fast);
}

.toast-close:hover {
  color: var(--text-primary);
}

.toast-undo {
  background:    transparent;
  border:        1px solid currentColor;
  border-radius: var(--radius-sm);
  color:         var(--accent);
  cursor:        pointer;
  font-size:     12px;
  font-weight:   600;
  padding:       2px 10px;
  flex-shrink:   0;
  transition:    background var(--transition-fast);
}
.toast-undo:hover {
  background: rgba(255,255,255,0.1);
}

.toast-progress {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  animation: toast-progress 4s linear forwards;
}

@keyframes toast-in {
  from {
    opacity:   0;
    transform: translateY(-8px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity:   1;
    transform: translateY(0);
  }
  to {
    opacity:   0;
    transform: translateY(-8px);
  }
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */

.modal-overlay {
  position:        fixed;
  inset:           0;
  background-color: rgba(26, 26, 46, 0.4);
  z-index:         9000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation:       fade-in 0.2s ease;
}

.modal {
  background-color: var(--bg-surface);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-lg);
  max-width:        520px;
  width:            90%;
  animation:        modal-in 0.2s ease;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px;
  border-bottom:   1px solid var(--border-subtle);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display:      flex;
  align-items:  center;
  justify-content: flex-start;
  gap:          12px;
  padding:      16px 20px;
  border-top:   1px solid var(--border-subtle);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-in {
  from {
    opacity:   0;
    transform: scale(0.95);
  }
  to {
    opacity:   1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   COMMAND PALETTE
   -------------------------------------------------------------------------- */

.palette-overlay {
  position:        fixed;
  inset:           0;
  background-color: rgba(26, 26, 46, 0.4);
  z-index:         9500;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding-top:     20vh;
  animation:       fade-in 0.15s ease;
}

.palette {
  background-color: var(--bg-surface);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-lg);
  max-width:        560px;
  width:            90%;
  overflow:         hidden;
  animation:        modal-in 0.15s ease;
}

.palette-input {
  width:            100%;
  padding:          16px 20px;
  border:           none;
  border-bottom:    1px solid var(--border-subtle);
  font-size:        15px;
  font-family:      var(--font-primary);
  color:            var(--text-primary);
  background-color: transparent;
  outline:          none;
}

.palette-input::placeholder {
  color: var(--text-tertiary);
}

.palette-results {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.palette-results::-webkit-scrollbar {
  width: 4px;
}

.palette-results::-webkit-scrollbar-thumb {
  background:    var(--border-default);
  border-radius: 2px;
}

.palette-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     12px 20px;
  cursor:      pointer;
  transition:  background-color var(--transition-fast);
}

.palette-item:hover,
.palette-item.active {
  background-color: var(--accent-subtle);
}

.palette-item-icon {
  width:   20px;
  height:  20px;
  color:   var(--text-tertiary);
  flex-shrink: 0;
}

.palette-item-label {
  font-size: 14px;
  color:     var(--text-primary);
  flex:      1;
}

.palette-item-hint {
  font-size:           12px;
  color:               var(--text-tertiary);
  margin-inline-start: auto;
}

.palette-footer {
  padding:       8px 20px;
  border-top:    1px solid var(--border-subtle);
  display:       flex;
  gap:           16px;
  align-items:   center;
}

.palette-shortcut {
  font-size:   11px;
  color:       var(--text-tertiary);
  display:     flex;
  align-items: center;
  gap:         4px;
}

.palette-shortcut kbd {
  background-color: var(--bg-elevated);
  border:           1px solid var(--border-default);
  border-radius:    4px;
  padding:          1px 5px;
  font-family:      var(--font-mono);
  font-size:        10px;
  color:            var(--text-secondary);
}

/* --------------------------------------------------------------------------
   LOADING SKELETONS
   -------------------------------------------------------------------------- */

@keyframes skeleton-pulse {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}

.skeleton {
  background:      linear-gradient(
                     90deg,
                     var(--bg-elevated) 0%,
                     var(--border-subtle) 50%,
                     var(--bg-elevated) 100%
                   );
  background-size: 200% 100%;
  animation:       skeleton-pulse 1.5s ease infinite;
  border-radius:   var(--radius-sm);
}

.skeleton-text {
  height:        14px;
  margin-bottom: 8px;
}

.skeleton-title {
  height:        24px;
  width:         60%;
  margin-bottom: 12px;
}

.skeleton-stat {
  height: 40px;
  width:  80px;
}

.skeleton-row {
  height:        48px;
  margin-bottom: 1px;
}

.skeleton-avatar {
  width:         36px;
  height:        36px;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */

.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         64px 32px;
  text-align:      center;
}

.empty-icon {
  width:            64px;
  height:           64px;
  border-radius:    50%;
  background-color: var(--bg-elevated);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--accent);
  margin-bottom:    20px;
  flex-shrink:      0;
}

.empty-title {
  font-size:     18px;
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: 8px;
}

.empty-desc {
  font-size:     14px;
  color:         var(--text-secondary);
  margin-bottom: 20px;
  max-width:     360px;
}

/* --------------------------------------------------------------------------
   ERROR STATE
   -------------------------------------------------------------------------- */

.error-state {
  background-color: var(--danger-bg);
  border:           1px solid #FECACA;
  border-radius:    var(--radius-md);
  padding:          20px;
  display:          flex;
  align-items:      flex-start;
  gap:              12px;
}

.error-message {
  flex:        1;
  font-size:   14px;
  color:       var(--danger-text);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   GRID HELPERS
   -------------------------------------------------------------------------- */

.grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
}

.grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

.hidden {
  display: none !important;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--text-primary);
  color: var(--bg-canvas);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   FOCUS
   -------------------------------------------------------------------------- */

:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--accent);
  color: white;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Tablet (≤ 1199px)
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

  .sidebar {
    width: var(--sidebar-collapsed);
  }

  .sidebar-subtitle,
  .nav-badge,
  .user-name,
  .user-role {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding:         var(--sp-2);
    gap:             0;
  }

  .sidebar-logo {
    font-size:  14px;
    text-align: center;
  }

  .sidebar-header {
    padding: var(--sp-3) var(--sp-2);
  }

  .sidebar-footer {
    justify-content: center;
  }

  .user-info {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 20px;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile (≤ 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .sidebar {
    position:  fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width:     var(--sidebar-width);
    z-index:   8000;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.open ~ .sidebar-backdrop {
    display: block;
  }

  /* Restore hidden elements on mobile open sidebar */
  .sidebar.open .sidebar-subtitle,
  .sidebar.open .nav-badge,
  .sidebar.open .user-name,
  .sidebar.open .user-role {
    display: block;
  }

  .sidebar.open .nav-item {
    justify-content: flex-start;
    padding:         var(--sp-2) var(--sp-3);
    gap:             12px;
  }

  .sidebar.open .sidebar-logo {
    font-size:  28px;
    text-align: start;
  }

  .sidebar.open .user-info {
    justify-content: flex-start;
  }

  .sidebar-backdrop {
    display:          none;
    position:         fixed;
    inset:            0;
    background-color: rgba(26, 26, 46, 0.4);
    z-index:          7999;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .main {
    width: 100%;
  }

  .topbar {
    padding: 0 16px;
  }

  .topbar-title {
    font-size: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 16px;
  }

  .toast {
    min-width: 0;
    width:     calc(100vw - 32px);
  }

  .palette-overlay {
    padding-top: 0;
    align-items: flex-start;
  }

  .palette {
    width:         100%;
    max-width:     100%;
    border-radius: 0;
  }

  .input-search {
    width: 100%;
  }

  .input, select, textarea {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
  }
}

/* --------------------------------------------------------------------------
   DASHBOARD DARK MODE (toggle-driven via data-theme="dark")
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --bg-canvas:       #0F0F1A;
  --bg-surface:      #232340;
  --bg-elevated:     #1A1A2E;
  --text-primary:    #F5F0EB;
  --text-secondary:  rgba(245, 240, 235, 0.7);
  --text-tertiary:   rgba(245, 240, 235, 0.45);
  --text-on-dark:    #F5F0EB;
  --text-on-dark-secondary: rgba(245, 240, 235, 0.65);
  --border-default:  rgba(255, 255, 255, 0.12);
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --accent:          #B8977E;
  --accent-hover:    #CEAB91;
  --accent-subtle:   rgba(184, 151, 126, 0.18);
  --success-bg:      rgba(34, 197, 94, 0.15);
  --warning-bg:      rgba(245, 158, 11, 0.15);
  --danger-bg:       rgba(239, 68, 68, 0.15);
  --info-bg:         rgba(59, 130, 246, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4),
               0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5),
               0 2px 4px  rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

[data-theme="dark"] .sidebar {
  background: #12122A;
}

[data-theme="dark"] .topbar {
  background: var(--bg-surface);
  border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .card {
  background: var(--bg-surface);
}

[data-theme="dark"] .input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
}

[data-theme="dark"] .msg-in {
  background: var(--bg-elevated);
}

[data-theme="dark"] .msg-out {
  background: rgba(184, 151, 126, 0.2);
}

[data-theme="dark"] .palette {
  background: var(--bg-surface);
  border-color: var(--border-default);
}

[data-theme="dark"] .palette-input {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

[data-theme="dark"] .modal {
  background: var(--bg-surface);
}

[data-theme="dark"] th {
  background: var(--bg-elevated);
}

[data-theme="dark"] tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* --------------------------------------------------------------------------
   ADMIN DARK MODE
   -------------------------------------------------------------------------- */

.admin-dark {
  --bg-canvas:       #0F1117;
  --bg-surface:      #1A1B23;
  --bg-elevated:     #24252F;
  --text-primary:    #F1F5F9;
  --text-secondary:  #94A3B8;
  --text-tertiary:   #64748B;
  --border-default:  #2D2E3A;
  --border-subtle:   #24252F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3),
               0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4),
               0 2px 4px  rgba(0, 0, 0, 0.2);
  --accent: #D4AF94;
  --accent-hover: #E0C4A8;
  --accent-subtle: rgba(212, 175, 148, 0.15);
}

/* --- Activity Feed --- */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item.row-clickable:hover {
  background: var(--bg-elevated);
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon.accent {
  background: var(--accent-subtle);
  color: var(--accent);
}

.activity-icon.info {
  background: var(--info-bg);
  color: var(--info-text);
}

.activity-icon.success {
  background: var(--success-bg);
  color: var(--success-text);
}

.activity-icon.warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.activity-icon.danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.activity-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.activity-text {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 12px;
  flex-shrink: 0;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --- */
@media print {
  body { background: white; color: black; font-size: 12pt; }
  .sidebar, .topbar, .toast-container, .modal-overlay, .palette-overlay { display: none !important; }
  .main { margin: 0; padding: 0; }
  .content { padding: 0; overflow: visible; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .btn { display: none; }
  .nav-badge, .nav-dot { display: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }

  /* --- Print listing sheet --- */
  body.print-listing .sidebar,
  body.print-listing .topbar,
  body.print-listing .toast-container,
  body.print-listing .modal-overlay,
  body.print-listing .palette-overlay,
  body.print-listing .lightbox,
  body.print-listing .chat-compose,
  body.print-listing .table-wrap,
  body.print-listing table,
  body.print-listing .stats-grid,
  body.print-listing .table-pagination,
  body.print-listing .sidebar-backdrop {
    display: none !important;
  }

  /* Hide everything except the listing detail card */
  body.print-listing .content > *:not(template) {
    display: none !important;
  }
  body.print-listing .content > template + .card,
  body.print-listing .content [x-show] {
    display: none !important;
  }

  /* Show only the listing detail section */
  body.print-listing .section-gap {
    display: none !important;
  }

  /* Print header branding */
  body.print-listing::before {
    content: "\0643\0641\0648 — Kafoo";
    display: block;
    text-align: center;
    font-size: 18pt;
    font-weight: 700;
    padding: 16pt 0 12pt;
    border-bottom: 2px solid #1a1a2e;
    margin-bottom: 16pt;
    color: #1a1a2e;
  }

  /* Listing detail card: full-width clean layout */
  body.print-listing .card {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    page-break-inside: avoid;
  }

  body.print-listing .card-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 8pt;
    margin-bottom: 12pt;
  }

  body.print-listing .card-title {
    font-size: 16pt;
    font-weight: 600;
    color: #1a1a2e;
  }

  /* Print button itself should be hidden */
  body.print-listing .print-listing-btn {
    display: none !important;
  }

  /* Photo gallery: grid layout for A4 */
  body.print-listing .gallery-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8pt;
    overflow: visible;
    margin-bottom: 12pt;
  }

  body.print-listing .gallery-thumb {
    width: 100%;
    height: auto;
    max-height: 160pt;
    object-fit: cover;
    border-radius: 6pt;
    cursor: default;
  }

  /* Details grid */
  body.print-listing .text-tertiary.caption {
    color: #666;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
  }

  body.print-listing .text-sm {
    font-size: 11pt;
    color: #1a1a2e;
  }

  /* Feature tags */
  body.print-listing .feature-tag {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Page setup */
  @page {
    size: A4;
    margin: 20mm;
  }
}