/* ============================================================
   PROPOSAL E - PROFESSIONAL SAAS LIGHT
   Clean, polished, enterprise-grade product design.
   Inspired by Stripe Dashboard, Linear, Vercel.
   Generous spacing. Layered elevation. Refined detail.
   ============================================================ */

:root {
  --color-primary:        #F8485E;
  --color-primary-hover:  #E03550;
  --color-primary-subtle: #FFF0F2;
  --color-primary-border: #FDC5CC;
  --color-row-stripe: rgba(0,0,0,0.03);

  /* Light theme - refined neutral palette */
  --color-bg-base:        #F9FAFB;
  --color-bg-surface:     #FFFFFF;
  --color-bg-elevated:    #F3F4F6;
  --color-bg-muted:       #E5E7EB;
  --color-border:         #E5E7EB;
  --color-border-muted:   #F3F4F6;
  --color-border-focus:   #F8485E;
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-subtle:    #9CA3AF;
  --color-text-link:      #F8485E;

  /* Elevation */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-xl:    0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05);

  /* Semantic */
  --color-danger-bg:    #FEF2F2; --color-danger-text:   #DC2626; --color-danger-border: #FECACA;
  --color-warning-bg:   #FFFBEB; --color-warning-text:  #D97706; --color-warning-border:#FDE68A;
  --color-success-bg:   #F0FDF4; --color-success-text:  #16A34A; --color-success-border:#BBF7D0;
  --color-info-bg:      #EFF6FF; --color-info-text:     #2563EB; --color-info-border:   #BFDBFE;
  --color-neutral-bg:   #F9FAFB; --color-neutral-text:  #6B7280; --color-neutral-border:#E5E7EB;
  --color-rejected-bg:  #FFF7ED; --color-rejected-text: #C2410C; --color-rejected-border:#FED7AA;

  --font-ui:   'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

[data-theme="dark"] {
  --color-bg-base:        #111827;
  --color-bg-surface:     #1F2937;
  --color-bg-elevated:    #374151;
  --color-bg-muted:       #374151;
  --color-border:         #374151;
  --color-border-muted:   #1F2937;
  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #E5E7EB;
  --color-text-muted:     #9CA3AF;
  --color-text-subtle:    #6B7280;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:  0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl:  0 10px 15px rgba(0,0,0,0.35);

  --color-danger-bg:    rgba(220,38,38,0.1);  --color-danger-text:   #F87171; --color-danger-border: rgba(220,38,38,0.3);
  --color-warning-bg:   rgba(217,119,6,0.1);  --color-warning-text:  #FBBF24; --color-warning-border:rgba(217,119,6,0.3);
  --color-success-bg:   rgba(22,163,74,0.1);  --color-success-text:  #4ADE80; --color-success-border:rgba(22,163,74,0.3);
  --color-info-bg:      rgba(37,99,235,0.1);  --color-info-text:     #60A5FA; --color-info-border:   rgba(37,99,235,0.3);
  --color-neutral-bg:   rgba(107,114,128,0.1);--color-neutral-text:  #9CA3AF; --color-neutral-border:rgba(107,114,128,0.2);
  --color-rejected-bg:  rgba(194,65,12,0.1);  --color-rejected-text: #FB923C; --color-rejected-border:rgba(194,65,12,0.3);

  --color-primary-subtle: rgba(248,72,94,0.08);
  --color-primary-border: rgba(248,72,94,0.3);
  --color-row-stripe: rgba(255,255,255,0.035);
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-ui); font-size: 14px; color: var(--color-text-primary); background: var(--color-bg-base); -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--color-text-link); text-decoration: none; }

/* === LAYOUT === */
.app { display: flex; flex-direction: column; flex: 1; }

.topbar {
  height: 48px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  position: sticky; top: 0; z-index: 210;
  box-shadow: var(--shadow-sm);
}
.topbar-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
.topbar-logo img { height: 38px; margin-top: -2px; margin-bottom: -8px; }
.topbar-logo .logo-dark { display: none; }
[data-theme="dark"] .topbar-logo .logo-light { display: none; }
[data-theme="dark"] .topbar-logo .logo-dark  { display: block; }
.proposal-chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
  padding: 2px 8px; border-radius: 20px;
}
.topbar-search {
  flex: 1; max-width: 320px;
  height: 34px; padding: 0 12px 0 34px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 13px;
  color: var(--color-text-primary); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
}
.topbar-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); background-color: var(--color-bg-surface); }
.topbar-search::placeholder { color: var(--color-text-subtle); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #F8485E 0%, #D93A4F 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer;
}

.body-wrap { display: flex; flex: 1; }

/* === SIDEBAR COLLAPSIBLE GROUPS === */
.nav-group { display: flex; flex-direction: column; }

.nav-group-header {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 6px 10px;
  margin-top: 4px;
  background: none; border: none;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; user-select: none;
  transition: color 0.12s, background 0.12s;
}
.nav-group-header:hover { color: var(--color-text-secondary); background: var(--color-bg-elevated); }
.nav-group-header.open   { color: var(--color-text-secondary); }
.nav-group-header .icon  { width: 18px; text-align: center; opacity: 0.7; }
.nav-group-chevron {
  margin-left: auto; flex-shrink: 0; color: var(--color-text-subtle);
  transition: transform 0.18s ease;
}
.nav-group-header.open .nav-group-chevron { transform: rotate(180deg); }

/* Smooth open/close via CSS grid */
.nav-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}
.nav-group-items.open { grid-template-rows: 1fr; }
.nav-group-items > div { overflow: hidden; min-height: 0; }

/* Items inside groups: indent + smaller font */
.nav-group-items a {
  padding-left: 32px !important;
  font-size: 12px !important;
}

/* === SIDEBAR === */
.sidebar {
  width: 240px;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  padding: 16px 8px;
  position: sticky; top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-section {
  margin-top: 20px; margin-bottom: 4px;
  padding: 0 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-subtle);
}
.sidebar a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 13px; font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none; border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
}
.sidebar a .icon { font-size: 14px; width: 18px; text-align: center; }
.sidebar a:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.sidebar a.active {
  color: var(--color-primary); background: var(--color-primary-subtle);
  font-weight: 600;
}
.sidebar a .badge-count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  background: var(--color-bg-muted); color: var(--color-text-muted);
  padding: 1px 6px; border-radius: 10px;
}
.sidebar a.active .badge-count {
  background: var(--color-primary-border); color: var(--color-primary);
}

