/* ============================================================
   ETP – Aster brand theme (Prime Green + Neutral Grey + Aqua + Terra)
   Follows ASTER Brand Manual 2026. Loaded AFTER style.min.css.
   Rules honoured:
     • Prime Green (#BCCF17) is a HIGHLIGHT — used as fills with dark
       text / accents, never as green text on white (contrast).
     • Aqua (#00898B) = navigation, links, expression (secondary).
     • Terra (#CC6F3C) = grounding / warnings.
     • Neutral Grey (#989AA5) = structure; dark ink for body text.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

:root {
    /* --- Aster Prime Green (primary highlight / CTA) --- */
    --c-primary:      #BCCF17;
    --c-primary-600:  #A7B814;
    --c-primary-700:  #8E9C11;
    --c-primary-050:  #ECF0C6;
    --c-on-primary:   #1B1E10;   /* dark ink for text on green */

    /* --- Aster Aqua (secondary / navigation / links) --- */
    --c-aqua:         #00898B;
    --c-aqua-700:     #026E70;
    --c-aqua-500:     #18B2B3;
    --c-aqua-050:     #CAE6E1;

    /* --- Aster Terra (grounding / warning) --- */
    --c-terra:        #CC6F3C;
    --c-terra-050:    #FDE1C5;

    /* --- Status --- */
    --c-ok:      #7FA30C;   /* readable olive-green for OK text */
    --c-danger:  #C0392B;

    /* --- Aster Neutral Grey + ink --- */
    --c-grey:     #989AA5;   /* brand neutral grey */
    --c-ink:      #1F232B;   /* headings / strong text */
    --c-body:     #3A3F49;   /* body text */
    --c-muted:    #6E7179;   /* muted / secondary text */
    --c-line:     #E3E3E3;   /* borders */
    --c-line-2:   #CFD0D0;
    --c-surface:  #FFFFFF;
    --c-bg:       #EEF0F2;   /* page background (neutral 10%) */

    --radius:     14px;
    --radius-sm:  10px;
    --shadow:     0 1px 2px rgba(31,35,43,.05), 0 6px 20px rgba(31,35,43,.06);
    --shadow-md:  0 8px 30px rgba(31,35,43,.12);
    --font: 'Roboto', -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- Base ---------- */
body,
body.theme-blush {
    background: var(--c-bg) !important;
    font-family: var(--font) !important;
    color: var(--c-body);
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font); color: var(--c-ink); font-weight: 700; }
a { color: var(--c-aqua); }
a:hover { color: var(--c-aqua-700); }

.block-header h2 { color: var(--c-ink) !important; font-weight: 700; }
.content { color: var(--c-body); }

/* ---------- Dashboard stat cards: contain the icon + equal heights ---------- */
.card.w_data_1, .card.mcard_4 { overflow: hidden; }
.card.w_data_1 .bod { padding: 22px; text-align: center; }
.card.w_data_1 .w_icon {
    position: static !important;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin: 0 auto 12px !important;
    border-radius: 50%;
}
.card.w_data_1 .w_icon i { line-height: 56px; }

@media (min-width: 992px) {
    /* Make every card in the top dashboard row the same height */
    .dash-row { display: flex; flex-wrap: wrap; }
    .dash-row > [class*="col-"] { display: flex; flex-direction: column; }
    .dash-row > [class*="col-"] > .card { flex: 1 1 auto; margin-bottom: 22px; }
}

