/* Anthropic Modern - Claude-inspired overrides */
/* Font (Newsreader + Inter) nạp qua <link> trong index.html, KHÔNG dùng @import ở đây.
   Lý do: một `@import` tới URL không truy cập được sẽ khiến TOÀN BỘ stylesheet
   này không được thêm vào `document.styleSheets` cho tới khi import phân giải —
   tức mất cả bảng màu chứ không chỉ mất font. Đã đo được bằng trình duyệt thật:
   đúng 2 file có @import là đúng 2 file vắng mặt. Người dùng sau proxy doanh nghiệp
   chặn fonts.googleapis.com (FortiGate/Zscaler — xem 03_USER_MANUAL.md) sẽ mất theme. */

[data-brand-theme="anthropic"] {
  /* Fonts — override the SAME tokens css/index.css uses everywhere (--font-family/--font-display),
     not a separate --font-sans name, otherwise components that reference var(--font-family)
     directly bypass the brand font entirely. */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Newsreader', Georgia, serif;

  /* Color Palette - Dark Mode (Coal & Cocoa) */
  --primary: #da6a47; /* Rust / Claude Coral */
  --primary-hover: #c85a37;
  --primary-light: #e68d70;
  --primary-glow: rgba(218, 106, 71, 0.18);
  --primary-container: rgba(218, 106, 71, 0.12);
  --on-primary-container: #ffdcd0;
  --accent: #e2b093; /* Warm Sand Accent */
  
  --canvas: #191919; /* Coal */
  --bg-secondary: #141414;
  --surface-1: #22201d; /* Cocoa */
  --surface-2: #2a2723;
  --surface-muted: #1e1c1a;
  --ink: #f1ece4; /* Warm white */
  --ink-muted: #b5aea5; /* Warm grey */
  --ink-subtle: #857e75;
  --hairline: rgba(241, 236, 228, 0.08);
  --hairline-strong: rgba(241, 236, 228, 0.18);
  
  --glass-bg: rgba(25, 25, 25, 0.82);
  --glass-border: rgba(241, 236, 228, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.45);
  --glass-blur: 24px;
}

[data-brand-theme="anthropic"][data-theme="light"] {
  /* Color Palette - Light Mode (Clay & Sand) */
  --primary: #cc5a37; /* Rust / Claude Coral */
  --primary-hover: #b84e2e;
  --primary-light: #cc5a37;
  --primary-glow: rgba(204, 90, 55, 0.12);
  --primary-container: #f7e8df;
  --on-primary-container: #5d2212;
  --accent: #8b6e58;
  
  --canvas: #f9f8f6; /* Claude Clay/Eggshell */
  --bg-secondary: #f3f0e8; /* Sand */
  --surface-1: #ffffff; /* Pure white cards */
  --surface-2: #faf8f5;
  --surface-muted: #f5f2eb;
  --ink: #191919; /* Near black */
  --ink-muted: #5e5d59; /* Charcoal grey */
  --ink-subtle: #8d8b85;
  --hairline: #e6e3da;
  --hairline-strong: #d8d3c5;
  
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: #e6e3da;
  --glass-shadow: rgba(25, 25, 25, 0.04);
}

/* Complete visual-token contract: warm Claude palette reaches external modules. */
[data-brand-theme="anthropic"] {
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bg-primary: var(--canvas); --surface-3: #34302b; --surface-hover: #2a2723; --surface-tonal: var(--primary-container);
  --on-primary: #191919; --border: var(--hairline); --border-strong: var(--hairline-strong);
  --success: #8bc28b; --warning: #e5bb73; --danger: #ed9b86; --info: #9bbde3;
  --radius-sm: 6px; --radius: 12px; --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28); --shadow: 0 3px 10px rgba(0,0,0,.3); --shadow-lg: 0 12px 30px rgba(0,0,0,.38);
}
[data-brand-theme="anthropic"][data-theme="light"] {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Newsreader', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bg-primary: var(--canvas); --surface-3: #f1ede5; --surface-hover: #f5f2eb; --surface-tonal: var(--primary-container);
  --on-primary: #000000; --border: var(--hairline); --border-strong: var(--hairline-strong);
  --success: #2d7a46; --warning: #a96f22; --danger: #ae442e; --info: #386f9e;
  --radius-sm: 6px; --radius: 12px; --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(25,25,25,.06); --shadow: 0 3px 10px rgba(25,25,25,.08); --shadow-lg: 0 12px 30px rgba(25,25,25,.1);
}

/* Body/input/select/textarea/button already inherit var(--font-family) globally via
   html/body in css/index.css — no per-element override needed now that --font-family
   itself is overridden above. Headings still need --font-display explicitly since
   css/index.css only applies --font-display to specific classes, not all headings. */
[data-brand-theme="anthropic"] h1,
[data-brand-theme="anthropic"] h2,
[data-brand-theme="anthropic"] h3,
[data-brand-theme="anthropic"] h4,
[data-brand-theme="anthropic"] .top-bar__title,
[data-brand-theme="anthropic"] .card-title,
[data-brand-theme="anthropic"] .card__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Custom Claude Scrollbar ── */
[data-brand-theme="anthropic"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-brand-theme="anthropic"] ::-webkit-scrollbar-track {
  background: transparent;
}
[data-brand-theme="anthropic"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
[data-brand-theme="anthropic"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── Brand Loader — outline sketch spinner ── */
[data-brand-theme="anthropic"] .spinner {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border-strong);
  border-top-color: var(--primary);
  animation: spin 1.3s cubic-bezier(0.4, 0.1, 0.2, 1) infinite;
}

/* ── Ambient Backdrop — fine paper-grain noise, no color blobs ── */
[data-brand-theme="anthropic"] #ambient-backdrop-canvas::before,
[data-brand-theme="anthropic"] #ambient-backdrop-canvas::after {
  content: none;
}
[data-brand-theme="anthropic"] #ambient-backdrop-canvas {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  filter: contrast(120%) brightness(95%);
}
[data-brand-theme="anthropic"][data-theme="light"] #ambient-backdrop-canvas {
  opacity: 0.04;
}

