/* TTG CRM brand layer (Phase 1, 2026-10-16).
 * The talktogina.ai design tokens (assets/css/tokens.css on the site) mapped onto
 * the Metronic / Bootstrap variables, so every module picks them up without
 * markup changes. Loaded AFTER the theme bundle (layout/master.blade.php), so
 * plain specificity wins; !important only where the bundle itself uses it.
 * Decisions (Jordan, 2026-10-16): dark rail sidebar, cobalt-600 as the one accent,
 * Schibsted Grotesk + Bricolage Grotesque instead of Inter. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/SchibstedGrotesk-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/SchibstedGrotesk-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/assets/fonts/BricolageGrotesque-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 94%; descent-override: 26%; line-gap-override: 0%; }

:root {
  /* Site tokens (talktogina.ai tokens.css) */
  --cobalt-700: #1740B0; --cobalt-600: #1D4ED8; --cobalt-300: #7CA0F0; --cobalt-100: #DCE6FD; --cobalt-50: #EEF3FF;
  --ink-900: #0B0E14; --ink-800: #0D1117; --ink-700: #141A24; --ink-600: #1E2530; --ink-500: #2B3442; --ink-mut: #5B6472;
  --paper-0: #FCFBF8; --paper-50: #F4F2ED; --paper-100: #ECE9E2; --paper-200: #DEDAD1; --paper-300: #C9C4B9;
  /* Console additions: semantic tints for status chips */
  --ok-600: #1F7A4D; --ok-50: #E8F5EE; --warn-600: #A15C00; --warn-50: #FFF3E0; --lost-600: #8A2E2E; --lost-50: #FBEAEA;
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Schibsted Grotesk", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Schibsted Fallback", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-card: 12px; --r-input: 10px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11,14,20,.06), 0 1px 1px rgba(11,14,20,.04);
  --shadow-2: 0 18px 40px -18px rgba(11,14,20,.28);
}

