/* ═══════════════════════════════════════════════════════════════════
   MY SOLAR Box Estimator: theme layer on top of odoo-tokens.css
   - maps the app's historic variable names (--A, --t2, --bdr ...) to Odoo 20 tokens
   - dark scheme ([data-theme="dark"], key ms_theme in localStorage)
   Reference: C:\My solar\Sales CRM Hub\docs\odoo-reference\ (odoo-tokens.css is included unchanged).
   The Odoo reference records only 3 dark values (primary button #6B3E66, hover #7B4775, link #02C7B5);
   all other dark values below are derived by us and are not measured Odoo values.
   ═══════════════════════════════════════════════════════════════════ */

/* Settings > UI Design System (shape, font) wrote inline custom properties on <html>.
   Odoo has one shape and one font, so those properties are pinned (a stylesheet !important beats inline). */
:root {
  --ui-r: 6px !important;  --ui-r2: 8px !important;  --ui-r3: 8px !important;  --ui-r4: 12px !important;
  --ft: var(--odoo-font) !important;  --font: var(--odoo-font) !important;
}

:root {
  color-scheme: light;

  /* ── brand / action ── */
  --A:   var(--odoo-primary);        --Amd: var(--odoo-primary-hover);   --Adk: #52374B;
  --Alt: var(--odoo-primary-active-bg);
  --o-brand: var(--odoo-primary);    --o-brand-lt: var(--odoo-primary-active-bg);
  --o-btn: var(--odoo-primary);      --o-btn-hover: var(--odoo-primary-hover);   /* primary button fill */
  --o-on-tint: var(--odoo-link-hover);  /* text on the teal tint (current/selected): #01585C, AA */
  --o-counter: #D23F3A;                  /* red counter dot: Odoo #EF4444 gives white text only 3.8:1 */
  --o-action: var(--odoo-action);    --o-action-hover: var(--odoo-link-hover);   --o-action-lt: var(--odoo-teal-tint);
  --o-link: var(--odoo-link);

  /* ── surfaces ── */
  --o-nav:      transparent;                       /* navbar sits on the page background */
  --o-bg:       var(--odoo-body-bg);
  --o-surface:  #FFFFFF;
  --o-surface2: var(--odoo-gray-100);
  --o-hover:    var(--odoo-gray-200);              /* menu item / pill hover */
  --o-row-hover: var(--odoo-gray-100);             /* list row hover */
  --o-sel:      rgba(230, 242, 243, .65);          /* focused palette row (reference N8) */
  --o-overlay:  rgba(0, 0, 0, .25);                /* modal backdrop (reference D1) */

  /* ── borders ── */
  --o-border:  var(--odoo-border-color);
  --o-border2: var(--odoo-border-color);
  --o-border-btn: var(--odoo-gray-400);            /* secondary buttons */
  --o-border-input: var(--odoo-input-border-color);
  --o-check: var(--odoo-gray-500);

  /* ── text ── */
  --o-text:  var(--odoo-body-color);   --o-text2: var(--odoo-gray-700);
  /* muted text: gray-600 #6C757D is 4.45:1 on #F8F9FA, so the text uses a slightly darker grey (AA 4.5:1) */
  --o-text3: #5F666D;     --o-text4: #5F666D;
  --o-text-muted: #5F666D;
  --o-heading: var(--odoo-heading-color);

  /* ── semantic (fills / bars) ── */
  --ok:   var(--odoo-success);  --warn: var(--odoo-warning);  --err: var(--odoo-danger);  --info: var(--odoo-info);
  --teal: var(--odoo-action);   --purple: var(--odoo-primary);
  /* soft badge = colour at 15% + dark text (reference B4) */
  --ok-lt:   rgba(0, 169, 69, .15);   --ok-dk:   rgb(0, 136, 24);
  --warn-lt: rgba(245, 158, 11, .15); --warn-dk: rgb(154, 107, 1);
  --err-lt:  rgba(239, 68, 68, .15);  --err-dk:  rgb(210, 63, 58);
  --info-lt: rgba(23, 162, 184, .15); --info-dk: rgb(1, 128, 165);
  --pri-lt:  rgba(113, 75, 103, .15); --pri-dk:  rgb(113, 75, 103);
  --sec-lt:  rgba(73, 80, 87, .15);   --sec-dk:  rgb(73, 80, 87);
  /* plain text on page/white (AA contrast, darker than badge text) */
  --ok-text: #007A36;  --warn-text: #8A5A00;  --err-text: #C2312C;  --info-text: #0A6F8E;

  /* ── legacy semantic aliases used by app.js templates ── */
  --R: var(--err-text);  --Rlt: var(--err-lt);  --Rmd: var(--err);
  --T: var(--ok-text);   --Tlt: var(--ok-lt);   --Tdk: var(--ok-dk);
  --G: var(--ok-text);   --Glt: var(--ok-lt);
  --B: var(--info-text); --Blt: var(--info-lt);
  --P: var(--A); --Plt: var(--odoo-primary-active-bg);
  --or: var(--warn-text); --or-lt: var(--warn-lt);

  /* ── legacy surface / text / border aliases ── */
  --bg:  var(--o-bg);       --bg2: var(--o-surface2);
  --sf:  var(--o-surface);  --s0:  var(--o-surface);
  --s1:  var(--o-surface2); --s2:  var(--o-hover);  --s3: var(--odoo-gray-300);
  --t0: var(--o-text);  --t1: var(--o-text);
  --t2: var(--o-text2); --t3: var(--o-text3); --t4: var(--o-text4);
  --tx1: var(--o-text); --tx2: var(--o-text2); --tx3: var(--o-text3);
  --bdr: var(--o-border); --bd2: var(--o-border); --bdr2: var(--o-border);

  /* ── typography ── */
  --ft: var(--odoo-font);  --mn: var(--odoo-font-mono);  --font: var(--odoo-font);

  /* ── radius (Odoo has one scale) ── */
  --r: var(--odoo-radius);  --r2: var(--odoo-radius-lg);  --r3: var(--odoo-radius-lg);  --r4: var(--odoo-radius-xl);

  /* ── elevation: cards have none; popovers one shadow ── */
  --sh:  none;
  --sh2: var(--odoo-shadow-sm);
  --sh3: var(--odoo-popover-shadow);
  --sh-toast: 0 1rem 3rem rgba(0, 0, 0, .176);
  --sh-dialog: var(--odoo-popover-shadow);
  --o-sheet-shadow: none;

  /* ── motion ── */
  --dur: 120ms;
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, .06, .68, .19);

  --nav-h: var(--odoo-navbar-h);
  --safe-t: env(safe-area-inset-top, 0px);    --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);

  /* chart palette (reference V3 / COLORS: light) */
  --ch1: #4EA7F2; --ch2: #3188E6; --ch3: #056BD9; --ch4: #155193;
  --ch5: #A76DBC; --ch6: #7F4295; --ch7: #6D2387; --ch8: #4F1565;
  --ch9: #EA6175; --ch10: #CE4257; --ch11: #982738; --ch12: #791B29;
  --ch13: #43C5B1; --ch14: #00A78D;
}