/* ── Sidebar & Layout — Sand-colored sidebar in Light mode ── */
[data-brand-theme="anthropic"] .sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}
[data-brand-theme="anthropic"] .sidebar__item {
  border-radius: 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-weight: 500;
}
[data-brand-theme="anthropic"] .sidebar__item:hover {
  background: var(--surface-muted);
}
[data-brand-theme="anthropic"] .sidebar__item--active {
  background: var(--primary-container) !important;
  color: var(--primary) !important;
}
[data-brand-theme="anthropic"] .sidebar__item--active svg.lucide {
  color: var(--primary) !important;
  stroke-width: 2px;
}

/* ── Cards & UI Surfaces ── */
[data-brand-theme="anthropic"] .card,
[data-brand-theme="anthropic"] .metric-card,
[data-brand-theme="anthropic"] .kpi-card {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color var(--transition-fast);
}
[data-brand-theme="anthropic"] .card:hover,
[data-brand-theme="anthropic"] .metric-card:hover {
  border-color: var(--border-strong);
}

/* ── Kanban Board & Cards ── */
[data-brand-theme="anthropic"] .kanban__column {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
}
[data-brand-theme="anthropic"] .kanban__card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
[data-brand-theme="anthropic"] .kanban__card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
[data-brand-theme="anthropic"] .kanban__placeholder {
  border: 1.5px dashed var(--primary-light);
  background: var(--primary-glow);
  border-radius: 12px;
}

/* ── Inputs & UI elements ── */
[data-brand-theme="anthropic"] .form-input,
[data-brand-theme="anthropic"] .form-select,
[data-brand-theme="anthropic"] .form-textarea {
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
[data-brand-theme="anthropic"] .form-input:focus,
[data-brand-theme="anthropic"] .form-select:focus,
[data-brand-theme="anthropic"] .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Buttons */
[data-brand-theme="anthropic"] .btn {
  border-radius: 10px;
  font-weight: 500;
  transition: all var(--transition-fast);
}
[data-brand-theme="anthropic"] .btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary-hover);
}
[data-brand-theme="anthropic"] .btn--primary:hover {
  background: var(--primary-hover);
}
[data-brand-theme="anthropic"] .btn--secondary {
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
}
[data-brand-theme="anthropic"] .btn--secondary:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
}
[data-brand-theme="anthropic"] .btn--ghost {
  color: var(--text-secondary);
}
[data-brand-theme="anthropic"] .btn--ghost:hover {
  background: var(--primary-container);
  color: var(--primary);
}

/* ── Glassmorphism elements ── */
[data-brand-theme="anthropic"] .glass,
[data-brand-theme="anthropic"] .ai-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Modals */
[data-brand-theme="anthropic"] .modal,
[data-brand-theme="anthropic"] .cmd-palette {
  border-radius: 20px !important;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

[data-brand-theme="anthropic"] svg.lucide {
  stroke-width: 1.5px;
  color: var(--text-secondary);
}

[data-brand-theme="anthropic"] .tab-btn {
  border-radius: 10px;
  font-weight: 500;
}

/* ── Claude Chat Panel & Message Bubble Overrides ── */
[data-brand-theme="anthropic"] .ai-panel__welcome {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 16px;
}

[data-brand-theme="anthropic"] .ai-panel__message--ai {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}
[data-brand-theme="anthropic"] .ai-panel__message--ai strong {
  color: var(--primary);
}
[data-brand-theme="anthropic"] .ai-panel__message--ai code {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--primary-light);
}
[data-brand-theme="anthropic"][data-theme="light"] .ai-panel__message--ai code {
  color: var(--primary);
}

[data-brand-theme="anthropic"] .ai-panel__message--user {
  background: var(--primary-container);
  border: 1px solid var(--primary-glow);
  color: var(--text-primary);
  box-shadow: none;
}

[data-brand-theme="anthropic"] .ai-panel__quick-actions {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

[data-brand-theme="anthropic"] .quick-action-chip {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  transition: all var(--transition-spring);
}
[data-brand-theme="anthropic"] .quick-action-chip:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--primary-glow);
}

[data-brand-theme="anthropic"] .ai-panel__input {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
[data-brand-theme="anthropic"] .ai-panel__input .form-input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
[data-brand-theme="anthropic"] .ai-panel__input .form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Claude Icons ── */
[data-brand-theme="anthropic"] .ms-icon,
[data-brand-theme="anthropic"] .fluent-icon {
  display: none !important; /* Hide Google/Microsoft icons, force Lucide outlines */
}

/* ── Claude Brand Asterisk Logo SVG ── */
[data-brand-theme="anthropic"] .ai-panel__brand-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da6a47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0 !important;
  color: transparent !important;
}
[data-brand-theme="anthropic"][data-theme="light"] .ai-panel__brand-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc5a37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93'/%3E%3C/svg%3E");
}