.content { flex: 1; padding: 28px 32px; }

/* === PAGE HEADER === */
.page-header { margin-bottom: 12px; }
.page-title { font-size: 20px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; }
.page-desc { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }

/* === SECTION === */
.section { margin-bottom: 40px; }
.section-heading {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text-primary); margin-bottom: 3px;
}
.section-sub {
  font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px;
}
.section-rationale {
  font-size: 12px; line-height: 1.75; color: var(--color-text-secondary);
  padding: 8px 12px; margin-bottom: 18px;
  background: var(--color-bg-elevated);
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.divider { height: 1px; background: var(--color-border); margin: 48px 0; }

/* === COLOR SYSTEM === */
.palette-group { margin-bottom: 20px; }
.palette-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; }
.swatch-row { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 96px; height: 64px; padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-sm);
}
.swatch-name { font-size: 10px; font-weight: 600; line-height: 1.3; }
.swatch-hex { font-size: 10px; font-family: var(--font-mono); opacity: 0.65; }

/* === TYPOGRAPHY === */
.type-scale { display: flex; flex-direction: column; gap: 0; }
.type-row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 16px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-muted);
}
.type-row:last-child { border-bottom: none; }
.type-meta { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); line-height: 1.5; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all 0.15s;
}
.btn-primary {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn-secondary {
  background: var(--color-bg-surface); color: var(--color-text-secondary);
  border-color: var(--color-border); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--color-bg-elevated); border-color: #D1D5DB; }
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.btn-danger {
  background: var(--color-danger-bg); color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}
.btn-danger:hover { background: #FEE2E2; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-inline {
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--radius-sm); border-color: transparent;
  background: transparent; color: var(--color-text-muted); font-size: 14px;
}
.btn-inline:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* === FORM CONTROLS === */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.form-hint { font-size: 11px; color: var(--color-text-muted); }
.form-error-msg { font-size: 11px; color: var(--color-danger-text); }
.form-control {
  height: 36px; padding: 0 12px;
  font-family: var(--font-ui); font-size: 13px;
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle), var(--shadow-sm);
  background: var(--color-bg-surface);
}
.form-control::placeholder { color: var(--color-text-subtle); }
.form-control.error { border-color: var(--color-danger-text); }
.form-control.error:focus { box-shadow: 0 0 0 3px var(--color-danger-bg); }

/* === BADGES === */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-verified   { background: var(--color-danger-bg);   color: var(--color-danger-text);   border-color: var(--color-danger-border); }
.badge-verified .badge-dot   { background: var(--color-danger-text); }
.badge-takedown   { background: var(--color-warning-bg);  color: var(--color-warning-text);  border-color: var(--color-warning-border); }
.badge-takedown .badge-dot   { background: var(--color-warning-text); }
.badge-neutralized{ background: var(--color-success-bg);  color: var(--color-success-text);  border-color: var(--color-success-border); }
.badge-neutralized .badge-dot{ background: var(--color-success-text); }
.badge-pending    { background: var(--color-neutral-bg);  color: var(--color-neutral-text);  border-color: var(--color-neutral-border); }
.badge-pending .badge-dot    { background: var(--color-neutral-text); }
.badge-unconfirmed{ background: var(--color-info-bg);     color: var(--color-info-text);     border-color: var(--color-info-border); }
.badge-unconfirmed .badge-dot{ background: var(--color-info-text); }
.badge-rejected   { background: var(--color-rejected-bg); color: var(--color-rejected-text); border-color: var(--color-rejected-border); }
.badge-rejected .badge-dot   { background: var(--color-rejected-text); }

/* === TABLE === */
.table-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.table-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--color-border);
}
.table-toolbar-title { font-size: 13px; font-weight: 600; flex: 1; }
.table-toolbar-count { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--color-bg-elevated);
  padding: 0 16px; height: 36px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
[data-theme="dark"] thead th { border-bottom-color: var(--color-text-muted); }
[data-theme="dark"] .tagify {
  --tag-bg:    #4B5563;
  --tag-hover: #6B7280;
}
[data-theme="dark"] .tagify__tag { border-color: #6B7280 !important; }
tbody tr { transition: background 0.1s; }
tbody tr:nth-child(even) { background: var(--color-row-stripe); }
tbody tr:hover { background: var(--color-primary-subtle) !important; }
tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border-muted); }
tbody td { padding: 0 16px; height: 48px; font-size: 13px; color: var(--color-text-secondary); }
tbody td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-primary); }
tbody td.muted { color: var(--color-text-muted); font-size: 12px; }
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-muted);
  background: var(--color-bg-base);
}

/* === CARDS === */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card-body { padding: 14px 16px; }
.card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center;
}
.card-title { font-size: 14px; font-weight: 600; }
.card-subtitle { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.card-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-base);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* === STAT CARDS === */
.stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.stat-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.stat-icon {
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon.danger  { color: var(--color-text-muted); }
.stat-icon.warning { color: var(--color-text-muted); }
.stat-icon.success { color: var(--color-text-muted); }
.stat-icon.neutral { color: var(--color-text-muted); }
.stat-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); margin-top: 2px; }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-primary); }
.stat-change { font-size: 11px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.stat-change.up { color: var(--color-danger-text); }
.stat-change.down { color: var(--color-success-text); }
.stat-change.neutral { color: var(--color-text-muted); }

/* === ALERTS === */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid; font-size: 13px; line-height: 1.5;
}
.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.alert strong { font-weight: 600; display: block; margin-bottom: 1px; }
.alert-danger   { background: var(--color-danger-bg);   border-color: var(--color-danger-border);   color: var(--color-danger-text); }
.alert-warning  { background: var(--color-warning-bg);  border-color: var(--color-warning-border);  color: var(--color-warning-text); }
.alert-success  { background: var(--color-success-bg);  border-color: var(--color-success-border);  color: var(--color-success-text); }
.alert-info     { background: var(--color-info-bg);     border-color: var(--color-info-border);     color: var(--color-info-text); }
.alert .alert-body { color: var(--color-text-secondary); font-size: 12px; }

/* === TAGS === */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 10px; border-radius: 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  font-size: 12px; font-weight: 500;
  color: var(--color-text-muted); cursor: default;
}
.tag:hover { background: var(--color-bg-muted); }
.tag-primary { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary-border); }
.tag-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border-color: var(--color-danger-border); }

