/*
 * CommonLynk — Canonical Design Tokens
 * Always reference via var(--cl-*). Never hardcode hex values in new code.
 *
 * Token roles:
 *   --cl-ink      primary text, headings, navbar            (was old navy hex)
 *   --cl-paper    page and card background                  (was old cream hex)
 *   --cl-accent   CTAs, active states, highlights           (was old gold hex)
 *   --cl-teal     secondary actions, success states         (tokenised teal)
 *   --cl-danger   destructive actions, delete buttons, error states
 *                 (replaces the retired burgundy where it was used for danger)
 *   --cl-muted    muted body text, hints, secondary labels
 *   --cl-sidebar  sidebar background — defaults to --cl-ink; tenant base.html
 *                 may override per OrgProfile.nav_color
 *   --cl-border   subtle 1px border / divider — derived from --cl-ink
 *
 * Per-template :root blocks in templates/base.html and templates/landing/base.html
 * still declare local aliases (--navy, --teal, --gold, --burgundy etc.). The
 * legacy hex literals they used to hold have been swept to var(--cl-*) refs.
 */

/* Global scrollbar — gold thumb on neutral track. Overridden in
   templates/base.html for the .sidebar (translucent white on the navy
   sidebar background reads cleaner than gold). */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C4A875;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#0B1F3A}
*{scrollbar-width:thin;scrollbar-color:#C4A875 transparent}

:root{
  /* Core palette */
  --cl-ink:    #0B1F3A;  /* Dark navy — primary text, headings, navbar */
  --cl-paper:  #F5F2EC;  /* Off-white — page & card backgrounds */
  --cl-accent: #C4A875;  /* Warm gold — CTAs, active states, highlights */
  --cl-teal:   #3FA68D;  /* Teal — secondary actions, success states */
  --cl-teal-dark: #0F6E56;  /* Dark teal — done/complete text on teal-tinted fills */
  --cl-danger: #C0392B;  /* Destructive actions, delete buttons, error states */
  --cl-muted:  #6B7280;  /* Muted body text, hints, secondary labels */

  /* Extended status palette */
  --cl-info:    #1565C0;             /* Informational accents, info banners, links */
  --cl-warning: #B45309;             /* Warning/attention text & badges (amber) */
  --cl-purple:  #7C3AED;             /* Category/tag accents */
  --cl-white:   #FFFFFF;             /* True white card surfaces & inverse text */
  --cl-shadow:  rgba(11, 31, 58, 0.15); /* Ink-tinted drop shadow */

  /* Light tint backgrounds — paired with their status colors */
  --cl-teal-bg:    #EAF6F2;   /* success/teal state backgrounds */
  --cl-danger-bg:  #FDECEA;   /* error/danger state backgrounds */
  --cl-info-bg:    #EEF4FB;   /* info state backgrounds */
  --cl-warning-bg: #FEF3E2;   /* warning state backgrounds */

  /* Derived semantic tokens */
  --cl-text:        var(--cl-ink);
  --cl-bg:          var(--cl-paper);
  --cl-sidebar:     var(--cl-ink);   /* Sidebar background — overridden per-tenant in base.html */
  --cl-surface:     #0B1F3A;         /* Dark navy surface (buttons, badges, popovers) — pinned, never follows tenant text color */
  --cl-btn-primary: var(--cl-accent);
  --cl-btn-text:    var(--cl-ink);
  --cl-success:     var(--cl-teal);
  --cl-border:      #E8E8E5;   /* Subtle 1px border / divider */

  /* Typography */
  --cl-font-sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cl-font-mono:"JetBrains Mono",ui-monospace,Menlo,Monaco,Consolas,monospace;
  --cl-fs-display:56px;
  --cl-fs-h1:36px;
  --cl-fs-h2:22px;
  --cl-fs-body:14px;
  --cl-fs-small:12px;
  --cl-fs-label:10px;
  --cl-fw-light:300;
  --cl-fw-regular:400;
  --cl-fw-medium:500;
  --cl-fw-semibold:600;
  --cl-fw-bold:700;
  --cl-track-display:-0.03em;
  --cl-track-heading:-0.02em;
  --cl-track-label:0.18em;

  /* === Component Tokens === */

  /* Buttons */
  --cl-btn-padding-y: 0.5rem;
  --cl-btn-padding-x: 1.1rem;
  --cl-btn-padding-y-sm: 0.3rem;
  --cl-btn-padding-x-sm: 0.75rem;
  --cl-btn-padding-y-lg: 0.65rem;
  --cl-btn-padding-x-lg: 1.5rem;
  --cl-btn-font-size: 0.875rem;
  --cl-btn-font-size-sm: 0.8rem;
  --cl-btn-font-weight: 600;
  --cl-btn-radius: 6px;
  --cl-btn-transition: background 150ms ease, opacity 150ms ease, box-shadow 150ms ease;

  /* Surfaces */
  --cl-radius-sm: 4px;
  --cl-radius-md: 8px;
  --cl-radius-lg: 12px;
  --cl-radius-card: 10px;
  --cl-radius-modal: 14px;
  --cl-radius-badge: 999px;

  /* Elevation */
  --cl-shadow-sm: 0 1px 3px var(--cl-shadow);
  --cl-shadow-md: 0 4px 12px var(--cl-shadow);
  --cl-shadow-lg: 0 8px 24px var(--cl-shadow);

  /* Transitions */
  --cl-transition-fast: 120ms ease;
  --cl-transition: 200ms ease;
  --cl-transition-slow: 350ms ease;
}

/* ── Phone input widget (templates/components/phone_input.html) ───────────
   The tenant portal does not load Bootstrap, so the widget can't rely on
   .input-group / .form-select. These rules render the country-code select
   and the number field as one cohesive input group: [🇪🇬 +20][ number … ]. */
.phone-input-group {
  display: flex;
  border: 1px solid var(--cl-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.phone-input-group:focus-within {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(196, 168, 117, 0.15);
}
.phone-code-select {
  border: none;
  border-right: 1px solid var(--cl-border);
  background: var(--cl-paper);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  min-width: 84px;
  max-width: 120px;
  cursor: pointer;
  outline: none;
  appearance: auto;          /* keep the native dropdown arrow */
  color: var(--cl-ink);
}
.phone-number-input {
  border: none;
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  background: transparent;
  color: var(--cl-ink);
  min-width: 0;              /* let the field shrink inside the flex group */
}
.phone-number-input::placeholder { color: var(--cl-muted); }
/* Live E.164 validation badge appended by static/js/localization.js. It
   toggles the d-none / text-* classes the script already emits. */
.phone-status {
  display: flex;
  align-items: center;
  padding: 0 0.625rem;
  font-size: 0.85rem;
  background: var(--cl-paper);
  border-left: 1px solid var(--cl-border);
}
.phone-status.d-none      { display: none; }
.phone-status.text-success { color: var(--cl-teal); }
.phone-status.text-danger  { color: var(--cl-danger); }
.phone-status.text-muted   { color: var(--cl-muted); }

/* ── Flag-button country-code picker (P04, 2026-05-26) ─────────────────────
   Used standalone (templates/core/_phone_picker.html) and as the country-code
   half of templates/components/phone_input.html. Drop-in replacement for the
   prior native <select>; same data attributes so localization.js wires up. */
.phone-picker { position: relative; display: inline-block; min-width: 0; }
.phone-picker--embedded {
  /* When embedded inside .phone-input-group flex row */
  border-right: 1px solid var(--cl-border);
  background: var(--cl-paper);
}
.phone-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.5rem 0.625rem;
  background: transparent;
  border: 1px solid var(--cl-border);
  border-radius: 6px;
  font-size: 0.875rem; color: var(--cl-ink);
  cursor: pointer; white-space: nowrap;
}
.phone-picker--embedded .phone-picker-btn {
  border: none; border-radius: 0;
  min-width: 84px;
}
.phone-picker-btn:hover { background: var(--cl-paper); }
.phone-picker--embedded .phone-picker-btn:hover { background: color-mix(in srgb, var(--cl-paper) 60%, white); }
.phone-picker-flag { font-size: 1.05rem; line-height: 1; }
.phone-picker-code { font-variant-numeric: tabular-nums; }
.phone-picker-caret { font-size: 0.7rem; opacity: 0.55; margin-left: 2px; }
.phone-picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: #fff;
  border: 1px solid var(--cl-border); border-radius: 8px;
  min-width: 280px; max-width: 380px;
  padding: 8px;
  box-shadow: 0 8px 28px rgba(11,31,58,0.14);
}
.phone-picker-search {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--cl-border); border-radius: 6px;
  color: var(--cl-ink); background: #fff; margin-bottom: 6px;
}
.phone-picker-search:focus { outline: none; border-color: var(--cl-accent); }
.phone-picker-list { max-height: 280px; overflow-y: auto; }
.phone-picker-option {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent; border: none; border-radius: 5px;
  text-align: start; font-size: 13px; color: var(--cl-ink);
  cursor: pointer;
}
.phone-picker-option:hover,
.phone-picker-option.is-active { background: var(--cl-paper); }
.phone-picker-option.is-selected { background: color-mix(in srgb, var(--cl-accent) 14%, transparent); }
.phone-picker-option-flag { font-size: 1.05rem; line-height: 1; }
.phone-picker-option-name { color: var(--cl-ink); }
.phone-picker-option-dial { color: var(--cl-muted); font-variant-numeric: tabular-nums; }
.phone-picker-option.is-hidden { display: none; }

