/* ============================================================================
   portal-tokens.css — RestoSuite Portal canonical design tokens (A-T0)
   ----------------------------------------------------------------------------
   PRESENTATION-LAYER ONLY. Loaded via <link> in <head> BEFORE each page's
   inline <style>, so legacy var names keep resolving UNCHANGED.

   Two layers:
     1. CANONICAL tokens — one value per role (accent indigo #4C6EF5, type
        scale, spacing, radius, shadow).
     2. LEGACY ALIASES — every existing per-page variable name is aliased to a
        canonical token so existing inline CSS resolves with no edit. Adopting
        a page = later deleting its local :root; until then this file is purely
        additive and non-breaking (a page's own :root still wins by cascade —
        these are the fallback / convergence target).

   NON-BREAKING NOTE: a page that still declares its own :root overrides these
   for that page (later cascade / same specificity, page <style> loads after
   this <link>). This file only takes effect for vars a page does NOT define,
   and becomes the single source once a page drops its local :root.
   ========================================================================== */

:root {
  /* ---- CANONICAL: brand / accent (OD-1 indigo) ------------------------- */
  --rs-brand:            #4C6EF5;   /* canonical accent (indigo) */
  --rs-brand-dark:       #3A55C9;
  --rs-brand-mid:        #6E8EF8;
  --rs-brand-light:      #EEF2FF;
  --rs-brand-soft:       #EEF3FF;

  /* ---- CANONICAL: status spine (4 states + neutral) -------------------- */
  --rs-green:            #0B8A4E;   /* Done / activated */
  --rs-green-bg:         #EDFAF3;
  --rs-green-border:     #B2EDCD;
  --rs-amber:            #B45309;   /* Open / pending / review */
  --rs-amber-bg:         #FFFBEB;
  --rs-amber-border:     #FDE68A;
  --rs-red:              #C42929;   /* Blocked / bug / failed */
  --rs-red-bg:           #FEF2F2;
  --rs-red-border:       #FECACA;
  --rs-blue:             #1A56CC;   /* In progress / auto (info-indigo) */
  --rs-blue-bg:          #EEF4FF;
  --rs-blue-border:      #BDD1FF;
  --rs-purple:           #5B21B6;
  --rs-purple-bg:        #F5F3FF;
  --rs-purple-border:    #C4B5FD;

  /* ---- CANONICAL: surfaces / ink --------------------------------------- */
  --rs-bg:               #F4F5FB;
  --rs-surface:          #FFFFFF;
  --rs-surface-2:        #F8F9FE;
  --rs-border:           #E2E4F0;
  --rs-border-2:         #C8CBDF;
  --rs-text:             #1E1E2E;
  --rs-text-2:           #52526A;
  --rs-text-3:           #8E8EA8;
  --rs-dark:             #1A1A2E;

  /* ---- CANONICAL: typography (DM Sans / DM Mono, 14px base) ------------ */
  --rs-font:             'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --rs-font-mono:        'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rs-fs-base:          14px;
  --rs-fs-sm:            12px;
  --rs-fs-xs:            11px;
  --rs-fs-lg:            16px;
  --rs-lh:               1.5;

  /* ---- CANONICAL: radius / spacing / shadow / motion ------------------- */
  --rs-r:                10px;
  --rs-r-sm:             6px;
  --rs-r-lg:             14px;
  --rs-sp-1:             4px;
  --rs-sp-2:             8px;
  --rs-sp-3:             12px;
  --rs-sp-4:             16px;
  --rs-sp-5:             24px;
  --rs-shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --rs-shadow-md:        0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --rs-shadow-lg:        0 12px 32px rgba(15,23,42,.10);
  --rs-transition:       150ms ease;

  /* ---- CANONICAL: sidebar (dark nav) ----------------------------------- */
  --rs-sidebar-bg:       #1E293B;
  --rs-sidebar-border:   #2D3F55;
  --rs-sidebar-text:     #94A3B8;
  --rs-sidebar-hover:    #2D3F55;
  --rs-sidebar-active-bg:#4C6EF5;   /* indigo active (OD-1; replaces sky) */
  --rs-sidebar-active:   #FFFFFF;
  --rs-sidebar-width:    240px;
  --rs-sidebar-collapsed-width: 72px;

  /* ======================================================================
     LEGACY-NAME ALIASES — map every existing per-page var to a canonical
     token. These let untouched inline CSS resolve unchanged. Sky --accent
     is retired by pointing it at the indigo brand.
     ====================================================================== */

  /* accent retired → indigo brand */
  --accent:            var(--rs-brand);
  --accent-light:      var(--rs-brand-light);
  --nav-active:        var(--rs-brand);

  /* brand family */
  --brand:             var(--rs-brand);
  --brand-dark:        var(--rs-brand-dark);
  --brand-mid:         var(--rs-brand-mid);
  --brand-light:       var(--rs-brand-light);
  --brand-soft:        var(--rs-brand-soft);

  /* surfaces / ink */
  --bg:                var(--rs-bg);
  --surface:           var(--rs-surface);
  --surface-2:         var(--rs-surface-2);
  --panel:             var(--rs-surface);
  --border:            var(--rs-border);
  --border-2:          var(--rs-border-2);
  --line:              var(--rs-border);
  --line-strong:       var(--rs-border-2);
  --text:              var(--rs-text);
  --text-2:            var(--rs-text-2);
  --text-3:            var(--rs-text-3);
  --text-primary:      var(--rs-text);
  --text-secondary:    var(--rs-text-2);
  --text-muted:        var(--rs-text-3);
  --muted:             var(--rs-text-2);
  --muted-2:           var(--rs-text-3);
  --ink:               var(--rs-text);
  --dark:              var(--rs-dark);
  --nav:               var(--rs-sidebar-bg);
  --nav-line:          var(--rs-sidebar-border);
  --nav-text:          var(--rs-sidebar-text);

  /* portal-* alias family */
  --portal-bg:         var(--rs-bg);
  --portal-surface:    var(--rs-surface);
  --portal-border:     var(--rs-border);
  --portal-text:       var(--rs-text);
  --portal-text-2:     var(--rs-text-2);
  --portal-text-muted: var(--rs-text-3);

  /* status colors */
  --green:             var(--rs-green);
  --green-bg:          var(--rs-green-bg);
  --green-border:      var(--rs-green-border);
  --green-light:       var(--rs-green-bg);
  --green-soft:        var(--rs-green-bg);
  --amber:             var(--rs-amber);
  --amber-bg:          var(--rs-amber-bg);
  --amber-border:      var(--rs-amber-border);
  --amber-soft:        var(--rs-amber-bg);
  --orange:            var(--rs-amber);
  --red:               var(--rs-red);
  --red-bg:            var(--rs-red-bg);
  --red-border:        var(--rs-red-border);
  --red-soft:          var(--rs-red-bg);
  --blue:              var(--rs-blue);
  --blue-bg:           var(--rs-blue-bg);
  --blue-border:       var(--rs-blue-border);
  --purple:            var(--rs-purple);
  --purple-bg:         var(--rs-purple-bg);
  --purple-border:     var(--rs-purple-border);
  --teal:              var(--rs-green);
  --teal-bg:           var(--rs-green-bg);
  --sky:               var(--rs-blue);

  /* radius / spacing */
  --r:                 var(--rs-r);
  --r-sm:              var(--rs-r-sm);
  --r-lg:              var(--rs-r-lg);
  --radius:            var(--rs-r);
  --radius-sm:         var(--rs-r-sm);

  /* shadow / motion */
  --shadow:            var(--rs-shadow-lg);
  --shadow-sm:         var(--rs-shadow-sm);
  --shadow-md:         var(--rs-shadow-md);
  --transition:        var(--rs-transition);

  /* sidebar */
  --sidebar-bg:        var(--rs-sidebar-bg);
  --sidebar-border:    var(--rs-sidebar-border);
  --sidebar-text:      var(--rs-sidebar-text);
  --sidebar-hover:     var(--rs-sidebar-hover);
  --sidebar-active-bg: var(--rs-sidebar-active-bg);
  --sidebar-active:    var(--rs-sidebar-active);
  --sidebar-width:     var(--rs-sidebar-width);
  --sidebar-collapsed-width: var(--rs-sidebar-collapsed-width);
}