/* === TAGIFY INTEGRATION === */
/* Outer container — looks like form-control */
.tagify {
  --tags-border-color:        var(--color-border);
  --tags-hover-border-color:  var(--color-text-subtle);
  --tags-focus-border-color:  var(--color-primary);
  --tag-bg:                   var(--color-bg-muted);
  --tag-hover:                #D1D5DB;
  --tag-text-color:           var(--color-text-muted);
  --tag-border-radius:        20px;
  --tag-pad:                  0 8px;
  --tag-line-height:          20px;
  --tag-inset-shadow-size:    2em;
  --tag-remove-btn-bg:        transparent;
  --tag-remove-btn-bg--hover: transparent;
  --tagify-dd-color-primary:  var(--color-primary);
  --tagify-dd-bg-color:       var(--color-bg-surface);
  background: var(--color-bg-surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  min-height: 36px;
  padding: 4px 4px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tagify:hover { border-color: var(--color-text-subtle); }
.tagify:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-subtle), var(--shadow-sm);
}
/* Individual tag pill */
.tagify__tag {
  height: 22px;
  border: 1px solid #D1D5DB;
  border-radius: 20px;
  margin: 2px;
}
.tagify__tag > div {
  border-radius: 20px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  background: var(--tag-bg);
  transition: background 0.12s;
}
/* Disable Tagify's inset-shadow background trick; we use direct background instead */
.tagify__tag > div::before { display: none !important; }
.tagify__tag:hover > div { background: var(--tag-hover); }
/* Remove × button — always hidden (add-only, no removal) */
.tagify__tag__removeBtn { display: none !important; }
/* Input cursor inside tagify */
.tagify__input { color: var(--color-text-primary); font-size: 12px; }
.tagify__input::before { color: var(--color-text-subtle) !important; }
/* Dropdown */
.tagify__dropdown {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-ui);
  font-size: 12px;
  margin-top: 4px;
}
.tagify__dropdown__item { padding: 6px 12px; color: var(--color-text-primary); border-radius: var(--radius-sm); }
.tagify__dropdown__item--active { background: var(--color-primary-subtle); color: var(--color-primary); }
.tagify__dropdown__item:hover   { background: var(--color-bg-elevated); }

/* Tag color variants — applied via Tagify's 'class' property */
.tagify__tag.tag-primary {
  border-color: var(--color-primary-border) !important;
  --tag-bg: var(--color-primary-subtle);
  --tag-hover: var(--color-primary-subtle);
  --tag-text-color: var(--color-primary);
}
.tagify__tag.tag-danger {
  border-color: var(--color-danger-border) !important;
  --tag-bg: var(--color-danger-bg);
  --tag-hover: var(--color-danger-bg);
  --tag-text-color: var(--color-danger-text);
}
.tagify__tag.tag-warning {
  border-color: var(--color-warning-border) !important;
  --tag-bg: var(--color-warning-bg);
  --tag-hover: var(--color-warning-bg);
  --tag-text-color: var(--color-warning-text);
}
.tagify__tag.tag-success {
  border-color: var(--color-success-border) !important;
  --tag-bg: var(--color-success-bg);
  --tag-hover: var(--color-success-bg);
  --tag-text-color: var(--color-success-text);
}
.tagify__tag.tag-info {
  border-color: var(--color-info-border) !important;
  --tag-bg: var(--color-info-bg);
  --tag-hover: var(--color-info-bg);
  --tag-text-color: var(--color-info-text);
}

/* Read-only display mode: dashed border, no input cursor */
.tagify--readonly {
  background: var(--color-bg-elevated) !important;
  border-style: dashed !important;
  border-color: var(--color-border-muted) !important;
  box-shadow: none !important;
  pointer-events: none;
  cursor: default;
}
.tagify--readonly .tagify__input { display: none; }
.tagify--readonly .tagify__tag { pointer-events: none; }
.tagify--readonly .tagify__tag__removeBtn { display: none; }

/* Smaller variant — for table cells and compact layouts */
.tagify.tagify--sm {
  min-height: 28px;
  padding: 2px 3px;
  font-size: 11px;
}
.tagify.tagify--sm .tagify__tag {
  height: 18px;
  margin: 1px;
}
.tagify.tagify--sm .tagify__tag > div {
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}
.tagify.tagify--sm .tagify__input { font-size: 11px; }
/* Single small tag used inline (outside a .tagify container) */
tag.tagify__tag.tagify--sm { height: 18px; margin: 1px; }
tag.tagify__tag.tagify--sm > div { padding: 0 7px; font-size: 11px; font-weight: 500; line-height: 16px; }

/* === EMPTY STATE === */
.empty-state {
  text-align: center; padding: 48px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty-icon { font-size: 32px; opacity: 0.3; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.empty-desc { font-size: 13px; color: var(--color-text-muted); }

/* === THEME TOGGLE === */
.theme-btn {
  height: 30px; padding: 0 12px; border-radius: 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer; transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.theme-btn:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }

/* === LAYOUT HELPERS === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--color-text-muted); }
/* === RESPONSIVE / MOBILE === */

/* Hamburger -- only shown on mobile */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; padding: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--color-bg-elevated); }
.nav-toggle svg { display: block; }

/* Sidebar backdrop -- always in DOM, activated by body.nav-open */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
/* Lock body scroll when drawer is open */
body.nav-open { overflow: hidden; }