/* ── Indeterminate "preparing" progress overlay (2026-06-10) ──────────────
   A fixed bottom-centre card with a spinner + animated bar, for multi-second
   operations that have NO measurable byte/percentage progress — e.g. a
   server-side file build (the Translation Manager all-languages .xlsx export
   is the first user). The bar animates on its own; show/hide by toggling the
   .is-visible class. Self-contained (own spinner + keyframes) so it can be
   dropped into any page that loads this file.
   Markup:
     <div class="cl-prep-overlay" role="status" aria-live="polite">
       <div class="cl-prep-overlay__row">
         <span class="cl-prep-overlay__spinner"></span>
         <span class="js-label">Preparing…</span>
       </div>
       <div class="cl-prep-bar"><span></span></div>
     </div>
   JS: el.classList.add('is-visible') / .remove('is-visible'). */
@keyframes cl-prep-indeterminate { 0% { left: -45%; } 100% { left: 100%; } }
@keyframes cl-prep-spin { to { transform: rotate(360deg); } }
.cl-prep-overlay {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10000; min-width: 300px; max-width: 90vw;
  background: var(--cl-ink); color: var(--cl-white);
  padding: 0.85rem 1.25rem; border-radius: var(--cl-radius-card);
  box-shadow: var(--cl-shadow-lg); display: none;
}
.cl-prep-overlay.is-visible { display: block; }
.cl-prep-overlay__row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.875rem; margin-bottom: 0.6rem;
}
.cl-prep-overlay__spinner {
  display: inline-block; width: 12px; height: 12px; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--cl-accent);
  border-radius: 50%; animation: cl-prep-spin 0.8s linear infinite;
}
.cl-prep-bar {
  position: relative; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.cl-prep-bar > span {
  position: absolute; top: 0; height: 100%; width: 45%; border-radius: 2px;
  background: var(--cl-accent); animation: cl-prep-indeterminate 1.1s ease-in-out infinite;
}