/* ============================================================================
   i18n (B-P0) — nav language switch + EN/中文 toggle (presentation-only)
   ----------------------------------------------------------------------------
   /i18n.js sets `lang-en` (default) or `lang-zh` on <html>. The shared nav
   (portal-nav.js) carries BOTH languages: English in `.nav-en`, Chinese in the
   existing `.nav-zh`. These rules pick the visible variant.

   Specificity note: each page's INLINE <style> defines `.nav-zh{display:block}`
   (and higher forms like `.nav-item .nav-zh`, specificity 0,2,0) AFTER this
   linked file in the cascade. To win regardless of source order we lead every
   selector with `html.lang-en` / `html.lang-zh` (adds an element+class, giving
   ≥0,2,1) so the language class always decides visibility. Frozen nav state
   classes (.active/.expanded/.open) are never touched.
   ========================================================================== */

/* Default = English: show English, hide Chinese in the nav. */
html.lang-en .nav-en { display: inline; }
html.lang-en .nav-item .nav-zh,
html.lang-en .nav-sub-item .nav-zh,
html.lang-en .nav-parent-label .nav-zh,
html.lang-en .nav-region .nav-zh,
html.lang-en .nav-region-placeholder .nav-zh,
html.lang-en .nav-label .nav-zh,
html.lang-en .sidebar-nav .nav-zh,
html.lang-en .nav-zh { display: none; }