/* ---- Tablet / large phone: <= 768px ---- */
@media (max-width: 768px) {

  /* Topbar */
  .nav-toggle { display: flex; }
  .topbar { height: 52px; padding: 0 12px; gap: 8px; }
  .topbar-search { display: none; }
  /* Theme toggle: icon only to save space */
  .theme-btn { padding: 0 10px; font-size: 0; width: 36px; height: 30px; }
  .theme-btn::before { content: "☀"; font-size: 14px; }

  /* Sidebar: fixed drawer, slides in from left */
  .sidebar {
    position: fixed;
    top: 52px; left: 0;
    width: 260px;
    height: calc(100vh - 52px);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 200;
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { display: block; }
  /* Bigger tap targets in sidebar */
  .sidebar a { height: 44px; padding: 0 12px; }

  /* Body layout */
  .body-wrap { flex-direction: column; }
  .content { padding: 16px 14px; min-width: 0; overflow: hidden; }

  /* Page header: full-width stacked */
  .page-header > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }
  .page-header .btn { width: 100%; justify-content: center; }

  /* Stats: 2 columns */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 22px; }

  /* All other grids: single column */
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* Color swatches */
  .swatch { width: 76px; height: 54px; }

  /* Typography scale: stack meta above specimen */
  .type-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .type-meta { order: -1; }

  /* Buttons: wrap when they overflow */
  .flex.items-center.gap-8 { flex-wrap: wrap; }

  /* Form controls: always full width */
  .form-control { width: 100% !important; max-width: 100% !important; }

  /* Badges wrapper: allow wrap (already does, kept for clarity) */
  .flex.gap-8 { flex-wrap: wrap; }

  /* Tables: remove clip so horizontal scroll works */
  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }
  /* Toolbar: wrap controls on a second line */
  .table-toolbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
  .table-toolbar-title { flex-basis: 100%; }
  .table-toolbar .form-control,
  .table-toolbar .toolbar-filter,
  .table-toolbar input[type="text"] { flex: 1; width: auto !important; max-width: 100% !important; }
  .table-toolbar .btn { height: 34px; }
  .table-footer { flex-wrap: wrap; gap: 8px; }
  /* Mono URLs: give them enough room to read; table scrolls horizontally */
  td.mono { min-width: 220px; white-space: nowrap; }

  /* DataTables toolbar: same wrap treatment */
  .dt-title { flex-basis: 100%; margin-bottom: 4px; }
  .dt-toolbar-right {
    flex-wrap: wrap; width: 100%;
    border-left: none !important; padding-left: 0 !important;
    gap: 6px;
  }
  .dt-toolbar-right .dataTables_filter { border-left: none; padding-left: 0; flex: 1; }
  .dataTables_filter input { width: 100% !important; box-sizing: border-box; }
  /* Pagination: bigger tap targets */
  .dataTables_paginate .paginate_button.previous,
  .dataTables_paginate .paginate_button.next { height: 36px; padding: 0 14px; }
  .dataTables_info { flex-basis: 100%; }
  .dataTables_paginate { flex-wrap: wrap; }

  /* DT 2.x mobile */
  .dt-container > .dt-layout-row:first-child { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
  .dt-container > .dt-layout-row:first-child > .dt-layout-start { flex-basis: 100%; }
  .dt-container > .dt-layout-row:first-child > .dt-layout-end {
    flex-wrap: wrap; width: 100%;
    border-left: none !important; padding-left: 0 !important;
    gap: 6px;
  }
  .dt-container > .dt-layout-row:first-child .dt-search { border-left: none !important; padding-left: 0 !important; flex: 1; }
  .dt-container .dt-search input { width: 100% !important; box-sizing: border-box; }
  .dt-paging .dt-paging-button.previous,
  .dt-paging .dt-paging-button.next { height: 36px; padding: 0 14px; }
  .dt-container > .dt-layout-row:not(:first-child):not(.dt-layout-table) { flex-wrap: wrap; gap: 8px; }
  .dt-paging { flex-wrap: wrap; margin-left: 0; }

  /* Cards */
  .card-body { padding: 12px; }
  .card-header { padding: 9px 12px; }
  /* Remove max-width caps that cause overflow on small screens */
  .card[style*="max-width"] { max-width: 100% !important; }

  /* Accordion key-value: stack instead of side-by-side */
  .accordion-kv { grid-template-columns: 1fr; row-gap: 2px; }
  .accordion-kv dt { margin-top: 10px; }
  .accordion-kv dt:first-of-type { margin-top: 0; }
  /* Bigger accordion touch target */
  .accordion-header { padding: 12px 14px; min-height: 44px; }

  /* Tabs: horizontal scroll, buttons don't shrink */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
    flex-wrap: nowrap;
  }
  .tab-btn { flex-shrink: 0; height: 42px; padding: 0 16px; }
  .tab-bar-pills { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-btn-pill { flex-shrink: 0; height: 34px; }

  /* Charts: shorter on mobile to leave room for content below */
  #chart-bar, #chart-line, #chart-donut { height: 190px !important; }

  /* Section rationale: larger text for mobile readability */
  .section-rationale { font-size: 13px; line-height: 1.75; }

  /* Inline buttons: bigger tap target */
  .btn-inline { width: 36px; height: 36px; }

  /* Breadcrumb: allow wrap */
  .breadcrumb-bar { flex-wrap: wrap; row-gap: 2px; }

  /* Accordion and tab panels with grids inside */
  .accordion { max-width: 100% !important; }
  [class*="grid-"] { max-width: 100%; }
}

/* ---- Small phones: <= 480px ---- */
@media (max-width: 480px) {
  .topbar { height: 48px; }
  .sidebar { top: 48px; height: calc(100vh - 48px); }
  .content { padding: 12px; }

  /* Single column everything */
  .grid-4 { grid-template-columns: 1fr; }
  .stat-value { font-size: 20px; }
  .page-title { font-size: 18px; }

  /* Full-width primary actions only in page-level contexts */
  .page-header .btn { width: 100%; justify-content: center; }
}

/* === DATATABLES OVERRIDE === */
/* Strategy: use DT's dom option to inject .table-card/.table-toolbar/.table-footer
   directly; zero new card/toolbar/footer CSS needed, those come from existing rules. */

/* Title area inside .table-toolbar */
.dt-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.dt-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Shared filter-input style — used by native Tables toolbar and both DT variants */
.toolbar-filter {
  font-size: 12px;
  height: 30px; padding: 0 10px;
  font-family: var(--font-ui);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  outline: none; width: 200px; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.toolbar-filter:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  background-color: var(--color-bg-surface);
}
.toolbar-filter::placeholder { color: var(--color-text-subtle); }

/* Hide the "Search:" label text, style the input like the native filter */
.dataTables_filter label { font-size: 0; }
.dataTables_filter input {
  font-size: 12px;
  height: 30px; padding: 0 10px;
  font-family: var(--font-ui);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  outline: none; width: 200px; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dataTables_filter input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  background-color: var(--color-bg-surface);
}
.dataTables_filter input::placeholder { color: var(--color-text-subtle); }

/* Table: inherits base thead th / tbody td rules; only DT specifics below */
table.dataTable { width: 100%; border-collapse: collapse; margin: 0; }
table.dataTable thead th { position: relative; cursor: pointer; }
table.dataTable thead th.sorting_disabled { cursor: default; }
table.dataTable thead th:first-child { width: 36px; padding: 0 4px 0 16px; }