/* ---------- Sidebar (navigation = Aqua) ---------- */
#leftsidebar, .sidebar {
    background: var(--c-surface) !important;
    border-right: 1px solid var(--c-line);
    box-shadow: var(--shadow);
}
.sidebar .menu .list a {
    color: var(--c-body) !important;
    border-radius: var(--radius-sm);
    margin: 2px 10px;
    transition: background .15s, color .15s;
}
.sidebar .menu .list a:hover {
    background: var(--c-aqua-050) !important;
    color: var(--c-aqua-700) !important;
}
.sidebar .menu .list li.active > a,
.sidebar .menu .list li.active.open > a {
    background: var(--c-aqua) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,137,139,.30);
}
/* The template colours the active span/icon pink directly — force white */
.sidebar .menu .list li.active > a span,
.sidebar .menu .list li.active > a i,
.sidebar .menu .list li.active > :first-child span,
.sidebar .menu .list li.active > :first-child i { color: #fff !important; }
.sidebar .menu .list a i { color: inherit !important; }
.sidebar .menu .list a:hover span { color: var(--c-aqua-700) !important; }
.sidebar .user-info .detail h4 { color: var(--c-ink); font-weight: 600; }
.sidebar .user-info .detail small { color: var(--c-muted); }
/* Prime-Green highlight strip on the active item */
.sidebar .menu .list li.active > a { border-left: 3px solid var(--c-primary); }
.navbar-brand { border-bottom: 1px solid var(--c-line); }

/* ---------- Top-right icon rail ---------- */
.navbar-right .navbar-nav > li > a { color: var(--c-body); }
.navbar-right .navbar-nav > li > a:hover { color: var(--c-aqua); }

/* ---------- Cards ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card .header { border-bottom: 1px solid var(--c-line); padding: 18px 22px; }
.card .header h2 {
    font-size: 15px; font-weight: 700; color: var(--c-ink);
    text-transform: none; letter-spacing: normal;
}
/* Section-header accent — force brand teal over the old blush/pink theme */
.card .header h2 strong,
.header h2 strong, .header h5 strong,
.block-header h2 strong { color: var(--c-aqua) !important; }
.card .header h2:before { display: none; }
.card .body { padding: 22px; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 18px;
    border: 1px solid transparent;
    transition: filter .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:focus, .btn:focus-visible { outline: 2px solid var(--c-primary-050); outline-offset: 2px; box-shadow: none; }

/* Primary CTA = Prime Green with dark ink (brand highlight) */
.btn-primary, .bg-blue {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-on-primary) !important;
}
.btn-primary:hover { background: var(--c-primary-600) !important; border-color: var(--c-primary-600) !important; }

/* Info / success = Aqua (white text) */
.btn-info, .btn-success {
    background: var(--c-aqua) !important;
    border-color: var(--c-aqua) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-success:hover { background: var(--c-aqua-700) !important; }

.btn-warning { background: var(--c-terra) !important; border-color: var(--c-terra) !important; color:#fff !important; }
.btn-danger  { background: var(--c-danger) !important; border-color: var(--c-danger) !important; color:#fff !important; }

/* Secondary / outline */
.btn-outline {
    background: #fff !important;
    color: var(--c-body) !important;
    border: 1px solid var(--c-line-2) !important;
}
.btn-outline:hover { border-color: var(--c-aqua) !important; color: var(--c-aqua) !important; }

/* ---------- Forms ---------- */
.form-control, .select2-container .select2-selection {
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--c-ink);
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    border-color: var(--c-aqua) !important;
    box-shadow: 0 0 0 3px var(--c-aqua-050) !important;
}
label { color: var(--c-body); font-weight: 500; }
.input-group-text { background: #fff; border: 1px solid var(--c-line-2); color: var(--c-muted); }

/* Neutral date input (replaces red/yellow btn styling in reports) */
.date-input {
    display: inline-block;
    width: 100%;
    border: 1px solid var(--c-line-2);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    background: #fff;
    color: var(--c-ink);
    font-family: var(--font);
    cursor: pointer;
}
.date-input:focus { border-color: var(--c-aqua); box-shadow: 0 0 0 3px var(--c-aqua-050); outline: none; }

/* Date range preset chips (active = Prime Green highlight) */
.date-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.date-chip {
    border: 1px solid var(--c-line-2);
    background: #fff;
    color: var(--c-body);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.date-chip:hover { border-color: var(--c-aqua); color: var(--c-aqua); }
.date-chip.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* ---------- Tables / DataTables ---------- */
table.dataTable thead th,
.table thead th {
    background: #F5F6F7;
    color: var(--c-ink);
    font-weight: 700;
    font-size: 12.5px;
    border-bottom: 2px solid var(--c-line) !important;
    border-color: var(--c-line) !important;
}
table.dataTable tbody td, .table td {
    color: var(--c-body);
    border-color: var(--c-line) !important;
    vertical-align: middle;
}
.table-hover tbody tr:hover { background: var(--c-aqua-050) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: #FAFBFB; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--c-line-2) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--c-aqua) !important;
    border-color: var(--c-aqua) !important;
    color: #fff !important;
    border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    border: 1px solid var(--c-line-2);
    color: var(--c-body) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-aqua-050) !important;
    border-color: var(--c-aqua) !important;
    color: var(--c-aqua-700) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--c-muted); }

/* ---------- Badges / status pills ---------- */
.badge, .label { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.status-pill {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
}
.status-pill .dot { width:8px; height:8px; border-radius:50%; }
.status-pill.ok   { background: var(--c-primary-050); color: #5C6B00; }
.status-pill.ok .dot   { background: var(--c-primary); }
.status-pill.down { background:#FBE3E1; color:#8E241B; }
.status-pill.down .dot { background: var(--c-danger); }

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding:48px 20px; color: var(--c-muted); }
/* Direct child only — icons inside CTA buttons must keep their normal size */
.empty-state > i { font-size:40px; color: var(--c-line-2); display:block; margin-bottom:10px; }
.empty-state .btn i { font-size:inherit; color:inherit; display:inline; margin:0 4px 0 0; }

/* ---------- Authentication (login / signup) — Prime Green brand bg ---------- */
.authentication {
    background: linear-gradient(135deg, #BCCF17 0%, #A7B814 45%, #7C8A10 100%);
    min-height: 100vh;
}
.authentication:before { display: none; }
.authentication .card, .authentication .auth_form {
    border-radius: var(--radius);
    border: none;
    box-shadow: var(--shadow-md);
}
.authentication .auth_form .header { padding: 22px 22px 6px; }
.authentication .auth_form .header h5 { color: var(--c-ink); font-weight: 700; letter-spacing: .04em; }
.authentication .btn-primary { width: 100%; }
.pw-toggle { cursor: pointer; }
.copyright, .copyright a { color: #1B1E10; }

/* ---------- Toasts ---------- */
#toast-wrap {
    position: fixed; top: 18px; right: 18px; z-index: 3000;
    display: flex; flex-direction: column; gap: 10px;
}
.toast-modern {
    display:flex; align-items:center; gap:10px;
    min-width: 240px; max-width: 360px;
    background: var(--c-ink); color: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    box-shadow: var(--shadow-md);
    font-size: 13.5px; font-weight: 500;
    animation: toast-in .25s ease;
    border-left: 4px solid var(--c-aqua);
}
.toast-modern.ok     { border-left-color: var(--c-primary); }
.toast-modern.error  { border-left-color: var(--c-danger); }
.toast-modern.info   { border-left-color: var(--c-aqua); }
.toast-modern .ti { font-size: 16px; }
@keyframes toast-in { from { opacity:0; transform: translateY(-8px);} to {opacity:1; transform:none;} }

/* ---------- Breadcrumbs ---------- */
.etp-crumbs { font-size: 12.5px; color: var(--c-muted); margin-bottom: 6px; }
.etp-crumbs a { color: var(--c-aqua); font-weight: 600; }
.etp-crumbs .sep { margin: 0 7px; color: var(--c-line-2); }
.etp-crumbs .here { color: var(--c-body); font-weight: 600; }

/* ---------- Notifications ---------- */
.note-badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--c-danger); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 2px 5px; border-radius: 999px;
}
.dropdown-menu .menu li.note-read { opacity: .55; }
.dropdown-menu .menu li.note-read .icon-circle { filter: grayscale(1); }
.mark-read { color: var(--c-aqua) !important; font-weight: 600; }

/* ---------- Skeleton loaders (charts show shimmer until c3 draws) ---------- */
@keyframes etp-shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
.c3_chart:empty {
    min-height: 120px; border-radius: 10px;
    background: linear-gradient(90deg,#eef0f2 25%,#e2e6e9 37%,#eef0f2 63%);
    background-size: 800px 100%;
    animation: etp-shimmer 1.3s linear infinite;
}

/* ---------- Dashboard "Current Ratio" (de-carouselled) ---------- */
.ratio-grid { display: flex; flex-direction: column; gap: 10px; }
.ratio-cell { position: relative; }
.ratio-cell .c3_chart { height: 104px; }

/* Keep the Flow Rate chart a sensible height (was a tall empty expanse) */
#chart-area-step, #chart-area-step .c3_chart { height: 260px; }
#chart-employment { height: 300px; }

/* ---------- Report table: pin first (SNo) column while scrolling wide ---------- */
.report-table-wrap table.dataTable thead tr th:first-child,
.report-table-wrap table.dataTable tbody tr td:first-child {
    position: sticky; left: 0; z-index: 3;
}
.report-table-wrap table.dataTable thead tr th:first-child { background: #F5F6F7; }
.report-table-wrap table.dataTable tbody tr td:first-child { background: #fff; }
.report-table-wrap .table-hover tbody tr:hover td:first-child { background: var(--c-aqua-050); }

/* ---------- DataTables colVis dropdown ---------- */
.dt-button-collection {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 6px;
}
.dt-button-collection .dt-button {
    display: block; width: 100%; text-align: left;
    padding: 6px 12px; border-radius: 8px; background: none; border: none;
    color: var(--c-body); font-size: 13px;
}
.dt-button-collection .dt-button.active { color: var(--c-aqua-700); font-weight: 700; }
.dt-button-collection .dt-button:hover { background: var(--c-aqua-050); }

/* ---------- Leaflet map legend ---------- */
.map-legend {
    background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
    padding: 6px 10px; font-size: 12px; color: var(--c-body); box-shadow: var(--shadow);
    display: flex; gap: 12px;
}
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 767px){
    .card .body { padding: 16px; }
    .block-header h2 { font-size: 20px; }
    .date-presets { gap: 5px; }
    #toast-wrap { left: 12px; right: 12px; }
    .toast-modern { max-width: none; }
    .dl-status { display: block; margin: 8px 0 0; white-space: normal; }
}

/* ---------- Renewal-required (expired site) ---------- */
.renew-card { height: 100%; border: 1px solid var(--c-terra-050); }
.renew-card .body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.renew-card .renew-ico { font-size: 46px; color: var(--c-terra); margin-bottom: 8px; }
.renew-card h3 { color: var(--c-ink); font-weight: 700; margin: 4px 0 8px; }
.renew-card p { color: var(--c-muted); max-width: 520px; margin: 0 0 14px; }
.renew-cta {
    display: inline-block; background: var(--c-primary); color: var(--c-on-primary);
    font-weight: 700; letter-spacing: .3px; padding: 10px 22px; border-radius: 999px;
}
/* Inline "Renew now to see" notice used on report pages */
.renew-banner {
    display: none; align-items: center; gap: 10px;
    background: #FDE1C5; color: #8a4b23; border: 1px solid var(--c-terra-050);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600;
}
.renew-banner.show { display: flex; }
.renew-banner .zmdi { font-size: 20px; color: var(--c-terra); }

/* ---------- Brand watermark (dashboard) ---------- */
.brand-watermark {
    position: fixed;
    right: 40px;
    bottom: 36px;
    width: 220px;
    height: 180px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;  /* never blocks clicks / chart hover beneath it */
    z-index: 1;            /* above the opaque cards, below sidebar(10) & navbar(999) */
}
@media (max-width: 991px) { .brand-watermark { width: 140px; height: 115px; right: 16px; bottom: 16px; } }

/* ---------- Misc ---------- */
hr { border-color: var(--c-line); }
.page-loader-wrapper { background: var(--c-bg); }
::selection { background: var(--c-primary-050); color: var(--c-ink); }

/* ========================================================================
   Advanced dashboard analytics (Tier 1-3)
   ======================================================================== */
#etp-analytics { margin-top: 8px; }
/* Equal-height cards within every analytics row */
#etp-analytics > .row { align-items: stretch; }
#etp-analytics > .row > [class*="col-"] { display: flex; }
#etp-analytics > .row > [class*="col-"] > .card { width: 100%; margin-bottom: 22px; }
.kpi-card .body { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ana-sec-title {
    font-size: 18px; font-weight: 700; color: var(--c-ink);
    margin: 18px 4px 12px; display: flex; align-items: center; gap: 8px;
}
.ana-sec-title .zmdi { color: var(--c-aqua); }
.ana-sec-title small { color: var(--c-muted); font-weight: 500; font-size: 13px; }
.muted-note { color: var(--c-muted); text-align: center; padding: 24px 8px; margin: 0; }

/* KPI cards */
.kpi-card .body { padding: 16px 18px; }
/* Equal-height KPI rows outside the analytics container (e.g. profile page) */
.kpi-row { align-items: stretch; }
.kpi-row > [class*="col"] { display: flex; }
.kpi-row .card { width: 100%; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); font-weight: 600; }
.kpi-val { font-size: 30px; font-weight: 700; color: var(--c-ink); margin: 6px 0 2px; }
.kpi-val small { font-size: 14px; color: var(--c-muted); font-weight: 500; }
.kpi-sub { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.kpi-sub.up { color: var(--c-ok); }
.kpi-sub.down { color: var(--c-danger); }

/* Fleet count mini-widget */
.fleet-counts { display: flex; justify-content: space-between; text-align: center; margin-top: 6px; }
.fleet-counts > div { flex: 1; }
.fleet-counts .fc-num { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.fleet-counts .fc-num.online { color: var(--c-ok); }
.fleet-counts .fc-num.stale { color: #B8860B; }
.fleet-counts .fc-num.offline { color: var(--c-danger); }
.fleet-counts > div span:last-child { font-size: 11px; color: var(--c-muted); text-transform: uppercase; }

/* status pill extra states used by the fleet board */
.status-pill.online  { background: var(--c-primary-050); color: #5C6B00; }
.status-pill.online .dot  { background: var(--c-ok); }
.status-pill.stale   { background: #FBF1D8; color: #8A6D0B; }
.status-pill.stale .dot   { background: #D4A017; }
.status-pill.offline { background: #FBE3E1; color: #8E241B; }
.status-pill.offline .dot { background: var(--c-danger); }

/* Fleet + pump tables */
.fleet-table td, .pump-table td { vertical-align: middle; font-size: 13px; }
.fleet-table small { color: var(--c-muted); }
.uptime-bar { height: 7px; border-radius: 4px; background: var(--c-line); overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.uptime-bar i { display: block; height: 100%; background: var(--c-aqua); }

/* pump status + drift badges */
.st-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.st-badge.ok   { background: var(--c-primary-050); color: #5C6B00; }
.st-badge.idle { background: #EDEEF0; color: var(--c-muted); }
.st-badge.bad  { background: #FBE3E1; color: #8E241B; }
.drift { font-weight: 700; font-size: 12px; }
.drift.up { color: var(--c-danger); }
.drift.down { color: var(--c-ok); }
.drift.flat { color: var(--c-muted); }

/* Lead/lag balance */
.bal-row { margin-bottom: 14px; }
.bal-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-ink); }
.bal-warn { color: var(--c-danger); font-size: 11px; font-weight: 600; }
.bal-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 4px 0; background: var(--c-line); }
.bal-bar i { display: block; height: 100%; }
.bal-bar .p1 { background: var(--c-aqua); }
.bal-bar .p2 { background: var(--c-primary); }
.bal-row.skewed .bal-bar { box-shadow: 0 0 0 2px var(--c-danger) inset; }
.bal-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-muted); }

/* Live alerts */
.anomaly-card .header h2 strong { color: var(--c-danger); }
.anomaly-list { list-style: none; padding: 0; margin: 0; }
.anomaly-list li { padding: 8px 12px; margin-bottom: 6px; border-radius: 8px;
    background: #FBE3E1; color: #8E241B; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.anomaly-list li .zmdi { font-size: 16px; }

/* Load-profile heatmap */
.hm-grid { display: grid; grid-template-columns: 42px repeat(24, 1fr); gap: 2px; }
.hm-corner, .hm-hh, .hm-day { font-size: 10px; color: var(--c-muted); display: flex; align-items: center; }
.hm-hh { justify-content: center; }
.hm-day { font-weight: 600; }
.hm-cell { height: 16px; border-radius: 2px; background: #EEF0F2; }
.hm-cell.b0 { background: #E6EDD3; } .hm-cell.b1 { background: #C7D98C; }
.hm-cell.b2 { background: #A7C13E; } .hm-cell.b3 { background: #7FA30C; }
.hm-cell.b4 { background: #566E08; }
.hm-cell.b-1 { background: #F4F5F6; }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--c-muted); }
.heatmap-legend .hl { width: 18px; height: 12px; border-radius: 2px; display: inline-block; }
.heatmap-legend .hl0 { background: #E6EDD3; } .heatmap-legend .hl1 { background: #C7D98C; }
.heatmap-legend .hl2 { background: #A7C13E; } .heatmap-legend .hl3 { background: #7FA30C; }
.heatmap-legend .hl4 { background: #566E08; }

/* ========================================================================
   Brand mark (Aster Apex) — collapsed "mini" sidebar shows the mark,
   the expanded sidebar shows the full logo lockup.
   ======================================================================== */
.navbar-brand .brand-mark { display: none; width: 34px; height: 34px; }
.ls-toggle-menu .sidebar .navbar-brand a img.brand-full { display: none; }
.ls-toggle-menu .sidebar .navbar-brand .brand-mark { display: inline-block; }

/* ========================================================================
   Global subscription banner (top of every logged-in page)
   ======================================================================== */
.expiry-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--c-terra-050); color: #7a4520;
    border: 1px solid var(--c-terra-050); border-bottom-color: var(--c-terra);
    border-radius: 0 0 12px 12px;
    padding: 10px 18px; font-weight: 600; font-size: 13.5px;
    position: relative; z-index: 5;
    /* align with section.content (Aero: 260px sidebar on the left, 70px icon rail on the right) */
    margin: 0 70px 0 260px;
}
.ls-toggle-menu .expiry-banner { margin-left: 70px; }
@media (max-width: 1169px) { .expiry-banner { margin: 0; border-radius: 0; } }
.expiry-banner .zmdi { color: var(--c-terra); font-size: 18px; }
.expiry-banner a { color: #7a4520; text-decoration: underline; font-weight: 700; }
.expiry-banner .dismiss {
    margin-left: auto; cursor: pointer; border: none; background: none;
    color: #7a4520; font-size: 16px; line-height: 1; padding: 2px 6px;
}
.expiry-banner.danger { background: #FBE3E1; color: #8E241B; border-bottom-color: var(--c-danger); }
.expiry-banner.danger .zmdi, .expiry-banner.danger a { color: #8E241B; }

/* ========================================================================
   "Last updated" chip
   ======================================================================== */
.updated-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--c-muted);
    background: #fff; border: 1px solid var(--c-line);
    border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.updated-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }

/* ========================================================================
   Status pill extras (expiry state on manage pages)
   ======================================================================== */
.status-pill.warn { background: var(--c-terra-050); color: #7a4520; }
.status-pill.warn .dot { background: var(--c-terra); }
.status-pill.idle { background: #EDEEF0; color: var(--c-muted); }
.status-pill.idle .dot { background: var(--c-grey); }

/* ========================================================================
   Modal (ticket edit) — align Bootstrap modal with the card language
   ======================================================================== */
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 1px solid var(--c-line); }
.modal-header .modal-title { font-weight: 700; color: var(--c-ink); font-size: 16px; }
.modal-footer { border-top: 1px solid var(--c-line); }

/* ========================================================================
   Auth shell — shared by password-reset pages and error pages
   ======================================================================== */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #00898B 0%, #026E70 55%, #0a3f40 100%);
    padding: 24px;
}
.auth-shell .shell-card {
    background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.18);
    max-width: 440px; width: 100%; padding: 36px 32px; text-align: center;
}
.auth-shell .shell-card img.logo { max-width: 150px; margin-bottom: 16px; }
.auth-shell .shell-card h1 { font-size: 20px; font-weight: 700; color: var(--c-ink); margin: 0 0 6px; }
.auth-shell .shell-card p { color: var(--c-muted); font-size: 14px; }
.auth-shell .shell-card form { text-align: left; margin-top: 18px; }
.auth-shell .shell-card label { font-size: 13px; }
.auth-shell .errorlist { list-style: none; padding: 0; margin: 0 0 10px; color: var(--c-danger); font-size: 13px; }

/* Inline message alerts on auth pages */
.msg-inline {
    display: flex; align-items: center; gap: 8px; text-align: left;
    border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
    font-size: 13.5px; font-weight: 600;
}
.msg-inline.error   { background: #FBE3E1; color: #8E241B; }
.msg-inline.success { background: var(--c-primary-050); color: #5C6B00; }
.msg-inline.info    { background: var(--c-aqua-050); color: var(--c-aqua-700); }

/* Password strength hint (signup) */
.pw-meter { height: 5px; border-radius: 3px; background: var(--c-line); margin: 6px 0 2px; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.pw-meter.w i { background: var(--c-danger); width: 33%; }
.pw-meter.m i { background: var(--c-terra); width: 66%; }
.pw-meter.s i { background: var(--c-primary); width: 100%; }
.pw-hint { font-size: 11.5px; color: var(--c-muted); }

/* ========================================================================
   Log viewer (viewdata.html)
   ======================================================================== */
.log-shell { max-width: 1100px; margin: 24px auto; padding: 0 16px; font-family: var(--font); }
.log-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.log-head img { height: 30px; }
.log-head h1 { font-size: 18px; margin: 0; }
.log-head input {
    margin-left: auto; min-width: 240px;
    border: 1px solid var(--c-line-2); border-radius: 10px; padding: 7px 12px;
}
.log-box {
    background: #1F232B; color: #D5DCE1; border-radius: 12px;
    padding: 14px 16px; max-height: 78vh; overflow: auto;
    font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; line-height: 1.7;
}
.log-box p { margin: 0; white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid rgba(255,255,255,.05); }
.log-count { font-size: 12.5px; color: var(--c-muted); }

/* Small header action next to card titles (e.g. "+ New Site") —
   anchored to the right edge of the header, vertically centred. */
.card .header { position: relative; }
.card .header .head-actions {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 8px; align-items: center;
}
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.head-actions .btn i { margin-right: 3px; }