/* ==========================================================================
   ServoCure look (sc-look.css), 2026-10-20. Appearance only: colours, type,
   spacing, borders, radius, shadows. Positions are never changed, so every
   sticky header / column / label keeps working; no behaviour changes.
   sc-look.js adds the class names used here (lk-st, lk-b, lk-col, lk-addr).
   To revert: remove the sc-look.css <link> and the sc-look.js <script>.
   ========================================================================== */
:root {
  --lk-ink: #0b3440; --lk-line: #e1ebee; --lk-line2: #edf3f5; --lk-head: #f1f7f8; --lk-head-ink: #2c5664;
  --lk-hover: #f4fbfa; --lk-brand: #0f766e; --lk-brand2: #14b8a6;
  --lk-r: 12px; --lk-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -20px rgba(11, 52, 64, .35);
}

/* ---------- page frame: less empty padding around the content */
@media (min-width: 901px) { html body .app .content { padding: 16px 24px 28px !important; } }
@media (max-width: 900px) { html body .app .content { padding: 10px 10px 22px !important; } }

/* ---------- tables: one compact, consistent style in every module */
html body #view#view#view table thead th {
  background-color: var(--lk-head) !important; color: var(--lk-head-ink) !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .045em; text-transform: uppercase;
  line-height: 1.3 !important; padding-top: 9px !important; padding-bottom: 9px !important;
  border-bottom: 1px solid #d5e4e8 !important; vertical-align: middle !important;
}
html body #view#view#view table tbody td {
  font-size: 13px !important; color: #1d3a46; line-height: 1.4 !important;
  padding-top: 7px !important; padding-bottom: 7px !important;
  border-bottom: 1px solid var(--lk-line2) !important; vertical-align: middle !important;
}
html body #view#view#view table tbody tr:hover > td { background-color: var(--lk-hover) !important; }
html body #view#view#view table tbody tr:last-child > td { border-bottom-color: transparent !important; }
html body #view#view#view table th.lk-addr, html body #view#view#view table tbody td.lk-addr { width: 240px !important; min-width: 240px !important; max-width: none !important; white-space: normal !important; }

/* table frames */
html body #view#view#view .table-wrap, html body #view#view#view .scwf-wrap, html body #view#view#view .sc-ql-wrap, html body #view#view#view .ol-wrap,
html body #view#view#view .request-dispositions__table-wrap, html body #view#view#view .client-request-table-wrap, html body #view#view#view .epu-panel {
  border: 1px solid var(--lk-line) !important; border-radius: var(--lk-r) !important; background: #fff !important; box-shadow: var(--lk-shadow);
}

/* ---------- status / action columns: every option stacked vertically, same width, no overlap */
html body #view#view#view td.lk-st { text-align: center !important; }
html body #view#view#view td.lk-st .lk-b {
  display: flex !important; align-items: center; justify-content: center; float: none !important;
  width: 100% !important; max-width: 168px !important; min-width: 0 !important; min-height: 26px !important; height: auto !important;
  margin: 0 auto 4px !important; padding: 3px 8px !important; box-sizing: border-box !important;
  border-radius: 8px !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: normal !important;
}
html body #view#view#view td.lk-st select.lk-b { display: block !important; text-align: center; text-align-last: center; }
html body #view#view#view td.lk-st .lk-col { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important; }
html body #view#view#view td.lk-st .scfx-tp { align-items: center !important; }
html body #view#view#view td.lk-st .scfx-tp .row { width: 100%; }
html body #view#view#view td.lk-st .ox-icons { display: flex !important; justify-content: center; align-items: center; gap: 5px; margin: 0 auto !important; }
html body #view#view#view td.lk-st .ox-icons button { margin: 0 !important; }
html body #view#view#view td.lk-st > .ox-hist, html body #view#view#view td.lk-st > .ox-cmt { margin: 0 2px !important; }
html body #view#view#view td.lk-st .sc-ql-status { display: flex !important; width: max-content; margin: 0 auto 4px !important; }
html body #view#view#view .ox-hist, html body #view#view#view .ox-cmt, html body #view#view#view .ox-cancel { width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important; border-radius: 8px !important; }
html body #view#view#view .ox-hist::before, html body #view#view#view .ox-cmt::before, html body #view#view#view .ox-cancel::before { width: 15px !important; height: 15px !important; }
html body #view#view#view table[data-total-leads-sticky] .ol-actions .ox-icons button { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; }

/* ---------- filters / chips: compact */
html body #view#view#view .sc-lf-card, html body #view#view#view .sc-ql-card { padding: 12px 14px !important; margin-bottom: 12px !important; border-radius: var(--lk-r) !important; }
html body #view#view#view .sc-lf-row { padding: 5px 0 !important; gap: 10px !important; }
html body #view#view#view .sc-lf-label, html body #view#view#view .sc-lf-chip { min-height: 30px !important; }

/* ---------- cards and page headers */
html body #view#view#view .panel, html body #view#view#view .scwf-panel, html body #view#view#view .cf-head, html body #view#view#view .epu-card, html body #view#view#view .mr-card {
  border-color: var(--lk-line) !important; border-radius: var(--lk-r) !important;
}

/* ---------- inputs: same border, radius and focus ring everywhere (screens and pop-ups) */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
html body select, html body textarea { border-color: #d3e3e7; border-radius: 10px; }
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
html body select:focus, html body textarea:focus { border-color: var(--lk-brand2) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, .16) !important; outline: 0 !important; }

/* ---------- pop-ups: rounded cards, soft shadow */
html body .scfx-box, html body .ox-box, html body .ep-modal > div, html body .sc-collected-barcode-card, html body .sc-confirmed-card, html body .scwf-box {
  border-radius: 16px !important; box-shadow: 0 30px 70px -30px rgba(11, 52, 64, .55) !important;
}

/* ---------- small screens */
@media (max-width: 900px) {
  html body #view#view#view table tbody td { font-size: 12.5px !important; }
  html body #view#view#view table th.lk-addr, html body #view#view#view table tbody td.lk-addr { width: 200px !important; min-width: 200px !important; }
  html body #view#view#view td.lk-st .lk-b { max-width: 140px !important; }
}