/* Sort icons via ::after on sortable th */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  content: '';
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 4px solid var(--color-text-muted); opacity: 0.3;
}
table.dataTable thead th.sorting::before {
  content: '';
  position: absolute; right: 9px; top: calc(50% + 5px); transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--color-text-muted); opacity: 0.3;
}
table.dataTable thead th.sorting_asc::after  { opacity: 1; border-bottom-color: var(--color-primary); }
table.dataTable thead th.sorting_desc::after { opacity: 0; }
table.dataTable thead th.sorting_desc::before {
  content: '';
  position: absolute; right: 9px; top: calc(50% + 5px); transform: translateY(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--color-primary); opacity: 1;
}
table.dataTable thead th.sorting_asc::before { display: none; }

/* Body rows: strip DT odd/even colouring */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even { background: transparent; }
table.dataTable tbody td { vertical-align: middle; }
table.dataTable tbody td:first-child { padding: 0 4px 0 16px; }
table.dataTable tbody td.actions { text-align: right; padding-right: 12px; }
table.dataTable tbody tr.selected > td { background: var(--color-primary-subtle); }
table.dataTable input[type=checkbox] { accent-color: var(--color-primary); cursor: pointer; }

/* Info text: inside .table-footer, flex: 1 pushes pagination right */
.dataTables_info { flex: 1; font-size: 12px; color: var(--color-text-muted); font-family: var(--font-ui); }

/* Pagination: inside .table-footer */
.dataTables_paginate { display: flex; align-items: center; gap: 4px; }

/* Previous / Next: bordered buttons */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  background: var(--color-bg-surface); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; box-shadow: var(--shadow-sm); text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.dataTables_paginate .paginate_button.previous:hover:not(.disabled),
.dataTables_paginate .paginate_button.next:hover:not(.disabled) { background: var(--color-bg-elevated); border-color: #D1D5DB; color: var(--color-text-primary); }
.dataTables_paginate .paginate_button.previous.disabled,
.dataTables_paginate .paginate_button.next.disabled { opacity: 0.4; cursor: not-allowed; }

/* Page numbers: text only, no border or background */
.dataTables_paginate span { display: flex; align-items: center; gap: 1px; margin: 0 2px; }
.dataTables_paginate span .paginate_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 28px; padding: 0 5px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  background: none; border: none; box-shadow: none;
  cursor: pointer; text-decoration: none; border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  user-select: none;
}
.dataTables_paginate span .paginate_button:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.dataTables_paginate span .paginate_button.current,
.dataTables_paginate span .paginate_button.current:hover { color: var(--color-primary); font-weight: 700; background: none; }

/* Empty state */
table.dataTable tbody td.dataTables_empty { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 32px 16px; }

/* DataTables Buttons: button group, connected borders, radius only on outer edges */
.dt-buttons { display: inline-flex; align-items: center; }
.dt-buttons .dt-button { border-radius: 0; margin-left: -1px; padding: 0 7px; min-width: 28px; position: relative; }
.dt-buttons .dt-button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.dt-buttons .dt-button:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:focus { z-index: 1; }
.dt-button span { display: inline-flex; align-items: center; pointer-events: none; }
/* Visual separator between the button group and the filter input */
.dt-toolbar-right .dataTables_filter { padding-left: 12px; border-left: 1px solid var(--color-border); margin-left: 4px; }
/* === DT FILTER PANEL === */
.dt-filter-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.22s ease;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
}
.dt-filter-panel.open { max-height: 240px; }
.fp-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: 12px 16px;
}
.fp-field { display: flex; flex-direction: column; gap: 5px; }
.fp-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-muted);
}
.fp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fchip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px;
  font-size: 11px; font-weight: 600; font-family: var(--font-ui);
  border-radius: 20px; border: 1px solid var(--color-border);
  background: var(--color-bg-surface); color: var(--color-text-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.fchip:hover { background: var(--color-bg-muted); color: var(--color-text-secondary); }
.fchip.active { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary-border); }
.fchip .fd { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.fchip.fc-verified.active    { background: var(--color-danger-bg);   color: var(--color-danger-text);   border-color: var(--color-danger-border); }
.fchip.fc-takedown.active    { background: var(--color-warning-bg);  color: var(--color-warning-text);  border-color: var(--color-warning-border); }
.fchip.fc-neutralized.active { background: var(--color-success-bg);  color: var(--color-success-text);  border-color: var(--color-success-border); }
.fchip.fc-pending.active     { background: var(--color-neutral-bg);  color: var(--color-neutral-text);  border-color: var(--color-neutral-border); }
.fchip.fc-rejected.active    { background: var(--color-rejected-bg); color: var(--color-rejected-text); border-color: var(--color-rejected-border); }
.fp-footer {
  padding: 0 16px 10px; display: flex; align-items: center;
  justify-content: flex-end; gap: 6px;
}
.btn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-primary); color: #fff;
  border-radius: 20px; font-size: 10px; font-weight: 700; line-height: 1;
  margin-left: 2px;
}
.btn-filter-active {
  background: var(--color-primary-subtle) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary-border) !important;
}
.btn-ghost {
  background: transparent; color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-bg-elevated); color: var(--color-text-secondary); }

