/* =====================================================================
   Cynilo · Modern refresh ("Survey Glass")  ·  v3 (safe overlay + 3D motion)
   File: public/css/cynilo-modern.css, loaded AFTER cynilo-app.css.

   Safety rules this file follows:
   - Every rule is scoped to html[data-look="modern"]. Without that
     attribute nothing here applies (classic look).
   - Style only: no display, position, width, height, padding, margin,
     border-width or font changes, so nothing moves, split-screen pane
     sizes stay exactly the same and every button stays where it is.
     Checked by comparing every element's box, classic vs modern.
   - Animations fade only (no transforms), so panes and menus never shift.
   - No pointer-events changes on controls; decorative layers use
     pointer-events: none.
   - Area tab gradients are kept exactly (per the note in cynilo-app.css);
     only shape, light and shadow are added.
   - Top bar colour still comes from ui-chrome-theme (enterprise colour).
   - Dark mode builds on the existing html[data-theme="dark"].
   Switch off: add ?look=classic to the URL, or
     localStorage.setItem('cynilo.look', 'classic')
   ===================================================================== */

html[data-look="modern"] {
  --m-thread: #D4A24C;
  --m-signal: #2FB8C2;
  --m-line: color-mix(in srgb, var(--cyn-line, #BBC5D3) 55%, #fff);
  --m-line-2: color-mix(in srgb, var(--cyn-line, #BBC5D3) 30%, #fff);
  --m-grid: rgba(15, 27, 45, .035);
  --m-panel-2: color-mix(in srgb, var(--cyn-ground, #EAEDF0) 45%, #fff);
  --m-area: var(--cyn-cta, #3D5A80);
  --m-e1: 0 1px 1px rgba(15, 27, 45, .04), 0 2px 6px rgba(15, 27, 45, .05);
  --m-e2: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px -6px rgba(15, 27, 45, .14);
  --m-e3: 0 2px 4px rgba(15, 27, 45, .06), 0 24px 60px -12px rgba(15, 27, 45, .28);
  --m-inner: inset 0 1px 0 rgba(255, 255, 255, .55);
  --m-fast: 120ms; --m-mid: 220ms; --m-slow: 340ms;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* the active area tints buttons, underlines and hovers (same colours as today's active tabs) */
html[data-look="modern"] body:has(.cyn-product-tab[data-product="dashboard"][aria-current="true"]),
html[data-look="modern"] body:has(.cyn-product-tab[data-product="information"][aria-current="true"]) { --m-area: #3D5A80; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="assets"][aria-current="true"])     { --m-area: #8E3A72; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="quality"][aria-current="true"])    { --m-area: #8C3B2F; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="inventory"][aria-current="true"])  { --m-area: #1F766F; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="plant"][aria-current="true"])      { --m-area: #B45309; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="people"][aria-current="true"])     { --m-area: #8A5A2B; }
html[data-look="modern"] body:has(.cyn-product-tab[data-product="commercial"][aria-current="true"]) { --m-area: #3D4A63; }

/* Fonts are left as they are (Inter): a new font would change text widths,
   which would resize buttons, tabs and split panes. */

/* ---------- ground: faint survey grid behind panels ---------- */
html[data-look="modern"] .cyn-main {
  background-image:
    linear-gradient(var(--m-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- top bar: keeps its colour; gains depth and the golden thread ---------- */
html[data-look="modern"] .cyn-topbar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 4px 14px -6px rgba(5, 10, 18, .45);
}
html[data-look="modern"] .cyn-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--m-thread) 18%, #F3D08A 50%, var(--m-thread) 82%, transparent 100%);
  opacity: .9;
}
html[data-look="modern"] .cyn-icon-btn,
html[data-look="modern"] .cyn-project-btn,
html[data-look="modern"] .cyn-project-caret {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background-color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease), box-shadow var(--m-mid) var(--m-ease);
}
html[data-look="modern"] .cyn-icon-btn:hover,
html[data-look="modern"] .cyn-project-btn:hover,
html[data-look="modern"] .cyn-project-caret:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 3px rgba(255, 255, 255, .07); }
html[data-look="modern"] .cyn-icon-btn:active,
html[data-look="modern"] .cyn-project-btn:active,
html[data-look="modern"] .cyn-project-caret:active { transform: scale(.95); }
html[data-look="modern"] .cyn-badge { box-shadow: 0 0 0 2px rgba(10, 18, 30, .55), 0 0 10px rgba(212, 162, 76, .45); }
html[data-look="modern"] .cyn-search { transition: box-shadow var(--m-mid) var(--m-ease); }
html[data-look="modern"] .cyn-search:focus-within { box-shadow: 0 0 0 4px rgba(47, 184, 194, .28), var(--m-e2); }
html[data-look="modern"] .cyn-search-ai {
  background-image: conic-gradient(from 210deg, var(--m-signal), #7C8CF8, var(--m-thread), var(--m-signal)) !important;
  color: #fff !important; box-shadow: 0 0 10px rgba(47, 184, 194, .45);
}
html[data-look="modern"] .cyn-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px rgba(212, 162, 76, .45); }

/* ---------- area tabs: same gradients, now shaped like hanging asset tags ---------- */
html[data-look="modern"] .cyn-product-tab {
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .12);
  transition: transform var(--m-mid) var(--m-spring), box-shadow var(--m-mid) var(--m-ease), filter var(--m-fast) linear, opacity var(--m-fast) linear;
}
html[data-look="modern"] .cyn-product-tab:hover { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(15, 27, 45, .5); }
html[data-look="modern"] .cyn-product-tab[aria-current="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(255, 255, 255, .55), 0 10px 22px -8px color-mix(in srgb, var(--m-area) 80%, transparent);
}

/* ---------- module tabs and view switches ---------- */
html[data-look="modern"] .cyn-subtabs,
html[data-look="modern"] .cyn-vtabs { box-shadow: inset 0 1px 2px rgba(15, 27, 45, .06); }
html[data-look="modern"] .cyn-subtabs button,
html[data-look="modern"] .cyn-vtab,
html[data-look="modern"] .iod-segmented-btn { transition: color var(--m-fast) linear, background-color var(--m-mid) var(--m-ease), box-shadow var(--m-mid) var(--m-ease); }
html[data-look="modern"] .cyn-subtabs button.is-on,
html[data-look="modern"] .cyn-subtabs button.is-active,
html[data-look="modern"] .cyn-vtab.is-on,
html[data-look="modern"] .iod-segmented-btn.is-active {
  box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 4px 10px -4px rgba(15, 27, 45, .18), inset 0 -2px 0 var(--m-area) !important;
}

/* ---------- surfaces ---------- */
html[data-look="modern"] .cyn-info-panel,
html[data-look="modern"] .cyn-ent-card,
html[data-look="modern"] .cyn-card,
html[data-look="modern"] .cyn-stat { box-shadow: var(--m-e2); border-radius: 14px; }
html[data-look="modern"] .cyn-lchrome { background-image: linear-gradient(180deg, #fff, var(--m-panel-2)); border-top-left-radius: 14px; border-top-right-radius: 14px; }
html[data-look="modern"] .cyn-ent-card,
html[data-look="modern"] .cyn-card { transition: box-shadow var(--m-mid) var(--m-ease); }
html[data-look="modern"] .cyn-ent-card:hover,
html[data-look="modern"] .cyn-card:hover { box-shadow: var(--m-e3); }
html[data-look="modern"] .cyn-pane-r { box-shadow: -24px 0 60px -34px rgba(15, 27, 45, .35); }

/* ---------- buttons ---------- */
html[data-look="modern"] .cyn-tool-btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  box-shadow: var(--m-e1), var(--m-inner);
  transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-mid) var(--m-ease), border-color var(--m-mid) var(--m-ease);
}
html[data-look="modern"] .cyn-tool-btn:hover:not(:disabled) { box-shadow: var(--m-e2), var(--m-inner); transform: translateY(-1px); border-color: color-mix(in srgb, var(--m-area) 35%, var(--cyn-line, #BBC5D3)); }
html[data-look="modern"] .cyn-tool-btn:active:not(:disabled) { transform: scale(.97); box-shadow: var(--m-e1); }
html[data-look="modern"] .cyn-tool-btn.is-primary {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -8px color-mix(in srgb, var(--m-area) 85%, transparent);
}
html[data-look="modern"] .cyn-tool-btn:disabled { box-shadow: none; transform: none; }
html[data-look="modern"] :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--m-signal); outline-offset: 2px; }

/* ---------- tables ---------- */
html[data-look="modern"] .cyn-ltbl thead th { background-image: linear-gradient(180deg, #fff, var(--m-panel-2)); }
html[data-look="modern"] .cyn-ltbl tbody tr { transition: box-shadow var(--m-mid) var(--m-ease); }
html[data-look="modern"] .cyn-ltbl tbody tr:hover { box-shadow: inset 3px 0 0 var(--m-area); }
html[data-look="modern"] .cyn-fbtn { transition: border-color var(--m-mid) var(--m-ease), color var(--m-fast) linear; }
html[data-look="modern"] .cyn-fbtn:hover { border-color: var(--m-area); color: var(--m-area); }

/* ---------- floating layers: frosted glass ---------- */
html[data-look="modern"] .cyn-dd-panel,
html[data-look="modern"] .cyn-menu,
html[data-look="modern"] .cyn-search-results {
  background-color: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--m-e3) !important; border-radius: 12px;
  animation: m-pop var(--m-mid) var(--m-spring) both;
}
/* fade only: no transform, so menus keep their exact position */
@keyframes m-pop { from { opacity: 0; } to { opacity: 1; } }

/* ---------- page change: content fades in; chrome stays still ---------- */
html[data-look="modern"] .cyn-info-panel,
html[data-look="modern"] .module-pane { animation: m-enter var(--m-slow) var(--m-ease) both; }
/* fade only: no transform, so split panes and their resize handles are never offset */
@keyframes m-enter { from { opacity: 0; } to { opacity: 1; } }

/* ---------- dark: builds on the existing html[data-theme="dark"] ---------- */
html[data-look="modern"][data-theme="dark"] {
  --m-grid: rgba(127, 176, 236, .05);
  --m-panel-2: color-mix(in srgb, var(--cyn-panel, #0E1621) 80%, #fff 3%);
  --m-e1: 0 2px 8px rgba(0, 0, 0, .35);
  --m-e2: 0 12px 30px -10px rgba(0, 0, 0, .6);
  --m-e3: 0 30px 80px -20px rgba(0, 0, 0, .8);
  --m-inner: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-look="modern"][data-theme="dark"] .cyn-lchrome,
html[data-look="modern"][data-theme="dark"] .cyn-ltbl thead th,
html[data-look="modern"][data-theme="dark"] .cyn-tool-btn { background-image: none; }
html[data-look="modern"][data-theme="dark"] .cyn-dd-panel,
html[data-look="modern"][data-theme="dark"] .cyn-menu,
html[data-look="modern"][data-theme="dark"] .cyn-search-results { background-color: color-mix(in srgb, var(--cyn-panel, #0E1621) 86%, transparent) !important; }

/* =====================================================================
   v3 · one Add / primary button family, one modal look, 3D motion
   Same safety rules: colour, shadow and motion only. No size, padding,
   margin, radius-with-clipping or font changes. Motion uses transforms
   only while it plays (no fill), so nothing is left offset afterwards.
   ===================================================================== */

/* ---------- one Add / primary button family (raised key that presses down) ---------- */
html[data-look="modern"] :is(.cyn-tool-btn.is-primary, .cyn-btn-primary, .iod-btn-primary, button.bg-brand-600, a.bg-brand-600.text-white, .iod-esu-btn-add, .iod-esu-btn-icon-primary, .cyn-new-project, .cyn-new-form button[type="submit"], #ent-new-project, #cyn-ent-new, .cyn-ent-new, .cyn-ent-card-h .cyn-icon-save, .iod-int-btn-primary, .m-primary):not(:disabled) {
  background-color: var(--m-area) !important;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .14)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 color-mix(in srgb, var(--m-area) 60%, #000), 0 8px 16px -8px color-mix(in srgb, var(--m-area) 85%, transparent) !important;
  transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-mid) var(--m-ease), filter var(--m-fast) linear;
}
html[data-look="modern"] :is(.cyn-tool-btn.is-primary, .cyn-btn-primary, .iod-btn-primary, button.bg-brand-600, a.bg-brand-600.text-white, .iod-esu-btn-add, .iod-esu-btn-icon-primary, .cyn-new-project, .cyn-new-form button[type="submit"], #ent-new-project, #cyn-ent-new, .cyn-ent-new, .cyn-ent-card-h .cyn-icon-save, .iod-int-btn-primary, .m-primary):not(:disabled):hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 3px 0 color-mix(in srgb, var(--m-area) 60%, #000), 0 12px 22px -8px color-mix(in srgb, var(--m-area) 85%, transparent) !important;
}
html[data-look="modern"] :is(.cyn-tool-btn.is-primary, .cyn-btn-primary, .iod-btn-primary, button.bg-brand-600, a.bg-brand-600.text-white, .iod-esu-btn-add, .iod-esu-btn-icon-primary, .cyn-new-project, .cyn-new-form button[type="submit"], #ent-new-project, #cyn-ent-new, .cyn-ent-new, .cyn-ent-card-h .cyn-icon-save, .iod-int-btn-primary, .m-primary):not(:disabled):active {
  transform: translateY(2px);
  transition-duration: 60ms;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 color-mix(in srgb, var(--m-area) 60%, #000), 0 3px 8px -6px color-mix(in srgb, var(--m-area) 85%, transparent) !important;
}
html[data-look="modern"] .cyn-tool-btn:not(.is-primary):not(:disabled):active { transform: translateY(1px) scale(.98); }

/* ---------- one modal look ---------- */
html[data-look="modern"] :is(.iod-modal-backdrop, .fcm-backdrop, .inv-create-backdrop, .cyn-modal-backdrop, .fixed.inset-0[class*="bg-ink-950/"], .fixed.inset-0[class*="bg-black/"], .m-scrim) {
  -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
  animation: m-fade var(--m-mid) linear;
}
html[data-look="modern"] .iod-modal-panel { background: var(--cyn-panel, #fff) !important; border-color: var(--m-line) !important; }
html[data-look="modern"] :is(.iod-modal-panel, .fcm-panel, .inv-create-modal-panel, .cyn-modal-card, .fixed.inset-0 > .rounded-xl, .fixed.inset-0 > .rounded-2xl, .fixed.inset-0 > .rounded-lg.shadow-xl, [data-fw-chrome], .m-modal) {
  box-shadow: 0 2px 4px rgba(15, 27, 45, .08), 0 40px 90px -20px rgba(5, 10, 20, .5) !important;
  animation: m-modal-in 440ms var(--m-ease);
}
html[data-look="modern"] :is(.fcm-header, .inv-create-modal-header, .cyn-modal-h, .iod-modal-panel > :first-child, .fixed.inset-0 > .rounded-xl > .border-b:first-child, .fixed.inset-0 > .rounded-2xl > .border-b:first-child, [data-fw-chrome] > :first-child, .m-modal-h) {
  box-shadow: inset 0 3px 0 var(--m-area);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--m-area) 8%, transparent), transparent);
}
html[data-look="modern"] :is(.fcm-footer, .inv-create-modal-footer, .fixed.inset-0 > .rounded-xl > .border-t:last-child, .m-modal-f) { background-color: var(--m-panel-2); }
/* opens out of the button you pressed (cynilo-look.js sets --m-fx/--m-fy); otherwise rises a little */
@keyframes m-modal-in {
  0%   { opacity: 0; transform: perspective(1400px) translate(var(--m-fx, 0px), var(--m-fy, 22px)) scale(var(--m-fs, .94)) rotateX(var(--m-frx, 8deg)); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- menus fold down from the button ---------- */
html[data-look="modern"] :is(.cyn-dd-panel, .cyn-menu, [data-tbl-add-menu]) { animation: m-fold 300ms var(--m-ease); transform-origin: 50% 0; }
@keyframes m-fold { from { opacity: 0; transform: perspective(700px) rotateX(-55deg); } to { opacity: 1; transform: none; } }

/* ---------- rows rise into place when a list loads (class set by cynilo-look.js) ---------- */
html[data-look="modern"] tbody.m-rise > tr { animation: m-rise 380ms var(--m-ease) backwards; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(2) { animation-delay: 25ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(3) { animation-delay: 50ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(4) { animation-delay: 75ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(5) { animation-delay: 100ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(6) { animation-delay: 125ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(7) { animation-delay: 150ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(8) { animation-delay: 175ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(9) { animation-delay: 200ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(10) { animation-delay: 225ms; }
html[data-look="modern"] tbody.m-rise > tr:nth-child(n+11) { animation-delay: 250ms; }
@keyframes m-rise { from { opacity: 0; transform: perspective(900px) translateY(8px) translateZ(-40px) rotateX(-12deg); } }

/* ---------- detail pane swings in on its right-hand hinge ---------- */
html[data-look="modern"] .cyn-detail-body.fade-in { animation: m-swing 400ms var(--m-ease); transform-origin: 100% 50%; }
@keyframes m-swing { from { opacity: 0; transform: perspective(1200px) rotateY(-16deg) translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- toasts flip up ---------- */
html[data-look="modern"] .iod-toast { animation: m-flip 440ms var(--m-ease); transform-origin: 50% 100%; }
@keyframes m-flip { 0% { opacity: 0; transform: perspective(500px) rotateX(75deg) translateY(16px); } 70% { opacity: 1; transform: perspective(500px) rotateX(-6deg); } 100% { opacity: 1; transform: none; } }

/* ---------- small cards tilt toward the cursor (angles set by cynilo-look.js) ---------- */
html[data-look="modern"] .m-tilt { transition: transform 300ms var(--m-ease), box-shadow 300ms var(--m-ease); will-change: transform; }
html[data-look="modern"] .m-tilt.is-tilting { box-shadow: var(--m-e3); }

/* ---------- quick create: required fields first (classes set by cynilo-look.js) ---------- */
html[data-look="modern"] .m-qc .m-qc-opt { display: none !important; }
html[data-look="modern"] .m-qc-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 20px 2px; padding: 7px 10px; border-radius: 9px;
  font-size: 12px; color: var(--cyn-ink-2, #3A4A5E);
  background: color-mix(in srgb, var(--m-area) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--m-area) 35%, transparent);
}
html[data-look="modern"] .m-qc-bar span { flex: 1; min-width: 0; }
html[data-look="modern"] .m-qc-bar a { color: var(--m-area); font-weight: 600; text-decoration: none; white-space: nowrap; }
html[data-look="modern"] .m-qc-bar a:hover { text-decoration: underline; }
html[data-look="classic"] .m-qc-bar { display: none; }
html[data-look="modern"][data-theme="dark"] .m-qc-bar { color: #B9C6D6; }

/* =====================================================================
   v4 · project dashboard widgets
   Card design only: sizes, grid positions, drag, resize, the widget gallery's
   tabs, columns and structure are unchanged.
   ===================================================================== */
/* module colour, by the product area the widget belongs to */
html[data-look="modern"] .widget-card { --wm: var(--m-area); }
html[data-look="modern"] .widget-card:is([data-module="Documents"], [data-module="Transmittals"], [data-module="RFIs"], [data-module="Correspondence"], [data-module="Meetings"], [data-module="Forms"]) { --wm: #3D5A80; }
html[data-look="modern"] .widget-card:is([data-module="Issues"], [data-module="Non-Conformance"], [data-module="Risk"], [data-module="Failure"]) { --wm: #8C3B2F; }
html[data-look="modern"] .widget-card:is([data-module="Assets"], [data-module="Photos"]) { --wm: #8E3A72; }
html[data-look="modern"] .widget-card[data-module="Inventory"] { --wm: #1F766F; }
html[data-look="modern"] .widget-card[data-module="Plant"] { --wm: #B45309; }
html[data-look="modern"] .widget-card:is([data-module="Permits"], [data-module="Visitors"], [data-module="Training"]) { --wm: #8A5A2B; }
html[data-look="modern"] .widget-card:is([data-module="Vendors"], [data-module="Contracts"]) { --wm: #3D4A63; }
html[data-look="modern"] .widget-card:is([data-module="Workflows"], [data-module="Tasks"]) { --wm: #5B5F97; }
html[data-look="modern"] .widget-card:is([data-module="Portfolio"], [data-module="General"]) { --wm: #3D5A80; }

html[data-look="modern"] .widget-card:not([data-placeholder="1"])::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, var(--wm), color-mix(in srgb, var(--wm) 40%, #fff));
}
html[data-look="modern"] .widget-card .w-7.h-7.rounded-md.flex-shrink-0 {
  background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), var(--wm) !important;
  color: #fff !important;
  box-shadow: 0 6px 12px -6px var(--wm), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html[data-look="modern"] .widget-card [data-widget-body] .text-brand-600 { color: var(--wm) !important; }

/* raised 3D tiles (tilt toward the cursor is added by cynilo-look.js on the dashboard only) */
html[data-look="modern"] .widget-card {
  border-radius: 14px !important;
  border-color: color-mix(in srgb, var(--cyn-line, #BBC5D3) 60%, transparent) !important;
  box-shadow: var(--m-e2), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
  transition: box-shadow var(--m-mid) var(--m-ease), transform 300ms var(--m-ease), border-color var(--m-mid) var(--m-ease);
}
html[data-look="modern"] .widget-card:hover { box-shadow: var(--m-e3) !important; border-color: color-mix(in srgb, var(--wm) 35%, transparent) !important; }
html[data-look="modern"] .widget-card[data-ctx="page"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 60%); mix-blend-mode: soft-light;
}
html[data-look="modern"] .widget-card[data-ctx="page"].is-tilting::after { opacity: 1; }
html[data-look="modern"][data-theme="dark"] .widget-card { box-shadow: var(--m-e2), inset 0 1px 0 rgba(255, 255, 255, .04) !important; }

/* mini 3D ring on percentage tiles (added by cynilo-look.js; decorative, no clicks) */
html[data-look="modern"] .m-wring {
  position: absolute; right: 14px; bottom: 14px; width: 58px; height: 58px; pointer-events: none; z-index: 1;
  border-radius: 50%; background: conic-gradient(var(--wm) calc(var(--p) * 1%), color-mix(in srgb, var(--wm) 14%, transparent) 0);
  transform: perspective(320px) rotateX(48deg); box-shadow: 0 12px 16px -10px var(--wm);
  animation: m-ring-in 900ms var(--m-ease) backwards;
}
html[data-look="modern"] .m-wring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--cyn-panel, #fff); box-shadow: inset 0 2px 4px rgba(15, 27, 45, .12); }
@keyframes m-ring-in { from { opacity: 0; transform: perspective(320px) rotateX(70deg) scale(.7); } }

/* charts and rings inside widgets: same data and colours, with depth */
html[data-look="modern"] .widget-card [data-widget-body] svg.\-rotate-90 { filter: drop-shadow(0 6px 6px rgba(15, 27, 45, .18)); transform: rotate(-90deg) perspective(400px) rotateY(-22deg); }
html[data-look="modern"] .widget-card [data-widget-body] svg.\-rotate-90 circle[stroke-dasharray] { stroke-linecap: round; }
html[data-look="modern"] .widget-card [data-widget-body] .flex.items-end > .rounded-sm {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .16)) !important;
  border-radius: 4px 4px 1px 1px !important; box-shadow: 0 4px 8px -5px rgba(15, 27, 45, .45); transform-origin: 50% 100%;
}
html[data-look="modern"] .widget-card [data-widget-body] .rounded-full.bg-ink-100 > .h-full.rounded-full,
html[data-look="modern"] .widget-card [data-widget-body] .rounded-full.overflow-hidden.flex > div {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12)) !important; transform-origin: 0 50%;
}
html[data-look="modern"] .widget-card [data-widget-body] .rounded-full.bg-ink-100 { box-shadow: inset 0 1px 2px rgba(15, 27, 45, .12); }
html[data-look="modern"] .widget-card [data-widget-body] svg polyline { filter: drop-shadow(0 3px 3px rgba(15, 27, 45, .25)); }
/* bars grow in when a chart is new or its numbers changed (class set by cynilo-look.js) */
html[data-look="modern"] .widget-card.m-w-grow [data-widget-body] .flex.items-end > .rounded-sm { animation: m-w-col 700ms var(--m-ease) backwards; }
html[data-look="modern"] .widget-card.m-w-grow [data-widget-body] .rounded-full.bg-ink-100 > .h-full.rounded-full,
html[data-look="modern"] .widget-card.m-w-grow [data-widget-body] .rounded-full.overflow-hidden.flex > div { animation: m-w-bar 700ms var(--m-ease) backwards; }
html[data-look="modern"] .widget-card.m-w-grow [data-widget-body] svg.\-rotate-90 circle[stroke-dasharray] { animation: m-fade 600ms ease backwards; }
@keyframes m-w-col { from { transform: scaleY(0); } }
@keyframes m-w-bar { from { transform: scaleX(0); } }


/* pick up and drop: the existing drop placeholder, restyled */
html[data-look="modern"] #projWidgets > .pointer-events-none.absolute.rounded-lg {
  border-radius: 14px !important; border: 2px dashed color-mix(in srgb, var(--m-area) 60%, transparent) !important;
  background: color-mix(in srgb, var(--m-area) 9%, rgba(255, 255, 255, .5)) !important;
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--m-area) 5%, transparent);
  transition: left 160ms var(--m-ease), top 160ms var(--m-ease), width 160ms var(--m-ease), height 160ms var(--m-ease);
}
html[data-look="modern"] .m-wfloat { position: fixed !important; z-index: 9000 !important; pointer-events: none !important; margin: 0 !important; opacity: .97 !important;
  box-shadow: 0 34px 70px -20px rgba(5, 10, 20, .55) !important; }

/* drawn slots while a widget is dragged in from the gallery (layout untouched, background only) */
html[data-look="modern"] #projWidgets:is(.ring-2, .m-w-plan) {
  --slot: color-mix(in srgb, var(--m-area) 9%, transparent);
  background-image: linear-gradient(90deg, transparent calc(100% - 12px), var(--cyn-ground, #EAEDF0) 0), linear-gradient(transparent calc(100% - 12px), var(--cyn-ground, #EAEDF0) 0), linear-gradient(var(--slot), var(--slot));
  background-size: calc((100% + 12px) / 4) 192px, calc((100% + 12px) / 4) 192px, 100% 100%;
}

/* =====================================================================
   v6 · bulk action bar, loading and empty lists, draft note
   ===================================================================== */
/* bulk action bar (built by cynilo-look.js; floats over the page, nothing moves) */
.m-bulkbar { display: none; }
html[data-look="modern"] .m-bulkbar {
  position: fixed; bottom: 22px; z-index: 180; overflow: hidden; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-radius: 14px; white-space: nowrap;
  background: rgba(15, 27, 45, .94); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -16px rgba(5, 10, 20, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-look="modern"] .m-bulkbar .m-bb-n { background: var(--m-thread); color: #1A1206; border-radius: 999px; padding: 4px 9px; font-weight: 700; }
html[data-look="modern"] .m-bulkbar .m-bb-t { margin-right: 6px; opacity: .85; }
html[data-look="modern"] .m-bulkbar button {
  height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
  color: #fff; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; transition: background var(--m-fast) linear, transform var(--m-fast) var(--m-ease);
}
html[data-look="modern"] .m-bulkbar button:hover { background: rgba(255, 255, 255, .18); }
html[data-look="modern"] .m-bulkbar button:active { transform: translateY(1px); }
html[data-look="modern"] .m-bulkbar .m-bb-x { border: 0; background: none; opacity: .75; padding: 0 8px; }

/* loading: the existing "Loading…" placeholder shown as shimmering rows */
html[data-look="modern"] .m-loading {
  position: relative; min-height: 210px; color: transparent !important; overflow: hidden; border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .55) 50%, transparent 100%) -40% 0 / 40% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 14px, var(--m-line-2) 14px 26px, transparent 26px 42px);
  animation: m-shimmer 1.3s linear infinite;
}
html[data-look="modern"][data-theme="dark"] .m-loading { background:
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .08) 50%, transparent 100%) -40% 0 / 40% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .06) 14px 26px, transparent 26px 42px); }
@keyframes m-shimmer { to { background-position: 140% 0, 0 0; } }

/* empty list: the existing row, with a light outline of a list above the text */
html[data-look="modern"] td.cyn-empty { padding-top: 34px !important; padding-bottom: 30px !important; color: var(--cyn-ink-3, #6B7B8F); }
html[data-look="modern"] td.cyn-empty::before {
  content: ""; display: block; width: 220px; height: 58px; margin: 0 auto 12px;
  background:
    linear-gradient(var(--m-line) 0 0) 0 0 / 100% 14px no-repeat,
    linear-gradient(var(--m-line) 0 0) 0 22px / 82% 14px no-repeat,
    linear-gradient(var(--m-line) 0 0) 0 44px / 64% 14px no-repeat;
  opacity: .7; border-radius: 6px;
}

/* draft note in a create form's footer (added by cynilo-look.js) */
.m-draft { display: none; }
html[data-look="modern"] .m-draft { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font: 500 12px Inter, system-ui, sans-serif; color: var(--cyn-ink-3, #6B7B8F); white-space: nowrap; }
html[data-look="modern"] .m-draft:empty { display: none; }
html[data-look="modern"] .m-draft i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; display: inline-block; }
html[data-look="modern"] .m-draft.is-offer i { background: var(--m-thread); }
html[data-look="modern"] .m-draft a { color: var(--m-area); font-weight: 600; text-decoration: none; }
html[data-look="modern"] .m-draft a:hover { text-decoration: underline; }

/* ---------- item 13: disabled main buttons and dark secondary buttons ---------- */
/* disabled: the same raised key in the area colour, faded and flat (cannot be pressed) */
html[data-look="modern"] :is(.cyn-tool-btn.is-primary, .cyn-btn-primary, .iod-btn-primary, button.bg-brand-600, a.bg-brand-600.text-white, .iod-esu-btn-add, .iod-esu-btn-icon-primary, .cyn-new-project, .cyn-new-form button[type="submit"], #ent-new-project, #cyn-ent-new, .cyn-ent-new, .cyn-ent-card-h .cyn-icon-save, .iod-int-btn-primary, .m-primary):disabled {
  background-color: var(--m-area) !important;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .14)) !important;
  border-color: transparent !important; color: #fff !important;
  opacity: .45 !important; filter: grayscale(.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important; cursor: not-allowed;
}
/* dark secondary action buttons (e.g. "Choose files…"): a light raised key with the same press.
   Toggle groups and filter tabs that use the same dark fill for "selected" are left alone. */
html[data-look="modern"] button:is(.bg-ink-900, .bg-ink-950).text-white:not([class*="filter"]):not([class*="tab"]):not([aria-pressed]):not([aria-selected]):not([role="tab"]) {
  background: linear-gradient(180deg, #fff, #F1F4F8) !important; color: var(--cyn-ink, #1B2A3D) !important;
  border-color: #C9D3DF !important;
  box-shadow: inset 0 0 0 1px #C9D3DF, 0 2px 0 #C9D3DF, 0 6px 12px -8px rgba(15, 27, 45, .35) !important;
  transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-mid) var(--m-ease);
}
html[data-look="modern"] button:is(.bg-ink-900, .bg-ink-950).text-white:not([class*="filter"]):not([class*="tab"]):not([aria-pressed]):not([aria-selected]):not([role="tab"]):not(:disabled):active { transform: translateY(2px); box-shadow: 0 0 0 #C9D3DF !important; }
html[data-look="modern"][data-theme="dark"] button:is(.bg-ink-900, .bg-ink-950).text-white:not([class*="filter"]):not([class*="tab"]):not([aria-pressed]):not([aria-selected]):not([role="tab"]) {
  background: linear-gradient(180deg, #1C2A3B, #152030) !important; color: #E6EDF6 !important; border-color: #2B3C53 !important; box-shadow: inset 0 0 0 1px #2B3C53, 0 2px 0 #0A111A !important;
}

/* ---------- dark ---------- */
html[data-look="modern"][data-theme="dark"] .iod-modal-panel { background: var(--cyn-panel, #111A26) !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-look="modern"] * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Dark theme across the product (applies whenever the dark theme is chosen,
   in both the modern and the classic look).
   Cause of the problem: ui-chrome-theme.js writes the light colour tokens
   (--cyn-ground, --cyn-panel, --iod-surface-* …) inline on <html> for the
   enterprise colour, which overrode the existing dark tokens. In dark these
   are put back (a stylesheet !important wins over inline values), and the
   shared utility colours used by most screens get dark equivalents.
   Images, maps, barcodes and document previews are not touched.
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --cyn-ground: #070C12 !important;
  --cyn-panel: #0E1621 !important;
  --cyn-white: #0E1621 !important;
  --cyn-ink: #E9EEF5 !important;
  --cyn-ink-2: #C6D0DD !important;
  --cyn-ink-3: #93A3B8 !important;
  --cyn-line: #22324A !important;
  --cyn-stripe: #101A27 !important;
  --cyn-row-hover: #16233A !important;
  --iod-surface-canvas: #070C12 !important;
  --iod-surface-panel: #0E1621 !important;
  --iod-surface-sidebar: #0B121C !important;
  --iod-surface-sidebar-top: #0E1621 !important;
  --iod-surface-sidebar-ink: #E9EEF5 !important;
  --iod-ink: #E9EEF5 !important;
  --iod-ink-muted: #C6D0DD !important;
  --iod-chrome-border: #22324A !important;
  --iod-grad-chrome: linear-gradient(180deg, #0E1621 0%, #0B121C 100%) !important;
  --iod-folder-panel: #0E1621 !important;
  --iod-folder-border: #22324A !important;
  --iod-folder-idle: #0B121C !important;
  --iod-folder-ink: #C6D0DD !important;
  --iod-folder-active-ink: #E9EEF5 !important;
  --iod-coach-rail-bg: #0B121C !important;
  --iod-brand-50: #101A27 !important;
  --iod-brand-100: #16233A !important;
  --iod-brand-200: #22324A !important;
  --m-line: #22324A; --m-line-2: #1A2738; --m-panel-2: #121D2B;
}
html[data-theme="dark"] body { background: #070C12; color: #E9EEF5; }

/* surfaces */
html[data-theme="dark"] :is(.bg-white, .bg-ink-50, .bg-slate-50, .bg-gray-50, .bg-\[\#fff\], .bg-\[\#ffffff\]) { background-color: #0E1621 !important; }
html[data-theme="dark"] :is(.bg-ink-100, .bg-slate-100, .bg-gray-100) { background-color: #16233A !important; }
html[data-theme="dark"] :is(.bg-ink-200, .bg-slate-200) { background-color: #1E2D44 !important; }
html[data-theme="dark"] :is(.bg-brand-50, .bg-brand-100) { background-color: color-mix(in srgb, var(--iod-brand, #3D5A80) 18%, #0E1621) !important; }
html[data-theme="dark"] :is(.bg-amber-50, .bg-yellow-50, .bg-orange-50) { background-color: #2A2210 !important; }
html[data-theme="dark"] :is(.bg-rose-50, .bg-red-50) { background-color: #2E1418 !important; }
html[data-theme="dark"] :is(.bg-emerald-50, .bg-green-50) { background-color: #0F2A21 !important; }
html[data-theme="dark"] :is(.bg-sky-50, .bg-blue-50) { background-color: #10233A !important; }
html[data-theme="dark"] :is(.hover\:bg-ink-50:hover, .hover\:bg-ink-100:hover, .hover\:bg-slate-50:hover, .hover\:bg-brand-50:hover) { background-color: #16233A !important; }

/* text */
html[data-theme="dark"] :is(.text-ink-950, .text-ink-900, .text-ink-800, .text-slate-900, .text-slate-800, .text-gray-900, .text-black) { color: #E9EEF5 !important; }
html[data-theme="dark"] :is(.text-ink-700, .text-slate-700, .text-gray-700) { color: #C6D0DD !important; }
html[data-theme="dark"] :is(.text-ink-600, .text-ink-500, .text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500) { color: #A3B2C6 !important; }
html[data-theme="dark"] :is(.text-ink-400, .text-slate-400, .text-gray-400) { color: #8496AD !important; }
html[data-theme="dark"] :is(.text-brand-600, .text-brand-700, .text-brand-800) { color: color-mix(in srgb, var(--iod-brand, #3D5A80) 45%, #ffffff) !important; }

/* lines */
html[data-theme="dark"] :is(.border-ink-50, .border-ink-100, .border-ink-200, .border-slate-100, .border-slate-200, .border-gray-100, .border-gray-200) { border-color: #22324A !important; }
html[data-theme="dark"] :is(.divide-ink-50, .divide-ink-100, .divide-ink-200) > * + * { border-color: #22324A !important; }

/* form fields (not checkboxes, radios or colour pickers) */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]), select, textarea) {
  background-color: #0B121C !important; color: #E9EEF5 !important; border-color: #2B3C53 !important;
}
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #6F819A !important; }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled, html[data-theme="dark"] input[readonly] { background-color: #101A27 !important; color: #93A3B8 !important; }

/* tables */
html[data-theme="dark"] table :is(th, td) { border-color: #1A2738; }
html[data-theme="dark"] thead :is(th) { background-color: #101A27; color: #A3B2C6; }

/* dashboard widgets, modern cards, floating windows */
html[data-theme="dark"] .widget-card { background-color: #0E1621 !important; color: #E9EEF5; }
html[data-theme="dark"] .m-wring::after { background: #0E1621; }
html[data-theme="dark"] [data-fw-chrome] { background-color: #0E1621 !important; border-color: #22324A !important; }
html[data-theme="dark"] .iod-modal-panel, html[data-theme="dark"] .fcm-panel, html[data-theme="dark"] .inv-create-modal-panel, html[data-theme="dark"] .cyn-modal-card { background: #0E1621 !important; color: #E9EEF5; }
html[data-theme="dark"] .shadow-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4) !important; }

/* things that must stay as they are: artwork, previews, maps */
html[data-theme="dark"] :is([data-ast-tag-image], .leaflet-container, .maplibregl-map, .atlas-map, canvas, .pdfViewer, .page) { background-color: revert; }

/* Cynilo surfaces that have a fixed white background in cynilo-app.css */
html[data-theme="dark"] :is(.cyn-ltbl, .cyn-ltbl td, .cyn-ltbl tbody tr, .cyn-table-wrap, .cyn-info-panel, .cyn-pf-scroll, .cyn-pane-r, .cyn-detail-ph, .cyn-detail-body, .cyn-detail-overlay, .module-pane, .cyn-dd-panel, .cyn-drawer, .cyn-flyout) { background-color: #0E1621 !important; color: #E9EEF5; }
html[data-theme="dark"] .cyn-ltbl tbody tr:nth-child(even) td { background-color: #101A27 !important; }
html[data-theme="dark"] .cyn-ltbl tbody tr:hover td { background-color: #16233A !important; }
html[data-theme="dark"] :is(.cyn-fbtn, .cyn-tool-btn:not(.is-primary):not(.cyn-tool-btn--add)) { background-color: #121D2B !important; background-image: none !important; color: #C6D0DD !important; border-color: #2B3C53 !important; }
html[data-theme="dark"] .cyn-fbtn.is-on { background-color: color-mix(in srgb, var(--iod-brand, #3D5A80) 22%, #0E1621) !important; color: #E9EEF5 !important; border-color: color-mix(in srgb, var(--iod-brand, #3D5A80) 55%, #2B3C53) !important; }
html[data-theme="dark"] :is(.cyn-lchrome, .cyn-ltbl thead th, .widget-card) { background-image: none !important; }
html[data-theme="dark"] .cyn-ltbl td.cyn-t, html[data-theme="dark"] .cyn-ltbl td.cyn-num { color: #E9EEF5; }
html[data-theme="dark"] .cyn-ltbl :is(.cyn-mono, .cyn-muted, .cyn-num) { color: #C6D0DD !important; }
html[data-theme="dark"] .cyn-ltbl thead tr.cyn-filter-row th { background-color: #101A27 !important; color: #C6D0DD !important; border-color: #22324A !important; }
html[data-theme="dark"] .cyn-dd-item { color: #E9EEF5; }
html[data-theme="dark"] .cyn-dd-item:hover { background-color: #16233A !important; }
html[data-theme="dark"] #projDashboardPicker button { background-color: #121D2B !important; color: #E9EEF5 !important; border-color: #2B3C53 !important; }
html[data-theme="dark"] .cyn-search input { background-color: transparent !important; color: inherit !important; border: 0 !important; }

/* Filter / columns popovers — were white with light ink (invisible in night mode) */
html[data-theme="dark"] :is(.cyn-cfg-card, .cyn-pop-card) {
  background: #0E1621 !important;
  color: #E9EEF5 !important;
  border-color: #2B3C53 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] :is(.cyn-cfg-head, .cyn-cfg-foot, .cyn-cfg-body) {
  background: #0E1621 !important;
  border-color: #22324A !important;
  color: #E9EEF5 !important;
}
html[data-theme="dark"] :is(.cyn-cfg-title, .cyn-cfg-lab, .cyn-cfg-item, .cyn-cfg-add, .cyn-pop-check, .cyn-pop-check-lab, .cyn-pop-h, .cyn-pop-h2) {
  color: #E9EEF5 !important;
}
html[data-theme="dark"] :is(.cyn-cfg-sub, .cyn-cfg-sec-h, .cyn-cfg-pin-note, .cyn-pop-sub, .cyn-cfg-empty, .cyn-muted) {
  color: #93A3B8 !important;
}
html[data-theme="dark"] :is(.cyn-cfg-close, .cyn-cfg-x, .cyn-cfg-pin, .cyn-cfg-grip) {
  color: #93A3B8 !important;
}
html[data-theme="dark"] .cyn-cfg-pin.is-on {
  color: #E9EEF5 !important;
  background: color-mix(in srgb, var(--iod-brand, #3D5A80) 28%, #0E1621) !important;
}
html[data-theme="dark"] :is(.cyn-cfg-item:hover, .cyn-cfg-add:hover, .cyn-pop-check:hover) {
  background: #16233A !important;
}
html[data-theme="dark"] .cyn-finput {
  background: #121D2B !important;
  color: #E9EEF5 !important;
  border-color: #2B3C53 !important;
}
html[data-theme="dark"] .cyn-finput::placeholder { color: #6F819A !important; }
html[data-theme="dark"] .cyn-pop-actions button {
  color: color-mix(in srgb, var(--iod-brand, #3D5A80) 50%, #ffffff) !important;
}
html[data-theme="dark"] .cyn-btn-sm:not(.cyn-btn-primary) {
  background: #121D2B !important;
  color: #C6D0DD !important;
  border: 1px solid #2B3C53 !important;
}
html[data-theme="dark"] .cyn-btn-sm.cyn-btn-primary {
  color: #fff !important;
}
html[data-theme="dark"] .cyn-date-order-btn {
  background: #121D2B !important;
  color: #C6D0DD !important;
  border-color: #2B3C53 !important;
}
html[data-theme="dark"] .cyn-date-order-btn.is-on {
  background: color-mix(in srgb, var(--iod-brand, #3D5A80) 28%, #0E1621) !important;
  color: #E9EEF5 !important;
  border-color: color-mix(in srgb, var(--iod-brand, #3D5A80) 55%, #2B3C53) !important;
}

/* Pinned / freeze columns — white sticky cells were unreadable in night mode */
html[data-theme="dark"] .cyn-ltbl :is(th, td).cyn-col-freeze { background-color: #0E1621 !important; color: #E9EEF5 !important; }
html[data-theme="dark"] .cyn-ltbl thead th.cyn-col-freeze { background-color: #121D2B !important; color: #C6D0DD !important; }
html[data-theme="dark"] .cyn-ltbl thead tr.cyn-filter-row th.cyn-col-freeze { background-color: #101A27 !important; }
html[data-theme="dark"] .cyn-ltbl tbody tr:nth-child(even) td.cyn-col-freeze { background-color: #101A27 !important; }
html[data-theme="dark"] .cyn-ltbl tbody tr:hover td.cyn-col-freeze { background-color: #16233A !important; }
html[data-theme="dark"] .cyn-ltbl .cyn-col-freeze--edge { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35); }

/* Dark: admin tabs, detail tiles, previews, float windows (item 12, part 3) */
html[data-theme="dark"] { --cyn-tile-bg: #0E1621 !important; --cyn-tile-border: #22324A !important; }
html[data-theme="dark"] :is(table th, .cyn-ltbl thead th, .vendor-registry-table thead th, .cyn-freeze-sel, .cyn-freeze-name) { background-color: #121D2B !important; color: #C6D0DD; border-color: #22324A !important; }
html[data-theme="dark"] :is(.iod-esu-panel-body, .iod-int-tile, .iod-int-tile--soon, .iod-bill-meter, .iod-bill-plan, .iod-bill-note) { background: #0E1621 !important; border-color: #22324A !important; color: #C6D0DD; box-shadow: none; }
html[data-theme="dark"] .iod-int-tile--live { background: linear-gradient(180deg, #0F2A2A 0%, #0E1621 55%) !important; border-color: #1F5E58 !important; }
html[data-theme="dark"] .iod-bill-plan.current { background: #121D2B !important; border-color: #3A4D66 !important; }
html[data-theme="dark"] :is(.iod-int-tile-name, .iod-bill-meter-val, .iod-bill-plan-top h4, .cyn-detail-tile-hd h3) { color: #E9EEF5 !important; }
html[data-theme="dark"] :is(.iod-int-tile-desc, .iod-int-tile-kicker, .iod-bill-meter-label) { color: #93A3B8; }
html[data-theme="dark"] :is(.iod-int-btn:not(.iod-int-btn-primary), .iod-esu-btn-ghost) { background: #121D2B !important; border-color: #2B3C53 !important; color: #C6D0DD !important; }
html[data-theme="dark"] :is(.iod-bill-bar, .iod-bill-plan-tag) { background: #22324A !important; color: #C6D0DD; }
html[data-theme="dark"] .pjm-gband { background: #16233A !important; }
html[data-theme="dark"] :is(.pjm-mod-td, .pjm-group-td)[style*="background"] { background: #101A27 !important; }
html[data-theme="dark"] :is(.bg-indigo-50, .bg-violet-50, .bg-teal-50, .bg-orange-50, .bg-yellow-50, .bg-green-50, .bg-red-50, .bg-blue-50, .bg-purple-50, .bg-pink-50, .bg-cyan-50, .bg-lime-50) { background-color: #16233A !important; }
html[data-theme="dark"] .bg-amber-50\/80 { background-color: rgba(60, 44, 12, .85) !important; }
html[data-theme="dark"] .text-amber-800 { color: #F4C77A !important; }
html[data-theme="dark"] [data-fw-id] :is([data-fw-chrome], [data-fw-chrome] ~ div, [data-fw-body]) { background-color: #0E1621 !important; color: #E9EEF5; }
html[data-theme="dark"] [data-fw-id] > div > div:first-child[style*="background"] { background: #121D2B !important; color: #E9EEF5 !important; border-color: #22324A !important; }
html[data-theme="dark"] .cyn-search { background-color: #121D2B !important; border-color: #2B3C53 !important; color: #E9EEF5; }
html[data-theme="dark"] #detail-pane { --cyn-tile-bg: #0E1621 !important; --cyn-tile-border: #22324A !important; }
html[data-theme="dark"] [data-doc-preview-card] { background-color: #0B121C !important; border-color: #22324A !important; }
html[data-theme="dark"] :is(.cyn-detail-tool, .cyn-rev-btn, .iod-pill--neutral) { background-color: #121D2B !important; border-color: #2B3C53 !important; color: #C6D0DD !important; }

/* ===== Item 14: asset lifecycle stage bar, 3D keys (styles only, same size) ===== */
html[data-look="modern"] [data-ast-stage-bar] { box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 6px 14px -10px rgba(15,27,45,.25); border-radius: 10px; }
html[data-look="modern"] [data-ast-stage-bar] > .inline-flex { border-radius: 8px; background: linear-gradient(180deg, #E3E8EF, #EEF2F6) !important; box-shadow: inset 0 2px 4px rgba(15,27,45,.14), inset 0 -1px 0 rgba(255,255,255,.7); }
html[data-look="modern"] [data-ast-stage-bar] button[data-ast-stage] { position: relative; transition: background-color .2s, box-shadow .2s, filter .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(15,27,45,.10); background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
html[data-look="modern"] [data-ast-stage-bar] button[data-ast-stage]:not([disabled]):not([aria-current]):hover { box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(15,27,45,.16); filter: brightness(1.03); }
html[data-look="modern"] [data-ast-stage-bar] button[data-ast-stage]:not([disabled]):not([aria-current]):active { box-shadow: inset 0 2px 4px rgba(15,27,45,.22); background-image: none; }
html[data-look="modern"] [data-ast-stage-bar] button[data-ast-stage-done] { background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28); }
html[data-look="modern"] [data-ast-stage-bar] button[aria-current="step"] { background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.30), inset 0 0 0 2px rgba(255,255,255,.28) !important; }
html[data-look="modern"] [data-ast-stage-bar] button[aria-current="step"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.85); animation: m-stage-glow 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes m-stage-glow { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
html[data-look="modern"][data-theme="dark"] [data-ast-stage-bar] > .inline-flex { background: linear-gradient(180deg, #0A1119, #0E1621) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04); }
html[data-look="modern"][data-theme="dark"] [data-ast-stage-bar] button[data-ast-stage]:not([data-ast-stage-done]):not([aria-current]) { background-color: #121D2B !important; color: #C6D0DD !important; background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.4); border-color: #22324A !important; }
@media (prefers-reduced-motion: reduce) { html[data-look="modern"] [data-ast-stage-bar] button[aria-current="step"]::after { animation: none; } }
html[data-theme="dark"] [data-ast-stage-bar] button[data-ast-stage]:not([data-ast-stage-done]):not([aria-current]) { background-color: #121D2B !important; color: #C6D0DD !important; border-color: #22324A !important; }
html[data-theme="dark"] [data-ast-stage-bar] > .inline-flex { background-color: #0A1119 !important; border-color: #22324A !important; }

/* item 15: caption under a share ring ("of 24") */
html[data-look="modern"] .m-wring-of { position: absolute; right: 14px; bottom: 2px; width: 58px; text-align: center; font-size: 10px; line-height: 12px; color: var(--cyn-ink-3, #6B7A90); pointer-events: none; z-index: 1; }
html:not([data-look="modern"]) :is(.m-wring, .m-wring-of) { display: none; }

/* ===== AI chat orb in the new design: raised 3D key in the area colour (same size and place) ===== */
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail {
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), rgba(255,255,255,0) 46%), linear-gradient(160deg, color-mix(in srgb, var(--m-area) 78%, #fff), var(--m-area) 55%, color-mix(in srgb, var(--m-area) 70%, #000)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.28), 0 3px 0 color-mix(in srgb, var(--m-area) 55%, #000), 0 14px 26px -10px color-mix(in srgb, var(--m-area) 75%, #000) !important;
  transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-mid) var(--m-ease), filter var(--m-fast) linear;
}
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; padding: 2px;
  background: conic-gradient(from 210deg, #7EB6FF, #B48CFF, #FF8FB1, #FFC46B, #7EE0C3, #7EB6FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; animation: m-orb-spin 9s linear infinite;
}
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail:hover { filter: brightness(1.06); transform: translateY(-2px); background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 46%), linear-gradient(160deg, color-mix(in srgb, var(--m-area) 72%, #fff), var(--m-area) 55%, color-mix(in srgb, var(--m-area) 70%, #000)) !important; }
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail:hover::before { opacity: .9; }
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 1px 0 color-mix(in srgb, var(--m-area) 55%, #000) !important; }
html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
html[data-look="modern"] body.cyn-coach-shell .cyn-coach-capsule { background: rgba(15,27,45,.94) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -16px rgba(5,10,20,.7), inset 0 1px 0 rgba(255,255,255,.08) !important; }
html[data-look="modern"] body.cyn-coach-shell .cyn-coach-capsule-btn.send { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--m-area) !important; box-shadow: 0 2px 0 color-mix(in srgb, var(--m-area) 55%, #000); }
@keyframes m-orb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html[data-look="modern"] body.cyn-coach-shell .iod-coach-rail::before { animation: none; } }