/* ═════════════ DARK ═════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --odoo-primary-hover: #7B4775;
  --odoo-link: #02C7B5;  --odoo-link-hover: #5FE0D3;  --odoo-action: #02C7B5;
  --odoo-teal-tint: rgba(2, 199, 181, .16);
  --odoo-primary-active-bg: rgba(167, 118, 155, .18);
  --odoo-body-color: #E4E6EB;  --odoo-heading-color: #FFFFFF;
  --odoo-body-bg: #1D1F24;
  --odoo-border-color: #3C4048;  --odoo-input-border-color: #3C4048;
  --odoo-gray-100: #2E3138;  --odoo-gray-200: #353941;  --odoo-gray-300: #3C4048;
  --odoo-gray-400: #4A4F59;  --odoo-gray-500: #7A808C;  --odoo-gray-600: #9DA3AD;
  --odoo-gray-700: #C9CDD4;  --odoo-gray-800: #DDE0E5;  --odoo-gray-900: #E4E6EB;
  --odoo-popover-shadow: 0 8px 16px rgba(0, 0, 0, .5);
  --odoo-shadow-sm: 0 2px 4px rgba(0, 0, 0, .4);

  --o-text3: #9DA3AD;  --o-text4: #9DA3AD;  --o-text-muted: #9DA3AD;
  --A: #C7A0BC;  --Amd: #D3B2CA;  --Adk: #E0C6D8;
  --o-btn: #6B3E66;  --o-btn-hover: #7B4775;
  --o-surface: #272A30;
  --o-sel: rgba(2, 199, 181, .14);
  --o-on-tint: #5FE0D3;
  --o-overlay: rgba(0, 0, 0, .55);
  --o-check: #7A808C;

  --ok-lt:   rgba(0, 169, 69, .22);   --ok-dk:   #5ED58A;
  --warn-lt: rgba(245, 158, 11, .22); --warn-dk: #F5C451;
  --err-lt:  rgba(239, 68, 68, .24);  --err-dk:  #FF9393;
  --info-lt: rgba(23, 162, 184, .24); --info-dk: #6FD0E4;
  --pri-lt:  rgba(167, 118, 155, .26); --pri-dk: #D9B7CF;
  --sec-lt:  rgba(157, 163, 173, .22); --sec-dk: #C9CDD4;
  --ok-text: #5ED58A;  --warn-text: #F5C451;  --err-text: #FF9393;  --info-text: #6FD0E4;
  --odoo-info-bg-subtle: rgba(23, 162, 184, .2);  --odoo-info-text: #BEE9F2;
  --odoo-warning-bg-subtle: rgba(245, 158, 11, .2);
  --odoo-danger-bg-subtle: rgba(239, 68, 68, .22);
  --odoo-success-bg-subtle: rgba(0, 169, 69, .2);
  --odoo-primary-bg-subtle: rgba(167, 118, 155, .24);  --odoo-primary-text: #E9D7E4;

  --sh-toast: 0 1rem 3rem rgba(0, 0, 0, .6);

  /* chart palette (reference COLORS: dark scheme) */
  --ch1: #72BEFF; --ch2: #479FFF; --ch3: #2F86E5; --ch4: #2469B5;
  --ch5: #B47CC9; --ch6: #8E4FA5; --ch7: #8631A5; --ch8: #64287B;
  --ch9: #FC8596; --ch10: #E35D71; --ch11: #B23D4E; --ch12: #8E1F30;
  --ch13: #4BE3CB; --ch14: #02C4A6;
}