/* 中文: show Chinese (as the primary inline label), hide English. */
html.lang-zh .nav-en { display: none; }
html.lang-zh .nav-item .nav-zh,
html.lang-zh .nav-sub-item .nav-zh,
html.lang-zh .nav-parent-label .nav-zh,
html.lang-zh .nav-region .nav-zh,
html.lang-zh .nav-region-placeholder .nav-zh,
html.lang-zh .nav-label .nav-zh,
html.lang-zh .sidebar-nav .nav-zh,
html.lang-zh .nav-zh {
  display: inline;
  /* drop the small stacked-sublabel styling so 中文 reads as the primary label */
  font-size: inherit; font-weight: inherit; opacity: 1; margin-top: 0; color: inherit;
}

/* ----------------------------------------------------------------------------
   Body i18n (presentation-only). Mirrors the nav rule above for generic page
   body text. Bilingual strings wrap English in `.i18n-en` and Chinese in
   `.i18n-zh`; English is the canonical default (shown when lang-en). Leading
   with `html.lang-*` gives specificity 0,2,0 so these beat page-level inline
   `<style>` rules.
   ------------------------------------------------------------------------- */
html.lang-en .i18n-en { display: inline; }
html.lang-en .i18n-zh { display: none; }

html.lang-zh .i18n-zh { display: inline; }
html.lang-zh .i18n-en { display: none; }

/* ============================================================================
   Read-only / Audit-view UX (Viewer role FR-4) — PRESENTATION ONLY.
   ----------------------------------------------------------------------------
   Activated by <html class="rs-read-only">, which portal-guard.js sets when the
   session's `restrictions` array includes 'read_only'. NON-security: the
   backend 403 (portal_read_only) is the real boundary. This only (a) shows an
   unobtrusive top banner and (b) greys the primary MUTATION controls so a
   read-only auditor doesn't click buttons that would just error.

   Theme-aware: colours come from the canonical tokens above (amber = the
   "review / pending" spine state, fitting an audit view). Layout-safe: the
   banner is position:fixed + pointer-events:none, so it never reflows content
   nor intercepts clicks.
   ========================================================================== */