/* === ACCORDION / COLLAPSIBLE PANELS === */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.accordion-item { background: var(--color-bg-surface); }
.accordion-item + .accordion-item { border-top: 1px solid var(--color-border); }
.accordion-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--color-text-primary); text-align: left;
  transition: background 0.12s;
}
.accordion-header:hover { background: var(--color-bg-elevated); }
.accordion-item[data-open="true"] > .accordion-header { background: var(--color-bg-elevated); }
.accordion-header-icon { color: var(--color-text-muted); flex-shrink: 0; }
.accordion-title { flex: 1; }
.accordion-meta { font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.accordion-chevron {
  color: var(--color-text-muted); flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion-item[data-open="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.accordion-item[data-open="true"] > .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-body {
  padding: 16px;
  font-size: 13px; color: var(--color-text-secondary); line-height: 1.6;
  border-top: 1px solid var(--color-border);
}
.accordion-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; }
.accordion-kv dt { font-size: 11px; font-weight: 600; color: var(--color-text-muted); padding-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.accordion-kv dd { font-size: 13px; color: var(--color-text-primary); margin: 0; }

/* === TABS === */
.tab-group { display: flex; flex-direction: column; }
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--color-text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.tab-btn:hover { color: var(--color-text-primary); }
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.tab-btn .tab-count {
  font-size: 11px; font-weight: 600;
  background: var(--color-bg-muted); color: var(--color-text-muted);
  padding: 1px 6px; border-radius: 10px;
  transition: background 0.12s, color 0.12s;
}
.tab-btn.active .tab-count {
  background: var(--color-primary-subtle); color: var(--color-primary);
}
.tab-panel { display: none; padding: 20px 0; }
.tab-panel.active { display: block; }

/* Tab variant: pill/segment */
.tab-bar-pills {
  display: inline-flex; gap: 2px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.tab-btn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.tab-btn-pill:hover { color: var(--color-text-primary); }
.tab-btn-pill.active {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* === BREADCRUMB === */
.breadcrumb-bar { display:flex; align-items:center; gap:6px; font-size:11px; padding-bottom:12px; margin-bottom:24px; border-bottom:1px solid var(--color-border-muted, var(--color-border)); }
.breadcrumb-bar a { color:var(--color-text-muted); text-decoration:none; transition:color 0.12s; }
.breadcrumb-bar a:hover { color:var(--color-primary); }
.bc-sep { color:var(--color-text-subtle); font-size:10px; }
.bc-current { color:var(--color-text-primary); font-weight:500; }

/* === BRAND COMBOBOX === */
.brand-combo { position: relative; }
.brand-combo-face {
  height: 36px; padding: 0 32px 0 12px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui); font-size: 13px; color: var(--color-text-primary);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%; cursor: default;
}
.brand-combo-face:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); cursor: text; }
.brand-combo-dropdown {
  display: none;
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  z-index: 200;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.brand-combo-option {
  padding: 7px 12px;
  font-size: 13px; color: var(--color-text-secondary);
  cursor: pointer;
}
.brand-combo-option:hover,
.brand-combo-option.brand-combo-active { background: var(--color-primary-subtle); color: var(--color-primary); }

/* === AUTH SCREEN PREVIEW === */
.auth-preview-wrap {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  margin-bottom: 32px;
}
.auth-preview-bar {
  height: 38px; background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; padding: 0 14px; gap: 6px;
}
.auth-preview-dot { width: 11px; height: 11px; border-radius: 50%; }
.auth-preview-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 560px; padding: 40px 20px;
  background: var(--color-bg-base);
}

/* Auth card */
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.auth-card-header {
  padding: 32px 32px 24px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-muted);
}
.auth-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.auth-logo-mark svg { color: #fff; }
.auth-card-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin-bottom: 4px;
}
.auth-card-sub {
  font-size: 13px; color: var(--color-text-muted);
}
.auth-card-body { padding: 24px 32px; }
.auth-card-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--color-border-muted);
  background: var(--color-bg-base);
  text-align: center;
  font-size: 12px; color: var(--color-text-muted);
}

/* SSO buttons */
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 38px; padding: 0 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer; text-decoration: none;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.sso-btn:hover { background: var(--color-bg-elevated); border-color: #D1D5DB; box-shadow: var(--shadow-md); }
.sso-btn svg, .sso-btn img { flex-shrink: 0; }
.sso-btn-label { flex: 1; text-align: left; }

.sso-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }

/* Auth divider */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--color-text-subtle); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-border);
}

/* More SSO toggle */
.sso-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 7px 0;
  background: none; border: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--color-text-muted); cursor: pointer;
  transition: color 0.12s;
}
.sso-more-btn:hover { color: var(--color-text-primary); }
.sso-more-btn svg { transition: transform 0.18s; }
.sso-more-btn.open svg { transform: rotate(180deg); }
.sso-saml-list {
  display: none; flex-direction: column; gap: 9px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--color-border);
}
.sso-saml-list.open { display: flex; }

/* Auth form elements */
.auth-form-group { margin-bottom: 14px; }
.auth-form-group:last-of-type { margin-bottom: 0; }
.auth-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary); margin-bottom: 5px;
}
.auth-label a { font-weight: 400; color: var(--color-text-link); font-size: 12px; }
.auth-label a:hover { text-decoration: underline; }
.auth-submit {
  width: 100%; height: 40px; margin-top: 20px;
  background: var(--color-primary); color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.01em;
}
.auth-submit:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }

/* Password reset states */
.auth-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 22px;
}

/* Two-column preview layout */
.auth-screens-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .auth-screens-grid { grid-template-columns: 1fr; }
}

/* === SCREENSHOT VIEWER === */
.scr-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 32px;
}
.scr-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
}
.scr-card-title { font-size: 13px; font-weight: 600; flex: 1; color: var(--color-text-primary); display: flex; align-items: center; gap: 7px; }
.scr-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 5px;
  background: var(--color-bg-muted); color: var(--color-text-muted);
  border-radius: 10px; font-size: 11px; font-weight: 600;
}
.scr-internal-pill {
  display: inline-flex; align-items: center; gap: 3px;
  height: 16px; padding: 0 6px;
  background: var(--color-warning-bg); color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
  border-radius: 10px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.03em;
}

