/* ═══════════════════════════════════════════════════════
   Atlassian Design System Theme
   Overrides all CSS custom properties from app.css
   ═══════════════════════════════════════════════════════ */

/* ── Atlassian Light ──────────────────────────────────── */
[data-theme="atlassian"] {
  /* Surfaces */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface2: #f4f5f7;
  --topbar-bg: rgba(255, 255, 255, .96);

  /* Text */
  --text: #172b4d;
  --text2: #344563;
  --muted: #626f86;
  --on-primary: #fff;
  --placeholder: #8993a4;

  /* Borders */
  --border: #dfe1e6;
  --border2: #c1c7d0;

  /* Primary — Atlassian Blue */
  --primary: #0052cc;
  --primary2: #0747a6;
  --primary-light: rgba(0, 82, 204, .08);

  /* Semantic */
  --success: #36b37e;
  --success2: #00875a;
  --success-light: rgba(54, 179, 126, .10);
  --success-text: #006644;
  --warning: #ffab00;
  --warning-light: rgba(255, 171, 0, .10);
  --warning-text: #ff8b00;
  --danger: #de350b;
  --danger2: #bf2600;
  --danger-light: rgba(222, 53, 11, .08);
  --danger-text: #bf2600;

  /* Semantic surfaces */
  --whatsapp-bg: #e3fcef; --whatsapp-text: #006644;
  --telegram-bg: #deebff; --telegram-text: #0747a6;
  --email-bg: #deebff;    --email-text: #0052cc;
  --verify-banner-bg: #fffae6; --verify-banner-text: #ff8b00;

  /* Toast backgrounds */
  --toast-bg: #172b4d;
  --toast-success-bg: #006644;
  --toast-error-bg: #bf2600;
  --toast-warning-bg: #ff8b00;

  /* Chart colors */
  --chart-confirmed: #36b37e;
  --chart-declined: #de350b;
  --chart-invited: #0052cc;
  --chart-no-answer: #c1c7d0;

  /* Hover / overlay */
  --hover: rgba(9, 30, 66, .04);
  --hover2: rgba(9, 30, 66, .03);
  --overlay: rgba(9, 30, 66, .54);
  --mobile-overlay: rgba(9, 30, 66, .3);
  --card-hover-border: rgba(0, 82, 204, .25);
  --table-row-hover: rgba(0, 82, 204, .03);
  --tabs-bg: transparent;

  /* Status */
  --status-completed-bg: rgba(98, 111, 134, .10);
  --status-cancelled-bg: rgba(222, 53, 11, .08);

  /* Shadows — Atlassian signature shallow shadow */
  --shadow: 0 1px 1px rgba(9, 30, 66, .13);
  --shadow2: 0 3px 5px rgba(9, 30, 66, .10);
  --shadow3: 0 8px 24px rgba(9, 30, 66, .16);

  /* Border radii — Atlassian uses tight 3px */
  --r-sm: 3px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;

  --focus: 0 0 0 2px #4c9aff;

  /* Hero gradients */
  --hero-grad1: rgba(0, 82, 204, .08);
  --hero-grad2: rgba(54, 179, 126, .05);
  --auth-grad: rgba(0, 82, 204, .04);

  /* Delete card border */
  --danger-card-border: rgba(222, 53, 11, .30);

  /* Pill borders */
  --pill-bg: rgba(9, 30, 66, .04);
  --pill-primary-border: rgba(0, 82, 204, .25);
  --pill-success-border: rgba(54, 179, 126, .25);
  --pill-warning-border: rgba(255, 171, 0, .25);
  --pill-danger-border: rgba(222, 53, 11, .25);

  color-scheme: light;
}