#rs-readonly-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 12050;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100vw - 24px);
  padding: 6px 14px;
  font-family: var(--rs-font, 'DM Sans', system-ui, -apple-system, sans-serif);
  font-size: var(--rs-fs-sm, 12px); font-weight: 700; line-height: 1.3;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--rs-amber, #B45309);
  background: var(--rs-amber-bg, #FFFBEB);
  border: 1px solid var(--rs-amber-border, #FDE68A);
  border-radius: 999px;
  box-shadow: var(--rs-shadow-md, 0 4px 12px rgba(0,0,0,.10));
  pointer-events: none; /* purely informational; never blocks the page */
}
#rs-readonly-banner svg { width: 13px; height: 13px; flex: none; }

/* Best-effort disable of KNOWN primary mutation controls. The onclick-substring
   selectors ([onclick*="fn"]) also cover buttons injected dynamically via
   innerHTML (lead-board / wo-workspace render their action buttons at runtime),
   which a load-time querySelectorAll would miss. This list is intentionally
   curated (documented in portal-guard.js RS_READONLY_SELECTORS), NOT exhaustive
   — the backend guarantees safety. */
html.rs-read-only #btn-generate-main,
html.rs-read-only #initiate-renewal-submit,
html.rs-read-only #send-invoice-open,
html.rs-read-only #sync-btn,
html.rs-read-only #new-lead-submit,
html.rs-read-only #new-lead-batch-import,
html.rs-read-only #taskActionSubmit,
html.rs-read-only #woDrawerSaveButton,
html.rs-read-only [onclick*="generateQuotation"],
html.rs-read-only [onclick*="submitInitiateRenewal"],
html.rs-read-only [onclick*="openSendInvoiceLink"],
html.rs-read-only [onclick*="syncFromLark"],
html.rs-read-only [onclick*="submitNewLead"],
html.rs-read-only [onclick*="confirmBatchImport"],
html.rs-read-only [onclick*="openAssign"],
html.rs-read-only [onclick*="submitAssign"],
html.rs-read-only [onclick*="submitRequestTasks"],
html.rs-read-only [onclick*="submitFollowUp"],
html.rs-read-only [onclick*="submitReason"],
html.rs-read-only [onclick*="openTaskActionDrawer"],
html.rs-read-only [onclick*="saveHandoverFromTab"],
html.rs-read-only [onclick*="saveOutletCapabilities"],
html.rs-read-only [onclick*="addLicenseAddon"],
html.rs-read-only [onclick*="addLicenseAdmin"],
html.rs-read-only [onclick*="saveServicePackHoursConfirmation"],
html.rs-read-only [onclick*="saveServicePackConsumption"],
html.rs-read-only [data-rs-readonly-disable],
html.rs-read-only .rs-readonly-disable {
  opacity: .45 !important;
  filter: grayscale(.35);
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ---- Compact EN | 中文 toggle in the sidebar logo header ---- */
.sidebar-lang-toggle {
  display: inline-flex; align-items: stretch; gap: 0;
  margin: 8px 18px 0; border: 1px solid var(--rs-sidebar-border, rgba(255,255,255,.12));
  border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.04);
  flex-shrink: 0; /* never let a tall expanded nav squeeze the toggle to 0 height */
}
.sidebar-lang-toggle .lang-opt {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 0; background: transparent;
  padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
  color: var(--rs-sidebar-text, #94a3b8); letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}
.sidebar-lang-toggle .lang-opt + .lang-opt {
  border-left: 1px solid var(--rs-sidebar-border, rgba(255,255,255,.12));
}
.sidebar-lang-toggle .lang-opt:hover { color: #f1f5f9; background: rgba(255,255,255,.06); }
/* Active segment reflects the persisted language via the <html> class. */
html.lang-en .sidebar-lang-toggle .lang-opt-en,
html.lang-zh .sidebar-lang-toggle .lang-opt-zh {
  background: var(--rs-brand, #4C6EF5); color: #fff;
}