/* ── Theme variables (light mode is the only mode in use) ─────────────── */
html[data-bs-theme=light], [data-bs-theme=light] {
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-primary: #1D4ED8;
  --bs-primary-rgb: 29, 78, 216;
  --bs-primary-active: #1740B0;
  --bs-primary-light: #EEF3FF;
  --bs-primary-inverse: #fff;
  --bs-primary-clarity: rgba(29, 78, 216, .2);
  --bs-text-primary: #1D4ED8;
  --bs-link-color: #1D4ED8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1740B0;
  --bs-link-hover-color-rgb: 23, 64, 176;
  --bs-body-color: #141A24;
  --bs-gray-900: #0B0E14;
  --bs-gray-800: #141A24;
  --bs-gray-700: #2B3442;
  --bs-gray-600: #5B6472;
  --bs-text-muted: #5B6472;
  --bs-body-bg: #FCFBF8;
  --bs-card-bg: #FCFBF8;
  --bs-border-color: #E6E2DA;
  --bs-gray-100: #F4F2ED;
  --bs-gray-200: #ECE9E2;
  --bs-gray-300: #DEDAD1;
  --bs-gray-100-rgb: 244, 242, 237;
  --bs-gray-200-rgb: 236, 233, 226;
  --bs-gray-300-rgb: 222, 218, 209;
  --bs-light: #F4F2ED;
  --bs-light-active: #ECE9E2;
  --bs-focus-ring-color: rgba(29, 78, 216, .25);
}
/* additional.css sets the page background with !important on [data-bs-theme=light]. */
html[data-bs-theme=light] { --bs-app-bg-color: #F4F2ED !important; }

/* ── Type ───────────────────────────────────────────────────────────── */
html[lang], html[lang] body { font-family: var(--font-body); }
html[lang] body { font-feature-settings: "ss01" off; -webkit-font-smoothing: antialiased; }
html[lang] h1, html[lang] h2, html[lang] h3,
html[lang] .page-heading, html[lang] .card-title, html[lang] .card-title h3 {
  font-family: var(--font-display); letter-spacing: -.012em;
}
html[lang] h1, html[lang] .page-heading { font-weight: 650; }
html[lang] .text-gray-900, html[lang] .text-dark { color: var(--ink-900) !important; }
html[lang] .text-muted { color: var(--ink-mut) !important; }

/* ── Surfaces ───────────────────────────────────────────────────────── */
html[lang] .card { border-color: #E6E2DA; border-radius: var(--r-card); box-shadow: var(--shadow-1); }
html[lang] .card > .card-header { border-bottom-color: #ECE9E2; }
html[lang] .form-control, html[lang] .form-select { border-radius: var(--r-input); }
html[lang] .form-control:focus, html[lang] .form-select:focus { border-color: var(--cobalt-300); box-shadow: 0 0 0 3px var(--cobalt-50); }
html[lang] a { text-underline-offset: 3px; }
html[lang] ::selection { background: var(--cobalt-100); color: var(--ink-900); }
html[lang] :focus-visible { outline: 2px solid var(--cobalt-600); outline-offset: 2px; }

/* ══ Component kit (Phase 3, 2026-10-16) ═══════════════════════════════════
 * One look for the Metronic components every module uses, in site tokens.
 * Scoped under html[lang] so it out-ranks the theme bundle without markup changes. */

/* Buttons: pills, calm secondary, quiet destructive */
html[lang] .btn { border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0; }
html[lang] .btn.btn-icon { border-radius: 10px; }
html[lang] .btn.btn-sm, html[lang] .btn.btn-xs { border-radius: var(--r-pill); }
html[lang] .btn.btn-primary { box-shadow: 0 1px 2px rgba(11,14,20,.08); }
html[lang] .btn.btn-primary:hover:not(.btn-active), html[lang] .btn.btn-primary:focus:not(.btn-active) { background-color: var(--cobalt-700) !important; border-color: var(--cobalt-700) !important; }
html[lang] .btn.btn-light { background-color: var(--paper-100); color: var(--ink-700); }
html[lang] .btn.btn-light:hover:not(.btn-active) { background-color: var(--paper-200) !important; color: var(--ink-900) !important; }
html[lang] .btn.btn-light-primary { background-color: var(--cobalt-50); color: var(--cobalt-700); }
html[lang] .btn.btn-light-primary:hover:not(.btn-active) { background-color: var(--cobalt-100) !important; color: var(--cobalt-700) !important; }
html[lang] .btn.btn-outline-primary { border: 1px solid var(--cobalt-300) !important; color: var(--cobalt-700); }
/* Destructive actions stay available but never shout. */
html[lang] .btn.btn-light-danger, html[lang] .btn.btn-outline-danger { background: transparent !important; border: 1px solid #E9C9C9 !important; color: var(--lost-600) !important; }
html[lang] .btn.btn-light-danger:hover, html[lang] .btn.btn-outline-danger:hover { background: var(--lost-50) !important; }
html[lang] .btn.btn-danger { background-color: var(--lost-600); border-color: var(--lost-600); }

/* Badges: tinted chips with words, never shouting */
html[lang] .badge { border-radius: var(--r-pill); font-weight: 600; padding: .4em .75em; letter-spacing: 0; text-transform: none; }
html[lang] .badge.badge-light, html[lang] .badge.badge-light-secondary, html[lang] .badge.badge-secondary { background: var(--paper-100); color: var(--ink-700); }
html[lang] .badge.badge-light-primary, html[lang] .badge.badge-primary, html[lang] .badge.badge-light-info, html[lang] .badge.badge-info { background: var(--cobalt-50); color: var(--cobalt-700); }
html[lang] .badge.badge-light-success, html[lang] .badge.badge-success { background: var(--ok-50); color: var(--ok-600); }
html[lang] .badge.badge-light-warning, html[lang] .badge.badge-warning { background: var(--warn-50); color: var(--warn-600); }
html[lang] .badge.badge-light-danger, html[lang] .badge.badge-danger { background: var(--lost-50); color: var(--lost-600); }

/* Tables: quiet header, hairlines, row hover, comfortable cells */
html[lang] .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--paper-50); --bs-table-striped-bg: var(--paper-50); --bs-table-active-bg: var(--cobalt-50); }
html[lang] .table > thead > tr > th, html[lang] .table > thead > tr > td {
  color: var(--ink-mut) !important; font-weight: 600; font-size: .93rem; letter-spacing: .01em; text-transform: none;
  border-bottom: 1px solid var(--paper-200) !important; padding-top: .9rem; padding-bottom: .9rem; white-space: nowrap;
}
html[lang] .table > tbody > tr > td { border-color: #ECE9E2; vertical-align: middle; padding-top: .9rem; padding-bottom: .9rem; }
html[lang] .table > tbody > tr { transition: background-color .12s ease; }
html[lang] .table > tbody > tr:hover > * { background-color: var(--paper-50); }
html[lang] .table.table-light > :not(caption) > * > *, html[lang] .table-light { --bs-table-bg: var(--paper-50); }
html[lang] .table a:not(.btn) { color: var(--ink-900); font-weight: 600; text-decoration: none; }
html[lang] .table a:not(.btn):hover { color: var(--cobalt-700); text-decoration: underline; }

/* Forms */
html[lang] .form-control, html[lang] .form-select { background-color: #fff; border-color: var(--paper-200); color: var(--ink-900); }
html[lang] .form-control.form-control-solid, html[lang] .form-select.form-select-solid { background-color: var(--paper-50); border-color: var(--paper-100); }
html[lang] .form-control::placeholder { color: #646C79; }
html[lang] .form-label { color: var(--ink-700); font-weight: 600; }
html[lang] .form-check-input:checked { background-color: var(--cobalt-600); border-color: var(--cobalt-600); }

/* Cards, modals, dropdown menus */
html[lang] .card .card-header { min-height: 60px; }
html[lang] .card .card-title, html[lang] .card .card-title h3 { font-weight: 650; }
html[lang] .modal-content { border-radius: 16px; border: 1px solid var(--paper-200); box-shadow: var(--shadow-2); background: var(--paper-0); }
html[lang] .modal-header { border-bottom-color: var(--paper-100); }
html[lang] .modal-footer { border-top-color: var(--paper-100); }
html[lang] .menu-sub-dropdown, html[lang] .dropdown-menu { border-radius: 12px; border: 1px solid var(--paper-200); box-shadow: var(--shadow-2); background: var(--paper-0); }
html[lang] .nav-line-tabs .nav-item .nav-link.active { border-bottom-color: var(--cobalt-600); color: var(--ink-900); }

/* Toasts: ink card with Gina's face (Phase 3; mascot added by crm.js) */
html[lang] .crm-toast { border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 12px; max-width: 380px; font-size: 14px; }
html[lang] .crm-toast--success { background: var(--ink-900); }
html[lang] .crm-toast--error { background: var(--ink-900); box-shadow: inset 3px 0 0 #E5484D, var(--shadow-2); }
html[lang] .crm-toast .crm-toast-gina { width: 40px; height: 40px; flex: 0 0 40px; }

/* Empty states: a reusable block (.ttg-empty) for module passes */
.ttg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; color: var(--ink-mut); }
.ttg-empty img { width: 112px; height: 112px; }
.ttg-empty b, .ttg-empty strong { color: var(--ink-700); font-size: 1.05rem; font-weight: 600; }
.ttg-empty p { margin: 0; max-width: 40ch; }

@media (prefers-reduced-motion: no-preference) {
  .ttg-empty img, .crm-toast .crm-toast-gina { animation: ttg-pop-in .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes ttg-pop-in { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
}
/* Tables inside cards keep a gutter at both ends. */
html[lang] .card .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
html[lang] .card .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
html[lang] code:not([class*="language-"]) { color: var(--ink-700); background: var(--paper-100); border-radius: 6px; padding: .15em .45em; font-size: .9em; }

/* Phase 4: extra-small buttons stay small (row actions, card controls) */
html[lang] .btn.btn-xs { padding: .3rem .75rem; font-size: .9rem; line-height: 1.35; min-height: 0; height: auto; }
html[lang] .btn.btn-xs.btn-outline-danger { padding: .25rem .55rem; }

/* Phase 5: Gina's one-shot celebration card (crm.js crmCelebrate) */
.ttg-celebrate {
  position: fixed; right: 24px; bottom: 24px; z-index: 1090; display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 12px; background: var(--ink-900); color: #fff; border-radius: 18px;
  box-shadow: var(--shadow-2); max-width: 380px; opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.ttg-celebrate.is-in { opacity: 1; transform: none; }
.ttg-celebrate img { width: 96px; height: 96px; flex: 0 0 96px; margin: -28px 0 -8px -6px; }
.ttg-celebrate strong { display: block; font: 650 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.ttg-celebrate span { display: block; color: #C9CFDA; font-size: 13.5px; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ttg-celebrate.is-in img { animation: ttg-celebrate-hop .95s cubic-bezier(.2,.8,.2,1) .1s both; transform-origin: 50% 80%; }
  @keyframes ttg-celebrate-hop {
    0% { transform: translateY(8px) scale(.9); } 30% { transform: translateY(2px) scale(1.06,.94); }
    58% { transform: translateY(-12px) rotate(-3deg) scale(.98,1.03); } 80% { transform: translateY(0) rotate(2deg); } 100% { transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) { .ttg-celebrate { transition: opacity .2s linear; transform: none; } }
@media (max-width: 768px) { .ttg-celebrate { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* Phase 5: keyboard shortcut help */
.ttg-keys { border: 0; border-radius: 16px; padding: 22px 24px; background: var(--paper-0); box-shadow: var(--shadow-2); max-width: 360px; }
.ttg-keys::backdrop { background: rgba(11,14,20,.35); }
.ttg-keys h2 { font: 650 18px/1.2 var(--font-display); margin: 0 0 12px; }
.ttg-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; }
.ttg-keys dd { margin: 0; color: var(--ink-700); }
.ttg-keys kbd { font: 600 12.5px/1 var(--font-body); background: var(--paper-100); border: 1px solid var(--paper-300); border-radius: 6px; padding: 4px 7px; color: var(--ink-900); }

/* Phase 5 contrast pass (WCAG AA, 4.5:1 for text on paper): the theme's bright
   status utilities (#17C653, #FFA800, #7239EA...) measured 1.9-2.2:1. */
html[lang] .text-success { color: var(--ok-600) !important; }
html[lang] .text-warning { color: var(--warn-600) !important; }
html[lang] .text-info    { color: var(--cobalt-700) !important; }
html[lang] .text-danger  { color: #B42318 !important; }
html[lang] .text-secondary { color: var(--ink-mut) !important; }
html[lang] .ttg-search input::placeholder { color: #646C79; }