/* ═══════════════════════════════════════════════════════
   Carbon Design System Theme (D3)
   IBM Carbon — sharp edges, 0px radii, underline tabs
   ═══════════════════════════════════════════════════════ */

/* ── Carbon Light ─────────────────────────────────────── */
[data-theme="carbon"] {
  /* Font */
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Surfaces */
  --bg: #ffffff;
  --surface: #f4f4f4;
  --surface2: #e0e0e0;
  --topbar-bg: rgba(255, 255, 255, .96);

  /* Text */
  --text: #161616;
  --text2: #393939;
  --muted: #525252;
  --on-primary: #fff;
  --placeholder: #8d8d8d;

  /* Borders */
  --border: #e0e0e0;
  --border2: #8d8d8d;

  /* Primary — Carbon Blue 60 */
  --primary: #0f62fe;
  --primary2: #0043ce;
  --primary-light: rgba(15, 98, 254, .08);

  /* Semantic */
  --success: #24a148;
  --success2: #198038;
  --success-light: rgba(36, 161, 72, .08);
  --success-text: #198038;
  --warning: #f1c21b;
  --warning-light: rgba(241, 194, 27, .10);
  --warning-text: #8a6116;
  --danger: #da1e28;
  --danger2: #ba1b23;
  --danger-light: rgba(218, 30, 40, .08);
  --danger-text: #ba1b23;

  /* Semantic surfaces */
  --whatsapp-bg: #defbe6; --whatsapp-text: #198038;
  --telegram-bg: #e5f6ff; --telegram-text: #0043ce;
  --email-bg: #e5f6ff;    --email-text: #0f62fe;
  --verify-banner-bg: #fcf4d6; --verify-banner-text: #8a6116;

  /* Toast backgrounds */
  --toast-bg: #161616;
  --toast-success-bg: #198038;
  --toast-error-bg: #ba1b23;
  --toast-warning-bg: #8a6116;

  /* Chart colors */
  --chart-confirmed: #24a148;
  --chart-declined: #da1e28;
  --chart-invited: #0f62fe;
  --chart-no-answer: #c6c6c6;

  /* Hover / overlay */
  --hover: rgba(0, 0, 0, .04);
  --hover2: rgba(0, 0, 0, .03);
  --overlay: rgba(22, 22, 22, .50);
  --mobile-overlay: rgba(0, 0, 0, .3);
  --card-hover-border: rgba(15, 98, 254, .20);
  --table-row-hover: rgba(15, 98, 254, .02);
  --tabs-bg: transparent;

  /* Status */
  --status-completed-bg: rgba(82, 82, 82, .10);
  --status-cancelled-bg: rgba(218, 30, 40, .08);

  /* Shadows — minimal, Carbon uses elevation via bg color */
  --shadow: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow2: 0 2px 6px rgba(0, 0, 0, .10);
  --shadow3: 0 8px 24px rgba(0, 0, 0, .14);

  /* Border radii — Carbon is sharp, 0px */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;

  --focus: 0 0 0 2px #0f62fe;

  /* Hero gradients */
  --hero-grad1: rgba(15, 98, 254, .06);
  --hero-grad2: rgba(36, 161, 72, .04);
  --auth-grad: rgba(15, 98, 254, .04);

  /* Delete card border */
  --danger-card-border: rgba(218, 30, 40, .30);

  /* Pill borders */
  --pill-bg: rgba(0, 0, 0, .04);
  --pill-primary-border: rgba(15, 98, 254, .25);
  --pill-success-border: rgba(36, 161, 72, .25);
  --pill-warning-border: rgba(241, 194, 27, .25);
  --pill-danger-border: rgba(218, 30, 40, .25);

  color-scheme: light;
}

