/* DRP Look - Phase 1. Loaded LAST in base.html so it overrides the existing theme. */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Michroma&family=Roboto:wght@400;500;700&display=swap');

:root {
    --lds-black: #121212;
    --lds-cyan: #00FFFF;
    --lds-cyan-work: #00C8D7;
    --lds-blue: #007BFF;
    --table-head: #1E2329;
    --page-bg: #F4F6F8;
    --card-border: #E3E7EB;
    --status-green: #28A745;
    --status-amber: #F0AD00;
    --status-red: #DC3545;
    --font-title: 'Michroma', sans-serif;
    --font-ui: 'Exo 2', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

/* ---------- Base ---------- */
body, .content { font-family: var(--font-body); background: var(--page-bg); }
a { color: var(--lds-blue); }
h1, .page-header { font-family: var(--font-title); font-weight: 400; font-size: 22px; color: var(--lds-black); }
.page-header small { font-family: var(--font-body); }
.panel-title, .panel-heading h4, .widget h4 { font-family: var(--font-ui); font-weight: 600; }

/* ---------- Top bar ---------- */
.top-menu { background: var(--lds-black) !important; border-bottom: 1px solid #000; }
.top-menu .nav { display: flex; align-items: center; }
.top-menu .nav > li > a {
    font-family: var(--font-ui); font-weight: 500; color: #fff !important;
    background: transparent !important; border-bottom: 3px solid transparent;
}
.top-menu .nav > li:hover > a { color: var(--lds-cyan) !important; }
.top-menu .nav > li.active > a { border-bottom-color: var(--lds-cyan); color: #fff !important; }
.top-menu .nav > li.drp-brand { margin-right: 24px; }
.top-menu .nav > li.drp-brand > a { padding: 0; border: 0; }
.top-menu .nav > li.drp-brand img { height: 28px; width: auto; display: block; margin: 6px 0; }
.top-menu .sub-menu { background: var(--lds-black) !important; border: 1px solid #2a2a2a; }
.top-menu .sub-menu > li > a { font-family: var(--font-ui); color: #fff !important; background: transparent !important; }
.top-menu .sub-menu > li > a:hover { color: var(--lds-cyan) !important; }
.top-menu .label-theme, .label-theme { background: var(--lds-blue) !important; color: #fff; }

/* ---------- Buttons ---------- */
.btn-success, .btn-primary, .btn-info, .btn-warning:not(.btn-xs.btn-icon) {
    background: var(--lds-cyan-work) !important; border-color: var(--lds-cyan-work) !important;
    color: var(--lds-black) !important; font-family: var(--font-ui); font-weight: 600;
}
.btn-success:hover, .btn-primary:hover, .btn-info:hover { background: #00AEBB !important; border-color: #00AEBB !important; }
/* Type Enforcement "Enforce all suggested types": amber while jobs run, LDS teal (the rule above) when it can be used.
   That rule turns every warning button teal too, so amber has to be more specific. */
#btn-enforce-all-suggested.btn-warning { background: var(--status-amber) !important; border-color: var(--status-amber) !important; color: var(--lds-black) !important; }
.btn-danger { background: var(--status-red) !important; border-color: var(--status-red) !important; color: #fff !important; font-family: var(--font-ui); font-weight: 600; }
.btn-default { font-family: var(--font-ui); }

/* ---------- Cards / panels ---------- */
.panel { background: #fff; border: 1px solid var(--card-border); border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.panel-heading, .panel-inverse > .panel-heading { background: var(--table-head) !important; color: #fff !important; border-radius: 5px 5px 0 0; }
.panel-heading .panel-title { color: #fff !important; }

/* ---------- Dashboard tiles: white cards, cyan icon, thin coloured edge ---------- */
.widget.widget-stats {
    background: #fff !important; color: var(--lds-black) !important;
    border: 1px solid var(--card-border); border-left: 4px solid var(--lds-cyan-work);
    border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.widget.widget-stats .stats-icon { color: var(--lds-cyan-work) !important; }
.widget.widget-stats .stats-info h4 { color: #5b6670 !important; font-size: 13px; text-transform: none; }
.widget.widget-stats .stats-info p { color: var(--lds-black) !important; font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.widget.widget-stats.bg-green  { border-left-color: var(--status-green); }
.widget.widget-stats.bg-red    { border-left-color: var(--status-red); }
.widget.widget-stats.bg-orange { border-left-color: var(--status-amber); }
.widget.widget-stats.bg-blue   { border-left-color: var(--lds-blue); }
.widget.widget-stats.bg-purple { border-left-color: var(--lds-cyan-work); }
.bg-purple, .bg-aqua, .bg-teal { background: var(--lds-cyan-work) !important; }

/* ---------- Tables ---------- */
table, .table, .dataTable { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
/* Coloured column headers on the pattern pages (dp-* / pf-*: sorted, filtered, total) keep their meaning colours */
.table > thead > tr > th:not([class*="dp-"]):not([class*="pf-"]),
table.dataTable thead th:not([class*="dp-"]):not([class*="pf-"]),
.dataTables_scrollHead th:not([class*="dp-"]):not([class*="pf-"]),
#data-table thead th:not([class*="dp-"]):not([class*="pf-"]),
#data-table thead td:not([class*="dp-"]):not([class*="pf-"]) {
    background: var(--table-head) !important; background-color: var(--table-head) !important;
    color: #fff !important; border-color: #2d343c !important;
}

/* ---------- Alerts ---------- */
.alert { border-radius: 4px; font-family: var(--font-body); }
.alert-danger { background: #FDECEE; border-color: #F5C2C7; color: #842029; }
.alert-warning { background: #FFF8E1; border-color: #F5E2A0; color: #6b5200; }
.alert-info { background: #E7F1FF; border-color: #B6D4FE; color: #084298; }
.alert-success { background: #E8F5EC; border-color: #B7DFC2; color: #14532d; }

/* ---------- Step bars: current cyan, done ticked, later grey ---------- */
.nav-wizards-1 > li > a, .nav-pills > li > a, .bwizard-steps li { font-family: var(--font-ui); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover,
.bwizard-steps li.active, .bwizard-steps li.active:hover { background: var(--lds-cyan-work) !important; color: var(--lds-black) !important; }
.nav-pills > li > a, .bwizard-steps li { background: #E3E7EB; color: #6b7680; }
.nav-pills > li.done > a::before, .bwizard-steps li.done::before, .bwizard-steps li.completed::before { content: "\2713\00a0"; }

/* ---------- Login ---------- */
.drp-login { min-height: 100vh; background: var(--lds-black); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); }
.drp-login-box { width: 100%; max-width: 380px; padding: 24px; text-align: center; }
.drp-login-box img.drp-logo { width: 220px; max-width: 100%; margin-bottom: 28px; }
.drp-login-box h1 { font-family: var(--font-title); font-weight: 400; color: #fff; font-size: 34px; margin: 0 0 6px; letter-spacing: 2px; }
.drp-login-box .drp-sub { font-family: var(--font-ui); color: #9aa5b0; margin-bottom: 28px; letter-spacing: 1px; }
.drp-login-box .form-control { background: #1c1f24; border: 1px solid #333a42; color: #fff; height: 46px; border-radius: 4px; }
.drp-login-box .form-control::placeholder { color: #7d8893; }
.drp-login-box .form-control:focus { border-color: var(--lds-cyan); box-shadow: 0 0 0 1px var(--lds-cyan); }
.drp-login-box .btn-login { background: var(--lds-cyan); border: 0; color: var(--lds-black); font-family: var(--font-ui); font-weight: 700; height: 46px; border-radius: 4px; width: 100%; }
.drp-login-box .btn-login:hover { background: #5dffff; }
.drp-login-box .alert-danger { background: #2a1517; border: 1px solid #7a2a31; color: #ffb3b9; text-align: left; }
.drp-login-box .alert-danger .close { color: #ffb3b9; opacity: .8; }

/* ---------- Beat the old inline purple/teal rules in base.html ---------- */
li.has-sub.active, li.has-sub.active > a, .top-menu .nav > li.has-sub.active > a { background: transparent !important; }
.top-menu .nav > li.has-sub.active > a { border-bottom: 3px solid var(--lds-cyan); }
ol.bwizard-steps li.active, ol.bwizard-steps li:hover.active { background: var(--lds-cyan-work) !important; color: var(--lds-black) !important; }
ol.bwizard-steps li { background: #E3E7EB !important; color: #6b7680; font-family: var(--font-ui); }
.btn.btn-success { background: var(--lds-cyan-work) !important; }
.widget.widget-stats .stats-icon, .widget.widget-stats .stats-icon i { color: var(--lds-cyan-work) !important; opacity: 1 !important; }

/* ---------- Type Enforcement: rows open on double-click; no purple row highlight ---------- */
#data-pte-table-transactions tbody tr { cursor: pointer; }
.table-hover > tbody > tr.active > td { background-color: #D9F7FA; }

/* ---------- Dark mode (toggle in the top bar; light is the default) ---------- */
html[data-theme="dark"] body, html[data-theme="dark"] .content, html[data-theme="dark"] #page-container { background: #0E1013; color: #E6E9ED; }
html[data-theme="dark"] h1, html[data-theme="dark"] .page-header, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] label { color: #E6E9ED; }
html[data-theme="dark"] a { color: #4DA3FF; }
html[data-theme="dark"] .breadcrumb { background: transparent; }
html[data-theme="dark"] .breadcrumb > li, html[data-theme="dark"] .breadcrumb > .active { color: #9aa5b0; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-body, html[data-theme="dark"] .modal-content {
    background: #181B20; border-color: #2A2F36; color: #E6E9ED; }
html[data-theme="dark"] .widget.widget-stats { background: #181B20 !important; border-top-color: #2A2F36; border-right-color: #2A2F36; border-bottom-color: #2A2F36; }
html[data-theme="dark"] .widget.widget-stats .stats-info h4 { color: #9aa5b0 !important; }
html[data-theme="dark"] .widget.widget-stats .stats-info p { color: #fff !important; }
html[data-theme="dark"] .table, html[data-theme="dark"] table { color: #E6E9ED; background-color: transparent; }
html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th { border-color: #2A2F36; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: #20252C; }
html[data-theme="dark"] .table-hover > tbody > tr.active > td { background-color: #0F4A50; }
/* meaning colours keep their light fills, so keep dark text on them */
html[data-theme="dark"] td[class*="dp-"], html[data-theme="dark"] td[class*="pf-"], html[data-theme="dark"] td[style*="background"],
html[data-theme="dark"] .dp-chip { color: #1b1b1b; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] select, html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=text] { background: #1c1f24; border-color: #333a42; color: #fff; }
html[data-theme="dark"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length, html[data-theme="dark"] .dataTables_filter { color: #C5CBD3; }
html[data-theme="dark"] .pagination > li > a { background: #181B20; border-color: #2A2F36; color: #E6E9ED; }
html[data-theme="dark"] .pagination > .active > a { background: var(--lds-cyan-work); border-color: var(--lds-cyan-work); color: var(--lds-black); }
html[data-theme="dark"] .alert-danger { background: #2a1517; border-color: #7a2a31; color: #ffb3b9; }
html[data-theme="dark"] .alert-warning { background: #2b2410; border-color: #6b5a1d; color: #f3dd8a; }
html[data-theme="dark"] .alert-info { background: #10243d; border-color: #1d4a7c; color: #a9cdf7; }
html[data-theme="dark"] .alert-success { background: #112a1a; border-color: #1f5a33; color: #a6e0b8; }
html[data-theme="dark"] ol.bwizard-steps li:not(.active) { background: #232830 !important; color: #8a95a1; }
html[data-theme="dark"] .flot-tick-label, html[data-theme="dark"] .flot-text { color: #9aa5b0 !important; }
html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-inverse > .panel-heading { border-bottom: 1px solid #2A2F36; }

/* ---------- Theme toggle button (top bar) ---------- */
.top-menu .nav > li.drp-theme-toggle { margin-left: auto; }
.top-menu .nav > li.drp-theme-toggle > a { cursor: pointer; border-bottom: 3px solid transparent; }

/* ---------- Login: show / hide password ---------- */
.drp-pw { position: relative; }
.drp-pw .form-control { padding-right: 46px; }
.drp-pw-toggle { position: absolute; right: 0; top: 0; height: 46px; width: 46px; background: transparent; border: 0; color: #9aa5b0; cursor: pointer; }
.drp-pw-toggle:hover, .drp-pw-toggle:focus { color: var(--lds-cyan); outline: none; }

/* ---------- Dark mode: table rows follow the dark card (meaning-colour cells are left alone) ---------- */
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent !important; }
html[data-theme="dark"] .table > tbody > tr > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]),
html[data-theme="dark"] table.dataTable tbody td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]) {
    background-color: transparent; color: #E6E9ED; }
html[data-theme="dark"] .table > tbody > tr:hover > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]) { background-color: #20252C; }
html[data-theme="dark"] .table > tbody > tr.active > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]) { background-color: #0F4A50; }
html[data-theme="dark"] .btn-default { background: #2A2F36; border-color: #3a414a; color: #E6E9ED; }

/* ---------- Notes and errors: neutral card with a coloured edge (meaning kept: amber = note, red = error) ---------- */
.alert { border: 1px solid var(--card-border); border-left-width: 4px; }
.alert-warning { background: #FFFBEA; border-color: #F0E3B0; border-left-color: var(--status-amber); color: #4d3f00; }
.alert-danger  { border-left-color: var(--status-red); }
.alert .close { opacity: .5; text-shadow: none; }
html[data-theme="dark"] .alert-warning { background: #1c1a14; border-color: #2f2b1c; border-left-color: var(--status-amber); color: #F2E4AE; }
html[data-theme="dark"] .alert-danger  { background: #221416; border-color: #3a2023; border-left-color: var(--status-red); color: #ffc2c7; }
html[data-theme="dark"] .alert .close { color: #fff; }
html:not([data-theme="dark"]) .alert-warning { background: #FFFBEA !important; color: #00758A !important; }

/* ---------- Dark mode: hover/selected rows, legends ---------- */
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table > tbody > tr:hover { background-color: #20252C !important; }
html[data-theme="dark"] .table > tbody > tr:hover > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]),
html[data-theme="dark"] .table-hover > tbody > tr:hover > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]) { background-color: #20252C !important; color: #fff !important; }
html[data-theme="dark"] .table > tbody > tr.active > td:not([class*="dp-"]):not([class*="pf-"]):not([style*="background"]) { background-color: #0F4A50 !important; }
html[data-theme="dark"] legend { color: #E6E9ED; border-bottom-color: #2A2F36; }
legend { font-family: var(--font-ui); font-weight: 600; }

/* ---------- Note text in the cyan-blue family ---------- */
.alert-warning, .alert-warning strong { color: #00758A !important; }
html[data-theme="dark"] .alert-warning, html[data-theme="dark"] .alert-warning strong { color: var(--lds-cyan) !important; }

/* ---------- Dark mode: Pattern Recognition results (step 5) ---------- */
/* frozen UID column stays opaque so scrolled cells do not show through it */
html[data-theme="dark"] #data-table tbody tr td:first-child { background-color: #181B20 !important; color: #E6E9ED; }
html[data-theme="dark"] #data-table tbody tr:nth-of-type(odd) td:first-child { background-color: #1B1F25 !important; }
html[data-theme="dark"] #data-table tbody tr:hover td:first-child { background-color: #20252C !important; }
/* outlier filter bar */
/* The main pattern box is tinted LDS teal while outliers are on, so it is clear what the others are checked against. */
#outlier-panel select.outlier-main-on { border: 2px solid var(--lds-cyan-work); background-color: #D9F7FA; color: var(--lds-black); font-weight: 600; }
/* the Basis box and the Maximum distance box match the Compare with and Main pattern boxes while outliers are on */
#outlier-panel input.outlier-main-on { border: 2px solid var(--lds-cyan-work); background-color: #D9F7FA; color: var(--lds-black); font-weight: 600; }
html[data-theme="dark"] #outlier-panel input.outlier-main-on { border-color: var(--lds-cyan-work); background-color: #0B3F45; color: #E6FDFF; }
/* main pattern mode: the main pattern's row in the table is shaded like the Main pattern box */
html #data-table tbody tr.oc-mainrow-tr td { background-color: #D9F7FA !important; color: #121212 !important; font-weight: 700; }
html[data-theme="dark"] #data-table tbody tr.oc-mainrow-tr td { background-color: #0B3F45 !important; color: #E6FDFF !important; }
html #data-table tbody tr.oc-mainrow-tr td a.pattern { color: inherit; }
/* a cyan frame round the whole row, like the Main pattern box: top and bottom on every cell, the ends on the first and last */
html #data-table tbody tr.oc-mainrow-tr td { border-top: 2px solid var(--lds-cyan-work) !important; border-bottom: 2px solid var(--lds-cyan-work) !important; }
html #data-table tbody tr.oc-mainrow-tr td:first-child { border-left: 2px solid var(--lds-cyan-work) !important; }
html #data-table tbody tr.oc-mainrow-tr td:last-child { border-right: 2px solid var(--lds-cyan-work) !important; }
html[data-theme="dark"] #outlier-panel select.outlier-main-on { border-color: var(--lds-cyan-work); background-color: #0B3F45; color: #E6FDFF; }
/* Compare with: teal for the main pattern (as the Main pattern box), violet for nearest reference pattern */
#outlier-panel select.outlier-mode-nearest { border: 2px solid #8E6FD0; background-color: #E9E1F7; color: var(--lds-black); font-weight: 600; }
html[data-theme="dark"] #outlier-panel select.outlier-mode-nearest { border-color: #A98BE8; background-color: #2A2145; color: #EFE8FF; }
html[data-theme="dark"] #outlier-panel { background: #181B20; border-color: #2A2F36; color: #E6E9ED; }
html[data-theme="dark"] #outlier-panel label, html[data-theme="dark"] #outlier-panel strong { color: #E6E9ED; }
html[data-theme="dark"] .text-muted { color: #9aa5b0 !important; }
html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] textarea { background: #1c1f24; border-color: #333a42; color: #fff; }
html[data-theme="dark"] .btn-white { background: #2A2F36 !important; border-color: #3a414a !important; color: #E6E9ED !important; }
/* column filter popup */
html[data-theme="dark"] .pf-popup { background: #181B20; border-color: #2A2F36; color: #E6E9ED; box-shadow: 0 6px 16px rgba(0,0,0,.6); }
html[data-theme="dark"] .pf-popup *:not(.btn):not(input) { color: #E6E9ED; }
html[data-theme="dark"] .pf-menu-item:hover { background: #20252C; }
html[data-theme="dark"] .pf-search { background: #1c1f24; border-color: #333a42; color: #fff; }
html[data-theme="dark"] .form-group.checkboxes { border-color: #2A2F36; }
html[data-theme="dark"] .pf-popup hr { border-color: #2A2F36; }
/* table paging buttons */
html[data-theme="dark"] .paginate_button { background: #181B20 !important; border-color: #2A2F36 !important; color: #E6E9ED !important; }
html[data-theme="dark"] .paginate_button.current, html[data-theme="dark"] .paginate_button.active { background: var(--lds-cyan-work) !important; color: var(--lds-black) !important; }
html[data-theme="dark"] .paginate_button.disabled { opacity: .5; }
/* percentage cells: the bar is light blue, the rest dark, so the figure needs to read on both */
html[data-theme="dark"] #data-table tbody td.pf-percent { color: #fff !important; font-weight: 500; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000; }
/* active filter tags keep their amber meaning, with dark text */
html[data-theme="dark"] .pf-chip, html[data-theme="dark"] .pf-chip * { color: #4d3f00 !important; }

/* =====================================================================
   Dark palette for the pattern pages: the same colour families and meanings
   (blue = sorted, amber = filtered, green = totals, outlier families), in deep tones
   so nothing pale sits on the dark page. Light mode keeps the original colours.
   ===================================================================== */

/* ---- Filter popup buttons: cyan, both modes ---- */
.pf-actions button { font-family: var(--font-ui); font-weight: 600; border-radius: 3px; background: transparent; border: 1px solid var(--lds-cyan-work); color: var(--lds-cyan-work); }
.pf-actions button.pf-ok { background: var(--lds-cyan-work); color: var(--lds-black); }
.pf-actions button:disabled { opacity: .4; cursor: not-allowed; }
.pf-actions button:not(:disabled):hover { background: #00AEBB; border-color: #00AEBB; color: var(--lds-black); }
html[data-theme="dark"] .pf-actions button { color: var(--lds-cyan); border-color: var(--lds-cyan); }
html[data-theme="dark"] .pf-actions button.pf-ok { background: var(--lds-cyan); color: var(--lds-black); }
html[data-theme="dark"] .pf-popup .pf-actions button:not(.pf-ok) { color: var(--lds-cyan) !important; }
html[data-theme="dark"] .pf-count, html[data-theme="dark"] .pf-list { color: #9aa5b0; border-color: #2A2F36; }

/* ---- Pattern results (step 5) ---- */
html[data-theme="dark"] #data-table thead td.pf-sorted { background-color: #1F5C8F !important; }
html[data-theme="dark"] #data-table thead td.pf-filtered { background-color: #8A6700 !important; }
html[data-theme="dark"] #data-table thead td.pf-total { background-color: #35552A !important; }
html[data-theme="dark"] #data-table thead td.pf-total:hover { background-color: #416631 !important; }
html[data-theme="dark"] #data-table thead td.pf-total.pf-sorted { background-color: #1F5C8F !important; }
html[data-theme="dark"] #data-table tbody td.pf-count-cell { background-color: #12293F; color: #CFE3F5; }
html[data-theme="dark"] #data-table tbody td.pf-total-cell { background-color: #14281A; color: #B9E0A8; }
html[data-theme="dark"] #data-table tbody td.pf-percent { filter: brightness(.72); }
html[data-theme="dark"] #data-table tbody td[class*="oc-"] { color: #F1F3F5; }
html[data-theme="dark"] #data-table tbody td.oc-green { background: #2F5D2C; }
html[data-theme="dark"] #data-table tbody td.oc-orange { background: #7A4A1E; }
html[data-theme="dark"] #data-table tbody td.oc-purple { background: #4F3F73; }
html[data-theme="dark"] #data-table tbody td.oc-teal { background: #1F6070; }
html[data-theme="dark"] #data-table tbody td.oc-gold { background: #7A6414; }
html[data-theme="dark"] #data-table tbody td.oc-rose { background: #7A3A4F; }
html[data-theme="dark"] #data-table tbody td.oc-olive { background: #50621F; }
html[data-theme="dark"] #data-table tbody td.oc-blue { background: #25598A; }
html[data-theme="dark"] #data-table tbody td.oc-missing { background: #3A3F45; color: #C5CBD3; }
html[data-theme="dark"] #data-table tbody td.oc-main-green { background: #14281A; }
html[data-theme="dark"] #data-table tbody td.oc-main-orange { background: #33200F; }
html[data-theme="dark"] #data-table tbody td.oc-main-purple { background: #231B33; }
html[data-theme="dark"] #data-table tbody td.oc-main-teal { background: #0F2B31; }
html[data-theme="dark"] #data-table tbody td.oc-main-gold { background: #302808; }
html[data-theme="dark"] #data-table tbody td.oc-main-rose { background: #331821; }
html[data-theme="dark"] #data-table tbody td.oc-main-olive { background: #232B12; }
html[data-theme="dark"] #data-table tbody td.oc-main-blue { background: #12293F; }
/* nearest mode: each reference pattern, and the patterns compared with it, share one strong colour (both themes) */
html #data-table tbody td.oc-ref, html[data-theme="dark"] #data-table tbody td.oc-ref { font-weight: bold; color: #111; }
html #data-table tbody td.oc-ref-green, html[data-theme="dark"] #data-table tbody td.oc-ref-green { background: #A9D08E; }
html #data-table tbody td.oc-ref-orange, html[data-theme="dark"] #data-table tbody td.oc-ref-orange { background: #F4B084; }
html #data-table tbody td.oc-ref-purple, html[data-theme="dark"] #data-table tbody td.oc-ref-purple { background: #B1A0C7; }
html #data-table tbody td.oc-ref-teal, html[data-theme="dark"] #data-table tbody td.oc-ref-teal { background: #92CDDC; }
html #data-table tbody td.oc-ref-gold, html[data-theme="dark"] #data-table tbody td.oc-ref-gold { background: #FFD966; }
html #data-table tbody td.oc-ref-rose, html[data-theme="dark"] #data-table tbody td.oc-ref-rose { background: #E6A1B3; }
html #data-table tbody td.oc-ref-olive, html[data-theme="dark"] #data-table tbody td.oc-ref-olive { background: #C4D79B; }
html #data-table tbody td.oc-ref-blue, html[data-theme="dark"] #data-table tbody td.oc-ref-blue { background: #9BC2E6; }
html[data-theme="dark"] #hover-modal { background: #181B20 !important; border: 1px solid #2A2F36 !important; box-shadow: 0 6px 16px rgba(0,0,0,.6); }
html[data-theme="dark"] #hover-modal .morris-hover-row-label { color: #fff !important; }

/* ---- Pattern detail page (by pattern) ---- */
html[data-theme="dark"] #data-table thead th.dp-total { background-color: #35552A !important; }
html[data-theme="dark"] #data-table tbody td.dp-total { background-color: #14281A; color: #B9E0A8; }
html[data-theme="dark"] #data-table tbody td.dp-code { color: #E6E9ED; }
html[data-theme="dark"] #data-table tbody td.dp-zero { color: #6b7680; }
html[data-theme="dark"] .dp-chip { background: #14281A; border-color: #2F5D2C; color: #B9E0A8; }
html[data-theme="dark"] .dp-chip.dp-chip-zero { background: #23272d; border-color: #3a3f45; color: #9aa5b0; }
html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > tbody > tr > td, html[data-theme="dark"] .table-bordered > thead > tr > th { border-color: #2A2F36; }
html[data-theme="dark"] #data-table tbody td.dp-code, html[data-theme="dark"] #data-table tbody td.dp-zero { background-color: transparent !important; }
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background: #181B20 !important; border-color: #2A2F36 !important; color: #E6E9ED !important; }
html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover { background: var(--lds-cyan-work) !important; border-color: var(--lds-cyan-work) !important; color: var(--lds-black) !important; }
html[data-theme="dark"] .pagination > .disabled > a { opacity: .5; }
html:not([data-theme="dark"]) .pagination > .active > a, html:not([data-theme="dark"]) .pagination > .active > span { background: var(--lds-cyan-work) !important; border-color: var(--lds-cyan-work) !important; color: var(--lds-black) !important; }
html[data-theme="dark"] #hover-modal .morris-hover-point { filter: brightness(1.8) saturate(1.2); }

/* ---------- Progress bars: cyan-blue fill on a soft track ---------- */
.progress { background: #E3E7EB; box-shadow: none; border-radius: 4px; }
.progress .progress-bar, .progress .progress-bar-success, .progress .progress-bar-info { background-color: var(--lds-cyan-work) !important; box-shadow: none; }
html[data-theme="dark"] .progress { background: #2A2F36; }

/* "Clear all filters" link: cyan-blue like the other links */
.pf-clear-all { color: #00758A; font-family: var(--font-ui); font-weight: 600; }
.pf-clear-all:hover { color: var(--lds-cyan-work); text-decoration: underline; }
html[data-theme="dark"] .pf-clear-all { color: var(--lds-cyan) !important; }

/* ---------- Column chips (were white text on mid grey): dark chip, cyan text, both modes ---------- */
.label.label-default, .label.label-inverse, .label.label-grey, .badge {
    background-color: var(--table-head); color: var(--lds-cyan); border: 1px solid #2d343c; font-family: var(--font-ui); font-weight: 600;
}

/* ---------- Outlier grade columns (Distance, Match %, label, Size vs main %): dark in dark mode; a dash when not graded ---------- */
html[data-theme="dark"] #data-table tbody td.pf-outlier-cell:not([class*="oc-"]) { background-color: transparent; color: #E6E9ED; }
#data-table tbody td.pf-outlier-cell:empty::before { content: "\2013"; color: #6b7680; }

/* ---------- Outlier colours: one colour, one meaning ---------- */
#data-table tbody td.oc-diff { background: #FF2E93; color: #fff !important; font-weight: 700; }
#data-table tbody td.oc-size-red { background: #D7263D; color: #fff !important; font-weight: 700; text-align: center; }
#data-table tbody td.oc-size-amber { background: #F0A500; color: #1b1b1b !important; font-weight: 700; text-align: center; }
#data-table tbody td.oc-size-green { background: #1FA85A; color: #fff !important; font-weight: 700; text-align: center; }
html[data-theme="dark"] #data-table tbody td.oc-missing { background: #4A4F57; color: #E6E9ED; }
.pf-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; font-family: var(--font-ui); font-size: 13px; }
.pf-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin: 0 4px 0 6px; }
.pf-legend > span > .pf-sw:first-child { margin-left: 0; }
.pf-sw-ref { background: linear-gradient(90deg, #A9D08E 33%, #F4B084 33% 66%, #92CDDC 66%); }
.pf-sw-diff { background: #FF2E93; } .pf-sw-blank { background: #4A4F57; }
.pf-sw-red { background: #D7263D; } .pf-sw-amber { background: #F0A500; } .pf-sw-green { background: #1FA85A; }

/* A hovered or selected row must never hide an outlier colour: the highlight, the grey blank and the traffic light win */
html[data-theme="dark"] #data-table tbody tr:hover > td.oc-diff, html[data-theme="dark"] #data-table tbody tr.active > td.oc-diff { background: #FF2E93 !important; color: #fff !important; }
html[data-theme="dark"] #data-table tbody tr:hover > td.oc-missing, html[data-theme="dark"] #data-table tbody tr.active > td.oc-missing { background: #4A4F57 !important; color: #E6E9ED !important; }
html[data-theme="dark"] #data-table tbody tr:hover > td.oc-size-red, html[data-theme="dark"] #data-table tbody tr.active > td.oc-size-red { background: #D7263D !important; color: #fff !important; }
html[data-theme="dark"] #data-table tbody tr:hover > td.oc-size-amber, html[data-theme="dark"] #data-table tbody tr.active > td.oc-size-amber { background: #F0A500 !important; color: #1b1b1b !important; }
html[data-theme="dark"] #data-table tbody tr:hover > td.oc-size-green, html[data-theme="dark"] #data-table tbody tr.active > td.oc-size-green { background: #1FA85A !important; color: #fff !important; }

/* Type Enforcement: "Mixed codes" (text columns holding number-like codes) is purple, so it reads differently from the
   amber "Unidentified" warning and the grey "Special characters" note. */
.label.label-codes { background: #7e57c2; color: #fff; }

/* the small line under a dashboard tile number (e.g. "in 13 columns") must stay readable on the coloured tile */
.widget.widget-stats .stats-info small { color: rgba(255, 255, 255, 0.85); }

/* ---------- Menus: numbered steps, icons and one-line descriptions ---------- */
.top-menu .sub-menu.drp-menu { width: 360px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.top-menu .sub-menu.drp-menu > li { display: block; }
.top-menu .sub-menu.drp-menu > li.drp-group {
    font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: #8a9aab; padding: 8px 10px 4px;
}
.top-menu .sub-menu.drp-menu > li > a.drp-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; white-space: normal;
    border-left: 3px solid transparent; border-radius: 4px;
}
.top-menu .sub-menu.drp-menu > li > a.drp-row:hover,
.top-menu .sub-menu.drp-menu > li > a.drp-row:focus { background: #1b232c !important; border-left-color: var(--lds-cyan-work); color: #fff !important; }
.top-menu .sub-menu.drp-menu > li > a.drp-row.drp-here { border-left-color: var(--lds-cyan-work); }
.drp-ico {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--lds-cyan-work);
    color: var(--lds-cyan-work); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.drp-txt b { display: block; font-weight: 600; font-size: 14px; }
.drp-txt small { display: block; color: #8a9aab; font-size: 12.5px; line-height: 1.35; }
.drp-step { color: var(--lds-cyan-work); margin-right: 6px; }
.drp-tag {
    font-size: 10.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #8a9aab;
    color: #8a9aab; border-radius: 10px; padding: 1px 8px; margin-left: 8px; vertical-align: 2px;
}
.top-menu .sub-menu.drp-menu > li.drp-soon > a.drp-row { opacity: .55; cursor: default; }
.top-menu .sub-menu.drp-menu > li.drp-soon > a.drp-row:hover { background: transparent !important; border-left-color: transparent; color: #fff !important; }
.drp-soon .drp-ico { border-style: dashed; border-color: #8a9aab; color: #8a9aab; }

/* the signed-in user as a chip instead of an "Account" menu */
.top-menu .nav > li.drp-user > a { display: flex; align-items: center; gap: 10px; }
.drp-avatar {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--lds-cyan-work); color: var(--lds-cyan-work);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 600; font-size: 13px;
}
.drp-who { line-height: 1.15; text-align: left; }
.drp-who small { display: block; color: #8a9aab; font-size: 11.5px; }
.top-menu .nav > li.drp-user .sub-menu { right: 0; left: auto; }

/* ---------- Dashboard: Latest result panel ---------- */
.drp-latest-sub { color: #8a9aab; margin-bottom: 14px; }
/* the Compare two results page and selector */
.drp-compare-panel .panel-heading { border-left: 4px solid #F0A500; }
.drp-compare-text { font-size: 16px; line-height: 1.5; }
.drp-chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 12px; border: 1px solid #00C8D7; color: #00C8D7; font-weight: 600; }
.drp-compare-label { color: #00C8D7; font-weight: 700; letter-spacing: .03em; margin-bottom: 4px; }
/* the Before and After pickers: the purple of the results page "Compare with" dropdown */
.drp-pick-label { color: #6B4FB3; font-weight: 700; letter-spacing: .03em; margin-bottom: 4px; }
html[data-theme="dark"] .drp-pick-label { color: #A98BE8; }
select.drp-pick-select, select.drp-pick-select:focus { border: 2px solid #8E6FD0; background-color: #E9E1F7; color: #111; font-weight: 600; box-shadow: none; }
html[data-theme="dark"] select.drp-pick-select, html[data-theme="dark"] select.drp-pick-select:focus { border-color: #A98BE8; background-color: #2A2145; color: #EFE8FF; }
select.drp-pick-select:focus { box-shadow: 0 0 0 2px rgba(142, 111, 208, .3); }
select.drp-pick-select option { background-color: #FFF; color: #111; }
html[data-theme="dark"] select.drp-pick-select option { background-color: #2A2145; color: #EFE8FF; }
.drp-charts h5 { font-weight: 600; margin: 0 0 2px; }
.drp-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.drp-donut-svg { width: 150px; height: 150px; flex: none; }
.drp-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; font-size: 13.5px; }
.drp-legend li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.drp-legend i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.drp-legend em { margin-left: auto; font-style: normal; color: #8a9aab; font-variant-numeric: tabular-nums; }

/* keep the top bar its usual height with the user chip, and make the chart headings readable */
.drp-charts h5 { color: inherit; }
.top-menu .nav > li.drp-user > a { padding-top: 4px; padding-bottom: 4px; gap: 8px; }
.drp-avatar { width: 28px; height: 28px; font-size: 12px; }
.drp-who { font-size: 13px; line-height: 1.05; }
.drp-who small { font-size: 11px; }

/* ---------- Plain pages livened up: Data Upload, Type Enforcement and Pattern Recognition step 1 ---------- */
.drp-intro { color: #8a9aab; font-size: 14px; margin: -6px 0 18px; }
.drp-intro .fa { color: var(--lds-cyan-work); margin-right: 8px; }
.drp-hint { color: #8a9aab; margin: 0 0 12px; }
.drp-open { white-space: nowrap; }

/* drop zone + file type tiles */
.drp-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.drp-drop {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; margin: 0; width: 100%; cursor: pointer;
    border: 2px dashed #3a4756; border-radius: 8px; text-align: center; font-weight: 400; transition: border-color .15s, background .15s;
}
.drp-drop .fa { font-size: 34px; color: var(--lds-cyan-work); }
.drp-drop-main { font-size: 15px; font-weight: 600; word-break: break-all; }
.drp-drop-sub { font-size: 12.5px; color: #8a9aab; }
.drp-drop:hover, .drp-drop.over { border-color: var(--lds-cyan-work); background: rgba(0, 200, 215, .07); }
.drp-drop.has-file { border-style: solid; border-color: var(--lds-cyan-work); }
.drp-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.drp-tile {
    background: transparent; color: inherit; border: 1.5px solid #3a4756; border-radius: 6px; padding: 7px 14px; cursor: pointer;
    font-family: var(--font-ui); font-weight: 500; transition: border-color .15s, background .15s;
}
.drp-tile:hover { border-color: var(--lds-cyan-work); }
.drp-tile.on { border-color: var(--lds-cyan-work); background: rgba(0, 200, 215, .15); color: var(--lds-cyan-work); font-weight: 600; }

/* where a file has got to: uploaded, type-checked, pattern groups */
.drp-track { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 8px; }
.drp-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #4b5663; background: transparent; }
.drp-dot.done { background: var(--lds-cyan-work); border-color: var(--lds-cyan-work); }
.drp-dot.busy { border-color: #F0A500; background: #F0A500; }
.drp-bar { width: 16px; height: 2px; background: #4b5663; }
.drp-bar.done { background: var(--lds-cyan-work); }

/* transaction rows */
#data-pte-table-transactions tbody tr, #table-transactions tbody tr { transition: background .12s; }
#data-pte-table-transactions tbody tr:hover, #table-transactions tbody tr:hover { background: rgba(0, 200, 215, .08) !important; }
#data-pte-table-transactions tbody tr:hover > td:first-child, #table-transactions tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--lds-cyan-work); }
#table-transactions tbody tr.active > td:first-child { box-shadow: inset 3px 0 0 var(--lds-cyan-work); }

/* the earlier-results panel: friendly while empty */
.drp-empty { text-align: center; color: #8a9aab; padding: 22px 8px; margin: 0; }
.drp-empty .fa { font-size: 26px; color: var(--lds-cyan-work); margin-bottom: 8px; }
#result-label-panel:has(#result-labels tbody tr) .drp-empty { display: none; }
#result-label-panel:not(:has(#result-labels tbody tr)) #result-labels { display: none; }
.drp-panel-title { font-family: var(--font-ui); font-weight: 600; margin: 0 0 8px; }

/* Download menu on the pattern results page, in the same style as the top menus */
.dropdown-menu.drp-dd { min-width: 340px; padding: 8px; background: var(--lds-black) !important; border: 1px solid #2a2a2a; border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.dropdown-menu.drp-dd > li.drp-group { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a9aab; padding: 8px 10px 4px; }
.dropdown-menu.drp-dd > li > a.drp-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; white-space: normal; color: #fff !important; background: transparent !important; border-left: 3px solid transparent; border-radius: 4px; }
.dropdown-menu.drp-dd > li > a.drp-row:hover, .dropdown-menu.drp-dd > li > a.drp-row:focus { background: #1b232c !important; border-left-color: var(--lds-cyan-work); }
.dropdown-menu.drp-dd .drp-ico { width: 30px; height: 30px; font-size: 14px; }

/* Label Results popup: compact, with the system fields tucked away (they are still saved) */
.modal-dialog.drp-modal-sm { width: 560px; max-width: calc(100vw - 24px); }
.drp-modal-sm .form-group { margin-bottom: 14px; }
.drp-tech { margin: 4px 0 14px; }
.drp-tech > summary { cursor: pointer; color: #8a9aab; font-size: 12.5px; margin-bottom: 10px; }
.drp-tech > summary:hover { color: var(--lds-cyan-work); }
.drp-tech > summary { list-style: none; display: list-item; }
.drp-tech > summary::-webkit-details-marker { display: none; }
.drp-tech > summary::before { content: "\25B8"; display: inline-block; width: 16px; color: var(--lds-cyan-work); transition: transform .15s; }
.drp-tech[open] > summary::before { transform: rotate(90deg); }

/* a saved (labelled) result on screen: its name and version, and a prompt when it has been changed */
.drp-label-banner { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--lds-cyan-work); border-left-width: 4px; border-radius: 6px; background: rgba(0, 200, 215, .08); }
.drp-label-banner.changed { border-color: #F0A500; background: rgba(240, 165, 0, .09); }
.drp-label-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.drp-label-head .fa { color: var(--lds-cyan-work); }
.drp-label-name { font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.drp-label-ver { border: 1px solid var(--lds-cyan-work); color: var(--lds-cyan-work); border-radius: 10px; padding: 0 9px; font-size: 12px; }
.drp-label-note { color: #8a9aab; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.2px; }
.drp-label-desc { margin-top: 6px; color: #8a9aab; }
.drp-label-changed { margin-top: 10px; }
.drp-label-changed ul { margin: 6px 0 10px 18px; padding: 0; }
.drp-label-hint { margin-top: 8px; }
#result-label-panel:not(:has(#result-labels tbody tr)) .drp-label-hint { display: none; }

/* Power BI brand yellow, dark text */
.drp-btn-powerbi, .drp-btn-powerbi:visited { background: #f2c811; border-color: #f2c811; color: #1b1b1b; font-weight: 600; }
.drp-btn-powerbi:hover, .drp-btn-powerbi:focus { background: #ffd83a; border-color: #ffd83a; color: #000; }