/* Fake screenshot renders */
.scr-shot {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
  border: 1px solid var(--color-border); border-bottom: none;
  display: flex; flex-direction: column;
}
.scr-shot-bar {
  height: 22px; background: #f1f3f4;
  display: flex; align-items: center; padding: 0 8px; gap: 5px;
  border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.scr-shot-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.scr-shot-url-pill {
  flex: 1; height: 12px; background: #e8eaed; border-radius: 6px;
  display: flex; align-items: center; padding: 0 6px;
  font-size: 8px; color: #d93a4f; font-family: var(--font-mono); overflow: hidden;
}
.scr-shot-content { flex: 1; background: #f0f4f8; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.scr-shot-topbar { height: 18px; background: #1e3a8a; display: flex; align-items: center; padding: 0 8px; flex-shrink: 0; }
.scr-shot-topbar-logo { font-size: 7px; color: #fff; font-weight: 700; letter-spacing: 0.05em; }
.scr-shot-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.scr-shot-form-box {
  background: #fff; border: 1px solid #d1d5db; border-radius: 3px; padding: 7px;
  display: flex; flex-direction: column; gap: 4px;
}
.scr-shot-form-title { font-size: 7px; font-weight: 700; color: #1e293b; margin-bottom: 2px; }
.scr-shot-field { height: 8px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 2px; }
.scr-shot-btn { height: 10px; background: #1e3a8a; border-radius: 2px; margin-top: 2px; }
.scr-shot-link { height: 5px; background: #bfdbfe; border-radius: 2px; width: 60%; margin: 0 auto; }

.scr-req-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 7px;
}
.scr-country-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.scr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 9px;
  border-radius: 20px; border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: 11px; font-weight: 500; color: var(--color-text-secondary);
  cursor: pointer; transition: all 0.12s; user-select: none;
}
.scr-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.scr-chip.on { background: var(--color-primary-subtle); border-color: var(--color-primary-border); color: var(--color-primary); font-weight: 600; }
.scr-device-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: center; }
.scr-device-opt { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; color: var(--color-text-secondary); }
.scr-device-opt input { accent-color: var(--color-primary); }
.scr-req-footer { display: flex; align-items: center; justify-content: space-between; }
.scr-req-note { font-size: 11px; color: var(--color-text-muted); }

/* --- Screenshot Viewer --- */
.scrd-viewer {
  position: relative; overflow: hidden;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.scrd-counter-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.4); color: #fff;
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 99px;
  pointer-events: none;
}
.scrd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
.scrd-arrow:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.scrd-arrow-prev { left: 8px; }
.scrd-arrow-next { right: 8px; }
.scrd-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-bg-surface);
  font-size: 11px;
}
.scrd-meta-ts {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--color-text-muted); margin-left: auto;
}
.scrd-segments {
  display: flex; gap: 3px;
  padding: 0 14px; height: 24px; align-items: center;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-muted);
}
.scrd-seg {
  flex: 1; height: 4px; border-radius: 2px;
  border: none; cursor: pointer; padding: 0;
  background: var(--color-border);
  transition: background 0.15s;
  position: relative;
}
.scrd-seg::before {
  content: ''; position: absolute; inset: -10px 0;
}
.scrd-seg.active { background: var(--color-primary); }
.scrd-seg:hover:not(.active) { background: var(--color-text-subtle); }
.scrd-actions {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.scrd-capture {
  border-top: none;
}
.scrd-capture-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  user-select: none;
}
.scrd-capture-header:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.scrd-capture-chevron { margin-left: auto; transition: transform 0.18s; }
.scrd-capture-header.open .scrd-capture-chevron { transform: rotate(180deg); }
.scrd-capture-body {
  display: none; padding: 14px;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-muted);
}
.scrd-capture-body.open { display: block; }

/* Upload modal */
.scr-modal-wrap {
  background: rgba(17,24,39,0.45); backdrop-filter: blur(2px);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
}
.scr-modal {
  width: 100%; max-width: 400px;
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden;
}
.scr-modal-header {
  padding: 13px 18px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.scr-modal-title { font-size: 13px; font-weight: 600; }
.scr-modal-body { padding: 18px; }
.scr-dropzone {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md);
  padding: 24px 16px; text-align: center; cursor: pointer;
  background: var(--color-bg-base); margin-bottom: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.scr-dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.scr-dropzone-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.35; }
.scr-dropzone-text { font-size: 13px; color: var(--color-text-muted); }
.scr-dropzone-sub { font-size: 11px; color: var(--color-text-subtle); margin-top: 3px; }
.scr-modal-footer {
  padding: 11px 18px; border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--color-bg-base);
}

/* Proposal comparison grid */
.scr-proposals { display: flex; flex-direction: column; gap: 48px; }
.scr-proposal-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.scr-proposal-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  background: var(--color-primary); color: #fff;
  border-radius: 20px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em;
}
.scr-proposal-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.scr-proposal-desc { font-size: 12px; color: var(--color-text-muted); }

/* === DATATABLES 2.x OVERRIDE === */
/* DT 2.x generates .dt-container as its outermost wrapper.
   Strategy: style .dt-container / .dt-layout-* to match the existing
   .table-card / .table-toolbar / .table-footer look. Zero new card CSS needed. */

.dt-container {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Remove default margins DT 2.x injects */
.dt-container .dt-layout-row { margin: 0; }

/* Header row = toolbar.
   DT 2.x base does NOT add .dt-layout-header — use :first-child instead. */
.dt-container > .dt-layout-row:first-child {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--color-border);
}
.dt-container > .dt-layout-row:first-child > .dt-layout-start {
  flex: 1; display: flex; align-items: center;
}
.dt-container > .dt-layout-row:first-child > .dt-layout-end {
  display: flex; align-items: center; gap: 8px;
}

/* Table body row */
.dt-container .dt-layout-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-container .dt-layout-table table.dataTable { margin: 0 !important; width: 100% !important; }

/* Footer rows — any .dt-layout-row inside .dt-container that is not the
   first (header) row and not the table row. DT 2.x may emit info and paging
   in the same row or in two separate rows; both cases are handled below. */
.dt-container > .dt-layout-row:not(:first-child):not(.dt-layout-table) {
  display: flex; align-items: center;
  padding: 7px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-base);
}
/* Footer cells fill the full row width so margin-left:auto on .dt-paging
   has space to push it to the right edge (works for both 1-cell and 2-cell layouts) */
.dt-container > .dt-layout-row:not(:first-child):not(.dt-layout-table) > * {
  flex: 1; display: flex; align-items: center;
}

/* Title injected via topStart function */
.dt2-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); flex: 1; }

/* Search label (hides "Search:" text), input styling */
.dt-container .dt-search label { font-size: 0; }
.dt-container .dt-search input {
  font-size: 12px; height: 30px; padding: 0 10px;
  font-family: var(--font-ui);
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  outline: none; width: 200px; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dt-container .dt-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  background-color: var(--color-bg-surface);
}
.dt-container .dt-search input::placeholder { color: var(--color-text-subtle); }

/* Visual separator between .dt-buttons group and the search input */
.dt-container > .dt-layout-row:first-child .dt-search {
  padding-left: 12px; border-left: 1px solid var(--color-border); margin-left: 4px;
}

/* Sort icons — DT 2.x injects a <span class="dt-column-order"> inside each sortable <th> */
.dt-column-order {
  display: inline-block; vertical-align: middle;
  position: relative; width: 18px; height: 14px; margin-left: 2px;
  flex-shrink: 0;
}
.dt-column-order::before {
  content: ''; position: absolute; left: 5px; top: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 4px solid var(--color-text-muted); opacity: 0.3;
}
.dt-column-order::after {
  content: ''; position: absolute; left: 5px; top: 8px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--color-text-muted); opacity: 0.3;
}
th.dt-ordering-asc .dt-column-order::before  { opacity: 1; border-bottom-color: var(--color-primary); }
th.dt-ordering-asc .dt-column-order::after   { opacity: 0.15; }
th.dt-ordering-desc .dt-column-order::after  { opacity: 1; border-top-color: var(--color-primary); }
th.dt-ordering-desc .dt-column-order::before { opacity: 0.15; }
th.dt-orderable-none .dt-column-order { display: none; }