/* ── Atlassian Dark ───────────────────────────────────── */
[data-theme="atlassian-dark"] {
  /* Surfaces — Atlassian dark elevation tokens */
  --bg: #1d2125;
  --surface: #22272b;
  --surface2: #2c3034;
  --topbar-bg: rgba(34, 39, 43, .96);

  /* Text */
  --text: #b6c2cf;
  --text2: #9fadbc;
  --muted: #8c9bab;
  --on-primary: #1d2125;
  --placeholder: #596773;

  /* Borders */
  --border: #3a3f44;
  --border2: #596773;

  /* Primary — Atlassian Blue lightened for dark */
  --primary: #579dff;
  --primary2: #85b8ff;
  --primary-light: rgba(87, 157, 255, .12);

  /* Semantic */
  --success: #4bce97;
  --success2: #7ee2b8;
  --success-light: rgba(75, 206, 151, .12);
  --success-text: #4bce97;
  --warning: #f5cd47;
  --warning-light: rgba(245, 205, 71, .12);
  --warning-text: #f5cd47;
  --danger: #f87168;
  --danger2: #fd9891;
  --danger-light: rgba(248, 113, 104, .10);
  --danger-text: #f87168;

  /* Semantic surfaces */
  --whatsapp-bg: rgba(75, 206, 151, .12); --whatsapp-text: #4bce97;
  --telegram-bg: rgba(87, 157, 255, .12); --telegram-text: #85b8ff;
  --email-bg: rgba(87, 157, 255, .10);    --email-text: #85b8ff;
  --verify-banner-bg: rgba(245, 205, 71, .12); --verify-banner-text: #f5cd47;

  /* Toast backgrounds */
  --toast-bg: #b6c2cf;
  --toast-success-bg: #164b35;
  --toast-error-bg: #5d1f1a;
  --toast-warning-bg: #533f04;

  /* Chart colors */
  --chart-confirmed: #4bce97;
  --chart-declined: #f87168;
  --chart-invited: #579dff;
  --chart-no-answer: #596773;

  /* 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, .50);
  --card-hover-border: rgba(87, 157, 255, .25);
  --table-row-hover: rgba(87, 157, 255, .04);
  --tabs-bg: transparent;

  /* Status */
  --status-completed-bg: rgba(140, 155, 171, .12);
  --status-cancelled-bg: rgba(248, 113, 104, .10);

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

  /* Border radii — same tight Atlassian radii */
  --r-sm: 3px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;

  --focus: 0 0 0 2px #579dff;

  /* Hero gradients */
  --hero-grad1: rgba(87, 157, 255, .06);
  --hero-grad2: rgba(75, 206, 151, .04);
  --auth-grad: rgba(87, 157, 255, .04);

  /* Delete card border */
  --danger-card-border: rgba(248, 113, 104, .35);

  /* Pill borders */
  --pill-bg: rgba(255, 255, 255, .06);
  --pill-primary-border: rgba(87, 157, 255, .30);
  --pill-success-border: rgba(75, 206, 151, .30);
  --pill-warning-border: rgba(245, 205, 71, .30);
  --pill-danger-border: rgba(248, 113, 104, .30);

  color-scheme: dark;
}

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

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

/* Theme toggle icon visibility for Atlassian themes */
/* Atlassian light: show Atlassian icon (A), Atlassian dark: show sun for "go lighter" */
[data-theme="atlassian"] .theme-toggle .icon-sun  { display: none; }
[data-theme="atlassian"] .theme-toggle .icon-moon { display: inline; }
[data-theme="atlassian-dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="atlassian-dark"] .theme-toggle .icon-moon { display: none; }

/* ── Task rows: compact cards with shadow (Atlassian style) ── */
[data-theme="atlassian"] .task-item {
  box-shadow: 0 1px 1px rgba(9, 30, 66, .13);
}
[data-theme="atlassian-dark"] .task-item {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

/* ── Event cards: 3px radius + shadow ────────────────────── */
[data-theme="atlassian"] .card.event-card {
  box-shadow: 0 1px 1px rgba(9, 30, 66, .13);
}
[data-theme="atlassian-dark"] .card.event-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

/* ── KPI blocks: 3px, no border, bg only + shadow ────────── */
[data-theme="atlassian"] .kpi-strip .card {
  border: none;
  background: #f4f5f7;
  box-shadow: 0 1px 1px rgba(9, 30, 66, .13);
}
[data-theme="atlassian-dark"] .kpi-strip .card {
  border: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
[data-theme="atlassian"] .kpi-num,
[data-theme="atlassian-dark"] .kpi-num {
  font-weight: 700;
}

/* ── Status pills: 3px radius ────────────────────────────── */
[data-theme="atlassian"] .status-badge,
[data-theme="atlassian-dark"] .status-badge,
[data-theme="atlassian"] .pill,
[data-theme="atlassian-dark"] .pill {
  border-radius: 3px;
}

/* Checkboxes: square (3px radius), Atlassian style */
[data-theme="atlassian"] .task-checkbox,
[data-theme="atlassian-dark"] .task-checkbox {
  border-radius: 3px;
}
[data-theme="atlassian"] .task-checkbox {
  border-color: #c1c7d0;
}
[data-theme="atlassian-dark"] .task-checkbox {
  border-color: #596773;
}
/* Done checkbox */
[data-theme="atlassian"] .task-checkbox.done {
  background: #0052cc;
  border-color: #0052cc;
  color: #fff;
}
[data-theme="atlassian-dark"] .task-checkbox.done {
  background: #579dff;
  border-color: #579dff;
  color: #1d2125;
}
/* WIP checkbox */
[data-theme="atlassian"] .task-checkbox.in_progress {
  background: #deebff;
  border-color: #0052cc;
}
[data-theme="atlassian-dark"] .task-checkbox.in_progress {
  background: #1c2b41;
  border-color: #579dff;
}