/* ---------- Admin Dashboard header (sc-dashboard.js): its styles, kept from the previous theme file (sc-theme.css) */
:root { color-scheme: light; --sc-brand-900: #0b3868; --sc-brand-700: #0a6f80; --sc-brand-600: #0b8396; --sc-brand-500: #0bb8c8; --sc-brand-100: #e3f5f8; --sc-brand-50: #f2fafb; --sc-bg: #f5f8fa; --sc-surface: #ffffff; --sc-surface-2: #f8fafb; --sc-border: #e2e8ec; --sc-border-strong: #cdd6dc; --sc-text: #1b2b36; --sc-text-2: #4e5f6b; --sc-text-3: #6f7f8a; --sc-success: #157a4a; --sc-success-bg: #e6f5ed; --sc-warning: #9a5b00; --sc-warning-bg: #fdf3e1; --sc-danger: #b42318; --sc-danger-bg: #fdecea; --sc-info: #1d5fa8; --sc-info-bg: #e8f1fb; --sc-neutral: #4e5f6b; --sc-neutral-bg: #eef2f4; --sc-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --sc-fs-xs: 11.5px; --sc-fs-sm: 12.5px; --sc-fs-md: 13.5px; --sc-fs-lg: 15px; --sc-fs-h2: 17px; --sc-fs-h1: 21px; --sc-s1: 4px; --sc-s2: 8px; --sc-s3: 12px; --sc-s4: 16px; --sc-s5: 20px; --sc-s6: 24px; --sc-r-sm: 6px; --sc-r-md: 8px; --sc-r-lg: 12px; --sc-r-pill: 999px; --sc-shadow-1: 0 1px 2px rgba(16, 40, 56, .06); --sc-shadow-2: 0 4px 16px rgba(16, 40, 56, .08); --sc-shadow-3: 0 16px 40px rgba(16, 40, 56, .18); --sc-focus: 0 0 0 3px rgba(11, 184, 200, .35); --sc-ctl-h: 36px; --sc-ctl-h-sm: 30px; --sc-row-h: 44px; }
:root { --sc-brand-900: #0b3868; --sc-brand-700: #0bb8c8; --sc-brand-600: #3fc9d6; --sc-brand-500: #0bb8c8; --sc-brand-100: #e0f6f9; --sc-brand-50: #f2fbfc; --sc-bg: #ffffff; --sc-border: #e6ecf0; --sc-focus: 0 0 0 3px rgba(11, 184, 200, .35); }
:root { --sc-fs-xs: 12.5px; --sc-fs-sm: 13.5px; --sc-fs-md: 14.5px; --sc-fs-lg: 16px; --sc-fs-h2: 18px; --sc-fs-h1: 23px; }
.scd .scd-skel { height: 180px; border-radius: 14px; background: linear-gradient(90deg, rgb(243, 247, 249) 25%, rgb(234, 241, 244) 50%, rgb(243, 247, 249) 75%) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running scd-sh; }
@keyframes scd-sh { 
  100% { background-position: -200% 0px; }
}
.scd.scd-loading { opacity: 0.6; transition: opacity 0.2s; }
.scd .scd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scd .scd-head small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(8, 122, 138); }
#root#root#root .app #view .scd .scd-head h2 { margin: 2px 0px; font-size: 24px !important; font-weight: 700 !important; color: rgb(11, 56, 104) !important; }
.scd .scd-head p { margin: 0px; font-size: 13px; color: rgb(111, 127, 138); }
.scd .scd-range { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgb(230, 237, 241); border-radius: 12px; background: rgb(255, 255, 255); }
#root#root#root .app #view .scd .scd-range button { min-height: 32px !important; padding: 0px 14px !important; border: 0px !important; border-radius: 9px !important; background: transparent !important; color: rgb(78, 95, 107) !important; font-weight: 600 !important; font-size: 13.5px !important; }
#root#root#root .app #view .scd .scd-range button.active { background: rgb(8, 122, 138) !important; color: rgb(255, 255, 255) !important; }
.scd .scd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 12px; }
.scd .scd-kpi { position: relative; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 241); border-radius: 14px; padding: 14px 14px 10px; box-shadow: rgba(16, 40, 56, 0.04) 0px 1px 3px; }
.scd .scd-kpi::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: var(--c); opacity: 0.85; }
.scd .scd-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scd .scd-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--t); color: var(--c); }
.scd .scd-kpi-v { margin-top: 10px; font-size: 26px; font-weight: 800; color: rgb(11, 56, 104); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scd .scd-kpi-l { margin-top: 2px; font-size: 13px; font-weight: 600; color: rgb(95, 111, 122); }
.scd .scd-spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
.scd .scd-d { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.scd .scd-d.up { background: rgb(230, 245, 237); color: rgb(21, 122, 74); }
.scd .scd-d.down { background: rgb(253, 236, 234); color: rgb(180, 35, 24); }
.scd .scd-d.flat { background: rgb(241, 245, 248); color: rgb(111, 127, 138); }
.scd .scd-card { background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 241); border-radius: 14px; padding: 16px; box-shadow: rgba(16, 40, 56, 0.04) 0px 1px 3px; min-width: 0px; }
.scd .scd-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#root#root#root .app #view .scd .scd-card-h h3 { margin: 0px; font-size: 16px !important; font-weight: 700 !important; color: rgb(11, 56, 104) !important; }
.scd .scd-card-h span { font-size: 12px; color: rgb(138, 152, 163); font-weight: 500; }
.scd .scd-atts { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 10px; }
#root#root#root .app #view .scd .scd-att { flex-direction: column; justify-content: center; gap: 2px; text-align: left; display: flex !important; align-items: flex-start !important; height: auto !important; min-height: 64px !important; padding: 10px 12px !important; border-top: 1px solid rgb(230, 237, 241) !important; border-right: 1px solid rgb(230, 237, 241) !important; border-bottom: 1px solid rgb(230, 237, 241) !important; border-image: none !important; border-left: 4px solid var(--c) !important; border-radius: 10px !important; background: rgb(255, 255, 255) !important; color: rgb(78, 95, 107) !important; white-space: normal !important; }
#root#root#root .app #view .scd .scd-att:hover { background: rgb(247, 251, 252) !important; border-top-color: rgb(214, 238, 242) !important; border-right-color: rgb(214, 238, 242) !important; border-bottom-color: rgb(214, 238, 242) !important; border-left-color: var(--c) !important; }
.scd .scd-att b { font-size: 22px; font-weight: 800; color: rgb(11, 56, 104); line-height: 1.1; }
.scd .scd-att span { font-size: 12.5px; font-weight: 600; color: rgb(95, 111, 122); }
.scd .scd-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 12px; }
.scd .scd-fun { display: grid; grid-template-columns: 104px minmax(0px, 1fr) 48px 40px; align-items: center; gap: 8px; margin-bottom: 9px; }
.scd .scd-fun-l { font-size: 13px; font-weight: 600; color: rgb(78, 95, 107); }
.scd .scd-fun i, .scd .scd-bar i { display: block; height: 10px; border-radius: 999px; background: rgb(241, 245, 248); overflow: hidden; }
.scd .scd-fun s, .scd .scd-bar s { display: block; height: 100%; border-radius: 999px; text-decoration: none; }
.scd .scd-fun b { font-size: 13.5px; font-weight: 700; color: rgb(11, 56, 104); text-align: right; font-variant-numeric: tabular-nums; }
.scd .scd-fun em { font-style: normal; font-size: 12px; color: rgb(138, 152, 163); text-align: right; }
.scd .scd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(238, 242, 245); }
.scd .scd-facts b { display: block; font-size: 18px; font-weight: 800; color: rgb(11, 56, 104); }
.scd .scd-facts span { font-size: 12px; color: rgb(111, 127, 138); font-weight: 500; }
.scd .scd-bar { margin-bottom: 10px; }
.scd .scd-bar-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.scd .scd-bar-h span { color: rgb(78, 95, 107); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.scd .scd-bar-h b { color: rgb(11, 56, 104); font-weight: 700; font-variant-numeric: tabular-nums; }
.scd .scd-empty { margin: 0px; font-size: 13px; color: rgb(138, 152, 163); }
@media (max-width: 1400px) { .scd .scd-kpis { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .scd .scd-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .scd .scd-atts { grid-template-columns: repeat(4, minmax(0px, 1fr)); } }
@media (max-width: 760px) { .scd .scd-kpis { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .scd .scd-grid { grid-template-columns: 1fr; } .scd .scd-atts { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .scd .scd-kpi-v { font-size: 22px; } }

/* ---------- Side menu and top bar (incl. the "Today" card): kept from the previous theme file (sc-theme.css) */
#root#root#root .app .sidebar { background: var(--sc-surface) !important; border-right: 1px solid var(--sc-border) !important; box-shadow: none !important; }
#root#root#root .app .sidebar .side-main, #root#root#root .app .sidebar button:not(.side-main) { font-family: var(--sc-font); font-weight: 500; transition: background 0.15s, color 0.15s; color: var(--sc-text-2) !important; border-radius: var(--sc-r-md) !important; }
#root#root#root .app .sidebar .side-main { font-size: var(--sc-fs-md) !important; min-height: 38px; }
#root#root#root .app .sidebar button:hover { background: var(--sc-brand-50) !important; color: var(--sc-brand-900) !important; }
#root#root#root .app .sidebar button.active, #root#root#root .app .sidebar button[aria-current] { background: var(--sc-brand-100) !important; color: var(--sc-brand-900) !important; font-weight: 650 !important; box-shadow: inset 3px 0 0 var(--sc-brand-700) !important; }
#root#root#root .app .sidebar button.active svg, #root#root#root .app .sidebar button.active i { color: var(--sc-brand-700) !important; }
#root#root#root .app .sidebar :is([id$="-count"], [data-ongoing-count], [data-cf-count], [data-cf-total]) { min-width: 24px; height: 20px; text-align: center; font-variant-numeric: tabular-nums; background: var(--sc-neutral-bg) !important; color: var(--sc-text-2) !important; border: 0px !important; border-radius: var(--sc-r-pill) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 20px !important; padding: 0px 7px !important; box-shadow: none !important; }
#root#root#root .app .sidebar :is(#client-parent-count, [data-cf-total]) { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: none !important; color: rgb(255, 255, 255) !important; }
#root#root#root .app .sidebar button.active :is([id$="-count"], [data-ongoing-count], [data-cf-count]) { background: var(--sc-brand-700) !important; color: rgb(255, 255, 255) !important; }
#root#root#root .app .sidebar .msx-navcount { background: var(--sc-danger) !important; font-weight: 700 !important; }
#root#root#root .app .sidebar :is(h4, h5, h6, [class*="section-title"]) { color: var(--sc-text-3) !important; letter-spacing: 0.08em; }
#root#root#root .app .topbar { backdrop-filter: saturate(1.2) blur(8px); background: rgba(255, 255, 255, 0.92) !important; border: 1px solid var(--sc-border) !important; box-shadow: var(--sc-shadow-1) !important; }
#root#root#root .app .sidebar button.active > *, #root#root#root .app .sidebar button[aria-current] > * { color: var(--sc-brand-900) !important; }
#root#root#root .app .sidebar button.active .menu-icon { background: var(--sc-surface) !important; color: var(--sc-brand-700) !important; }
#root#root#root .app .sidebar .menu-icon { background: var(--sc-brand-50) !important; color: var(--sc-text-2) !important; }
#root#root#root .app .sidebar { background: rgb(255, 255, 255) !important; border-right: 1px solid var(--sc-border) !important; box-shadow: none !important; }
#root#root#root .app .topbar { background: rgb(255, 255, 255) !important; border: 1px solid var(--sc-border) !important; box-shadow: none !important; }
#root#root#root .app .topbar::before, #root#root#root .app .topbar::after { background: transparent !important; box-shadow: none !important; }
#root#root#root .app .sidebar button.active, #root#root#root .app .sidebar button[aria-current] { background: var(--sc-brand-100) !important; box-shadow: inset 3px 0 0 var(--sc-brand-500) !important; }
#root#root#root .app .sidebar .menu-icon { background: var(--sc-brand-50) !important; color: var(--sc-brand-900) !important; }
#root#root#root .app .sidebar button.active .menu-icon { background: rgb(255, 255, 255) !important; color: var(--sc-brand-900) !important; }
#root#root#root .app .sidebar .side-bottom, #root#root#root .app .sidebar .side-bottom * { background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color:  !important; background-image: none !important; color: var(--sc-brand-900) !important; border-color: var(--sc-brand-100) !important; box-shadow: none !important; }
#root#root#root .app .sidebar .side-bottom b { background: transparent !important; }
#root#root#root .app .sidebar { background: none rgb(255, 255, 255) !important; border-right: 1px solid rgb(238, 242, 245) !important; }
#root#root#root .app .sidebar :is(h4, h5, h6, [class*="section-title"], [class*="group-title"], .nav-label) { color: rgb(154, 168, 178) !important; font-weight: 600 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title, button) { background: none transparent !important; box-shadow: none !important; color: rgb(78, 95, 107) !important; font-weight: 500 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title, button) * { color: inherit !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title, button):hover { background: rgb(245, 251, 252) !important; color: rgb(11, 56, 104) !important; }
#root#root#root .app .sidebar .menu-icon, #root#root#root .app .sidebar button.active .menu-icon { background: transparent !important; box-shadow: none !important; border: 0px !important; color: rgb(123, 139, 150) !important; }
#root#root#root .app .sidebar [data-ui-current], #root#root#root .app .sidebar .nav:not(:has([data-ui-current])) .side-main.active { background: rgb(238, 250, 252) !important; color: rgb(11, 56, 104) !important; font-weight: 600 !important; box-shadow: rgb(11, 184, 200) 3px 0px 0px inset !important; }
#root#root#root .app .sidebar :is([data-ui-current], .nav:not(:has([data-ui-current])) .side-main.active) .menu-icon { color: rgb(11, 184, 200) !important; }
#root#root#root .app .sidebar .nav:has([data-ui-current]) .side-main.active:not([data-ui-current]) { background: transparent !important; box-shadow: none !important; font-weight: 500 !important; }
#root#root#root .app .sidebar [class*="submenu"], #root#root#root .app .sidebar [class*="sub-menu"] { border-color: rgb(238, 242, 245) !important; }
#root#root#root .app .sidebar .sub-icon { color: rgb(181, 195, 204) !important; }
#root#root#root .app .sidebar [data-ui-current] .sub-icon { color: rgb(11, 184, 200) !important; }
#root#root#root .app .sidebar :is([id$="-count"], [data-ongoing-count], [data-cf-count], [data-cf-total], #client-parent-count) { background: none rgb(241, 245, 248) !important; color: rgb(95, 111, 122) !important; font-weight: 600 !important; border: 0px !important; box-shadow: none !important; }
#root#root#root .app .sidebar :is(#client-parent-count, [data-cf-total]) { background: rgb(227, 246, 249) !important; color: rgb(11, 56, 104) !important; }
#root#root#root .app .sidebar [data-ui-current] :is([id$="-count"], [data-ongoing-count], [data-cf-count]), #root#root#root .app .sidebar button.active :is([id$="-count"], [data-ongoing-count], [data-cf-count]) { background: rgb(255, 255, 255) !important; color: rgb(11, 56, 104) !important; box-shadow: rgb(205, 239, 243) 0px 0px 0px 1px !important; }
#root#root#root .app .sidebar .side-bottom, #root#root#root .app .sidebar .side-bottom * { background: none rgb(255, 255, 255) !important; color: rgb(111, 127, 138) !important; box-shadow: none !important; }
#root#root#root .app .sidebar .side-bottom { border: 1px solid rgb(238, 242, 245) !important; border-radius: 10px !important; }
#root#root#root .app .sidebar :is(.brand-wrap, .brand, [class*="logo-card"]) { background: rgb(255, 255, 255) !important; box-shadow: none !important; border: 1px solid rgb(238, 242, 245) !important; }
#root#root#root .app .sidebar .brand-wrap { background: transparent !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(238, 242, 245) !important; border-image: none !important; border-radius: 0px !important; box-shadow: none !important; height: auto !important; min-height: 0px !important; overflow: visible !important; padding: 6px 10px 18px !important; margin: 0px 0px 14px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; }
#root#root#root .app .sidebar .brand-wrap .side-logo { display: block !important; width: 168px !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0px !important; filter: none !important; }
#root#root#root .app .sidebar .side-bottom { display: none !important; }
#root#root#root .app .sidebar [data-ui-current], #root#root#root .app .sidebar .nav:not(:has([data-ui-current])) .side-main.active { background: rgb(223, 244, 247) !important; box-shadow: rgb(8, 122, 138) 3px 0px 0px inset !important; }
#root#root#root .app .sidebar :is([data-ui-current], .nav:not(:has([data-ui-current])) .side-main.active) .menu-icon { color: rgb(8, 122, 138) !important; }
#root#root#root .app .sidebar .msx-navcount { background: rgb(180, 35, 24) !important; color: rgb(255, 255, 255) !important; font-weight: 700 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title) { font-size: var(--sc-fs-md) !important; font-weight: 600 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title) * { font-weight: inherit !important; }
#root#root#root .app .sidebar [data-cf-count], #root#root#root .app .sidebar [data-ongoing-count], #root#root#root .app .sidebar [id$="-count"] { font-size: 12px !important; }
#root#root#root .app .sidebar button:not(.side-main):not(.client-request-title) { font-size: var(--sc-fs-sm) !important; font-weight: 600 !important; }
#root#root#root .app .sidebar :is([data-ui-current], .nav:not(:has([data-ui-current])) .side-main.active) { font-weight: 700 !important; }
#root#root#root .app .sidebar .menu-icon { transition: transform 0.15s; width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgb(224, 246, 249) !important; color: rgb(8, 122, 138) !important; border: 0px !important; box-shadow: none !important; }
#root#root#root .app .sidebar .menu-icon svg { width: 17px !important; height: 17px !important; stroke-width: 2 !important; }
#root#root#root .app .sidebar button:hover .menu-icon { transform: scale(1.06); }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="dashboard"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="dashboard"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="dashboard"] { background: rgb(224, 246, 249) !important; color: rgb(8, 122, 138) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="client requests"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="client requests"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="client requests"] { background: rgb(231, 240, 254) !important; color: rgb(37, 99, 235) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="ongoing leads"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="ongoing leads"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="ongoing leads"] { background: rgb(239, 234, 254) !important; color: rgb(109, 79, 216) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="camps"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="camps"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="camps"] { background: rgb(229, 246, 236) !important; color: rgb(21, 128, 61) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="reports"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="reports"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="reports"] { background: rgb(253, 243, 225) !important; color: rgb(180, 83, 9) !important; }
#root#root#root .app .sidebar [data-myreports] .menu-icon, #root#root#root .app .sidebar button.active [data-myreports] .menu-icon, #root#root#root .app .sidebar [data-ui-current] [data-myreports] .menu-icon { background: rgb(253, 236, 228) !important; color: rgb(194, 65, 12) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="packages"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="packages"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="packages"] { background: rgb(251, 232, 241) !important; color: rgb(190, 24, 93) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="quotations"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="quotations"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="quotations"] { background: rgb(234, 236, 253) !important; color: rgb(67, 56, 202) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="labs"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="labs"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="labs"] { background: rgb(223, 245, 241) !important; color: rgb(15, 118, 110) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="employees"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="employees"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="employees"] { background: rgb(226, 241, 252) !important; color: rgb(3, 105, 161) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="clients"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="clients"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="clients"] { background: rgb(246, 232, 251) !important; color: rgb(162, 28, 175) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="master data"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="master data"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="master data"] { background: rgb(237, 241, 246) !important; color: rgb(71, 85, 105) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="messages"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="messages"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="messages"] { background: rgb(224, 246, 242) !important; color: rgb(13, 148, 136) !important; }
#root#root#root .app .sidebar [data-msx-nav] .menu-icon, #root#root#root .app .sidebar button.active [data-msx-nav] .menu-icon, #root#root#root .app .sidebar [data-ui-current] [data-msx-nav] .menu-icon { background: rgb(253, 236, 235) !important; color: rgb(192, 57, 43) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="connect"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="connect"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="connect"] { background: rgb(238, 246, 226) !important; color: rgb(77, 124, 15) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="accounts"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="accounts"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="accounts"] { background: rgb(227, 245, 236) !important; color: rgb(4, 120, 87) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="invoices"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="invoices"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="invoices"] { background: rgb(253, 245, 218) !important; color: rgb(161, 98, 7) !important; }
#root#root#root .app .sidebar .menu-icon[data-sc-icon="settings"], #root#root#root .app .sidebar button.active .menu-icon[data-sc-icon="settings"], #root#root#root .app .sidebar [data-ui-current] .menu-icon[data-sc-icon="settings"] { background: rgb(239, 241, 244) !important; color: rgb(75, 85, 99) !important; }
#root#root#root .app .sidebar :is([data-ui-current], .nav:not(:has([data-ui-current])) .side-main.active) .menu-icon { box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, currentcolor 0px 0px 0px 3.5px !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title) { letter-spacing: 0.005em; color: rgb(11, 56, 104) !important; font-size: 15px !important; font-weight: 700 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title) > b { color: rgb(11, 56, 104) !important; font-weight: 700 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title):hover > b { color: rgb(8, 122, 138) !important; }
#root#root#root .app .sidebar button:has(> .sub-icon) { color: rgb(95, 111, 122) !important; font-size: 13.5px !important; font-weight: 500 !important; }
#root#root#root .app .sidebar button:has(> .sub-icon) .submenu-label { font-weight: 500 !important; color: inherit !important; }
#root#root#root .app .sidebar button[data-ui-current]:has(> .sub-icon), #root#root#root .app .sidebar button[data-ui-current]:has(> .sub-icon) .submenu-label { color: rgb(11, 56, 104) !important; font-weight: 700 !important; }
#root#root#root .app .sidebar :is(.side-main, .client-request-title) > :is(#client-parent-count, [data-cf-total], .msx-navcount, [id$="-count"], [data-ongoing-count], [data-cf-count]) { display: none !important; }
#root#root#root .app .topbar.sc-has-today:not(.sc-search-open) .ep-tsearch { display: none !important; }
#root#root#root .app .topbar.sc-search-open .sc-today { display: none !important; }
#root#root#root .app .topbar .sc-today { flex: 1 1 auto; min-width: 0px; max-width: 620px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border: 1px solid rgb(230, 237, 241); border-radius: 12px; background: rgb(255, 255, 255); }
#root#root#root .app .topbar .sc-today-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgb(253, 232, 238); color: rgb(208, 70, 108); }
#root#root#root .app .topbar .sc-today-tx { flex: 1 1 auto; min-width: 0px; display: grid; grid-template-columns: auto minmax(0px, 1fr); gap: 1px 8px; align-items: baseline; line-height: 1.3; }
#root#root#root .app .topbar .sc-today-tx small { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(8, 122, 138); white-space: nowrap; }
#root#root#root .app .topbar .sc-today-tx b { font-size: 14.5px; font-weight: 700; color: rgb(11, 56, 104); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#root#root#root .app .topbar .sc-today-tx em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; font-weight: 500; color: rgb(95, 111, 122); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#root#root#root .app .topbar .sc-today-search { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(230, 237, 241); background: rgb(255, 255, 255); color: rgb(95, 111, 122); cursor: pointer; padding: 0px; }
#root#root#root .app .topbar .sc-today-search:hover { border-color: rgb(11, 184, 200); color: rgb(8, 122, 138); background: rgb(242, 251, 252); }
@media (max-width: 640px) { #root#root#root .app .topbar .sc-today-tx small, #root#root#root .app .topbar .sc-today-tx em { display: none; } #root#root#root .app .topbar .sc-today { gap: 8px; } }

/* ---------- Dashboard "Today" summary (sc-dashboard.js, .sct): kept from the previous theme file (sc-theme.css) */
#root#root#root .app #view > .sct { display: grid; gap: 12px; background: transparent !important; border: 0px !important; box-shadow: none !important; padding: 0px !important; margin: 0px 0px 18px !important; }
.sct.sct-loading { opacity: 0.6; }
.sct .sct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sct .sct-head small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(8, 122, 138); }
#root#root#root .app #view .sct .sct-head h2 { margin: 2px 0px 0px; font-size: 24px !important; font-weight: 700 !important; color: rgb(11, 56, 104) !important; }
#root#root#root .app #view .sct .sct-refresh { min-height: 32px !important; padding: 0px 12px !important; border: 1px solid rgb(230, 237, 241) !important; border-radius: 999px !important; background: rgb(255, 255, 255) !important; color: rgb(95, 111, 122) !important; font-size: 12.5px !important; font-weight: 600 !important; }
#root#root#root .app #view .sct .sct-refresh:hover { border-color: rgb(11, 184, 200) !important; color: rgb(8, 122, 138) !important; }
.sct .sct-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
.sct .sct-card { background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 241); border-radius: 14px; padding: 16px; box-shadow: rgba(16, 40, 56, 0.04) 0px 1px 3px; min-width: 0px; }
#root#root#root .app #view .sct .sct-card h3 { margin: 0px 0px 12px; font-size: 16px !important; font-weight: 700 !important; color: rgb(11, 56, 104) !important; }
.sct .sct-tiles { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 10px; }
.sct .sct-t { border-right: 1px solid rgb(230, 237, 241); border-bottom: 1px solid rgb(230, 237, 241); border-left: 1px solid rgb(230, 237, 241); border-image: none; border-top: 3px solid var(--c); border-radius: 10px; padding: 10px 12px; background: linear-gradient(180deg, var(--t) 0, #fff 70%); min-width: 0px; }
.sct .sct-t span { display: block; font-size: 12.5px; font-weight: 600; color: rgb(78, 95, 107); }
.sct .sct-t b { display: block; margin: 4px 0px 2px; font-size: 26px; font-weight: 800; color: var(--c); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sct .sct-t em { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: rgb(111, 127, 138); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sct .sct-tw { overflow-x: auto; }
#root#root#root .app #view .sct table.sct-table { width: 100%; border-collapse: collapse !important; font-size: 14px !important; }
#root#root#root .app #view .sct table.sct-table th { text-transform: uppercase; letter-spacing: 0.04em; height: 38px; background: rgb(247, 250, 251) !important; color: rgb(95, 111, 122) !important; font-size: 12px !important; font-weight: 700 !important; padding: 0px 12px !important; text-align: left !important; border-bottom: 1px solid rgb(230, 237, 241) !important; }
#root#root#root .app #view .sct table.sct-table td { height: 44px; padding: 8px 12px !important; border-bottom: 1px solid rgb(238, 242, 245) !important; text-align: left !important; font-weight: 600 !important; color: rgb(11, 56, 104) !important; }
#root#root#root .app #view .sct table.sct-table td:not(:first-child), #root#root#root .app #view .sct table.sct-table th:not(:first-child) { text-align: center !important; }
.sct .sct-av { display: inline-flex; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; align-items: center; justify-content: center; background: rgb(224, 246, 249); color: rgb(8, 122, 138); font-size: 12px; font-weight: 800; vertical-align: middle; }
#root#root#root .app #view .sct td.sct-none { text-align: center !important; color: rgb(138, 152, 163) !important; font-weight: 500 !important; }
@media (max-width: 1200px) { .sct .sct-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sct .sct-tiles { grid-template-columns: repeat(2, minmax(0px, 1fr)); } }

/* ==========================================================================
   v3 (2026-10-20): colour theme from the logo (navy #0B3868, cyan #0BB8C8) and UX polish.
   Side menu and top bar are not touched by this section.
   ========================================================================== */
:root { --lk-navy: #0b3868; --lk-cyan: #0bb8c8; --lk-cyan-d: #0a8fa0; --lk-cyan-50: #effafc; --lk-cyan-100: #dcf3f7; --lk-navy-50: #f2f6fb; --lk-navy-200: #d3e0ed; }

/* tables: cyan-tinted sticky header, navy titles, soft cyan hover */
html body #view#view#view table thead th {
  background-image: linear-gradient(180deg, #f6fcfd 0%, #e7f5f8 100%) !important; background-color: #eaf6f9 !important;
  color: var(--lk-navy) !important; border-bottom: 2px solid #c8e8ee !important;
}
html body #view#view#view table tbody tr:hover > td { background-color: var(--lk-cyan-50) !important; }
html body #view#view#view table tbody td a { color: var(--lk-cyan-d); }

/* status buttons: one colour meaning everywhere */
html body #view#view#view td.lk-st .lk-b { transition: background-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
html body #view#view#view td.lk-st .lk-b.lk-primary {
  background: linear-gradient(135deg, #15bfcd 0%, #0a8fa0 100%) !important; color: #fff !important;
  border: 1px solid #0a97a8 !important; box-shadow: 0 2px 6px -3px rgba(10, 143, 160, .6) !important; text-shadow: none !important;
}
html body #view#view#view td.lk-st .lk-b.lk-primary:hover { box-shadow: 0 4px 12px -4px rgba(10, 143, 160, .7) !important; transform: translateY(-1px); }
html body #view#view#view td.lk-st .lk-b.lk-danger { background: #fff5f5 !important; color: #c0262d !important; border: 1px solid #f5c6c8 !important; box-shadow: none !important; }
html body #view#view#view td.lk-st .lk-b.lk-danger:hover { background: #ffe9ea !important; }
html body #view#view#view td.lk-st .lk-b.lk-soft { background: var(--lk-navy-50) !important; color: var(--lk-navy) !important; border: 1px solid var(--lk-navy-200) !important; box-shadow: none !important; }
html body #view#view#view td.lk-st .lk-b.lk-soft:hover { background: #e7eef8 !important; }
html body #view#view#view td.lk-st .lk-b:disabled { opacity: .55; cursor: default; transform: none; }
html body #view#view#view td.lk-st select.lk-b { background-color: #fff !important; }

/* filters: every chip row on one line (scrolls sideways when long), compact chips, branded active chip */
html body #view#view#view .cfx-filters { grid-template-columns: 150px minmax(0, 1fr) !important; gap: 8px 12px !important; padding: 14px 16px !important; }
html body #view#view#view .cfx-chip-row, html body #view#view#view .ol-filter-chips, html body #view#view#view .sc-lf-chips, html body #view#view#view .company-chip-set {
  flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; padding-bottom: 0;
}
html body #view#view#view .cfx-chip-row button, html body #view#view#view .ol-filter-chip, html body #view#view#view .sc-lf-chip, html body #view#view#view .company-chip {
  flex: none !important; min-height: 30px !important; height: 30px !important; padding: 0 11px !important; font-size: 12px !important; border-radius: 999px !important; white-space: nowrap !important;
}
html body #view#view#view .cfx-chip-label, html body #view#view#view .sc-lf-label { min-height: 30px !important; font-size: 10.5px !important; }
html body #view#view#view .cfx-chip-row button.is-active, html body #view#view#view .ol-filter-chip.active, html body #view#view#view .sc-lf-chip.is-active, html body #view#view#view .company-chip.active {
  background: linear-gradient(135deg, #15bfcd 0%, #0a8fa0 100%) !important; border-color: #0a97a8 !important; color: #fff !important; box-shadow: 0 2px 8px -4px rgba(10, 143, 160, .7) !important;
}

/* pagination and segmented switches */
html body #view#view#view .pagination-page.active, html body #view#view#view [class*="pagination"] button.active, html body #view#view#view [class*="pagination"] button[aria-current="page"] {
  background: var(--lk-navy) !important; border-color: var(--lk-navy) !important; color: #fff !important;
}

/* page header cards: clean white with a cyan accent */
html body #view#view#view .sc-confirmed-head, html body #view#view#view .scwf-head, html body #view#view#view .sc-ql-head, html body #view#view#view .ol-head, html body #view#view#view .client-requests-page > header, html body #view#view#view .cf-head {
  background: linear-gradient(120deg, #ffffff 0%, #f1fbfd 100%) !important; border: 1px solid #dcedf1 !important; border-left: 4px solid var(--lk-cyan) !important; border-radius: 14px !important;
}

/* inputs: cyan focus ring */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):focus,
html body select:focus, html body textarea:focus { border-color: var(--lk-cyan) !important; box-shadow: 0 0 0 3px rgba(11, 184, 200, .18) !important; }

@media (prefers-reduced-motion: reduce) { html body #view#view#view td.lk-st .lk-b { transition: none; transform: none !important; } }

/* icon buttons (comments / history / cancel): keep their own centred layout so the icon always shows */
html body .ox-hist, html body .ox-cmt, html body .ox-cancel { display: inline-grid !important; place-items: center !important; padding: 0 !important; line-height: 1 !important; }
html body .ox-hist::before, html body .ox-cmt::before, html body .ox-cancel::before { display: block !important; content: "" !important; }

/* Packages: on screens narrower than 1100px the list sits above the table and the table scrolls inside its own frame (no sideways page scroll) */
@media (max-width: 1100px) { html body #view#view#view .pm-layout { grid-template-columns: minmax(0, 1fr) !important; } }
html body #view#view#view .pm-layout > *, html body #view#view#view .pm-main, html body #view#view#view .pm-main .pm-panel { min-width: 0 !important; max-width: 100% !important; }


/* ===== v4 (2026-10-21): icons beside stacked status buttons + one colour theme for every button ===== */
html body #view#view#view td.lk-st.lk-side.lk-rel{position:relative!important}
html body #view#view#view td.lk-side .ox-icons{position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;flex-direction:column!important;gap:4px!important;margin:0!important;padding:0!important;width:auto!important}
html body #view#view#view td.lk-side .lk-col,html body #view#view#view td.lk-side .ol-actions{position:relative}
html body #view#view#view td.lk-side .lk-b,html body #view#view#view td.lk-side .sc-ql-status{max-width:calc(100% - 36px)!important;margin-right:36px!important;margin-left:0!important}

/* text buttons on pages and in pop-ups */
html body .lk-pb{border-radius:8px!important;font-weight:700!important;letter-spacing:.01em;transition:background .15s,box-shadow .15s,transform .15s;box-shadow:none}
html body .lk-pb.lk-primary,html body #view#view#view .lk-pb.lk-primary{background:linear-gradient(135deg,#15bfcd,#0a8fa0)!important;color:#fff!important;border:1px solid #0a97a8!important}
html body .lk-pb.lk-primary:hover{background:linear-gradient(135deg,#12b0bd,#087f8f)!important;box-shadow:0 4px 12px rgba(10,143,160,.25)!important}
html body .lk-pb.lk-soft,html body #view#view#view .lk-pb.lk-soft{background:#f2f6fb!important;color:#0b3868!important;border:1px solid #d3e0ed!important}
html body .lk-pb.lk-soft:hover{background:#e6eef7!important;border-color:#b9cde2!important}
html body .lk-pb.lk-danger,html body #view#view#view .lk-pb.lk-danger{background:#fff5f5!important;color:#c0262d!important;border:1px solid #f5c6c8!important}
html body .lk-pb.lk-danger:hover{background:#ffe9ea!important}
html body .lk-pb:disabled{opacity:.55!important;cursor:not-allowed}
html body .lk-pb *{color:inherit}

/* small edit pencils and column-filter buttons */
html body #view#view#view .sc-cprice-edit,html body #view#view#view .scfx-flag-edit{color:#0a8fa0!important;background:#effafc!important;border:1px solid #c8e8ee!important;border-radius:6px!important}
html body #view#view#view .sc-cf-btn{background:#fff!important;color:#0b3868!important;border:1px solid #d3e0ed!important;border-radius:6px!important;background-image:none!important}
html body #view#view#view .sc-cf-btn.active,html body #view#view#view .sc-cf-btn.is-active,html body #view#view#view .sc-cf-btn[aria-pressed="true"]{background:linear-gradient(135deg,#15bfcd,#0a8fa0)!important;color:#fff!important;border-color:#0a97a8!important}

/* chips, tabs and segments: white with navy text, active = cyan */
html body #view#view#view [class*="chip"]:not(td):not(tr):not(table):not([class*="row"]):not([class*="set"]):not([class*="chips"]){background:#fff;color:#0b3868;border-color:#d3e0ed}
html body #view#view#view button[class*="chip"].active,html body #view#view#view button[class*="chip"].is-active,html body #view#view#view [class*="filter-chip"].active,html body #view#view#view [class*="filter-chip"].is-active,html body #view#view#view [class*="tab"].active:is(button,a),html body #view#view#view [class*="tab"].is-active:is(button,a),html body #view#view#view [class*="seg"] button.active,html body #view#view#view [role="tab"][aria-selected="true"],html body #view#view#view .btn-group button.active,html body #view#view#view button.active:not(.lk-b){background:linear-gradient(135deg,#15bfcd,#0a8fa0)!important;color:#fff!important;border-color:#0a97a8!important;box-shadow:0 3px 10px rgba(10,143,160,.22)!important}
html body #view#view#view button[class*="chip"].active *,html body #view#view#view button.active:not(.lk-b) *{color:inherit!important}

/* pop-ups */
html body .lk-modal [class*="modal"]>header,html body .lk-modal [class*="head"]:first-child{border-bottom-color:#e3eef2}
html body .lk-modal input:focus,html body .lk-modal select:focus,html body .lk-modal textarea:focus{border-color:#15bfcd!important;box-shadow:0 0 0 3px rgba(21,191,205,.18)!important;outline:none!important}

/* pagination and small comment pencils in the same navy / cyan */
html body #view#view#view .cfx-pagination button:not(.active),html body #view#view#view [class*="pagination"] button:not(.active),html body #view#view#view [class*="pager"] button:not(.active),html body #view#view#view div:has(> button.active) > button:not(.active):not(.lk-b){background:#fff!important;color:#0b3868!important;border:1px solid #d3e0ed!important;border-radius:8px!important}
html body #view#view#view .cfx-pagination button:not(.active):not(:disabled):hover,html body #view#view#view div:has(> button.active) > button:not(.active):not(.lk-b):not(:disabled):hover{background:#effafc!important;border-color:#9fdbe3!important}
html body #view#view#view .sc-confirmed-comment-button,html body #view#view#view .sc-pencil-comment{background:#effafc!important;color:#0a8fa0!important;border:1px solid #c8e8ee!important;border-radius:6px!important}

/* package names stay inside their cell (an older nth-child rule now lands on Package after the Category column was added) */
html body #view#view#view table td[data-label="Package"]{overflow:hidden!important;text-overflow:ellipsis!important}

/* workflow page headers (Pickup / Barcodes / Postponed / Cancelled): layout lives here too, so the card never collapses when the page's own style block is late or missing */
html body #view#view#view .scwf-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;padding:16px 20px 16px 22px!important;border:1px solid #d3e6ee!important;border-left:4px solid #15bfcd!important;border-radius:14px!important;background:linear-gradient(120deg,#ffffff,#f1fbfd)!important;box-shadow:0 4px 14px rgba(11,56,104,.05)!important;margin-bottom:14px}
html body #view#view#view .scwf-head > div:first-child{min-width:0}
html body #view#view#view .scwf-head h1{margin:2px 0 4px!important;font-size:22px!important;line-height:1.2!important;color:#0b3868!important}
html body #view#view#view .scwf-head p{margin:0!important;color:#5b6f80!important;font-size:13px!important}
html body #view#view#view .scwf-kicker{font-weight:900!important;font-size:11px!important;letter-spacing:.13em!important;color:#0a8fa0!important;text-transform:uppercase}
html body #view#view#view .scwf-count{flex:0 0 auto!important;display:grid!important;place-items:center!important;min-width:72px!important;height:56px!important;padding:0 14px!important;background:#fff!important;border:1px solid #c8e8ee!important;border-radius:12px!important;font-size:24px!important;font-weight:900!important;color:#0b3868!important}
@media (max-width:640px){html body #view#view#view .scwf-head{padding:12px 14px!important;gap:10px!important}html body #view#view#view .scwf-head h1{font-size:18px!important}html body #view#view#view .scwf-count{min-width:56px!important;height:46px!important;font-size:20px!important}}

/* the other page header cards get the same built-in layout and the same compact padding */
html body #view#view#view .ol-head,html body #view#view#view .sc-confirmed-head,html body #view#view#view .sc-ql-head{display:flex!important;justify-content:space-between!important;gap:16px!important;padding:16px 20px 16px 22px!important}
html body #view#view#view .ol-head,html body #view#view#view .sc-ql-head{align-items:flex-start!important}
html body #view#view#view .sc-confirmed-head{align-items:center!important}
html body #view#view#view .ol-head > div:first-child,html body #view#view#view .sc-confirmed-head > div:first-child,html body #view#view#view .sc-ql-head > div:not([class]){min-width:0}
@media (max-width:640px){html body #view#view#view .ol-head,html body #view#view#view .sc-confirmed-head,html body #view#view#view .sc-ql-head,html body #view#view#view .scwf-head{flex-wrap:wrap!important;padding:12px 14px!important}}

/* count badges inside an active chip: translucent white pill, white number */
html body #view#view#view button[class*="chip"].active > :is(b,small,em,strong,i,[class*="count"]),html body #view#view#view button[class*="chip"].is-active > :is(b,small,em,strong,i,[class*="count"]),html body #view#view#view button.active:not(.lk-b) > :is(b,small,em,strong,[class*="count"]){background:rgba(255,255,255,.24)!important;color:#fff!important;border-color:transparent!important}

/* side menu text 0.5px smaller (2026-10-21) */
html body aside.sidebar.sidebar.sidebar .side-main > b,html body aside.sidebar.sidebar.sidebar .client-request-title > strong{font-size:14.5px!important}
html body aside.sidebar.sidebar.sidebar .side-client-menu button > strong.submenu-label{font-size:13px!important}
html body aside.sidebar.sidebar.sidebar .side-client-menu button > span:not(.sub-icon){font-size:11.5px!important}
html body aside.sidebar.sidebar.sidebar .client-request-title > span{font-size:11.5px!important}
html body aside.sidebar.sidebar.sidebar .cf-group > .client-request-title > span,html body aside.sidebar.sidebar.sidebar .side-main > .msx-navcount{font-size:10.5px!important}
html body aside.sidebar.sidebar.sidebar .nav > .sc-nav-label{font-size:10px!important}
html body aside.sidebar.sidebar.sidebar .side-bottom > b{font-size:12.5px!important}

/* side menu counts 0.5px smaller too */
#root#root#root .app .sidebar.sidebar :is([id$="-count"],[data-ongoing-count],[data-cf-count],[data-cf-total]),#root#root#root .app .sidebar.sidebar .side-client-menu button > span:not(.sub-icon){font-size:11.5px!important}
#root#root#root .app .sidebar.sidebar .cf-group > .client-request-title > span:not(.menu-icon):not(.sub-icon),#root#root#root .app .sidebar.sidebar .cf-group > .client-request-title > [data-cf-total]{font-size:10.5px!important}

/* filter chips everywhere: one shape, count shown as a small pill badge (2026-10-21) */
html body #view#view#view button:is([class*="chip"],.company-chip){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;height:32px!important;padding:0 6px 0 13px!important;border-radius:999px!important;font-size:12.5px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;background:#fff;color:#0b3868;border:1px solid #d3e0ed!important;transition:background .15s,border-color .15s,box-shadow .15s}
html body #view#view#view button:is([class*="chip"],.company-chip):not(:has(> :is(b,small,[class*="count"]))){padding:0 13px!important}
html body #view#view#view button:is([class*="chip"],.company-chip):not(.active):not(.is-active):hover{background:#effafc!important;border-color:#9fdbe3!important}
html body #view#view#view button:is([class*="chip"],.company-chip) > :is(b,small,[class*="count"]){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:22px!important;height:20px!important;padding:0 7px!important;margin:0!important;border:0!important;border-radius:999px!important;background:#e6f5f8!important;color:#0a7f8f!important;font-size:11px!important;font-weight:800!important;line-height:1!important;box-shadow:none!important}
html body #view#view#view button:is([class*="chip"],.company-chip):is(.active,.is-active) > :is(b,small,[class*="count"]){background:rgba(255,255,255,.26)!important;color:#fff!important}
html body #view#view#view button:is([class*="chip"],.company-chip):is(.active,.is-active){border-color:#0a97a8!important}

/* every button, field and chip uses the app font (company chips were falling back to the narrow system font) */
html body #view#view#view :is(button,select,input,textarea),html body .lk-modal :is(button,select,input,textarea){font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif!important}
html body #view#view#view button:is([class*="chip"],.company-chip){font-weight:600!important;letter-spacing:.01em!important}

/* chip rows wrap onto a second line instead of showing a sideways scrollbar (2026-10-21) */
html body #view#view#view :is(div,nav,section):has(> button:is([class*="chip"],.company-chip)){flex-wrap:wrap!important;overflow-x:visible!important;overflow-y:visible!important;max-height:none!important;row-gap:6px!important}

html body #view#view#view :is(div,nav,section).lk-chips-clamp.lk-chips-clamp.lk-chips-clamp{max-height:72px!important;overflow:hidden!important}
html body #view#view#view .lk-more-toggle{display:inline-flex;align-items:center;height:26px;margin:6px 0 0;padding:0 12px;border-radius:999px;border:1px dashed #9fdbe3;background:#f4fcfd;color:#0a8fa0;font:700 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
html body #view#view#view .lk-more-toggle:hover{background:#e6f7fa;border-style:solid}
html body #view#view#view .lk-more-toggle{grid-column:-2 / -1;justify-self:start;align-self:start;width:auto!important;margin-top:-2px!important}

/* other content in a side-icon cell keeps clear of the icon column */
html body #view#view#view td.lk-side > :not(.ox-icons):not(:has(.ox-icons)):not(.lk-b){margin-right:34px!important;max-width:calc(100% - 34px)!important}

/* button polish pass (2026-10-21) */
html body .lk-pb{white-space:nowrap!important;flex-shrink:0}
html body #view#view#view .sc-confirmed-filter-search > .lk-pb,html body #view#view#view [class*="filter-search"] > button{min-width:max-content!important;padding:0 14px!important}
html body #view#view#view .sc-phone-flag{white-space:normal!important;display:block!important;width:fit-content!important;margin:3px auto 2px!important;padding:2px 7px!important;border-radius:6px!important;font-size:10.5px!important;line-height:1.3!important;max-width:100%!important}
html body #view#view#view .scfx-flag-edit,html body #view#view#view .sc-cprice-edit{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:22px!important;padding:0 9px!important;margin:2px auto 0!important;text-decoration:none!important;font-size:11px!important;font-weight:700!important;line-height:1!important;cursor:pointer}
html body #view#view#view .sc-cprice-edit{padding:0 6px!important;min-width:22px}
html body #view#view#view .scfx-flag-edit:hover,html body #view#view#view .sc-cprice-edit:hover{background:#dff4f8!important;border-color:#9fdbe3!important}

/* Confirmed filter panel: label | search box | buttons on one line */
html body #view#view#view .cfx-chip-actions{display:grid!important;grid-template-columns:150px minmax(0,1fr) auto auto!important;gap:10px 12px!important;align-items:center!important}
html body #view#view#view .cfx-chip-actions .cfx-search-label input{grid-column:2!important;grid-row:1!important;height:40px!important}
html body #view#view#view .cfx-chip-actions .cfx-search-label .cfx-chip-label{grid-column:1!important;grid-row:1!important}
html body #view#view#view .cfx-chip-actions > button:not(.cfx-chip-clear){grid-column:3!important}
html body #view#view#view .cfx-chip-actions > .cfx-chip-clear{grid-column:4!important}
html body #view#view#view .cfx-chip-actions > button{grid-row:1!important;height:40px!important;min-height:0!important;white-space:nowrap!important}
html body #view#view#view .cfx-chip-label{display:flex!important;align-items:center!important;min-height:32px!important;padding:0!important;background:none!important;color:#0b3868!important;font-size:11px!important;letter-spacing:.06em!important}
@media (max-width:820px){html body #view#view#view .cfx-chip-actions{grid-template-columns:1fr 1fr!important}html body #view#view#view .cfx-chip-actions .cfx-search-label input{grid-column:1 / -1!important}html body #view#view#view .cfx-chip-actions > button{grid-row:auto!important;grid-column:auto!important}html body #view#view#view .cfx-chip-actions .cfx-search-label .cfx-chip-label{grid-column:1 / -1!important}}


/* ===== Dashboard layout rules restored from sc-theme.css sections 41–43 (2026-10-21) =====
   The old sections 01–03 hide as soon as the new header starts loading (no flash of the old layout);
   if the header cannot load it removes itself and the old sections come back. */
#root#root#root .app #view:has(> .scd) > .ops-step { display: none !important; }
#root#root#root .app #view > .scd { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; display: grid; gap: 16px; }
#root#root#root .app #view .scd .scd-head h2 { margin: 2px 0 2px; font-size: 24px !important; font-weight: 700 !important; color: #0b3868 !important; }
#root#root#root .app #view .scd .scd-range button { min-height: 32px !important; padding: 0 14px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #4e5f6b !important; font-weight: 600 !important; font-size: 13.5px !important; }
#root#root#root .app #view .scd .scd-range button.active { background: linear-gradient(135deg,#15bfcd,#0a8fa0) !important; color: #fff !important; }
#root#root#root .app #view .scd .scd-card-h h3 { margin: 0; font-size: 16px !important; font-weight: 700 !important; color: #0b3868 !important; }
#root#root#root .app #view .scd .scd-att { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px; height: auto !important; min-height: 64px !important; padding: 10px 12px !important; border: 1px solid #e6edf1 !important; border-left: 4px solid var(--c) !important; border-radius: 10px !important; background: #fff !important; color: #4e5f6b !important; text-align: left; white-space: normal !important; }
#root#root#root .app #view .scd .scd-att:hover { background: #f7fbfc !important; border-color: #d6eef2 !important; border-left-color: var(--c) !important; }
#root#root#root .app #view:has(#adm-ins) .recent-panel { display: none !important; }
#root#root#root .app #view > .sct { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important; display: grid; gap: 12px; }
#root#root#root .app #view .sct .sct-head h2 { margin: 2px 0 0; font-size: 24px !important; font-weight: 700 !important; color: #0b3868 !important; }
#root#root#root .app #view .sct .sct-refresh { min-height: 32px !important; padding: 0 12px !important; border: 1px solid #e6edf1 !important; border-radius: 999px !important; background: #fff !important; color: #5f6f7a !important; font-size: 12.5px !important; font-weight: 600 !important; }
#root#root#root .app #view .sct .sct-refresh:hover { border-color: #0bb8c8 !important; color: #087a8a !important; }
#root#root#root .app #view .sct .sct-card h3 { margin: 0 0 12px; font-size: 16px !important; font-weight: 700 !important; color: #0b3868 !important; }
#root#root#root .app #view .sct table.sct-table { width: 100%; border-collapse: collapse !important; font-size: 14px !important; }
#root#root#root .app #view .sct table.sct-table th { background: #f7fafb !important; color: #5f6f7a !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; padding: 0 12px !important; height: 38px; text-align: left !important; border-bottom: 1px solid #e6edf1 !important; }
#root#root#root .app #view .sct table.sct-table td { padding: 8px 12px !important; height: 44px; border-bottom: 1px solid #eef2f5 !important; text-align: left !important; font-weight: 600 !important; color: #0b3868 !important; }
#root#root#root .app #view .sct table.sct-table td:not(:first-child), #root#root#root .app #view .sct table.sct-table th:not(:first-child) { text-align: center !important; }
#root#root#root .app #view .sct td.sct-none { text-align: center !important; color: #8a98a3 !important; font-weight: 500 !important; }

/* Dashboard switch placeholder (see sc-look.js): old sections 01-03 never flash while the new header loads */
html body #view.lk-dash-wait > .ops-step,html body #view.lk-dash-wait > .panel,html body #view.lk-dash-wait > .recent-panel{display:none!important}
html body #view.lk-dash-wait::before{content:"";display:block;height:230px;margin:0 0 16px;border-radius:16px;border:1px solid #e3eef2;background:linear-gradient(100deg,#f4f9fb 30%,#eaf5f8 50%,#f4f9fb 70%) 0 0/200% 100%;animation:lkShimmer 1.2s linear infinite}
@keyframes lkShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){html body #view.lk-dash-wait::before{animation:none}}