/* ── Carbon Dark (Gray 100) ──────────────────────────── */
[data-theme="carbon-dark"] {
  /* Font */
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Surfaces — Carbon Gray scale */
  --bg: #161616;
  --surface: #262626;
  --surface2: #393939;
  --topbar-bg: rgba(38, 38, 38, .96);

  /* Text */
  --text: #f4f4f4;
  --text2: #e0e0e0;
  --muted: #c6c6c6;
  --on-primary: #fff;
  --placeholder: #6f6f6f;

  /* Borders */
  --border: #393939;
  --border2: #6f6f6f;

  /* Primary — Carbon Blue 40 for dark */
  --primary: #4589ff;
  --primary2: #78a9ff;
  --primary-light: rgba(69, 137, 255, .12);

  /* Semantic */
  --success: #42be65;
  --success2: #6fdc8c;
  --success-light: rgba(66, 190, 101, .12);
  --success-text: #42be65;
  --warning: #f1c21b;
  --warning-light: rgba(241, 194, 27, .12);
  --warning-text: #f1c21b;
  --danger: #ff8389;
  --danger2: #ffb3b8;
  --danger-light: rgba(255, 131, 137, .10);
  --danger-text: #ff8389;

  /* Semantic surfaces */
  --whatsapp-bg: rgba(66, 190, 101, .12); --whatsapp-text: #42be65;
  --telegram-bg: rgba(69, 137, 255, .10); --telegram-text: #78a9ff;
  --email-bg: rgba(69, 137, 255, .10);    --email-text: #78a9ff;
  --verify-banner-bg: rgba(241, 194, 27, .12); --verify-banner-text: #f1c21b;

  /* Toast backgrounds */
  --toast-bg: #f4f4f4;
  --toast-success-bg: #198038;
  --toast-error-bg: #750e13;
  --toast-warning-bg: #5e4106;

  /* Chart colors */
  --chart-confirmed: #42be65;
  --chart-declined: #ff8389;
  --chart-invited: #4589ff;
  --chart-no-answer: #6f6f6f;

  /* Hover / overlay */
  --hover: rgba(255, 255, 255, .06);
  --hover2: rgba(255, 255, 255, .03);
  --overlay: rgba(0, 0, 0, .60);
  --mobile-overlay: rgba(0, 0, 0, .5);
  --card-hover-border: rgba(69, 137, 255, .25);
  --table-row-hover: rgba(69, 137, 255, .04);
  --tabs-bg: transparent;

  /* Status */
  --status-completed-bg: rgba(198, 198, 198, .10);
  --status-cancelled-bg: rgba(255, 131, 137, .10);

  /* Shadows */
  --shadow: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow2: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow3: 0 8px 24px rgba(0, 0, 0, .45);

  /* Border radii — same sharp 0px */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;

  --focus: 0 0 0 2px #4589ff;

  /* Hero gradients */
  --hero-grad1: rgba(69, 137, 255, .06);
  --hero-grad2: rgba(66, 190, 101, .04);
  --auth-grad: rgba(69, 137, 255, .04);

  /* Delete card border */
  --danger-card-border: rgba(255, 131, 137, .30);

  /* Pill borders */
  --pill-bg: rgba(255, 255, 255, .06);
  --pill-primary-border: rgba(69, 137, 255, .30);
  --pill-success-border: rgba(66, 190, 101, .30);
  --pill-warning-border: rgba(241, 194, 27, .30);
  --pill-danger-border: rgba(255, 131, 137, .30);

  color-scheme: dark;
}

/* ── Carbon Structural Overrides ──────────────────────── */
/* Tabs: underline style */
[data-theme="carbon"] .tabs,
[data-theme="carbon-dark"] .tabs {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: 0;
}
[data-theme="carbon"] .tab,
[data-theme="carbon-dark"] .tab {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 16px;
}
[data-theme="carbon"] .tab:hover,
[data-theme="carbon-dark"] .tab:hover {
  background: transparent;
  color: var(--text);
  border-bottom-color: var(--muted);
}
[data-theme="carbon"] .tab.active,
[data-theme="carbon-dark"] .tab.active {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--primary);
  box-shadow: none;
  color: var(--text);
}

/* Toast dark text inversion */
[data-theme="carbon-dark"] .toast { background: var(--toast-bg); color: var(--bg); }
[data-theme="carbon-dark"] .toast.success { background: var(--toast-success-bg); color: #fff; }
[data-theme="carbon-dark"] .toast.error   { background: var(--toast-error-bg);   color: #fff; }

/* Theme toggle icons */
[data-theme="carbon"] .theme-toggle .icon-sun  { display: none; }
[data-theme="carbon"] .theme-toggle .icon-moon { display: inline; }
[data-theme="carbon-dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="carbon-dark"] .theme-toggle .icon-moon { display: none; }

/* ── Task rows: flat filled + bottom border (Carbon style) ── */
[data-theme="carbon"] .task-item,
[data-theme="carbon-dark"] .task-item {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
[data-theme="carbon"] .task-item:hover,
[data-theme="carbon-dark"] .task-item:hover {
  box-shadow: none;
  border-color: var(--border);
}

/* ── Event cards: sharp rectangle, filled + bottom border ─── */
[data-theme="carbon"] .card.event-card,
[data-theme="carbon-dark"] .card.event-card {
  border-radius: 0;
}

/* ── KPI blocks: sharp, no border, filled bg ────────────── */
[data-theme="carbon"] .kpi-strip .card,
[data-theme="carbon-dark"] .kpi-strip .card {
  border-radius: 0;
  border: none;
}

/* Checkboxes: nearly square (2px radius), Carbon style */
[data-theme="carbon"] .task-checkbox,
[data-theme="carbon-dark"] .task-checkbox {
  border-radius: 2px;
}
[data-theme="carbon"] .task-checkbox {
  border-color: #8d8d8d;
}
[data-theme="carbon-dark"] .task-checkbox {
  border-color: #6f6f6f;
}
/* Done checkbox */
[data-theme="carbon"] .task-checkbox.done {
  background: #0f62fe;
  border-color: #0f62fe;
  color: #fff;
}
[data-theme="carbon-dark"] .task-checkbox.done {
  background: #4589ff;
  border-color: #4589ff;
  color: #fff;
}
/* WIP checkbox */
[data-theme="carbon"] .task-checkbox.in_progress {
  background: #a6c8ff;
  border-color: #0f62fe;
}
[data-theme="carbon-dark"] .task-checkbox.in_progress {
  background: #1c3a5f;
  border-color: #4589ff;
}