/* Owner-approved Vertex blue palette. Original layout, glyphs and handlers remain. */
@layer modernApproved {
  :root {
    --vertex-primary: #2463a6;
    --vertex-icon: #315f8e;
    --vertex-nav: #16324f;
    --vertex-nav-open: #294e76;
    --vertex-nav-submenu: #203f61;
    --vertex-nav-accent: #8fbff0;
    --vertex-table-header-bg: #dce9f5;
    --vertex-table-header-text: #16324f;
    --vertex-caption-bg: linear-gradient(#b9d0e6, #e5eef7);
    --vertex-caption-text: #172b3b;
    --vertex-report-bg: #e9f1fa;
    --vertex-filter-bg: #e6eef7;
    --vertex-row-alt: #edf3f9;
    --vertex-tool-bg: #f8fafc;
    --vertex-tool-border: #c9d5e1;
    --vertex-tool-text: #243e56;
  }

  @media screen {
    body.vertex-modern .sidebar { background: var(--vertex-nav) !important; }
    body.vertex-modern #mainNav > .nav-group[open] > summary {
      background: var(--vertex-nav-open) !important;
      box-shadow: inset -3px 0 var(--vertex-nav-accent) !important;
    }
    body.vertex-modern #mainNav .vx-dropdown { background: var(--vertex-nav-submenu) !important; }
    body.vertex-modern #mainNav button:hover { background: var(--vertex-nav-open) !important; }
    body.vertex-modern button.btn-primary,
    body.vertex-modern :is(#content#content, #modal#modal) button.btn-primary {
      background: var(--vertex-primary) !important;
      border-color: var(--vertex-primary) !important;
      color: #fff !important;
    }
    body.vertex-modern table thead th {
      background: var(--vertex-table-header-bg) !important;
      color: var(--vertex-table-header-text) !important;
    }
    body.vertex-modern .rwc-caption {
      background: var(--vertex-caption-bg) !important;
      color: var(--vertex-caption-text) !important;
    }
    body.vertex-modern .report-summary,
    body.vertex-modern .report-summary * {
      background: var(--vertex-report-bg) !important;
    }
    body.vertex-modern .report-summary { color: #172b3b !important; }
    body.vertex-modern .cw-filters {
      background: var(--vertex-filter-bg) !important;
      color: #172b3b !important;
    }
    body.vertex-modern .cw-filters :is(input, select) {
      background: #fff !important;
      color: #172b3b !important;
    }
    body.vertex-modern .monthly-statement tbody tr:nth-child(even) > td { background: var(--vertex-row-alt) !important; }
    body.vertex-modern #desktopStatus { background: var(--vertex-filter-bg) !important; color: #425d78 !important; }
    body.vertex-modern #desktopToolbar button:focus-visible { outline-color: var(--vertex-primary) !important; }

    /* The brand mark uses filled paths; keep its original green and white. */
    body.vertex-modern #desktopToolbar#desktopToolbar .vx-shortcut:not([data-vn-icon="whatsapp"]) svg {
      width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important;
      display: block !important; flex-shrink: 0 !important; margin-inline: auto !important;
      color: var(--vertex-icon) !important; stroke: var(--vertex-icon) !important; stroke-width: 1.8 !important;
      stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important;
    }
    body.vertex-modern #desktopToolbar#desktopToolbar .vx-shortcut:not([data-vn-icon="whatsapp"]) svg :is(path, line, polyline, rect, circle, ellipse, polygon) {
      stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important;
    }
    body.vertex-modern #desktopToolbar#desktopToolbar .shortcut-label { color: var(--vertex-tool-text) !important; text-align: center !important; }
    body.vertex-modern #desktopToolbar#desktopToolbar .vx-shortcut > button,
    body.vertex-modern #desktopToolbar#desktopToolbar .vx-shortcut > details > summary {
      background: var(--vertex-tool-bg) !important; border-color: var(--vertex-tool-border) !important; box-shadow: none !important;
    }

    /* Keep the functional close mark in its original slot; reserve a separate print slot. */
    body.vertex-modern :is(#modal#modal, #content#content) .rwc-caption:has(#cw-download:not([hidden])) { padding-left: 160px !important; }
    body.vertex-modern .rwc-caption .cw-actions:has(#cw-download:not([hidden])) {
      position: absolute !important; left: 42px !important; right: auto !important; top: 50% !important; bottom: auto !important;
      transform: translateY(-50%) !important; display: flex !important; align-items: center !important; margin: 0 !important;
    }
    body.vertex-modern .rwc-caption #cw-download#cw-download:not([hidden]) {
      position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
      flex-direction: row !important; gap: 6px !important; width: 108px !important; height: 30px !important; min-height: 30px !important;
      padding: 4px 7px !important; background: var(--vertex-tool-bg) !important; border: 1px solid #b7c9db !important;
      color: var(--vertex-icon) !important; box-shadow: none !important; border-radius: 5px !important;
    }
    body.vertex-modern .rwc-caption #cw-download#cw-download:not([hidden]) svg {
      display: block !important; position: static !important; width: 18px !important; height: 18px !important; min-width: 18px !important;
      stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
      margin: 0 !important; padding: 0 !important; fill: none !important; background: none !important; color: var(--vertex-icon) !important;
    }
    body.vertex-modern .rwc-caption #cw-download#cw-download:not([hidden]) span { white-space: nowrap !important; font: 12px/16px Arial, sans-serif !important; color: inherit !important; }
  }
}