/* DT 2.x: strip odd/even colouring, keep accent-color on checkboxes */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even { background: transparent; }
table.dataTable tbody td:first-child { padding: 0 4px 0 16px; }
table.dataTable tbody td.actions { text-align: right; padding-right: 12px; }
table.dataTable tbody tr.selected > td { background: var(--color-primary-subtle); }
table.dataTable input[type=checkbox] { accent-color: var(--color-primary); cursor: pointer; }

/* DT 2.x empty cell */
table.dataTable tbody td.dt-empty {
  text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 32px 16px;
}

/* Info text */
.dt-info { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-ui); }

/* Pagination — margin-left: auto pushes it to the right edge in any flex footer row */
.dt-paging { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.dt-paging .dt-paging-button.previous,
.dt-paging .dt-paging-button.next {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  background: var(--color-bg-surface); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.dt-paging .dt-paging-button.previous:hover:not(.disabled),
.dt-paging .dt-paging-button.next:hover:not(.disabled) {
  background: var(--color-bg-elevated); border-color: #D1D5DB; color: var(--color-text-primary);
}
.dt-paging .dt-paging-button.previous.disabled,
.dt-paging .dt-paging-button.next.disabled { opacity: 0.4; cursor: not-allowed; }

/* Page number buttons: text-only, no border */
.dt-paging .dt-paging-button:not(.previous):not(.next) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 28px; padding: 0 5px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  background: none; border: none; box-shadow: none;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  user-select: none;
}
.dt-paging .dt-paging-button:not(.previous):not(.next):hover {
  color: var(--color-text-primary); background: var(--color-bg-elevated);
}
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover {
  color: var(--color-primary); font-weight: 700; background: none;
}

/* ============================================================
   COMMUNICATION TIMELINE
   ============================================================ */
.comm-timeline {
  position: relative;
  padding-left: 48px;
}
.comm-timeline::before {
  content: '';
  position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border);
  border-radius: 1px;
}
.comm-item {
  position: relative;
  padding-bottom: 18px;
}
.comm-item:last-child { padding-bottom: 0; }

/* Node on the vertical line */
.comm-node {
  position: absolute;
  left: -44px; top: 11px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.comm-node-email    { border-color: var(--color-primary);        color: var(--color-primary); }
.comm-node-whatsapp { border-color: #22C55E; color: #16A34A;     background: #F0FFF4; }
.comm-node-phone    { border-color: var(--color-success-border); color: var(--color-success-text); background: var(--color-success-bg); }
.comm-node-webform  { border-color: var(--color-info-border);    color: var(--color-info-text);    background: var(--color-info-bg); }
.comm-node-comment  { border-color: var(--color-neutral-border); color: var(--color-neutral-text); background: var(--color-neutral-bg); }
.comm-node-sent     { border-color: var(--color-primary); border-width: 2.5px; color: var(--color-primary); }
.comm-node-received { border-color: var(--color-border); color: var(--color-text-muted); }

/* Card */
.comm-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.12s;
}
.comm-card:hover { box-shadow: var(--shadow-md); }
.comm-card-outgoing { border-left: 3px solid var(--color-primary); }
.comm-card-incoming { border-left: 3px solid var(--color-border); }

/* Direction badge */
.comm-direction {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px 1px 5px; border-radius: 4px; flex-shrink: 0; white-space: nowrap;
}
.comm-direction-out {
  background: var(--color-primary-subtle); color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}
.comm-direction-in {
  background: var(--color-bg-elevated); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Card header */
.comm-card-header {
  display: flex; align-items: flex-start;
  gap: 10px; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border-muted, var(--color-border));
  cursor: pointer; user-select: none;
}
.comm-card-header:hover { background: var(--color-bg-base); }

/* Collapse chevron */
.comm-collapse-chevron {
  flex-shrink: 0; margin-left: auto; align-self: center;
  color: var(--color-text-subtle);
  transition: transform 0.15s;
}
.comm-card.collapsed .comm-collapse-chevron { transform: rotate(-90deg); }
.comm-card.collapsed .comm-subject,
.comm-card.collapsed .comm-body { display: none; }
.comm-card.collapsed .comm-card-header { border-bottom: none; }

/* Avatar */
.comm-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  flex-shrink: 0; color: #fff; margin-top: 1px;
}
.comm-avatar-self     { background: var(--color-primary); }
.comm-avatar-external { background: #6B7280; }
.comm-avatar-system   { background: var(--color-info-text); }
.comm-avatar-note     { background: var(--color-text-subtle); }

/* Meta column */
.comm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.comm-meta-top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.comm-sender {
  font-size: 13px; font-weight: 600; color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.comm-channel-icon {
  flex-shrink: 0; color: var(--color-text-subtle); display: flex; align-items: center;
}
.comm-ts {
  font-size: 11px; font-family: var(--font-mono); color: var(--color-text-muted);
  margin-left: auto; flex-shrink: 0; white-space: nowrap; padding-left: 8px;
}
.comm-to {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-to-arrow { color: var(--color-text-subtle); margin-right: 3px; }

/* Subject & body */
.comm-subject {
  padding: 8px 14px 0 56px;
  font-size: 12px; font-weight: 600; color: var(--color-text-primary);
}
.comm-body { padding: 4px 14px 12px 56px; }
.comm-body-text {
  font-size: 12px; color: var(--color-text-secondary); line-height: 1.65;
  max-height: 120px; overflow: hidden;
  transition: max-height 0.2s ease;
  white-space: pre-wrap;
  word-break: break-word;
}
.comm-body-text.expanded {
  max-height: 2000px;
}
.comm-expand-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px;
  font-size: 11px; font-weight: 600; color: var(--color-primary);
  background: none; border: none; cursor: pointer;
  padding: 0; font-family: var(--font-ui);
  transition: opacity 0.12s;
}
.comm-expand-btn:hover { opacity: 0.7; }
.comm-expand-btn svg { transition: transform 0.18s; }

/* "Show N more" separator button */
.comm-show-more {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 18px;
}
.comm-show-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 14px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.12s, border-color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.comm-show-more-btn:hover {
  color: var(--color-text-primary);
  border-color: #D1D5DB;
  box-shadow: var(--shadow-md);
}
.comm-show-more-btn svg { transition: transform 0.18s; }