/* static/styles/modules.css
 *
 * Module-specific component classes that are not part of core layout or theming.
 * All module-specific styles were consolidated into core.css during the
 * Phase 1 CSS extraction (2026-03-17). This file is intentionally minimal.
 *
 * Load order: core.css → themes.css → modules.css → mobile.css
 */

/* ── EVM (Earned Value Management) ──────────────────────────────────────── */
/* Note: .evm-* classes below were in the inline <style> block only.
   They have been verified absent from core.css and are migrated here. */

.evm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.evm-card {
    background: var(--app-field-bg);
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.evm-card-title {
    font-size: 0.85rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.evm-card-value {
    font-size: 2rem;
    font-weight: bold;
    font-family: monospace;
    margin-bottom: 0.5rem;
}

.evm-health-healthy { color: #10b981; }
.evm-health-warning { color: #f59e0b; }
.evm-health-critical { color: #ef4444; }

.evm-variance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

/* - Website Builder -------------------------------------------------------- */

#modal-wb-connect .modal {
    width: 680px;
}

#modal-wb-connect .modal-header {
    padding: 16px 20px 14px;
}

#modal-wb-connect .modal-header h3 {
    font-size: 15px;
}

#modal-wb-connect .modal-body {
    padding: 18px 20px;
}

#modal-wb-connect .modal-footer {
    padding: 12px 20px 16px;
}

#modal-wb-connect .wb-modal-close {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 1px solid var(--app-field-border);
    border-radius: 8px;
    background: var(--app-field-bg);
    color: var(--app-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#modal-wb-connect .wb-modal-close:hover,
#modal-wb-connect .wb-modal-close:focus-visible {
    border-color: var(--app-field-focus);
    color: var(--app-text-primary);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
    outline: none;
}

.wb-connect-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* - HR --------------------------------------------------------------------- */

#tbl-timesheets tr.hr-timesheet-row-auto td {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
}

#tbl-timesheets tr.hr-timesheet-row-manual td {
    background: color-mix(in srgb, var(--grey) 70%, transparent);
}

#tbl-timesheets tr.hr-timesheet-row-auto:hover td {
    background: color-mix(in srgb, var(--blue) 16%, transparent);
}

#tbl-timesheets tr.hr-timesheet-row-manual:hover td {
    background: color-mix(in srgb, var(--grey) 88%, transparent);
}

#hr-timesheets-wrap {
    max-height: 420px;
    overflow: auto;
}

#hr-timesheets-legend {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--app-field-bg);
}

.wb-connect-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.wb-connect-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.wb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wb-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wb-field-span-2 {
    grid-column: span 2;
}

.wb-auth-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--grey);
}

.wb-auth-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--app-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wb-field-note {
    font-size: 11px;
    line-height: 1.35;
    color: var(--app-text-muted);
}

@media (max-width: 768px) {
    .wb-connect-grid {
        grid-template-columns: 1fr;
    }

    .wb-field-span-2 {
        grid-column: auto;
    }

    #modal-wb-connect .modal {
        width: min(680px, 96vw);
    }

    #modal-wb-connect .modal-header,
    #modal-wb-connect .modal-body,
    #modal-wb-connect .modal-footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* - Finance Command Center ------------------------------------------------- */

.fin-cc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.fin-cc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fin-cc-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    letter-spacing: -0.02em;
    font-family: "DM Serif Display", Georgia, serif;
    color: var(--app-text-primary);
}

.fin-cc-subtitle {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
}

.fin-cc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fin-cc-search-wrap {
    width: min(360px, 100%);
}

.fin-cc-search {
    width: 100%;
}

.fin-cc-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fin-cc-kpi {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--app-field-bg);
    padding: 12px;
}

.fin-cc-kpi-label {
    font-size: 11px;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fin-cc-kpi-value {
    margin-top: 4px;
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-weight: 700;
    color: var(--app-text-primary);
}

.fin-cc-grid-main,
.fin-cc-grid-bottom {
    display: grid;
    gap: 10px;
}

.fin-cc-grid-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fin-cc-grid-bottom {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.fin-cc-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--app-field-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    min-height: 236px;
    display: flex;
    flex-direction: column;
}

.fin-cc-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    padding: 14px 14px 10px;
}

.fin-cc-card-title {
    margin: 0;
    font-size: 1.02rem;
    color: var(--app-text-primary);
}

.fin-cc-card-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
}

.fin-cc-card-meta {
    font-size: 12px;
    color: var(--success);
    font-weight: 700;
}

.fin-cc-card-body {
    padding: 0 14px 14px;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.fin-cc-axis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    height: 148px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.fin-cc-axis-col {
    display: flex;
    gap: 3px;
    align-items: end;
    justify-content: center;
    height: 100%;
}

.fin-cc-axis-bar-budget,
.fin-cc-axis-bar-actual {
    width: 15px;
    border-radius: 4px 4px 0 0;
}

.fin-cc-axis-bar-budget {
    background: var(--blue);
}

.fin-cc-axis-bar-actual {
    background: var(--warning);
}

.fin-cc-axis-labels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    font-size: 11px;
    color: var(--app-text-muted);
    margin-top: 7px;
}

.fin-cc-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    max-height: 190px;
}

.fin-cc-list-head,
.fin-cc-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.fin-cc-list-head {
    font-size: 11px;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fin-cc-row {
    border: 1px solid color-mix(in srgb, var(--success) 26%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--success) 9%, transparent);
    padding: 8px 10px;
}

.fin-cc-row.fin-cc-row-review {
    border-color: var(--border);
    background: color-mix(in srgb, var(--grey) 62%, transparent);
}

.fin-cc-mono {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
}

.fin-cc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.fin-cc-ap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.fin-cc-ap-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fin-cc-ap-row.fin-cc-ap-row-focus {
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 8px;
    padding: 8px;
    background: rgba(245,158,11,.08);
    box-shadow: 0 0 0 1px rgba(245,158,11,.2);
}

.fin-cc-ap-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-primary);
}

.fin-cc-ap-sub {
    font-size: 11px;
    color: var(--app-text-muted);
    margin-top: 2px;
}

.fin-cc-ap-preview {
    width: 34px;
    height: 44px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--grey) 85%, transparent), transparent);
    position: relative;
    flex: 0 0 auto;
}

.fin-cc-ap-preview::before,
.fin-cc-ap-preview::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    height: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--app-text-muted) 42%, transparent);
}

.fin-cc-ap-preview::before { top: 9px; }
.fin-cc-ap-preview::after { top: 16px; }

.fin-cc-donut-wrap {
    flex: 1;
    display: grid;
    place-items: center;
    gap: 12px;
}

.fin-cc-donut {
    width: min(180px, 76%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: conic-gradient(
      var(--success) 0% 34%,
      var(--warning) 34% 59%,
      var(--danger) 59% 80%,
      var(--blue) 80% 100%
    );
    display: grid;
    place-items: center;
}

.fin-cc-donut-hole {
    width: 56%;
    height: 56%;
    border-radius: 50%;
    background: var(--app-field-bg);
    border: 1px solid var(--border);
}

.fin-cc-donut-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--app-text-muted);
    font-size: 11px;
}

.fin-cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.fin-cc-dot.success { background: var(--success); }
.fin-cc-dot.warn { background: var(--warning); }
.fin-cc-dot.danger { background: var(--danger); }
.fin-cc-dot.info { background: var(--blue); }

@media (max-width: 1200px) {
    .fin-cc-grid-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-cc-grid-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .fin-cc-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-cc-grid-main,
    .fin-cc-grid-bottom {
        grid-template-columns: 1fr;
    }

    .fin-cc-search-wrap {
        width: 100%;
    }

    .fin-cc-header {
        align-items: flex-start;
    }
}

/* - Project Management Portfolio Table ------------------------------------ */

.pm-project-table {
    width: 100%;
    table-layout: fixed;
}

.pm-project-table th,
.pm-project-table td {
    vertical-align: middle;
}

.pm-project-table th:nth-child(1),
.pm-project-table td:nth-child(1) {
    width: 14%;
}

.pm-project-table th:nth-child(2),
.pm-project-table td:nth-child(2) {
    width: 23%;
}

.pm-project-table th:nth-child(3),
.pm-project-table td:nth-child(3) {
    width: 16%;
}

.pm-project-table th:nth-child(4),
.pm-project-table td:nth-child(4) {
    width: 11%;
}

.pm-project-table th:nth-child(5),
.pm-project-table td:nth-child(5) {
    width: 10%;
}

.pm-project-table th:nth-child(6),
.pm-project-table td:nth-child(6),
.pm-project-table th:nth-child(7),
.pm-project-table td:nth-child(7),
.pm-project-table th:nth-child(8),
.pm-project-table td:nth-child(8) {
    width: 10%;
}

.pm-project-table th:nth-child(9),
.pm-project-table td:nth-child(9) {
    width: 12%;
}

.pm-project-code {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-truncate {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-money {
    white-space: nowrap;
    text-align: right;
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
}

.pm-actions {
    white-space: nowrap;
    text-align: right;
}

/* - Project Management War Room ------------------------------------------- */

.pm-war-room {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-war-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-war-title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    color: var(--app-text-primary);
}

.pm-war-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
}

.pm-war-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pm-war-weather {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--app-field-bg);
    border-radius: 10px;
    padding: 6px 10px;
}

.pm-war-weather-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--warning), var(--blue));
}

.pm-war-weather-label {
    font-size: 11px;
    color: var(--app-text-muted);
}

.pm-war-weather-value {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    color: var(--app-text-primary);
    font-size: 12px;
}

.pm-war-weather-source {
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    color: var(--app-text-muted);
    background: color-mix(in srgb, var(--grey) 70%, transparent);
}

.pm-war-weather-source.high {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    color: var(--success);
}

.pm-war-weather-source.medium {
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
    color: var(--warning);
}

.pm-war-weather-source.low {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    color: var(--danger);
}

.pm-war-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pm-war-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-field-bg) 86%, transparent);
    padding: 12px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.pm-war-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pm-war-panel-head h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--app-text-primary);
}

.pm-war-panel select {
    min-height: 34px;
    border: 1px solid var(--border);
    background: var(--app-field-bg);
    color: var(--app-text-primary);
    border-radius: 8px;
    padding: 4px 10px;
}

.pm-war-wbs-head,
.pm-war-wbs-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.pm-war-wbs-head {
    color: var(--app-text-muted);
    font-size: 11px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.pm-war-wbs-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow: auto;
    padding-right: 2px;
}

.pm-war-wbs-name {
    font-size: 13px;
    color: var(--app-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pm-war-caret {
    font-size: 10px;
    color: var(--app-text-muted);
}

.pm-war-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--grey) 72%, transparent);
    overflow: hidden;
}

.pm-war-bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
}

.pm-war-bar em {
    position: absolute;
    right: 4px;
    top: -2px;
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-size: 10px;
    font-style: normal;
    color: var(--app-text-primary);
}

.pm-war-eac {
    text-align: right;
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-size: 12px;
    color: var(--app-text-primary);
}

.pm-war-eac.critical {
    color: var(--warning);
    font-weight: 700;
}

.pm-war-wbs-footer {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.pm-war-months {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    font-size: 11px;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.pm-war-gantt {
    position: relative;
    flex: 1;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-war-gantt::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to right, transparent, transparent calc(16.66% - 1px), color-mix(in srgb, var(--border) 80%, transparent) calc(16.66% - 1px), color-mix(in srgb, var(--border) 80%, transparent) 16.66%);
    opacity: .4;
    pointer-events: none;
}

.pm-war-gantt-row {
    position: relative;
    height: 18px;
    z-index: 1;
}

.pm-war-gantt-baseline,
.pm-war-gantt-bar {
    position: absolute;
    top: 4px;
    height: 10px;
    border-radius: 4px;
}

.pm-war-gantt-baseline {
    border: 1px solid color-mix(in srgb, var(--blue) 56%, var(--border));
    background: transparent;
}

.pm-war-gantt-bar {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
}

.pm-war-gantt-label {
    position: absolute;
    left: calc(100% - 140px);
    top: 0;
    font-size: 11px;
    color: var(--app-text-primary);
    white-space: nowrap;
}

.pm-war-gantt-label.critical {
    color: var(--warning);
    font-weight: 700;
}

.pm-war-callout {
    border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-war-callout strong {
    color: var(--warning);
}

.pm-war-callout span {
    color: var(--app-text-primary);
}

.pm-war-switch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.pm-war-switch-wrap input {
    width: 16px;
    height: 16px;
}

.pm-war-hide-baseline .pm-war-gantt-baseline,
.pm-war-hide-baseline .pm2-gantt-bar-baseline {
    display: none;
}

.pm-war-ai-card {
    border: 1px solid rgba(245,158,11,.25);
    background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(217,119,6,.04));
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pm-war-ai-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245,158,11,.85);
    color: #1a1d23;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex: 0 0 auto;
}

.pm-war-ai-card h5 {
    margin: 0;
    font-size: 13px;
    color: var(--app-text-primary);
}

.pm-war-ai-card p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
}

.pm-war-empty {
    color: var(--app-text-muted);
    font-size: 12px;
    padding: 8px 0;
}

@media (max-width: 1100px) {
    .pm-war-grid {
        grid-template-columns: 1fr;
    }

    .pm-war-panel {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .pm-war-actions {
        width: 100%;
    }

    .pm-war-gantt-label {
        position: static;
        margin-left: 4px;
        display: inline-block;
    }
}

/* - CRM Growth Command Center -------------------------------------------- */

.crm-gcc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-gcc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-gcc-title {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--app-text-primary);
    letter-spacing: -0.02em;
}

.crm-gcc-subtitle {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
}

.crm-gcc-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-gcc-clock-btn {
    min-width: 94px;
}

.crm-gcc-clock-in {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.crm-gcc-clock-out {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.crm-gcc-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-gcc-global-search {
    border: 1px solid rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .08);
    color: var(--app-text-primary);
}

.crm-gcc-search-wrap {
    flex: 1;
    min-width: min(360px, 100%);
    position: relative;
}

.crm-gcc-search-icon {
    position: absolute;
    left: 11px;
    top: 8px;
    color: var(--app-text-muted);
    font-size: 12px;
}

.crm-gcc-search {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--app-field-bg);
    color: var(--app-text-primary);
    min-height: 34px;
    padding: 7px 11px 7px 30px;
    font-size: 13px;
}

.crm-gcc-search-status {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--grey) 70%, transparent);
    color: var(--app-text-muted);
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
}

.crm-gcc-weather {
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-field-bg) 84%, transparent);
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-gcc-weather-label {
    font-size: 11px;
    color: var(--app-text-muted);
}

.crm-gcc-weather-value {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-size: 12px;
    color: var(--app-text-primary);
}

.crm-gcc-section-title {
    margin: 2px 0 0;
    font-size: 1.18rem;
    color: var(--app-text-primary);
}

.crm-gcc-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.crm-gcc-kpi-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--app-field-bg);
    padding: 12px;
}

.crm-gcc-kpi-goal {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 9%, transparent);
}

.crm-gcc-kpi-risk {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.crm-gcc-kpi-label {
    font-size: 11px;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crm-gcc-kpi-value {
    margin-top: 4px;
    font-size: clamp(1.3rem, 1.9vw, 1.95rem);
    color: var(--app-text-primary);
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-weight: 700;
}

.crm-gcc-kpi-goal-row,
.crm-gcc-kpi-risk-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.crm-gcc-kpi-goal-row .crm-gcc-kpi-value,
.crm-gcc-kpi-goal .crm-gcc-kpi-note,
.crm-gcc-positive {
    color: var(--success);
}

.crm-gcc-kpi-risk-row .crm-gcc-kpi-value,
.crm-gcc-kpi-risk .crm-gcc-kpi-note {
    color: var(--danger);
}

.crm-gcc-kpi-note {
    font-size: 12px;
    font-weight: 700;
}

.crm-gcc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
}

.crm-gcc-left-col,
.crm-gcc-right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-gcc-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-field-bg) 90%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--app-text-primary) 12%, transparent);
    padding: 12px;
}

.crm-gcc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.crm-gcc-card-title {
    margin: 0;
    font-size: 1.02rem;
    color: var(--app-text-primary);
    font-weight: 700;
}

.crm-gcc-card-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-gcc-subtitle-label {
    font-size: 12px;
    color: var(--app-text-primary);
    font-weight: 700;
    margin-bottom: 7px;
}

.crm-gcc-partner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 14px;
}

.crm-gcc-grid-line {
    stroke: color-mix(in srgb, var(--app-text-muted) 35%, transparent);
    stroke-width: 1;
    fill: none;
}

.crm-gcc-radar {
    width: 100%;
    max-width: 250px;
    margin-inline: auto;
    display: block;
}

.crm-gcc-radar-a {
    fill: color-mix(in srgb, var(--blue) 20%, transparent);
    stroke: var(--blue);
    stroke-width: 1.8;
}

.crm-gcc-radar-b {
    fill: color-mix(in srgb, var(--warning) 18%, transparent);
    stroke: var(--warning);
    stroke-width: 1.8;
}

.crm-gcc-axis-label {
    fill: var(--app-text-muted);
    font-size: 10px;
}

.crm-gcc-table-head,
.crm-gcc-partner-row,
.crm-gcc-lead-row {
    display: grid;
    align-items: center;
    gap: 8px;
}

.crm-gcc-table-head {
    grid-template-columns: 1.5fr 1fr 1fr;
    font-size: 11px;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 7px;
}

.crm-gcc-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
}

.crm-gcc-partner-row {
    grid-template-columns: 1.5fr 1fr 1fr;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--app-text-primary);
    background: color-mix(in srgb, var(--grey) 70%, transparent);
}

.crm-gcc-margin-box {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--grey) 65%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
}

.crm-gcc-mini-label {
    font-size: 11px;
    color: var(--app-text-muted);
}

.crm-gcc-mini-value {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    color: var(--app-text-primary);
    font-size: 13px;
    font-weight: 700;
}

.crm-gcc-leads-head,
.crm-gcc-lead-row {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
}

.crm-gcc-lead-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--grey) 72%, transparent);
}

.crm-gcc-lead-title {
    font-size: 13px;
    color: var(--app-text-primary);
    font-weight: 700;
}

.crm-gcc-lead-meta {
    font-size: 11px;
    color: var(--app-text-muted);
    margin-top: 2px;
}

.crm-gcc-prob-wrap {
    display: flex;
    align-items: center;
}

.crm-gcc-prob-ring {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--crm-prob-color) calc(var(--crm-prob, 0) * 1%), color-mix(in srgb, var(--app-text-muted) 26%, transparent) 0%);
}

.crm-gcc-prob-ring span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: var(--app-text-primary);
    font-weight: 700;
    background: var(--app-field-bg);
    border: 1px solid var(--border);
}

.crm-gcc-lead-amount {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    font-size: 13px;
    color: var(--app-text-primary);
}

.crm-gcc-card-note {
    margin: 0 0 10px;
    color: var(--app-text-muted);
    font-size: 12px;
}

.crm-gcc-node-map,
.crm-gcc-sentiment {
    width: 100%;
    display: block;
}

.crm-gcc-node {
    fill: color-mix(in srgb, var(--app-field-bg) 85%, transparent);
    stroke-width: 1.8;
}

.crm-gcc-node-a { stroke: var(--blue); }
.crm-gcc-node-b { stroke: var(--success); }
.crm-gcc-node-c { stroke: var(--warning); }

.crm-gcc-node-core {
    fill: color-mix(in srgb, var(--navy) 75%, var(--blue));
    stroke: color-mix(in srgb, var(--app-text-primary) 25%, transparent);
}

.crm-gcc-node-text {
    fill: var(--app-text-primary);
    font-size: 9px;
}

.crm-gcc-node-text-core {
    fill: var(--app-text-primary);
    font-size: 10px;
    font-weight: 700;
}

.crm-gcc-sentiment-line {
    fill: none;
    stroke: var(--warning);
    stroke-width: 3;
}

.crm-gcc-sentiment-alert {
    fill: var(--danger);
    stroke: var(--app-field-bg);
    stroke-width: 2;
}

.crm-gcc-months {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    color: var(--app-text-muted);
    font-size: 11px;
    margin-top: 6px;
}

.crm-gcc-bid-link {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--grey) 62%, transparent);
    padding: 8px 10px;
    margin-top: 8px;
}

.crm-gcc-ai-alert {
    border: 1px solid rgba(245, 158, 11, .2);
    background: linear-gradient(135deg, rgba(245, 158, 11, .06), rgba(217, 119, 6, .03));
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.crm-gcc-ai-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.crm-gcc-ai-alert h3 {
    margin: 0;
    font-size: 14px;
    color: var(--app-text-primary);
}

.crm-gcc-ai-alert p {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--app-text-muted);
    line-height: 1.45;
}

.crm-gcc-alert-status {
    color: var(--warning);
    font-weight: 700;
}

.crm-gcc-empty {
    font-size: 12px;
    color: var(--app-text-muted);
    padding: 4px 0;
}

@media (max-width: 1200px) {
    .crm-gcc-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-gcc-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .crm-gcc-partner-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .crm-gcc-toolbar {
        align-items: stretch;
    }

    .crm-gcc-search-wrap,
    .crm-gcc-search-status,
    .crm-gcc-weather {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .crm-gcc-leads-head,
    .crm-gcc-lead-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .crm-gcc-leads-head span:nth-child(4),
    .crm-gcc-lead-row > :nth-child(4) {
        display: none;
    }
}

/* ── CRM Utility Classes ──────────────────────────────────────────────────── */

/* AI-styled button (amber gradient) — replaces inline violet/blue gradient */
.crm-btn-ai {
    background: linear-gradient(135deg, rgba(245, 158, 11, .85), rgba(217, 119, 6, .9)) !important;
    color: #1a1d23 !important;
    border: none !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crm-btn-ai:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(217, 119, 6, 1)) !important;
}

/* CRM sub-tabs (replaces inline border-bottom styles) */
.crm-subtab {
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--app-text-muted);
    cursor: pointer;
    font-size: 13px;
    transition: color 0.15s, border-color 0.15s;
}
.crm-subtab.active {
    border-bottom-color: rgba(245, 158, 11, .7);
    color: rgba(251, 191, 36, .95);
    font-weight: 600;
}
.crm-subtab:hover:not(.active) {
    color: var(--app-text-primary);
    border-bottom-color: rgba(245, 158, 11, .25);
}

/* Global .btn-amber (shared across all non-PM modules) */
.btn-amber {
    background: rgba(245, 158, 11, .85);
    color: #1a1d23;
    border: 1px solid rgba(251, 191, 36, .5);
    font-weight: 600;
}
.btn-amber:hover {
    background: rgba(245, 158, 11, .95);
    border-color: rgba(251, 191, 36, .7);
    box-shadow: 0 4px 16px rgba(245, 158, 11, .25);
}

/* - Inventory Smart Stock Dashboard --------------------------------------- */

.inv-smart-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 72vh;
}

.inv-smart-topbar {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(140deg,
        color-mix(in srgb, rgba(245,158,11,.18) 64%, var(--app-field-bg)),
        color-mix(in srgb, rgba(245,158,11,.06) 18%, var(--app-field-bg))
    );
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.inv-smart-subtabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-smart-subtab {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-field-bg) 88%, transparent);
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 9px;
    cursor: pointer;
}

.inv-smart-subtab.active {
    color: var(--app-text-primary);
    border-color: rgba(245,158,11,.35);
    box-shadow: inset 0 -2px 0 rgba(245,158,11,.6);
}

.inv-smart-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-smart-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 14px;
}

.inv-smart-map {
    border: 1px solid var(--border);
    border-radius: 14px;
    min-height: 560px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 26%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 42%),
        radial-gradient(circle at 75% 63%, color-mix(in srgb, var(--success) 12%, transparent), transparent 35%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--navy) 78%, var(--app-field-bg)),
            color-mix(in srgb, var(--app-field-bg) 90%, transparent)
        );
}

.inv-smart-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--app-text-muted) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--app-text-muted) 12%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.inv-smart-map-brand {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.inv-map-connector {
    position: absolute;
    border-top: 2px dashed color-mix(in srgb, var(--blue) 56%, transparent);
    opacity: 0.72;
    z-index: 1;
}

.inv-map-connector-a {
    width: 29%;
    top: 53%;
    left: 20%;
    transform: rotate(-7deg);
}

.inv-map-connector-b {
    width: 21%;
    top: 36%;
    left: 35%;
    transform: rotate(21deg);
}

.inv-map-connector-c {
    width: 24%;
    top: 42%;
    left: 50%;
    transform: rotate(-2deg);
}

.inv-map-connector-d {
    width: 30%;
    top: 67%;
    left: 29%;
    transform: rotate(-30deg);
    border-top-color: color-mix(in srgb, var(--warning) 68%, transparent);
}

.inv-map-node {
    position: absolute;
    top: var(--node-top);
    left: var(--node-left);
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 3;
}

.inv-map-node-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--success) 80%, var(--app-field-bg));
    background: color-mix(in srgb, var(--app-field-bg) 78%, var(--success));
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 18%, transparent);
    animation: invPulse 2s infinite;
}

.inv-map-node-label {
    color: var(--app-text-primary);
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--navy) 68%, transparent);
}

.inv-map-node-warning .inv-map-node-dot {
    border-color: color-mix(in srgb, var(--warning) 82%, var(--app-field-bg));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning) 20%, transparent);
}

.inv-map-node-core .inv-map-node-dot {
    width: 18px;
    height: 18px;
}

.inv-map-node-active .inv-map-node-label {
    color: rgba(251,191,36,.95);
}

.inv-node-popover {
    position: absolute;
    width: min(320px, 92%);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-field-bg) 92%, transparent);
    padding: 10px;
    z-index: 5;
    backdrop-filter: blur(3px);
}

.inv-node-popover-title {
    font-size: 14px;
    color: var(--app-text-primary);
    font-weight: 700;
    margin-bottom: 8px;
}

.inv-rack-view {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px;
    background: color-mix(in srgb, var(--grey) 75%, transparent);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.inv-rack {
    display: grid;
    gap: 2px;
    align-content: end;
    min-height: 68px;
}

.inv-rack span {
    height: 10px;
    border-radius: 2px;
}

.inv-rack-danger span { background: color-mix(in srgb, var(--danger) 76%, var(--app-field-bg)); }
.inv-rack-success span { background: color-mix(in srgb, var(--success) 74%, var(--app-field-bg)); }
.inv-rack-warning span { background: color-mix(in srgb, var(--warning) 74%, var(--app-field-bg)); }

.inv-node-legend {
    margin-top: 8px;
    display: grid;
    gap: 5px;
    font-size: 11px;
    color: var(--app-text-muted);
}

.inv-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 2px;
    margin-right: 6px;
}

.inv-dot-danger { background: var(--danger); }
.inv-dot-success { background: var(--success); }
.inv-dot-warning { background: var(--warning); }

.inv-smart-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inv-widget {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-field-bg) 92%, transparent);
    padding: 12px;
}

.inv-widget-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--app-text-primary);
}

.inv-widget-note {
    margin: 8px 0 10px;
    color: var(--app-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.inv-kpi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    padding: 8px 0;
    font-size: 12px;
}

.inv-kpi-row:last-child {
    border-bottom: 0;
}

.inv-kpi-row strong {
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
    color: var(--app-text-primary);
}

.inv-risk-high { color: var(--warning); }
.inv-risk-medium { color: color-mix(in srgb, var(--warning) 75%, var(--app-text-primary)); }
.inv-risk-low { color: var(--success); }

.inv-ghost-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 28px;
    gap: 8px;
    align-items: center;
}

.inv-ghost-grid-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}

.inv-ghost-row {
    border: 1px dashed color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 8px;
    padding: 7px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--app-text-primary);
    opacity: 0.62;
    background: color-mix(in srgb, var(--grey) 70%, transparent);
}

.inv-ghost-kebab {
    text-align: right;
    color: var(--app-text-muted);
}

.inv-ghost-empty {
    margin-top: 8px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.inv-ghost-cta {
    margin-top: 10px;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 8px;
    background: rgba(245,158,11,.06);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.inv-ghost-cta span {
    color: var(--app-text-muted);
    font-size: 11px;
}

.inv-draft-po-list {
    display: grid;
    gap: 8px;
}

.inv-draft-po-row {
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--grey) 68%, transparent);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.inv-draft-po-meta {
    min-width: 0;
}

.inv-draft-po-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--app-text-primary);
}

.inv-draft-po-sub {
    font-size: 11px;
    color: var(--app-text-muted);
    margin-top: 2px;
}

.inv-draft-po-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inv-po-status {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.inv-po-status-draft {
    border-color: color-mix(in srgb, var(--warning) 52%, var(--border));
    color: color-mix(in srgb, var(--warning) 90%, var(--app-text-primary));
}

.inv-po-status-promoted {
    border-color: color-mix(in srgb, var(--success) 54%, var(--border));
    color: color-mix(in srgb, var(--success) 88%, var(--app-text-primary));
}

.inv-po-status-neutral {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
    color: color-mix(in srgb, var(--blue) 82%, var(--app-text-primary));
}

.inv-draft-po-empty {
    color: var(--app-text-muted);
    font-size: 12px;
}

.inv-ocr-flow {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--grey) 72%, transparent);
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 40px minmax(80px, 1.2fr);
    gap: 8px;
    align-items: center;
}

.inv-ocr-inbox,
.inv-ocr-arrow {
    text-align: center;
    font-size: 11px;
    color: var(--app-text-muted);
}

.inv-ocr-items {
    display: grid;
    gap: 4px;
}

.inv-ocr-items > div {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--app-field-bg) 87%, transparent);
    color: var(--app-text-primary);
    font-size: 11px;
    padding: 4px 6px;
    font-family: "DM Mono", "Fira Code", Consolas, monospace;
}

@keyframes invPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (max-width: 1100px) {
    .inv-smart-main {
        grid-template-columns: 1fr;
    }

    .inv-smart-map {
        min-height: 460px;
    }
}

@media (max-width: 768px) {
    .inv-smart-topbar {
        align-items: stretch;
    }

    .inv-smart-actions,
    .inv-smart-subtabs {
        width: 100%;
    }

    .inv-smart-actions .btn,
    .inv-smart-subtabs .inv-smart-subtab {
        flex: 1 1 auto;
    }

    .inv-smart-map {
        min-height: 390px;
    }

    .inv-node-popover {
        width: min(280px, 88%);
    }

    .inv-ghost-grid {
        grid-template-columns: 1.5fr 1fr 1fr 22px;
    }

    .inv-draft-po-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .inv-draft-po-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ── Construction PM — status & health colours ──────────────────────────── */
/* These CSS variables allow all CPM status badges and progress bars
   to respond to theme switches. Hex literals must not appear in JS. */
:root {
    --cpm-punch-list:  #e9c46a;   /* sandy amber — punch list phase         */
    --cpm-closed-out:  #20c997;   /* teal — project fully closed out        */
    --cpm-on-hold-dim: #6c757d;   /* muted grey for pre-construction/dimmed */
    --cpm-purple:      #8b5cf6;   /* violet — forecast / ready_for_review   */
}

/* ── Semantic tint backgrounds (badge/tag light fills) ───────────────────── */
/* Light-fill versions of semantic colours for tag chips and inline badges.   */
:root {
    --blue-tint:            #eff6ff;  /* very light blue   — info/neutral tag bg    */
    --blue-tint-border:     #bfdbfe;  /* blue tint border                           */
    --success-tint:         #f0fdf4;  /* very light green  — success/done tag bg    */
    --success-tint-border:  #bbf7d0;  /* success tint border                        */
    --warning-tint:         #fef3c7;  /* very light amber  — caution tag bg         */
    --warning-tint-border:  #fde68a;  /* warning tint border                        */
    --purple-tint:          #f5f3ff;  /* very light violet — feature/AI tag bg      */
    --purple-tint-border:   #ddd6fe;  /* purple tint border                         */
}

/* ════════════════════════════════════════════════════════════════════════════
   PROJECT MANAGEMENT MODULE (PM2) - Linear-inspired, Dark-first Redesign
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Container & Layout ────────────────────────────────────────────────────── */

.pm2-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0;
}

.pm2-panel-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.pm2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid rgba(148,163,184,.08);
    flex-wrap: wrap;
}

.pm2-header-left,
.pm2-header-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Tab Navigation (Horizontal Segment/Pill Control) ────────────────────── */

.pm2-tab-nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(148,163,184,.08);
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox: hide scrollbar for clean look */
}
.pm2-tab-nav::-webkit-scrollbar { display: none; }

.pm2-tab-pill {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: rgba(255,255,255,.5);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
}

.pm2-tab-pill:hover {
    background: rgba(245,158,11,.05);
    color: rgba(255,255,255,.85);
}

.pm2-tab-pill.active {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.35);
    color: #fbbf24;
    border-bottom: none;
}

/* -- Tab Overflow "More" Dropdown ------------------------------------------ */
/* Progressive disclosure - max 5-7 visible tabs. Overflow contains
   lower-frequency views (Punch List, Automation, Portal, etc.)               */

.pm2-tab-more-wrap {
    position: relative;
}

.pm2-tab-more-trigger {
    display: inline-flex;
    align-items: center;
}

.pm2-tab-more-trigger svg {
    transition: transform 0.15s ease;
}

.pm2-tab-more-wrap.open .pm2-tab-more-trigger svg {
    transform: rotate(180deg);
}

.pm2-tab-more-wrap.open .pm2-tab-more-trigger {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.35);
    color: #fbbf24;
}

.pm2-tab-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #1e2530;
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    z-index: 9999;
    padding: 4px;
    animation: fadeIn 0.12s ease;
}

.pm2-tab-more-wrap.open .pm2-tab-more-dropdown {
    display: block;
}

.pm2-tab-more-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,.7);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
}

.pm2-tab-more-item:hover {
    background: rgba(245,158,11,.08);
    color: #fbbf24;
}

/* When a "More" tab is currently active, highlight the More trigger */
.pm2-tab-more-trigger.has-active-child {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.35);
    color: #fbbf24;
}

/* ── Amber Button Variant (Design System Primary Accent) ──────────────────── */

.pm2-btn-amber {
    background: rgba(245,158,11,.85);
    color: #1a1d23;
    font-weight: 600;
    border-color: rgba(217,119,6,.5);
}

.pm2-btn-amber:hover:not(:disabled) {
    background: rgba(245,158,11,.95);
    border-color: rgba(217,119,6,.7);
    box-shadow: 0 4px 16px rgba(245,158,11,.25);
}

/* ── Tab Panels ────────────────────────────────────────────────────────────── */

.pm2-tab-panel {
    display: none;
}

.pm2-tab-panel.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Cards (Glass-morphism, Semi-transparent) ──────────────────────────────── */

.pm2-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pm2-card:hover {
    border-color: rgba(245, 158, 11, .15);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

.pm2-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--surface-border);
    flex-wrap: wrap;
}

.pm2-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.pm2-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pm2-title-sm {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--app-text-primary);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.pm2-table-wrap {
    overflow-x: auto;
}

.pm2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.pm2-table thead {
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid rgba(148,163,184,.1);
}

.pm2-table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    user-select: none;
}

.pm2-table tbody tr {
    border-bottom: 1px solid rgba(148,163,184,.05);
    transition: background 0.15s ease;
}

.pm2-table tbody tr:hover {
    background: rgba(245,158,11,.04);
}

.pm2-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

.pm2-table td {
    padding: 0.625rem 1rem;
    color: rgba(255,255,255,.75);
    font-size: 0.8125rem;
}

/* ── Stat Cards ────────────────────────────────────────────────────────────── */

.pm2-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.pm2-stat-card {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.1);
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    transition: border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pm2-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.3;
}

.pm2-stat-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: currentColor;
    transform: translateY(-2px);
}

.pm2-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-text-primary);
    font-family: 'DM Mono', monospace;
    margin-bottom: 0.5rem;
}

.pm2-stat-label {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pm2-stat-blue { color: var(--blue); }
.pm2-stat-orange { color: #f59e0b; }
.pm2-stat-green { color: var(--success); }
.pm2-stat-purple { color: #8b5cf6; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.pm2-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.pm2-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pm2-form-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--app-text-primary);
    letter-spacing: 0.01em;
}

.pm2-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.pm2-form-section-title {
    margin: 1rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.pm2-form-hint {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    font-weight: 400;
}

.pm2-input,
.pm2-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 6px;
    background: rgba(15,23,42,.5);
    color: rgba(255,255,255,.85);
    font-size: 0.8125rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.pm2-input:focus,
.pm2-select:focus {
    outline: none;
    border-color: rgba(245, 158, 11, .4);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .1);
}

.pm2-select {
    cursor: pointer;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.pm2-btn {
    padding: 0.4rem 0.875rem;
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    text-decoration: none;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.75);
    min-height: 32px;
}

.pm2-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pm2-btn-primary {
    background: rgba(99,102,241,.85);
    color: white;
    border-color: rgba(129,140,248,.5);
}

.pm2-btn-primary:hover:not(:disabled) {
    background: rgba(99,102,241,.95);
    border-color: rgba(129,140,248,.7);
    box-shadow: 0 4px 16px rgba(99,102,241,.3);
}

.pm2-btn-secondary {
    background: var(--surface-1);
    color: var(--app-text-primary);
    border-color: var(--surface-border);
}

.pm2-btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--app-text-muted);
}

.pm2-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* ── Selects ──────────────────────────────────────────────────────────────── */

.pm2-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%238B8B8B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}

.pm2-select-lg {
    min-width: 200px;
}

.pm2-select-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

/* ── Summary Box ───────────────────────────────────────────────────────────── */

.pm2-summary-box {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    color: var(--app-text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ── Controls Group ────────────────────────────────────────────────────────── */

.pm2-controls-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Placeholder ───────────────────────────────────────────────────────────── */

.pm2-placeholder {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--surface-border);
    border-radius: 6px;
}

.pm2-placeholder-content {
    text-align: center;
}

.pm2-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.pm2-placeholder-content p {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.9375rem;
}

/* ── Empty State ───────────────────────────────────────────────────────────── */

.pm2-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--app-text-muted);
}

.pm2-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.pm2-empty-state p {
    margin: 0;
    font-size: 0.9375rem;
}

/* ── EVM Grid ──────────────────────────────────────────────────────────────── */

.pm2-evm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pm2-evm-chart {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pm2-evm-label {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.pm2-evm-placeholder {
    font-size: 1.5rem;
}

/* ── War Room ──────────────────────────────────────────────────────────────── */

.pm2-war-room {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pm2-war-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.pm2-war-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-text-primary);
}

.pm2-war-subtitle {
    margin: 0.375rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.8125rem;
}

.pm2-war-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.pm2-war-weather {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
}

.pm2-war-weather-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    margin-top: 2px;
}

.pm2-war-weather-label {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pm2-war-weather-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--app-text-primary);
    margin: 0.25rem 0;
}

.pm2-war-weather-source {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.pm2-war-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
}

.pm2-war-panel {
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.pm2-war-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, 0.02);
}

.pm2-war-panel-head h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.pm2-wbs-table {
    display: flex;
    flex-direction: column;
}

.pm2-wbs-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--surface-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pm2-wbs-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.pm2-wbs-footer {
    padding: 1rem;
    text-align: center;
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    border-top: 1px solid var(--surface-border);
}

.pm2-war-months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-border);
    font-size: 0.75rem;
    color: var(--app-text-muted);
    text-align: center;
}

.pm2-war-gantt {
    padding: 1rem;
    min-height: 100px;
}

.pm2-war-callout {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--surface-border);
    border-left: 3px solid rgba(245, 158, 11, 0.4);
    font-size: 0.8125rem;
}

.pm2-war-callout strong {
    display: block;
    color: var(--app-text-primary);
    margin-bottom: 0.25rem;
}

.pm2-war-callout span {
    color: var(--app-text-muted);
}

/* Legacy AI card class — no-op, use .pm2-ai-card */
.pm2-war-ai-card { display: none; }
.pm2-war-ai-badge {}

/* ── Shared AI Card (amber system) ─────────────────────────────────────── */
.pm2-ai-card {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(217, 119, 6, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pm2-ai-badge {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.85);
    color: #1a1d23;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.pm2-ai-card h5 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    color: var(--app-text-primary);
}

.pm2-ai-card p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
}

/* ── Hint text (replaces inline .6rem invisible hints) ─────────────────── */
.pm2-hint-text {
    font-size: 0.6875rem;
    color: var(--app-text-muted);
    opacity: 0.6;
}

.pm2-switch-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    cursor: pointer;
}

.pm2-switch-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: rgba(245, 158, 11, 0.85);
}

/* ── Kanban Board ──────────────────────────────────────────────────────────── */

.pm2-kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* ── Comments List ────────────────────────────────────────────────────────── */

.pm2-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Field Log List ───────────────────────────────────────────────────────── */

.pm2-fieldlog-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Automation List ──────────────────────────────────────────────────────── */

.pm2-automation-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── AI Optimizer ────────────────────────────────────────────────────────── */

.pm2-ai-optimizer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Modals ───────────────────────────────────────────────────────────────── */

.pm2-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.pm2-modal-overlay.active,
.pm2-modal-overlay.open {
    display: flex;
}

.pm2-modal {
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pm2-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--surface-border);
}

.pm2-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.pm2-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pm2-modal-close:hover {
    background: var(--surface-1);
    border-color: var(--app-text-muted);
    color: var(--app-text-primary);
}

.pm2-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.pm2-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--surface-border);
    background: rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
}

.pm2-modal-subtitle {
    margin: 0 0 1rem;
    color: var(--app-text-muted);
    font-size: 0.9375rem;
}

/* ── Link Display (Portal) ────────────────────────────────────────────────── */

.pm2-link-display {
    padding: 1rem;
    background: var(--app-field-bg);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 0.8125rem;
    word-break: break-all;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm2-link-display:hover {
    background: var(--surface-1);
    border-color: rgba(245,158,11,.5);
}

/* ── Cost Summary ──────────────────────────────────────────────────────────── */

.pm2-cost-summary {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
}

/* ── Scope Checkboxes ──────────────────────────────────────────────────────── */

.pm2-scope-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.pm2-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--app-text-primary);
    user-select: none;
}

.pm2-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: rgba(245,158,11,.85);
    flex-shrink: 0;
}

.pm2-checkbox-label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .pm2-war-grid {
        grid-template-columns: 1fr;
    }

    .pm2-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pm2-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pm2-container {
        padding: 1rem 0;
        gap: 1rem;
    }

    .pm2-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pm2-header-left,
    .pm2-header-right {
        width: 100%;
    }

    .pm2-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pm2-stat-grid {
        grid-template-columns: 1fr;
    }

    .pm2-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pm2-form-row {
        grid-template-columns: 1fr;
    }

    .pm2-controls-group {
        flex-direction: column;
        align-items: stretch;
    }

    .pm2-controls-group .pm2-btn,
    .pm2-controls-group .pm2-input,
    .pm2-controls-group .pm2-select {
        width: 100%;
    }

    .pm2-modal {
        max-width: 95vw;
        max-height: 95vh;
    }

    .pm2-scope-checkboxes {
        flex-direction: column;
    }

    .pm2-checkbox-label {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PM2: HERO KPI STRIP — Neutral base, amber accent on hover
   Research: Removed per-card color variants, decorative glows, and hover
   transforms. Color = signal (amber = interactive), not decoration.
   ═══════════════════════════════════════════════════════════════════════════ */

.pm2-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.pm2-hero-card {
    position: relative;
    border-radius: 10px;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    background: rgba(15,23,42,.5);
    border: 1px solid rgba(148,163,184,.08);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pm2-hero-card:hover {
    border-color: rgba(245,158,11,.3);
    background: rgba(245,158,11,.04);
}

.pm2-hero-card:active {
    background: rgba(245,158,11,.08);
}

/* Icon container — consistent neutral styling */
.pm2-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(148,163,184,.08);
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(148,163,184,.1);
    transition: color 0.15s ease, background 0.15s ease;
}

.pm2-hero-card:hover .pm2-hero-icon {
    background: rgba(245,158,11,.12);
    color: #fbbf24;
    border-color: rgba(245,158,11,.2);
}

/* Data: value + label */
.pm2-hero-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pm2-hero-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: 'DM Mono', ui-monospace, monospace;
}

.pm2-hero-label {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.4);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Drill-through arrow — visible on hover */
.pm2-hero-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,.15);
    transition: color 0.15s ease, transform 0.15s ease;
}

.pm2-hero-card:hover .pm2-hero-arrow {
    color: #f59e0b;
    transform: translateX(2px);
}

/* Legacy: keep these classes as no-ops so old markup doesn't break */
.pm2-hero-indigo, .pm2-hero-amber, .pm2-hero-emerald, .pm2-hero-violet { }
.pm2-hero-glow { display: none; }
.pm2-hero-drill-hint { display: none; }
.pm2-hero-clickable { cursor: pointer; }

/* ── Insight Panel: Collapsible Section ───────────────────────────────────── */
/* Research: Progressive disclosure — Schedule + Change Orders collapse by
   default so Budget + EVM stay above the fold (2-card visible max).          */

.pm2-insight-expand-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}

.pm2-insight-expand-toggle:hover {
    color: #f59e0b;
}

.pm2-insight-expand-toggle svg {
    transition: transform 0.2s ease;
}

.pm2-insight-expand-toggle.expanded svg {
    transform: rotate(180deg);
}

.pm2-insight-collapsible {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    animation: fadeIn 0.15s ease;
}

.pm2-insight-collapsible.expanded {
    display: flex;
}

/* Card header link (replaces tiny 0.6rem hint text) */
.pm2-card-link {
    font-size: 0.75rem;
    color: rgba(245,158,11,.6);
    cursor: pointer;
    transition: color 0.15s ease;
}

.pm2-card-link:hover {
    color: #f59e0b;
}

/* ═══ PM2: PROJECT HERO — Active project summary card ═══════════════════ */

.pm2-project-hero {
    background: rgba(15,23,42,.4);
    border: 1px solid rgba(148,163,184,.08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.pm2-project-hero-inner {
    flex: 1;
    min-width: 0;
}
.pm2-project-hero-actions {
    flex-shrink: 0;
}
.pm2-summary-placeholder {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,.3);
    font-size: 0.8125rem;
}

/* ═══ PM2: LIFECYCLE BAR — Inline transition controls ═══════════════════ */

.pm2-lifecycle-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.06);
    border-radius: 8px;
    flex-wrap: wrap;
}
.pm2-lifecycle-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.3);
    margin-right: 0.25rem;
}
.pm2-select-sm {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
}

/* ═══ PM2: OVERVIEW GRID — Two-column layout ════════════════════════════ */

.pm2-overview-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 0.75rem;
    align-items: start;
}

.pm2-insight-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pm2-insight-card {
    margin-bottom: 0 !important;
}

.pm2-card-table-flush {
    margin-bottom: 0 !important;
}

.pm2-card-count {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ═══ PM2: BUDGET BARS — Visual budget utilization ══════════════════════ */

.pm2-budget-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pm2-budget-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pm2-budget-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,.4);
    width: 72px;
    flex-shrink: 0;
}
.pm2-budget-track {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
}
.pm2-budget-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.pm2-fill-amber  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pm2-fill-emerald { background: linear-gradient(90deg, #22c55e, #4ade80); }
.pm2-fill-indigo { background: linear-gradient(90deg, #6366f1, #818cf8); }

.pm2-budget-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    width: 40px;
    text-align: right;
    font-family: 'DM Mono', 'Fira Code', monospace;
}

/* ═══ PM2: EVM GAUGES — Half-circle gauge meters ════════════════════════ */

.pm2-evm-gauges {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.pm2-gauge-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
}
.pm2-gauge {
    text-align: center;
    position: relative;
    width: 120px;
}
.pm2-gauge-svg {
    width: 120px;
    height: 60px;
}
.pm2-gauge-arc {
    transition: stroke-dashoffset 0.8s cubic-bezier(.4,0,.2,1);
}
.pm2-gauge-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.4);
    margin-top: 0.25rem;
}
.pm2-gauge-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    line-height: 1;
    margin-top: 0.125rem;
}

/* ═══ PM2: GANTT & CO MINI PREVIEWS ═════════════════════════════════════ */

.pm2-gantt-mini,
.pm2-co-mini {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm2-gantt-placeholder,
.pm2-co-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255,255,255,.25);
    font-size: 0.75rem;
    text-align: center;
}

/* ═══ Responsive: collapse hero stats + overview grid ═══════════════════ */
@media (max-width: 1200px) {
    .pm2-overview-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .pm2-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .pm2-hero-stats {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PM2: AGGRESSIVE OVERRIDES — Nuclear reset of core.css inside PM module
   Uses #section-project_management for ID-level specificity to beat #app rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TAB OVERRIDES: Remove underline style, enforce pill style ──────── */
#section-project_management .pm2-container .tab {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(255,255,255,.5) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    letter-spacing: 0.01em;
}
#section-project_management .pm2-container .tab:hover {
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.8) !important;
}
#section-project_management .pm2-container .tab.active {
    background: rgba(245, 158, 11, .10) !important;
    border-color: rgba(245, 158, 11, .35) !important;
    color: rgba(251, 191, 36, .95) !important;
    border-bottom: none !important;
}

/* ── 2. TAB-PANEL OVERRIDES: Smooth entrance ──────────────────────────── */
#section-project_management .pm2-container .tab-panel.active {
    display: block;
    animation: pm2FadeSlide 0.25s ease forwards;
}
@keyframes pm2FadeSlide {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 3. PM2-CARD STRONGER VISUAL: More visible glass cards ─────────── */
#section-project_management .pm2-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04) !important;
    overflow: hidden;
    position: relative;
    margin-bottom: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#section-project_management .pm2-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,.18) 30%, rgba(148,163,184,.18) 70%, transparent 100%) !important;
    pointer-events: none;
    z-index: 1;
}
#section-project_management .pm2-card::after {
    content: none !important;
}
#section-project_management .pm2-card:hover {
    border-color: rgba(245, 158, 11, .15) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06) !important;
    transform: none !important;
}

/* ── 4. CARD-HEADER & CARD-BODY inside pm2-card ───────────────────────── */
#section-project_management .pm2-card-header {
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
    background: rgba(255,255,255,.015);
}
#section-project_management .pm2-card-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
    letter-spacing: -0.01em;
}
#section-project_management .pm2-card-body {
    padding: 1rem 1.25rem !important;
}

/* ── 5. JS-GENERATED .card OVERRIDE (fallback for dynamic content) ──── */
#section-project_management .pm2-container .card {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.15) !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    isolation: auto !important;
    position: relative;
}
#section-project_management .pm2-container .card::before,
#section-project_management .pm2-container .card::after {
    content: none !important;
}
#section-project_management .pm2-container .card:hover {
    transform: none !important;
    border-color: rgba(245, 158, 11, .12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.2) !important;
}
#section-project_management .pm2-container .card-header {
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
}
#section-project_management .pm2-container .card-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}
#section-project_management .pm2-container .card-body {
    padding: 1rem 1.25rem !important;
}

/* ── 6. BUTTON OVERRIDES (beats #app .btn) ────────────────────────────── */
#section-project_management .pm2-container .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.4rem 0.875rem !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.75) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    min-height: 32px !important;
    transform: none !important;
}
#section-project_management .pm2-container .btn:hover {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(148,163,184,.25) !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
#section-project_management .pm2-container .btn-primary,
#section-project_management .pm2-container .pm2-btn-primary,
#section-project_management .pm2-container .pm2-btn-amber {
    background: rgba(245, 158, 11, .85) !important;
    border-color: rgba(251, 191, 36, .5) !important;
    color: #1a1d23 !important;
    font-weight: 600 !important;
}
#section-project_management .pm2-container .btn-primary:hover,
#section-project_management .pm2-container .pm2-btn-primary:hover,
#section-project_management .pm2-container .pm2-btn-amber:hover {
    background: rgba(245, 158, 11, .95) !important;
    border-color: rgba(251, 191, 36, .7) !important;
}
#section-project_management .pm2-container .btn-success {
    background: rgba(34,197,94,.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34,197,94,.3) !important;
}
#section-project_management .pm2-container .btn-success:hover {
    background: rgba(34,197,94,.25) !important;
}
#section-project_management .pm2-container .btn-danger {
    background: rgba(239,68,68,.12) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,.3) !important;
}
#section-project_management .pm2-container .btn-danger:hover {
    background: rgba(239,68,68,.22) !important;
}
#section-project_management .pm2-container .btn-outline {
    background: transparent !important;
    border-color: rgba(148,163,184,.15) !important;
    color: rgba(255,255,255,.6) !important;
}
#section-project_management .pm2-container .btn-outline:hover {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.85) !important;
}
#section-project_management .pm2-container .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 26px !important;
}

/* ── 7. TABLE OVERRIDES ──────────────────────────────────────────────── */
#section-project_management .pm2-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.8125rem !important;
}
#section-project_management .pm2-container table thead {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    display: table-header-group !important;
}
#section-project_management .pm2-container table tbody {
    display: table-row-group !important;
}
#section-project_management .pm2-container table tr {
    display: table-row !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
#section-project_management .pm2-container table th {
    display: table-cell !important;
    padding: 0.625rem 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.6875rem !important;
    color: rgba(255,255,255,.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid rgba(148,163,184,.1) !important;
    background: rgba(255,255,255,.015) !important;
    white-space: nowrap;
    min-height: 0 !important;
    width: auto !important;
}
#section-project_management .pm2-container table td {
    display: table-cell !important;
    padding: 0.625rem 1rem !important;
    color: rgba(255,255,255,.75) !important;
    border-bottom: 1px solid rgba(148,163,184,.05) !important;
    font-size: 0.8125rem !important;
    white-space: normal;
    min-height: 0 !important;
    width: auto !important;
}
#section-project_management .pm2-container table td::before {
    content: none !important;
}
#section-project_management .pm2-container table tbody tr:hover {
    background: rgba(245, 158, 11, .04) !important;
}

/* ── 8. STAT-CARD OVERRIDES ──────────────────────────────────────────── */
#section-project_management .pm2-container .stat-card {
    background: rgba(15,23,42,.5) !important;
    border: 1px solid rgba(148,163,184,.1) !important;
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
    transition: border-color 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: auto !important;
}
#section-project_management .pm2-container .stat-card::before,
#section-project_management .pm2-container .stat-card::after {
    content: none !important;
}
#section-project_management .pm2-container .stat-card:hover {
    transform: none !important;
    border-color: rgba(245, 158, 11, .15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
}
#section-project_management .pm2-container .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}
#section-project_management .pm2-container .stat-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0;
}
#section-project_management .pm2-container .stat-icon.blue {
    background: rgba(99,102,241,.15) !important;
    border: 1px solid rgba(99,102,241,.25) !important;
    color: #a5b4fc !important;
}
#section-project_management .pm2-container .stat-icon.green {
    background: rgba(34,197,94,.12) !important;
    border: 1px solid rgba(34,197,94,.25) !important;
    color: #4ade80 !important;
}
#section-project_management .pm2-container .stat-icon.orange {
    background: rgba(245,158,11,.12) !important;
    border: 1px solid rgba(245,158,11,.25) !important;
    color: #fbbf24 !important;
}
#section-project_management .pm2-container .stat-icon.purple {
    background: rgba(139,92,246,.12) !important;
    border: 1px solid rgba(139,92,246,.25) !important;
    color: #c4b5fd !important;
}
#section-project_management .pm2-container .stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1 !important;
}
#section-project_management .pm2-container .stat-label {
    font-size: 0.6875rem !important;
    color: rgba(255,255,255,.4) !important;
    margin-top: 0.125rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── 9. BADGE OVERRIDES ─────────────────────────────────────────────── */
#section-project_management .pm2-container .badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 999px !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border: none !important;
}
#section-project_management .pm2-container .badge-success {
    background: rgba(34,197,94,.12) !important;
    color: #4ade80 !important;
}
#section-project_management .pm2-container .badge-warning {
    background: rgba(245,158,11,.12) !important;
    color: #fbbf24 !important;
}
#section-project_management .pm2-container .badge-danger {
    background: rgba(239,68,68,.12) !important;
    color: #f87171 !important;
}
#section-project_management .pm2-container .badge-info {
    background: rgba(99,102,241,.12) !important;
    color: #a5b4fc !important;
}

/* ── 10. EMPTY STATE OVERRIDES ──────────────────────────────────────── */
#section-project_management .pm2-container .empty-state {
    text-align: center !important;
    padding: 3rem 1.5rem !important;
    color: rgba(255,255,255,.35) !important;
    font-size: 0.8125rem !important;
}
#section-project_management .pm2-container .empty-state .empty-icon {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
    opacity: 0.4 !important;
}

/* ── 11. KANBAN OVERRIDES ───────────────────────────────────────────── */
#section-project_management .pm2-container .pm-kanban-col {
    background: rgba(15,23,42,.35) !important;
    border: 1px solid rgba(148,163,184,.08) !important;
    border-radius: 10px !important;
    padding: 0.875rem !important;
    min-height: 200px;
}
#section-project_management .pm2-container .pm-kanban-col h5 {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,.4) !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
}
#section-project_management .pm2-container .pm-kanban-task-card {
    background: rgba(15,23,42,.6) !important;
    border: 1px solid rgba(148,163,184,.1) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    cursor: grab;
    transition: all 0.15s ease !important;
    font-size: 0.8125rem !important;
}
#section-project_management .pm2-container .pm-kanban-task-card:hover {
    border-color: rgba(245, 158, 11, .2) !important;
    background: rgba(245, 158, 11, .04) !important;
}

/* ── 12. WAR ROOM OVERRIDES ─────────────────────────────────────────── */
#section-project_management .pm2-container .pm-war-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255,255,255,.3);
    font-size: 0.8125rem;
}

/* ── 13. FORM GROUP OVERRIDES (beats #app .form-group) ─────────────── */
#section-project_management .pm2-container .form-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 0.875rem !important;
    margin-bottom: 0.875rem !important;
}
#section-project_management .pm2-container .form-group {
    margin-bottom: 0.75rem !important;
}
#section-project_management .pm2-container .form-group label {
    display: block !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: rgba(255,255,255,.4) !important;
    margin-bottom: 0.375rem !important;
}
#section-project_management .pm2-container .form-group input,
#section-project_management .pm2-container .form-group select,
#section-project_management .pm2-container .form-group textarea {
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    background: rgba(15,23,42,.5) !important;
    border: 1px solid rgba(148,163,184,.12) !important;
    border-radius: 6px !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 0.8125rem !important;
    transition: border-color 0.15s !important;
    min-height: 36px !important;
}
#section-project_management .pm2-container .form-group input:focus,
#section-project_management .pm2-container .form-group select:focus,
#section-project_management .pm2-container .form-group textarea:focus {
    border-color: rgba(245, 158, 11, .4) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .1) !important;
}

/* ── 14. INPUT/SELECT OVERRIDES (standalone, beats #app) ──────────── */
#section-project_management .pm2-container input,
#section-project_management .pm2-container select,
#section-project_management .pm2-container textarea {
    background: rgba(15,23,42,.5);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 6px;
    color: rgba(255,255,255,.85);
    min-height: 36px;
}
#section-project_management .pm2-container input:focus,
#section-project_management .pm2-container select:focus,
#section-project_management .pm2-container textarea:focus {
    border-color: rgba(245, 158, 11, .4);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .1);
    outline: none;
}

/* ── 15. MODAL OVERRIDES ────────────────────────────────────────────── */
#section-project_management .pm2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
}
#section-project_management .pm2-modal-overlay.open,
#section-project_management .pm2-modal-overlay.active {
    display: flex !important;
}
#section-project_management .pm2-modal {
    background: rgba(15,23,42,.95) !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    border-radius: 12px !important;
    width: min(90vw, 600px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.5) !important;
}

/* ── 16. MISC UTILITIES ─────────────────────────────────────────────── */
#section-project_management .pm2-container .table-wrap {
    overflow-x: auto !important;
}
#section-project_management .pm2-container .pm-project-code {
    font-family: 'DM Mono', 'Fira Code', monospace !important;
    font-size: 0.8125rem !important;
    color: rgba(165,180,252,.8) !important;
}
#section-project_management .pm2-container .pm-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
#section-project_management .pm2-container .pm-money {
    font-family: 'DM Mono', 'Fira Code', monospace !important;
    font-size: 0.8125rem !important;
    text-align: right;
}
#section-project_management .pm2-container .pm-actions {
    white-space: nowrap;
}

.pm2-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.pm2-input-sm {
    padding: .35rem .625rem !important;
    font-size: .75rem !important;
    max-width: 160px;
}

/* ── 17. PM2-TAB-NAV: Remove inherited .tabs border ──────────────── */
#section-project_management .pm2-tab-nav {
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
    padding: 0.5rem 0 !important;
    gap: 0.25rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0 !important;
}

/* ── 18. PM2-HEADER: Stronger visual ──────────────────────────────── */
#section-project_management .pm2-header {
    padding: 1rem 0 0.75rem !important;
    border-bottom: 1px solid rgba(148,163,184,.08) !important;
}
#section-project_management .pm2-select {
    background: rgba(15,23,42,.5) !important;
    border: 1px solid rgba(148,163,184,.12) !important;
    border-radius: 6px !important;
    color: rgba(255,255,255,.85) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8125rem !important;
}
#section-project_management .pm2-select-lg {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
}

/* ── 19. PM2-STAT-CARD enhancements ─────────────────────────────── */
#section-project_management .pm2-stat-card {
    background: rgba(15,23,42,.5) !important;
    border: 1px solid rgba(148,163,184,.1) !important;
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
    position: relative;
    overflow: hidden;
}
#section-project_management .pm2-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
}
#section-project_management .pm2-stat-blue::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
#section-project_management .pm2-stat-orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
#section-project_management .pm2-stat-green::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
#section-project_management .pm2-stat-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

/* ── 20. LOADING STATE ──────────────────────────────────────────── */
#section-project_management .pm2-container .loading {
    text-align: center;
    padding: 2rem;
    color: rgba(255,255,255,.3);
    font-size: 0.8125rem;
}

/* ── 21. LIFECYCLE BAR Override ──────────────────────────────── */
#section-project_management .pm2-lifecycle-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(15,23,42,.35);
    border: 1px solid rgba(148,163,184,.06);
    border-radius: 8px;
}
#section-project_management .pm2-lifecycle-bar select,
#section-project_management .pm2-lifecycle-bar input {
    min-height: 28px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}
#section-project_management .pm2-select-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
}

/* ── 22. HERO STATS Override (ensure no core.css interference) ── */
#section-project_management .pm2-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
}
#section-project_management .pm2-hero-card {
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
/* Removed: old translateY(-2px) hover transform — research says skip
   decorative motion on data-dense surfaces */
#section-project_management .pm2-overview-grid {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr !important;
    gap: 0.75rem !important;
}
@media (max-width: 1200px) {
    #section-project_management .pm2-overview-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 900px) {
    #section-project_management .pm2-hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PM2: INTERACTIVE SYSTEM — Tooltips, Popovers, Drag Handles, Gantt, Gauges
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOOLTIP SYSTEM ────────────────────────────────────────────────────── */
.pm2-tooltip {
    position: absolute;
    z-index: 800;
    background: rgba(8,11,20,.95);
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,.85);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    max-width: 280px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    line-height: 1.5;
}
.pm2-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.pm2-tooltip-title {
    font-weight: 700;
    color: rgba(255,255,255,.95);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}
.pm2-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.125rem 0;
}
.pm2-tooltip-key {
    color: rgba(255,255,255,.45);
}
.pm2-tooltip-val {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-family: 'DM Mono', 'Fira Code', monospace;
}
.pm2-tooltip-explain {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(148,163,184,.12);
    color: rgba(255,255,255,.5);
    font-size: 0.6875rem;
    font-style: italic;
}

/* ── POPOVER PANEL (for budget drill-down, task detail) ──────────────── */
.pm2-popover {
    position: absolute;
    z-index: 810;
    background: rgba(12,17,30,.96);
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 10px;
    padding: 0;
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(245, 158, 11, .08);
    overflow: hidden;
}
.pm2-popover.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.pm2-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(148,163,184,.08);
    background: rgba(255,255,255,.02);
}
.pm2-popover-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
}
.pm2-popover-close {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}
.pm2-popover-close:hover {
    background: rgba(239,68,68,.15);
    color: #f87171;
}
.pm2-popover-body {
    padding: 0.875rem 1rem;
}
.pm2-popover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
}
.pm2-popover-row + .pm2-popover-row {
    border-top: 1px solid rgba(148,163,184,.05);
}
.pm2-popover-label {
    color: rgba(255,255,255,.5);
}
.pm2-popover-value {
    color: rgba(255,255,255,.9);
    font-weight: 600;
    font-family: 'DM Mono', 'Fira Code', monospace;
}
.pm2-popover-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.pm2-popover-bar-label {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.4);
    width: 80px;
    flex-shrink: 0;
}
.pm2-popover-bar-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
}
.pm2-popover-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}
.pm2-popover-bar-pct {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.6);
    font-family: 'DM Mono', 'Fira Code', monospace;
    width: 36px;
    text-align: right;
}
.pm2-popover-actions {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid rgba(148,163,184,.08);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── INTERACTIVE GANTT (War Room + Overview) ─────────────────────────── */
.pm2-gantt-interactive {
    position: relative;
    width: 100%;
    min-height: 180px;
}
.pm2-gantt-header {
    display: grid;
    font-size: 0.6875rem;
    color: rgba(255,255,255,.4);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(148,163,184,.1);
    padding-bottom: 0.375rem;
    margin-bottom: 0.25rem;
}
.pm2-gantt-body {
    position: relative;
}
.pm2-gantt-gridlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.pm2-gantt-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148,163,184,.06);
}
.pm2-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(239,68,68,.5);
    z-index: 5;
}
.pm2-gantt-today::before {
    content: 'Today';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    color: #f87171;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pm2-gantt-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid rgba(148,163,184,.03);
    transition: background 0.1s;
}
.pm2-gantt-row:hover {
    background: rgba(245, 158, 11, .03);
}
.pm2-gantt-row-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,.65);
    padding: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.pm2-gantt-row-label:hover {
    color: rgba(251, 191, 36, .9);
}
.pm2-gantt-row-label.critical {
    color: #fbbf24;
    font-weight: 600;
}
.pm2-gantt-row-track {
    position: relative;
    height: 24px;
}
.pm2-gantt-bar-wrap {
    position: absolute;
    top: 3px;
    height: 18px;
    cursor: pointer;
    z-index: 2;
    transition: top 0.1s, height 0.1s;
}
.pm2-gantt-bar-wrap:hover {
    top: 1px;
    height: 22px;
    z-index: 10;
}
.pm2-gantt-bar-baseline {
    position: absolute;
    top: 6px;
    height: 12px;
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 3px;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}
.pm2-gantt-bar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.pm2-gantt-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,.15);
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}
.pm2-gantt-bar-label {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    font-size: 0.5625rem;
    color: rgba(255,255,255,.9);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Drag handles */
.pm2-gantt-handle {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.15s;
}
.pm2-gantt-bar-wrap:hover .pm2-gantt-handle {
    opacity: 1;
}
.pm2-gantt-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 3px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255,255,255,.6);
}
.pm2-gantt-handle-left {
    left: -2px;
    border-radius: 4px 0 0 4px;
}
.pm2-gantt-handle-right {
    right: -2px;
    border-radius: 0 4px 4px 0;
}
/* Bar colors */
.pm2-gantt-bar-indigo { background: linear-gradient(135deg, #6366f1, #818cf8); }
.pm2-gantt-bar-emerald { background: linear-gradient(135deg, #22c55e, #4ade80); }
.pm2-gantt-bar-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.pm2-gantt-bar-red { background: linear-gradient(135deg, #ef4444, #f87171); }
.pm2-gantt-bar-cyan { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.pm2-gantt-bar-violet { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
/* Dragging state */
.pm2-gantt-bar-wrap.dragging {
    opacity: 0.8;
    z-index: 20 !important;
}
.pm2-gantt-bar-wrap.dragging .pm2-gantt-bar {
    box-shadow: 0 4px 20px rgba(245, 158, 11, .35);
}

/* ── INTERACTIVE GAUGE ENHANCEMENTS ──────────────────────────────────── */
.pm2-gauge-interactive {
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}
.pm2-gauge-interactive:hover {
    transform: scale(1.05);
}
.pm2-gauge-interactive:hover .pm2-gauge-ring {
    filter: brightness(1.2);
}
.pm2-gauge-explain {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
    transition: color 0.15s;
}
.pm2-gauge-interactive:hover .pm2-gauge-explain {
    color: rgba(255,255,255,.6);
}
/* Gauge color states */
.pm2-gauge-good .pm2-gauge-value { color: #4ade80 !important; }
.pm2-gauge-warn .pm2-gauge-value { color: #fbbf24 !important; }
.pm2-gauge-bad .pm2-gauge-value { color: #f87171 !important; }

/* ── INTERACTIVE BUDGET BARS ─────────────────────────────────────────── */
.pm2-budget-row-interactive {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    margin: -0.375rem -0.5rem;
    transition: background 0.15s;
}
.pm2-budget-row-interactive:hover {
    background: rgba(245, 158, 11, .04);
}
.pm2-budget-row-interactive:hover .pm2-budget-label {
    color: rgba(255,255,255,.7);
}
.pm2-budget-row-interactive:hover .pm2-budget-fill {
    filter: brightness(1.15);
}
.pm2-budget-amt {
    font-size: 0.625rem;
    color: rgba(255,255,255,.3);
    font-family: 'DM Mono', 'Fira Code', monospace;
    margin-left: 0.25rem;
    transition: color 0.15s;
}
.pm2-budget-row-interactive:hover .pm2-budget-amt {
    color: rgba(255,255,255,.6);
}

/* ── PORTFOLIO TABLE ROW INTERACTIVITY ───────────────────────────────── */
#section-project_management .pm2-container table tbody tr.pm2-row-active {
    background: rgba(245, 158, 11, 0.06) !important;
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.7);
}
#section-project_management .pm2-container table tbody tr {
    cursor: pointer;
    transition: background 0.1s, box-shadow 0.1s;
}

/* ── OVERVIEW MINI GANTT (actual bars, not just placeholder) ─────────── */
.pm2-gantt-mini-live {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.25rem 0;
}
.pm2-gantt-mini-row {
    display: flex;
    align-items: center;
    height: 14px;
    gap: 4px;
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
    transition: background 0.1s;
}
.pm2-gantt-mini-row:hover {
    background: rgba(245, 158, 11, .04);
}
.pm2-gantt-mini-label {
    font-size: 0.5625rem;
    color: rgba(255,255,255,.4);
    width: 60px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm2-gantt-mini-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: rgba(255,255,255,.03);
    position: relative;
    overflow: hidden;
}
.pm2-gantt-mini-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease, left 0.4s ease;
}

/* ── CHANGE ORDER MINI (interactive) ─────────────────────────────────── */
.pm2-co-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(148,163,184,.04);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}
.pm2-co-item:hover {
    background: rgba(245, 158, 11, .04);
}
.pm2-co-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pm2-co-status-dot.pending { background: #f59e0b; }
.pm2-co-status-dot.approved { background: #22c55e; }
.pm2-co-status-dot.rejected { background: #ef4444; }
.pm2-co-name {
    font-size: 0.75rem;
    color: rgba(255,255,255,.7);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm2-co-amount {
    font-size: 0.6875rem;
    font-family: 'DM Mono', 'Fira Code', monospace;
    color: rgba(255,255,255,.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PM2: TASK DETAIL SLIDE-OVER — Universal panel from Gantt, Kanban, WBS
   ═══════════════════════════════════════════════════════════════════════════ */
.pm2-slideover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.pm2-slideover-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}
.pm2-slideover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 90vw);
    background: rgba(10,14,26,.98);
    border-left: 1px solid rgba(245, 158, 11, .15);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    box-shadow: -12px 0 48px rgba(0,0,0,.5);
}
.pm2-slideover.visible {
    transform: translateX(0);
}
.pm2-slideover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(148,163,184,.1);
    background: rgba(255,255,255,.02);
}
.pm2-slideover-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    line-height: 1.3;
}
.pm2-slideover-subtitle {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.4);
    margin-top: 0.125rem;
}
.pm2-slideover-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.pm2-slideover-close:hover {
    background: rgba(239,68,68,.15);
    color: #f87171;
}
.pm2-slideover-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pm2-td-row {
    display: flex;
    gap: 0.75rem;
}
.pm2-td-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pm2-td-field label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,.35);
}
.pm2-td-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pm2-td-progress-wrap label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,.35);
    width: 56px;
    flex-shrink: 0;
}
.pm2-td-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
}
.pm2-td-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.85), rgba(251, 191, 36, 0.9));
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.pm2-td-progress-pct {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    font-family: 'DM Mono', 'Fira Code', monospace;
    width: 36px;
    text-align: right;
}
.pm2-td-context {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148,163,184,.06);
    font-size: 0.6875rem;
    color: rgba(255,255,255,.25);
    font-style: italic;
}
.pm2-slideover-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid rgba(148,163,184,.1);
    background: rgba(255,255,255,.02);
}
.pm2-slideover-footer .pm2-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── HERO CARD CLICKABLE STATE ──────────────────────────────────────── */
.pm2-hero-clickable {
    cursor: pointer;
    position: relative;
}
.pm2-hero-drill-hint {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 0.5625rem;
    font-weight: 600;
    color: rgba(255,255,255,.15);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s, transform 0.15s;
}
.pm2-hero-clickable:hover .pm2-hero-drill-hint {
    color: rgba(255,255,255,.5);
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BID MANAGEMENT — Card View, Bar Charts, Timeline, Sparklines
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bid Package Cards ────────────────────────────────────────────────── */
.bid-pkg-card {
    background: var(--color-surface, rgba(184,204,255,.07));
    border: 1px solid var(--color-border, rgba(184,204,255,.22));
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.bid-pkg-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #2E75B6), var(--color-accent-2, #4EAFF0));
    opacity: 0;
    transition: opacity 0.22s ease;
}
.bid-pkg-card:hover {
    border-color: var(--color-primary, #2E75B6);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}
.bid-pkg-card:hover::before { opacity: 1; }

.bid-pkg-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.bid-pkg-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #E6EBFF);
    line-height: 1.3;
}
.bid-pkg-card__menu {
    color: var(--color-text-muted, #9FB0D8);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}
.bid-pkg-card__menu:hover { background: var(--color-surface, rgba(184,204,255,.07)); }

.bid-pkg-card__meta {
    font-size: 12.5px;
    color: var(--color-text-muted, #9FB0D8);
    line-height: 1.8;
}
.bid-pkg-card__meta strong {
    color: var(--color-text, #E6EBFF);
    font-weight: 500;
}

/* ── Inline Bar Chart ─────────────────────────────────────────────────── */
.bid-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 90px;
    padding: 4px 0 0;
    border-left: 1px solid var(--color-border, rgba(184,204,255,.22));
    border-bottom: 1px solid var(--color-border, rgba(184,204,255,.22));
    margin-top: auto;
    position: relative;
}
.bid-bar-chart__y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    font-size: 10px;
    color: var(--color-text-muted, #9FB0D8);
    padding-right: 4px;
    min-width: 20px;
    text-align: right;
}
.bid-bar-chart__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}
.bid-bar-chart__bar {
    width: 28px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.5s cubic-bezier(.16,1,.3,1);
}
.bid-bar-chart__bar--invites { background: var(--color-primary, #2E75B6); }
.bid-bar-chart__bar--bids { background: var(--color-success, #27AE60); }
.bid-bar-chart__label {
    font-size: 10px;
    color: var(--color-text-muted, #9FB0D8);
    white-space: nowrap;
}

/* Dead zone indicator — pulsing border when response rate < 30% */
.bid-pkg-card--deadzone {
    border-color: var(--color-warning, #F39C12);
    animation: bid-deadzone-pulse 2.5s ease-in-out infinite;
}
@keyframes bid-deadzone-pulse {
    0%, 100% { border-color: var(--color-warning, #F39C12); }
    50% { border-color: var(--color-border, rgba(184,204,255,.22)); }
}
.bid-deadzone-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(243,156,18,0.15);
    color: var(--color-warning, #F39C12);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ── Timeline Rail ────────────────────────────────────────────────────── */
.bid-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}
.bid-timeline-item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: -10px;
    width: 1px;
    background: var(--color-border, rgba(184,204,255,.22));
}
.bid-timeline-item:last-child::before { display: none; }

.bid-timeline-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    border: 2px solid;
}
.bid-timeline-dot--upcoming { border-color: var(--color-accent-2, #4EAFF0); background: transparent; }
.bid-timeline-dot--overdue { border-color: var(--color-danger, #E74C3C); background: var(--color-danger, #E74C3C); }
.bid-timeline-dot--awarded { border-color: var(--color-success, #27AE60); background: var(--color-success, #27AE60); }
.bid-timeline-dot--prebid { border-color: var(--color-warning, #F39C12); background: transparent; }

.bid-timeline-content {
    font-size: 12px;
    line-height: 1.5;
    min-width: 0;
}
.bid-timeline-date {
    font-weight: 600;
    color: var(--color-text, #E6EBFF);
    font-size: 12px;
}
.bid-timeline-label {
    color: var(--color-text-muted, #9FB0D8);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    #bid-cards-view { flex-direction: column; }
    #bid-timeline-rail {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--color-border, rgba(184,204,255,.22));
        padding-left: 0 !important;
        padding-top: 16px;
    }
    #bid-timeline-items { flex-direction: row; overflow-x: auto; gap: 16px; }
    .bid-timeline-item::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   marketing_ads_reports.js — Ads / Analytics / Reports / Assets views
   Added 2026-04-07 during CSS dangling-refs cleanup. Classes are emitted
   by innerHTML templates; most layout is inline-styled so rules here are
   minimal wrappers and state containers.
   ═══════════════════════════════════════════════════════════════════════ */
.loading-state,
.error-state {
    padding: 2rem;
    text-align: center;
    color: var(--app-text-muted, #94a3b8);
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 8px;
}
.error-state { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

.ads-management,
.assets-management,
.reports-management,
.report-results { display: block; }

.ads-section,
.analytics-section { margin-bottom: 2rem; }
.ads-section h3,
.analytics-section h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--app-text, #e2e8f0);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.account-card {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 8px;
    padding: 1rem;
    transition: border-color 0.15s ease;
}
.account-card:hover { border-color: var(--accent, #3b82f6); }

.analytics-summary,
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.assets-sidebar,
.assets-main { min-width: 0; }
.folders-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.folder-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--app-text, #e2e8f0);
    transition: background 0.15s ease;
}
.folder-item:hover { background: var(--bg-tertiary, rgba(255,255,255,0.05)); }
.storage-summary {
    font-size: 12px;
    color: var(--app-text-muted, #94a3b8);
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}
.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.asset-item {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    font-size: 12px;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
}

/* Ads tab selectors (data attribute) */
[data-ads-tab] {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border, #2a2a3e);
    color: var(--app-text-muted, #94a3b8);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
[data-ads-tab].active {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
}

/* ═══════════════════════════════════════════════════════════════════════
   platform_intel.js — Platform Intelligence module (added 2026-04-07)
   ═══════════════════════════════════════════════════════════════════════ */
.pim-container {
    padding: 16px;
    color: var(--app-text, #e2e8f0);
}
.pim-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border, #2a2a3e);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pim-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--app-text-muted, #94a3b8);
    font-size: 13px;
    cursor: pointer;
}
.pim-tab.active {
    color: var(--accent, #3b82f6);
    border-bottom-color: var(--accent, #3b82f6);
}
.pim-card {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.pim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.pim-table th,
.pim-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border, #2a2a3e);
}
.pim-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--app-text-muted, #94a3b8);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.pim-empty {
    padding: 32px;
    text-align: center;
    color: var(--app-text-muted, #94a3b8);
    background: var(--bg-secondary, #1e293b);
    border-radius: 8px;
}
.pim-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pim-badge-critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.pim-badge-high { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.pim-badge-medium { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* ═══════════════════════════════════════════════════════════════════════
   marketing_compliance.js — GDPR/DSAR/consent compliance dashboard
   (added 2026-04-07)
   ═══════════════════════════════════════════════════════════════════════ */
.compliance-dashboard { padding: 16px; }
[data-comp-tab] {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border, #2a2a3e);
    color: var(--app-text-muted, #94a3b8);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
[data-comp-tab].active {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
}
.dsar-section,
.reports-section,
.consent-log-section {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #2a2a3e);
}
.section-header h3 {
    margin: 0;
    font-size: 14px;
    color: var(--app-text, #e2e8f0);
}
.dsar-queue,
.reports-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dsar-card,
.report-item {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, #2a2a3e);
    border-radius: 6px;
    font-size: 12px;
    color: var(--app-text, #e2e8f0);
}

/* =============================================================================
   PAPER (LIVING SYSTEM LIGHT) · modules.css overrides  (2026-04-16)
   =============================================================================
   Comprehensive overrides for all hardcoded white-text / dark-surface values
   inside module-specific components. Covers PM2, tab systems, stats, gauges,
   gantt, tooltips, slideovars, budget bars, and change order cards.
   ============================================================================= */

/* ── PM2 white-text → warm-ink (blanket) ───────────────────────────────────── */
body.ls-active[data-mode="light"] .pm2-container,
body.ls-active[data-mode="light"] .pm2-tab-panel,
body.ls-active[data-mode="light"] .pm2-card,
body.ls-active[data-mode="light"] .pm2-card-container,
body.ls-active[data-mode="light"] .pm2-stat-container,
body.ls-active[data-mode="light"] .pm2-stat-chart,
body.ls-active[data-site-theme="classic"] .pm2-container,
body.ls-active[data-site-theme="classic"] .pm2-tab-panel,
body.ls-active[data-site-theme="classic"] .pm2-card,
body.ls-active[data-site-theme="classic"] .pm2-card-container,
body.ls-active[data-site-theme="classic"] .pm2-stat-container,
body.ls-active[data-site-theme="classic"] .pm2-stat-chart {
  background: #FBF9F3 !important;
  color: #1A1812 !important;
  border-color: rgba(24,18,8,0.10) !important;
}

/* PM2 tab pills */
body.ls-active[data-mode="light"] .pm2-tab-pill,
body.ls-active[data-site-theme="classic"] .pm2-tab-pill {
  color: #766D5E !important;
  background: rgba(24,18,8,0.04) !important;
  border-color: rgba(24,18,8,0.08) !important;
}
body.ls-active[data-mode="light"] .pm2-tab-pill:hover,
body.ls-active[data-site-theme="classic"] .pm2-tab-pill:hover {
  color: #92400E !important;
  background: rgba(180,83,9,0.08) !important;
  border-color: rgba(180,83,9,0.22) !important;
}
body.ls-active[data-mode="light"] .pm2-tab-pill.active,
body.ls-active[data-site-theme="classic"] .pm2-tab-pill.active {
  background: linear-gradient(180deg, #D97706, #B45309) !important;
  border-color: #92400E !important;
  color: #FDFBF5 !important;
  box-shadow: 0 2px 6px rgba(180,83,9,0.25) !important;
}
body.ls-active[data-mode="light"] .pm2-tab-more-item,
body.ls-active[data-site-theme="classic"] .pm2-tab-more-item {
  color: #4A4338 !important;
}
body.ls-active[data-mode="light"] .pm2-tab-more-item:hover,
body.ls-active[data-site-theme="classic"] .pm2-tab-more-item:hover {
  color: #92400E !important;
  background: rgba(180,83,9,0.08) !important;
}

/* PM2 table */
body.ls-active[data-mode="light"] .pm2-table thead th,
body.ls-active[data-site-theme="classic"] .pm2-table thead th {
  color: #4A4338 !important;
  background: rgba(24,18,8,0.04) !important;
  border-bottom-color: rgba(24,18,8,0.10) !important;
}
body.ls-active[data-mode="light"] .pm2-table td,
body.ls-active[data-site-theme="classic"] .pm2-table td {
  color: #1A1812 !important;
  border-bottom-color: rgba(24,18,8,0.06) !important;
}

/* PM2 hero KPI strip */
body.ls-active[data-mode="light"] .pm2-hero-icon-bg,
body.ls-active[data-site-theme="classic"] .pm2-hero-icon-bg { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-hero-value,
body.ls-active[data-site-theme="classic"] .pm2-hero-value { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-hero-label,
body.ls-active[data-mode="light"] .pm2-hero-meta,
body.ls-active[data-site-theme="classic"] .pm2-hero-label,
body.ls-active[data-site-theme="classic"] .pm2-hero-meta { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-hero-arrow,
body.ls-active[data-site-theme="classic"] .pm2-hero-arrow { color: rgba(24,18,8,0.15) !important; }
body.ls-active[data-mode="light"] .pm2-hero-drill-hint,
body.ls-active[data-site-theme="classic"] .pm2-hero-drill-hint { color: rgba(24,18,8,0.20) !important; }
body.ls-active[data-mode="light"] .pm2-hero-clickable:hover .pm2-hero-drill-hint,
body.ls-active[data-site-theme="classic"] .pm2-hero-clickable:hover .pm2-hero-drill-hint { color: #B45309 !important; }

/* PM2 card details */
body.ls-active[data-mode="light"] .pm2-card-title,
body.ls-active[data-mode="light"] .pm2-title-sm,
body.ls-active[data-site-theme="classic"] .pm2-card-title,
body.ls-active[data-site-theme="classic"] .pm2-title-sm { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-card-link,
body.ls-active[data-site-theme="classic"] .pm2-card-link { color: #4A4338 !important; }
body.ls-active[data-mode="light"] .pm2-card-status,
body.ls-active[data-mode="light"] .pm2-card-status-label,
body.ls-active[data-mode="light"] .pm2-card-count,
body.ls-active[data-mode="light"] .pm2-card-label,
body.ls-active[data-site-theme="classic"] .pm2-card-status,
body.ls-active[data-site-theme="classic"] .pm2-card-status-label,
body.ls-active[data-site-theme="classic"] .pm2-card-count,
body.ls-active[data-site-theme="classic"] .pm2-card-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-card-status-bg,
body.ls-active[data-mode="light"] .pm2-card-accent-bg,
body.ls-active[data-site-theme="classic"] .pm2-card-status-bg,
body.ls-active[data-site-theme="classic"] .pm2-card-accent-bg {
  background: rgba(24,18,8,0.04) !important;
}

/* PM2 gauge + legend */
body.ls-active[data-mode="light"] .pm2-gauge-label,
body.ls-active[data-site-theme="classic"] .pm2-gauge-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-gauge-value,
body.ls-active[data-site-theme="classic"] .pm2-gauge-value { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-gauge-legend-item,
body.ls-active[data-site-theme="classic"] .pm2-gauge-legend-item { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-gauge-explain,
body.ls-active[data-site-theme="classic"] .pm2-gauge-explain { color: #9B9281 !important; }
body.ls-active[data-mode="light"] .pm2-gauge-interactive:hover .pm2-gauge-explain,
body.ls-active[data-site-theme="classic"] .pm2-gauge-interactive:hover .pm2-gauge-explain { color: #B45309 !important; }

/* PM2 budget bars */
body.ls-active[data-mode="light"] .pm2-budget-pct,
body.ls-active[data-site-theme="classic"] .pm2-budget-pct { color: #4A4338 !important; }
body.ls-active[data-mode="light"] .pm2-budget-amt,
body.ls-active[data-site-theme="classic"] .pm2-budget-amt { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-budget-row-interactive:hover .pm2-budget-label,
body.ls-active[data-site-theme="classic"] .pm2-budget-row-interactive:hover .pm2-budget-label { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-budget-row-interactive:hover .pm2-budget-amt,
body.ls-active[data-site-theme="classic"] .pm2-budget-row-interactive:hover .pm2-budget-amt { color: #B45309 !important; }

/* PM2 gantt */
body.ls-active[data-mode="light"] .pm2-gantt-header,
body.ls-active[data-site-theme="classic"] .pm2-gantt-header { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-gantt-row-label,
body.ls-active[data-site-theme="classic"] .pm2-gantt-row-label { color: #4A4338 !important; }
body.ls-active[data-mode="light"] .pm2-gantt-range-label,
body.ls-active[data-site-theme="classic"] .pm2-gantt-range-label { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-gantt-mini-label,
body.ls-active[data-site-theme="classic"] .pm2-gantt-mini-label { color: #766D5E !important; }

/* PM2 tooltips + popovers */
body.ls-active[data-mode="light"] .pm2-tooltip,
body.ls-active[data-site-theme="classic"] .pm2-tooltip {
  background: #FDFBF5 !important;
  border-color: rgba(24,18,8,0.12) !important;
  color: #1A1812 !important;
  box-shadow: 0 12px 30px rgba(24,18,8,0.15) !important;
}
body.ls-active[data-mode="light"] .pm2-tooltip-title,
body.ls-active[data-site-theme="classic"] .pm2-tooltip-title { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-tooltip-key,
body.ls-active[data-site-theme="classic"] .pm2-tooltip-key { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-tooltip-val,
body.ls-active[data-site-theme="classic"] .pm2-tooltip-val { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-tooltip-footer,
body.ls-active[data-site-theme="classic"] .pm2-tooltip-footer { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-popover-title,
body.ls-active[data-site-theme="classic"] .pm2-popover-title { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-popover-row,
body.ls-active[data-mode="light"] .pm2-popover-label,
body.ls-active[data-site-theme="classic"] .pm2-popover-row,
body.ls-active[data-site-theme="classic"] .pm2-popover-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-popover-value,
body.ls-active[data-site-theme="classic"] .pm2-popover-value { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-popover-bar-label,
body.ls-active[data-site-theme="classic"] .pm2-popover-bar-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-popover-bar-pct,
body.ls-active[data-site-theme="classic"] .pm2-popover-bar-pct { color: #4A4338 !important; }

/* PM2 slideover */
body.ls-active[data-mode="light"] .pm2-slideover,
body.ls-active[data-site-theme="classic"] .pm2-slideover {
  background: linear-gradient(180deg, #FDFBF5, #F6F2E7) !important;
  border-color: rgba(24,18,8,0.12) !important;
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] .pm2-slideover-title,
body.ls-active[data-site-theme="classic"] .pm2-slideover-title { color: #1A1812 !important; }
body.ls-active[data-mode="light"] .pm2-slideover-subtitle,
body.ls-active[data-site-theme="classic"] .pm2-slideover-subtitle { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-slideover-row,
body.ls-active[data-mode="light"] .pm2-slideover-label,
body.ls-active[data-mode="light"] .pm2-slideover-col-label,
body.ls-active[data-site-theme="classic"] .pm2-slideover-row,
body.ls-active[data-site-theme="classic"] .pm2-slideover-label,
body.ls-active[data-site-theme="classic"] .pm2-slideover-col-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] .pm2-td-progress-pct,
body.ls-active[data-site-theme="classic"] .pm2-td-progress-pct { color: #4A4338 !important; }
body.ls-active[data-mode="light"] .pm2-sliderow-footer,
body.ls-active[data-site-theme="classic"] .pm2-sliderow-footer { color: #9B9281 !important; }

/* PM2 change order cards */
body.ls-active[data-mode="light"] .pm2-co-name,
body.ls-active[data-site-theme="classic"] .pm2-co-name { color: #4A4338 !important; }
body.ls-active[data-mode="light"] .pm2-co-amount,
body.ls-active[data-site-theme="classic"] .pm2-co-amount { color: #766D5E !important; }

/* PM section overrides (those with !important in modules.css) */
body.ls-active[data-mode="light"] #section-project_management .pm2-container .tab,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .tab {
  color: #766D5E !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .tab:hover,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .tab:hover {
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .tab.active,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .tab.active {
  color: #B45309 !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-card-title,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-card-title { color: #1A1812 !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .btn,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .btn {
  color: #4A4338 !important;
  background: rgba(24,18,8,0.04) !important;
  border-color: rgba(24,18,8,0.10) !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .btn:hover,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .btn:hover {
  color: #92400E !important;
  background: rgba(180,83,9,0.08) !important;
  border-color: rgba(180,83,9,0.28) !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .btn-outline,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .btn-outline {
  color: #4A4338 !important;
  background: transparent !important;
  border-color: rgba(24,18,8,0.14) !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container table thead th,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container table thead th {
  color: #4A4338 !important;
  background: rgba(24,18,8,0.04) !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container table td,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container table td {
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .stat-value,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .stat-value { color: #1A1812 !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .stat-label,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .stat-label { color: #766D5E !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .empty-state,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .empty-state { color: #9B9281 !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .stat-card,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .stat-card-inner,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .card,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .gauge-container,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-gauge-container,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-gauge-main,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .stat-card,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .stat-card-inner,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .card,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .gauge-container,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-gauge-container,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-gauge-main {
  background: #FBF9F3 !important;
  border-color: rgba(24,18,8,0.10) !important;
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-war-label,
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-war-title,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-war-label,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-war-title { color: #766D5E !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-war-empty,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-war-empty { color: #9B9281 !important; }
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-war-card,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-war-card {
  background: #FBF9F3 !important;
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] #section-project_management .pm2-container .pm-war-group,
body.ls-active[data-site-theme="classic"] #section-project_management .pm2-container .pm-war-group {
  background: rgba(24,18,8,0.02) !important;
  border-color: rgba(24,18,8,0.08) !important;
}

/* ── PM2 select dropdowns ──────────────────────────────────────────────────── */
body.ls-active[data-mode="light"] .pm2-select,
body.ls-active[data-mode="light"] .pm2-select-lg,
body.ls-active[data-site-theme="classic"] .pm2-select,
body.ls-active[data-site-theme="classic"] .pm2-select-lg {
  background: rgba(253,251,245,0.9) !important;
  border-color: rgba(24,18,8,0.14) !important;
  color: #1A1812 !important;
}
body.ls-active[data-mode="light"] .pm2-select option,
body.ls-active[data-mode="light"] .pm2-select-lg option,
body.ls-active[data-site-theme="classic"] .pm2-select option,
body.ls-active[data-site-theme="classic"] .pm2-select-lg option {
  background: #FDFBF5;
  color: #1A1812;
}

/* ── Tab systems (ADS, comp, generic) ──────────────────────────────────────── */
body.ls-active[data-mode="light"] [data-ads-tab].active,
body.ls-active[data-mode="light"] [data-comp-tab].active,
body.ls-active[data-site-theme="classic"] [data-ads-tab].active,
body.ls-active[data-site-theme="classic"] [data-comp-tab].active {
  color: #FDFBF5 !important; /* keep white text on colored tab bg */
}

/* ── DSAR / report cards ───────────────────────────────────────────────────── */
body.ls-active[data-mode="light"] .dsar-card,
body.ls-active[data-mode="light"] .report-item,
body.ls-active[data-site-theme="classic"] .dsar-card,
body.ls-active[data-site-theme="classic"] .report-item {
  background: #FBF9F3 !important;
  border-color: rgba(24,18,8,0.10) !important;
  color: #1A1812 !important;
}

/* ── PM2 btn primary + amber keep white text on colored bg ─────────────── */
body.ls-active[data-mode="light"] .pm2-btn-primary,
body.ls-active[data-mode="light"] .pm2-btn-amber,
body.ls-active[data-site-theme="classic"] .pm2-btn-primary,
body.ls-active[data-site-theme="classic"] .pm2-btn-amber {
  color: #fff !important;
}

/* ── Solstice status chips — CANONICAL (theme remediation P4, 2026-07-02) ────
   ONE visual family for the safety-critical player statuses that used to be
   rendered by 7+ divergent systems (inline hex spans, per-page badge classes).
   Global scope on purpose: modules.css loads in the ERP shell AND both
   standalone PWA boot paths (solstice_shell.js + solstice_login.js), so the
   same class renders identically everywhere. Colors resolve from the --sol-*
   registry (token_system.css). Canonical labels: "BANNED" (uppercase, no
   icon), "CTR"/"CTR {pct}%", "MTL", leading "READY" on reward pills.
   Do NOT invent a new per-page banned/CTR chip — use these. */
.sol-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.5;
}
.sol-chip-banned {
  background: rgba(239,68,68,.16);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.38);
}
.sol-chip-ctr {           /* CTR threshold MET / triggered — full red */
  background: rgba(239,68,68,.16);
  color: var(--sol-amt-ctr, #ef4444);
  border: 1px solid rgba(239,68,68,.42);
}
.sol-chip-ctr-near {      /* approaching CTR — light red tint */
  background: rgba(246,168,168,.12);
  color: var(--sol-amt-approach-ctr, #f6a8a8);
  border: 1px solid rgba(246,168,168,.38);
}
.sol-chip-mtl {           /* MTL threshold met — full amber */
  background: rgba(240,184,77,.13);
  color: var(--sol-amt-mtl, #f0b84d);
  border: 1px solid rgba(240,184,77,.38);
}
.sol-chip-mtl-near {      /* approaching MTL — light amber tint */
  background: rgba(243,212,154,.10);
  color: var(--sol-amt-approach-mtl, #f3d49a);
  border: 1px solid rgba(243,212,154,.34);
}

/* ── Solstice print normalization (theme remediation P7, 2026-07-02) ─────────
   Dedicated documents route through print-utils.js; this covers the OTHER
   path — a user hitting Ctrl+P on a dark-locked Solstice page. Only 1 of 28
   partials declared @media print, so every other page printed ink-heavy
   charcoal panels (or illegible light-on-white where core.css's generic
   reset whitened <body> alone). Flatten the known dark Solstice roots to
   black-on-white and give their tables visible borders. The floor canvas
   (#sfc-root) is deliberately EXCLUDED — its SVG felt/table signature is
   migration-exempt and prints as rendered. */
@media print {
  .sol-act, .sol-cd, .sol-rpt, .sol-surface, .ls-cashier, #tab-dashboard,
  .sol-act *, .sol-cd *, .sol-rpt *, .sol-surface *, .ls-cashier *, #tab-dashboard * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .sol-act th, .sol-act td, .sol-cd th, .sol-cd td, .sol-rpt th, .sol-rpt td,
  .sol-surface th, .sol-surface td, .ls-cashier th, .ls-cashier td {
    border-color: #999 !important;
  }
}

/* ── Solstice Cashier (cage surface) — layout only; visuals via LS-lite ──────
   Scoped under .ls-cashier; class names avoid the themes.css [class*=] boxed
   substrings (kpi/label/value/nav/panel). */
.ls-cashier { max-width: none; margin: 0; padding: 10px 18px 22px; display: flex; flex-direction: column; gap: 10px;
  /* Adopt the Solstice palette so this surface reads as native Solstice —
     charcoal panels + amber accent, NOT the Living-System violet the hero
     card used to carry. Theme remediation P2: ALIASES of the canonical
     --sol-* registry (token_system.css) — change values there, never here. */
  --sfc-bg: var(--sol-bg-base, #0a0b10); --sfc-surface: var(--sol-bg-elevated, #13151c);
  --sfc-surface-2: var(--sol-bg-card, #1a1d24); --sfc-surface-3: var(--sol-bg-input, #21242d);
  --sfc-border: var(--sol-border-color, rgba(255,255,255,0.08)); --sfc-border-2: var(--sol-border-color-2, rgba(255,255,255,0.14));
  --sfc-text: var(--sol-text-primary, #e6e9ef); --sfc-text-2: var(--sol-text-secondary, #c4c7d0); --sfc-text-dim: var(--sol-text-muted, #9098a8);
  --sfc-accent: var(--sol-accent-primary, #d4870a); --sfc-accent-2: var(--sol-accent-hover, #f0b84d);
  --sfc-live: var(--sol-success, #34c770); --sfc-danger: var(--sol-error, #ef4444); }

/* Three-column working area — KPI sidebar (left) · player list (middle, fills the
   viewport height) · cage actions (right). The row height is set to fill down to
   the bottom of the screen (via --cash-fit, computed in JS on load + resize); each
   column stretches to it, and the list flex-fills the middle column so it always
   reaches the bottom. */
.ls-cashier .cash-cols { display: grid; grid-template-columns: 172px minmax(0, 1fr) minmax(336px, 392px); gap: 12px; align-items: stretch; height: var(--cash-fit, auto); }
.ls-cashier .cash-col-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Right column floats (sticky) as the page scrolls — top offset = the columns' own
   distance from the viewport top (set in JS), so it pins just under the top bar. */
.ls-cashier .cash-col-side { align-self: start; position: sticky; top: var(--cash-sticky-top, 10px); display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: var(--cash-fit, none); overflow-y: auto; }

/* Left column — station + gaming-day context over the cage KPIs; Cash In pinned to
   the very bottom. Compact so the working columns can sit flush to the top bar. */
.ls-cashier .cash-sidebar { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ls-cashier .cash-side-context { display: flex; flex-direction: column; gap: 5px; padding: 2px 2px 4px; }
.ls-cashier .cash-side-context .cash-station { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ls-cashier .cash-side-context .cash-station-k { font-size: 9.5px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--app-text-muted, #908da0); }
.ls-cashier .cash-side-context .cash-sub { font-size: 11px; color: var(--app-text-muted, #908da0); }

/* Themed dropdown button (replaces the native <select>) + its body-level popover. */
.ls-cashier .cash-selectbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 10px; min-height: 34px; border-radius: 8px; background: var(--app-field-bg, #0f0f15); border: 1px solid var(--app-field-border, rgba(255,255,255,0.14)); color: var(--app-field-text, #e8e6ef); font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.ls-cashier .cash-selectbtn:hover { border-color: rgba(255,255,255,0.24); }
.ls-cashier .cash-selectbtn[aria-expanded="true"] { border-color: rgba(245,165,36,0.55); box-shadow: 0 0 0 3px rgba(245,165,36,0.12); }
.ls-cashier .cash-selectbtn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cashier .cash-selectbtn-car { flex: 0 0 auto; color: var(--app-text-muted, #908da0); font-size: 9px; }
/* Body-level themed menu popover (position:fixed; coords set in JS). Dark palette
   so no OS-white listbox ever appears. */
.cash-menu-pop { position: fixed; z-index: 100001; background: #14171f; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,0.55); padding: 5px; max-height: 320px; overflow-y: auto; }
.cash-menu-pop[hidden] { display: none; }
.cash-menu-item { display: block; width: 100%; text-align: left; padding: 8px 11px; border: none; background: transparent; color: #c4c7d0; font: 500 12.5px/1.2 inherit; font-family: inherit; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cash-menu-item:hover { background: rgba(212,135,10,0.12); color: #e8e6e3; }
.cash-menu-item.is-sel { color: #f0b84d; background: rgba(212,135,10,0.10); font-weight: 600; }
.ls-cashier .cash-sidebar .ls-kpi { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sfc-border, rgba(255,255,255,0.10)); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.ls-cashier .cash-sidebar .k-label { font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--app-text-muted, #908da0); }
.ls-cashier .cash-sidebar .k-value { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; margin-top: 3px; }
.ls-cashier .cash-sidebar .k-sub { font-size: 10.5px; color: var(--app-text-muted, #908da0); margin-top: 2px; }
.ls-cashier .cash-sidebar .k-sub:empty { display: none; }
.ls-cashier .cash-sidebar .cash-kpi-ctr.has-flags { border-color: rgba(239,68,68,0.35); background: linear-gradient(160deg, rgba(239,68,68,0.10), rgba(239,68,68,0.02)); }
.ls-cashier .cash-sidebar .cash-kpi-in { margin-top: auto; border-color: rgba(212,135,10,0.30); background: linear-gradient(160deg, rgba(212,135,10,0.10), rgba(212,135,10,0.03)); }
.ls-cashier .cash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ls-cashier .cash-title { font-family: var(--ls-serif, 'Fraunces', serif); font-size: 26px; line-height: 1.1; color: var(--app-text-primary, #e8e6ef); }
.ls-cashier .cash-sub { font-size: 12.5px; color: var(--app-text-muted, #908da0); margin-top: 3px; }
.ls-cashier .cash-station { display: flex; align-items: center; gap: 8px; }
.ls-cashier .cash-station-k { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--app-text-muted, #908da0); }
.ls-cashier .cash-select { padding: 8px 12px; border-radius: 8px; background: var(--app-field-bg, #0f0f15); border: 1px solid var(--app-field-border, rgba(255,255,255,0.14)); color: var(--app-field-text, #e8e6ef); font-family: inherit; font-size: 13px; min-height: 38px; }

/* Command bar: search grows, Scan/New sits inline to its right. */
/* Command bar sits INSIDE the panel head, growing between the "Player" title and
   the count/Dense tools. */
.ls-cashier .cash-cmdbar { display: flex; align-items: stretch; gap: 8px; flex: 1 1 260px; min-width: 0; }
.ls-cashier .cash-lookup { position: relative; flex: 1 1 auto; min-width: 0; }
.ls-cashier .cash-input { width: 100%; box-sizing: border-box; padding: 11px 13px 11px 38px; border-radius: 9px; background: var(--app-field-bg, #0f0f15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908da0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; border: 1px solid var(--app-field-border, rgba(255,255,255,0.14)); color: var(--app-field-text, #e8e6ef); font-family: inherit; font-size: 14px; }
.ls-cashier .cash-input:focus { outline: none; border-color: rgba(245,165,36,0.55); box-shadow: 0 0 0 3px rgba(245,165,36,0.12); }
.ls-cashier .cash-scan-btn { flex: 0 0 auto; align-self: stretch; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.ls-cashier .cash-results { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #18181f; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); max-height: 320px; overflow: auto; }
.ls-cashier .cash-result { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 13px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--app-text-primary, #e8e6ef); cursor: pointer; font-family: inherit; }
.ls-cashier .cash-result:hover { background: rgba(255,255,255,0.04); }
.ls-cashier .cash-result-nm { font-size: 13.5px; font-weight: 600; }
.ls-cashier .cash-result-meta { font-size: 11.5px; color: var(--app-text-muted, #908da0); display: flex; align-items: center; gap: 6px; }
.ls-cashier .cash-result-empty { padding: 12px 13px; font-size: 12.5px; color: var(--app-text-muted, #908da0); }

.ls-cashier .cash-resolved { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 11px; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.24); flex-wrap: wrap; }
.ls-cashier .cash-resolved-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-cashier .cash-resolved-nm { font-size: 14px; font-weight: 600; color: var(--app-text-primary, #e8e6ef); }
.ls-cashier .cash-resolved-card { font-size: 12px; color: var(--app-text-muted, #908da0); }
/* Resolved-player identity card: large on-file photo + the facts a cashier
   verifies before cash leaves the cage (name, age, last visit, visit count). */
.ls-cashier .cash-pcard { flex: 1 1 280px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ls-cashier .cash-pcard-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ls-cashier .cash-pcard-nm { font-size: 18px; font-weight: 700; color: var(--app-text-primary, #e8e6ef); line-height: 1.15; }
.ls-cashier .cash-pcard-facts { font-size: 12.5px; color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; }
.ls-cashier .cash-pcard-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ls-cashier .cash-avatar.cash-avatar-pc { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 13px; font-size: 24px; }
/* CTR/MTL proximity strip — drops to its own full-width row inside the resolved
   chip so the cashier sees the compliance picture before choosing an action. */
.ls-cashier .cash-comp { flex: 1 0 100%; order: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(167,139,250,0.18); font-size: 12px; }
.ls-cashier .cash-comp:empty { display: none; }
.ls-cashier .cash-comp-tot { color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; }
.ls-cashier .cash-comp-quiet { color: var(--app-text-muted, #908da0); opacity: 0.85; }
/* Walk-up + ID refusal — subtle inline secondary actions under the command bar. */
.ls-cashier .cash-walkup { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ls-cashier .cash-walkup-k { font-size: 12px; color: var(--app-text-muted, #908da0); }
.ls-cashier .cash-walkup-sep { color: var(--app-text-muted, #908da0); opacity: 0.5; }
.ls-cashier .cash-linkbtn { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ls-amber-2, #f0b84d); cursor: pointer; }
.ls-cashier .cash-linkbtn:hover { text-decoration: underline; }
.ls-cashier .cash-walkup .ls-chip.hot { margin-left: 2px; }

.ls-cashier .cash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-cashier .cash-actions .ls-btn { flex: 1 1 130px; min-height: 42px; font-size: 13.5px; justify-content: center; }
.ls-cashier .cash-issue { margin-top: 8px; }
/* Cage-actions panel: trim padding + head so the whole action set fits with the
   hero card (no scroll in the right column). */
.ls-cashier .cash-do.ls-panel { padding: 12px 13px; }
.ls-cashier .cash-do .ls-panel-head { margin-bottom: 10px; }
/* Undo-last (error recovery): subtle strip under the cage actions. */
.ls-cashier .cash-last { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px dashed var(--app-field-border, rgba(255,255,255,0.14)); font-size: 12px; }
.ls-cashier .cash-last-tx { color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cashier .cash-last-undo { flex: 0 0 auto; font-size: 12px; padding: 4px 12px; }
.ls-cashier .cash-table { margin-top: 4px; }

/* Persistent, scrollable player list (search filters it in place). */
/* The player-select panel + list flex-fill their column so the list always reaches
   the bottom of the screen (see --cash-fit). */
.ls-cashier .cash-who { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ls-cashier .cash-list { margin-top: 10px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--app-field-border, rgba(255,255,255,0.12)); border-radius: 10px; background: rgba(255,255,255,0.015); }
.ls-cashier .cash-row { display: flex; flex-direction: row; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 13px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--app-text-primary, #e8e6ef); cursor: pointer; font-family: inherit; transition: background 0.12s; }
.ls-cashier .cash-row:last-child { border-bottom: 0; }
.ls-cashier .cash-row:hover { background: rgba(255,255,255,0.045); }
.ls-cashier .cash-row.is-selected { background: rgba(240,184,77,0.10); box-shadow: inset 3px 0 0 var(--sfc-accent-2, #f0b84d); }
/* Keyboard highlight (arrow-key navigation) — distinct from hover/selected. */
.ls-cashier .cash-row.is-focused { background: rgba(59,130,246,0.16); box-shadow: inset 3px 0 0 var(--blue, #3b82f6); }
.ls-cashier .cash-row-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ls-cashier .cash-row-nm { font-size: 13.5px; font-weight: 700; color: var(--ls-amber-2, #f0b84d); letter-spacing: 0.1px; }
/* Right rail: active/paused status dot + where they're playing, stacked. */
.ls-cashier .cash-row-right { flex: 0 0 auto; margin-left: auto; padding-left: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 46%; text-align: right; }
.ls-cashier .cash-row-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.16); }
.ls-cashier .cash-row-dot.is-paused { background: var(--ls-amber-2, #f0b84d); box-shadow: 0 0 0 3px rgba(240,184,77,0.16); }
.ls-cashier .cash-row-loc { font-size: 11px; line-height: 1.3; color: var(--app-text-primary, #e8e6ef); opacity: 0.86; font-variant-numeric: tabular-nums; }
.ls-cashier .cash-row-meta { font-size: 11.5px; color: var(--app-text-muted, #908da0); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Player-panel head: title left, count + density toggle pinned right. */
.ls-cashier .cash-who-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 5px; }
.ls-cashier .cash-who-head .ls-panel-title { flex: 0 0 auto; }
.ls-cashier .cash-who-tools { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ls-cashier .cash-density-btn { flex: 0 0 auto; font-size: 12px; padding: 5px 11px; }

/* ── Dense "busy-window" view: compact rows so more patrons fit when a line
   forms. Purely visual; toggled via #cash-density (persisted per device). ── */
/* Dense is now just tighter rows — the list already flex-fills the viewport. */
.ls-cashier.cash-dense .cash-row { padding: 5px 11px; gap: 9px; }
.ls-cashier.cash-dense .cash-avatar { width: 30px; height: 30px; border-radius: 7px; font-size: 11px; }
.ls-cashier.cash-dense .cash-row-tx { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ls-cashier.cash-dense .cash-row-nm { font-size: 13px; }
.ls-cashier.cash-dense .cash-row-meta { font-size: 11px; }
/* Busy window: keep the active dot, drop the location text to stay compact. */
.ls-cashier.cash-dense .cash-row-right { flex-direction: row; align-items: center; }
.ls-cashier.cash-dense .cash-row-loc { display: none; }

/* On-file player photo for identity verification (display photo_url; initials
   fallback when none). Used in list rows and on the resolved-player chip. */
.ls-cashier .cash-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--app-text-muted, #b3b0c0); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.ls-cashier .cash-avatar.has-photo { color: transparent; }
.ls-cashier .cash-avatar.cash-avatar-lg { width: 46px; height: 46px; border-radius: 10px; font-size: 14px; }
/* Payout identity-confirm avatar — large so the cashier verifies the on-file
   photo before cash leaves the cage. Centered in the confirm modal. */
.ls-cashier .cash-avatar.cash-avatar-xl { width: 76px; height: 76px; border-radius: 14px; font-size: 26px; margin: 0 auto; }
.ls-cashier .cash-list-empty { padding: 18px 13px; text-align: center; font-size: 12.5px; color: var(--app-text-muted, #908da0); }
.ls-cashier .cash-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 22px; }
/* Count now lives in the panel head (cash-who-tools), not the list foot. */
.ls-cashier .cash-list-count { font-size: 11.5px; color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-cashier .cash-list-foot:empty, .ls-cashier .cash-list-foot:has(#cash-list-more[hidden]) { min-height: 0; margin-top: 0; }

/* Hero Cash Out — the cashier's primary action. */
.ls-cashier .cash-hero { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; padding: 11px 14px; border-radius: 11px; border: 1px solid rgba(245,165,36,0.45); color: #141414; background: linear-gradient(135deg, var(--ls-amber, #f5a524), var(--ls-amber-2, #f0b84d)); box-shadow: 0 8px 24px rgba(245,165,36,0.18); transition: filter 0.12s, transform 0.06s; }
.ls-cashier .cash-hero:hover { filter: brightness(1.06); }
.ls-cashier .cash-hero:active { transform: translateY(1px); }
.ls-cashier .cash-hero-ic { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(20,20,20,0.16); font-size: 19px; font-weight: 800; }
.ls-cashier .cash-hero-tx { display: flex; flex-direction: column; gap: 1px; }
.ls-cashier .cash-hero-k { font-size: 16px; font-weight: 800; letter-spacing: 0.2px; }
.ls-cashier .cash-hero-sub { font-size: 12px; font-weight: 500; opacity: 0.78; }
.ls-cashier .cash-hero-go { margin-left: auto; font-size: 20px; font-weight: 700; opacity: 0.7; }
.ls-cashier .cash-full { margin-top: 8px; }
/* [hidden] override: `.cash-actions`/`.cash-hero-player` set display:flex, which
   out-specifies the UA `[hidden]{display:none}` — so a hidden row would still
   show (this is why Buy/Redeem Chips leaked despite the gate). Restore it. */
.ls-cashier .cash-actions[hidden],
.ls-cashier .cash-last[hidden],
.ls-cashier .cash-hero-player[hidden] { display: none; }

/* ── Resolved-player hero card — a rich identity card mirroring the live-slip
   header, pinned above Cash Out. Scoped .cash-hp-*. ─────────────────────────── */
.ls-cashier .cash-hero-player { position: relative; padding: 11px 13px; border-radius: 11px; background: var(--sfc-surface, #13151c); border: 1px solid var(--sfc-border-2, rgba(255,255,255,0.14)); box-shadow: 0 8px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: 8px; }
/* Identity header — photo | identity column, mirroring the live-slip
   spl-player-header grid (a compact rail + a shrinkable 1fr track). */
.ls-cashier .cash-hp-top { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 11px; align-items: start; }
.ls-cashier .cash-hp-top > * { min-width: 0; }
.ls-cashier .cash-avatar.cash-hp-photo { width: 96px; height: 96px; border-radius: 14px; font-size: 33px; border: 2px solid rgba(255,255,255,0.14); margin-top: 1px; }
.ls-cashier .cash-hp-idcol { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ls-cashier .cash-hp-idcol > * { margin-top: 0; }
.ls-cashier .cash-hp-name { font: 600 16px/1.2 inherit; color: var(--sfc-text, #e6e9ef); }
.ls-cashier .cash-hp-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-cashier .cash-hp-badges .spl-mp-pill { margin-left: 0; }
/* Full-width detail body below the identity header — the wide rows get the whole
   card width instead of the cramped column beside the photo. */
.ls-cashier .cash-hp-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sfc-border, rgba(255,255,255,0.08)); display: flex; flex-direction: column; gap: 7px; }
.ls-cashier .cash-hp-body > * { margin-top: 0; }
.ls-cashier .cash-hp-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: 11.5px; }
.ls-cashier .cash-hp-meta .spl-mcell { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ls-cashier .cash-hp-meta .spl-lbl { flex: 0 0 auto; color: var(--sfc-text-dim, #9098a8); opacity: 0.65; text-transform: uppercase; font-size: 9.5px; letter-spacing: .05em; }
.ls-cashier .cash-hp-meta .spl-val { color: var(--sfc-text-2, #c4c7d0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cashier .cash-hp-clear { align-self: start; flex: 0 0 auto; font-size: 12px; padding: 4px 11px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--sfc-border-2, rgba(255,255,255,0.14)); color: var(--sfc-text-dim, #9098a8); cursor: pointer; font-family: inherit; white-space: nowrap; }
.ls-cashier .cash-hp-clear:hover { background: rgba(255,255,255,0.10); color: var(--sfc-text, #e6e9ef); }
.ls-cashier .cash-hp-openwrap { display: flex; justify-content: flex-end; margin-top: 4px; }
.ls-cashier .cash-hp-openprofile { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--sfc-text-dim, #9098a8); font: 600 12px/1 inherit; cursor: pointer; padding: 2px; }
.ls-cashier .cash-hp-openprofile:hover { color: var(--sfc-accent-2, #f0b84d); }
/* Verify ID reads as an action (amber) rather than a muted drill-in link. */
.ls-cashier .cash-hp-verify { color: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .cash-hp-verify:hover { text-decoration: underline; }
/* Walk-up primary CTA — enroll/link an uncarded patron. Amber-filled so it reads
   as the key next action on a walk-up card (mirrors the live slip's convert pill). */
.ls-cashier .cash-hp-convert { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; border: 0; cursor: pointer; font: 700 12.5px/1 inherit; color: #0f1117; background: linear-gradient(135deg, #D4870A, #F0B84D); box-shadow: 0 1px 6px rgba(212,135,10,0.30), inset 0 1px 0 rgba(255,255,255,0.22); }
.ls-cashier .cash-hp-convert:hover { filter: brightness(1.06); }

/* ── Live-slip header parity (spl-ph-*) — the SAME refined identity surface the
   floor Live Slip uses, ported into the cashier scope so the two read
   identically. Values mirror #sfc-root in solstice_player_list.css; tokens
   resolve via the --sfc-* block defined on .ls-cashier above. ──────────────── */
.ls-cashier .spl-ph-name { font: 600 17px/1.2 inherit; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.ls-cashier .spl-tier-pill { display: inline-flex; align-items: center; padding: 3px 7px; line-height: 1; border-radius: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--sfc-text-dim, #9098a8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(0,0,0,0.3); }
/* Metallic values from the --sol-tier-*-grad registry tokens (P6) — this
   block used to hand-copy the gradient stops from solstice_player_list.css. */
.ls-cashier .spl-tier-pill.spl-tier-gold     { background: var(--sol-tier-gold-grad); color: var(--sol-tier-gold-ink, #2b2008); }
.ls-cashier .spl-tier-pill.spl-tier-silver   { background: var(--sol-tier-silver-grad); color: var(--sol-tier-silver-ink, #1c1f24); }
.ls-cashier .spl-tier-pill.spl-tier-bronze   { background: var(--sol-tier-bronze-grad); color: var(--sol-tier-bronze-ink, #271606); }
.ls-cashier .spl-tier-pill.spl-tier-platinum { background: var(--sol-tier-platinum-grad); color: var(--sol-tier-platinum-ink, #14202c); }
.ls-cashier .spl-mp-pill { display: inline-flex; align-items: center; margin-left: 4px; padding: 3px 7px; border-radius: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; flex-shrink: 0; color: var(--sfc-accent-2, #f0b84d); background: rgba(212,135,10,0.12); border: 1px solid rgba(212,135,10,0.4); }
.ls-cashier .spl-ph-meta { font-size: 11.5px; color: var(--sfc-text-dim, #9098a8); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ls-cashier .spl-ph-meta .spl-lbl { color: var(--sfc-text-dim, #9098a8); opacity: 0.65; margin-right: 3px; text-transform: uppercase; font-size: 9.5px; letter-spacing: .05em; }
.ls-cashier .spl-ph-meta .spl-val { color: var(--sfc-text-2, #c4c7d0); }
.ls-cashier .spl-ph-host { margin-top: 4px; font-size: 11px; color: var(--sfc-text-dim, #9098a8); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.ls-cashier .spl-ph-host .spl-lbl { text-transform: uppercase; font-size: 9.5px; letter-spacing: .05em; opacity: 0.65; margin-right: 3px; }
.ls-cashier .spl-ph-host .spl-val { color: var(--sfc-text-2, #c4c7d0); }
.ls-cashier .spl-ph-host-sep { opacity: 0.4; }
.ls-cashier .spl-ph-flags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.ls-cashier .spl-compliance-row { margin-top: 8px; }
.ls-cashier .spl-ph-flag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; }
.ls-cashier .spl-ph-flag-warn { background: rgba(212,135,10,0.12); color: var(--sfc-accent-2, #f0b84d); border-color: rgba(212,135,10,0.35); }
.ls-cashier .spl-ph-flag-danger { background: rgba(239,68,68,0.12); color: var(--sfc-danger, #ef4444); border-color: rgba(239,68,68,0.35); }
.ls-cashier .spl-ph-flag-ok { background: rgba(76,175,110,0.12); color: #4caf6e; border-color: rgba(76,175,110,0.30); }
.ls-cashier .spl-ph-flag-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 6px; flex-shrink: 0; }
.ls-cashier .spl-ph-notes { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 9px; border: 1px solid var(--sfc-border, rgba(255,255,255,0.08)); border-radius: 8px; background: rgba(0,0,0,0.15); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.ls-cashier .spl-ph-notes:hover { border-color: var(--sfc-border-2, rgba(255,255,255,0.14)); background: rgba(255,255,255,0.03); }
.ls-cashier .spl-ph-notes.is-important { border-color: rgba(212,135,10,0.40); background: rgba(212,135,10,0.10); }
.ls-cashier .spl-phn-ic { font-size: 12px; line-height: 1; flex-shrink: 0; color: var(--sfc-text-dim, #9098a8); }
.ls-cashier .spl-ph-notes.is-important .spl-phn-ic { color: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .spl-phn-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.ls-cashier .spl-phn-k { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--sfc-text-dim, #9098a8); flex-shrink: 0; }
.ls-cashier .spl-ph-notes.is-important .spl-phn-k { color: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .spl-phn-text { font-size: 12px; color: var(--sfc-text-2, #c4c7d0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-cashier .spl-ph-notes.is-empty .spl-phn-text { color: var(--sfc-text-dim, #9098a8); font-style: italic; }
.ls-cashier .spl-phn-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sfc-surface-3, rgba(255,255,255,0.08)); color: var(--sfc-text-2, #c4c7d0); font-size: 10px; font-weight: 700; }
.ls-cashier .spl-phn-add { flex-shrink: 0; font-size: 15px; font-weight: 700; line-height: 0; color: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .spl-ph-points { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; padding: 5px 9px; border: 1px solid var(--sfc-border, rgba(255,255,255,0.08)); border-radius: 8px; background: var(--sfc-surface-2, #1a1d24); flex-wrap: wrap; }
.ls-cashier .spl-php-ic { font-size: 11px; line-height: 1; color: var(--sfc-accent-2, #f0b84d); align-self: center; }
.ls-cashier .spl-php-cell { display: inline-flex; align-items: baseline; gap: 4px; }
.ls-cashier .spl-php-v { font-size: 14px; font-weight: 650; color: var(--sfc-text, #e6e9ef); font-variant-numeric: tabular-nums; }
.ls-cashier .spl-php-k { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--sfc-text-dim, #9098a8); font-weight: 600; }
.ls-cashier .spl-php-dollar { font-size: 11.5px; font-weight: 600; color: #4caf6e; }
.ls-cashier .spl-php-sep { color: var(--sfc-text-dim, #9098a8); opacity: 0.5; }
.ls-cashier .spl-ph-nextreward { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 5px 10px; border: 1px solid var(--sfc-border, rgba(255,255,255,0.08)); border-radius: 8px; background: var(--sfc-surface-2, #1a1d24); cursor: pointer; font-variant-numeric: tabular-nums; }
.ls-cashier .spl-ph-nextreward:hover, .ls-cashier .spl-ph-nextreward:focus-visible { border-color: var(--sfc-accent-2, #f0b84d); outline: none; }
.ls-cashier .spl-ph-nextreward.is-ready { border-color: rgba(240,184,77,.45); }
.ls-cashier .spl-phnr-k { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--sfc-text-dim, #9098a8); font-weight: 600; }
.ls-cashier .spl-phnr-ic { font-size: 11px; line-height: 1; color: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .spl-phnr-name { font-size: 12.5px; font-weight: 650; color: var(--sfc-text, #e6e9ef); }
.ls-cashier .spl-phnr-eta { margin-left: auto; font-size: 11px; color: var(--sfc-text-2, #c4c7d0); }
.ls-cashier .spl-ph-nextreward.is-held .spl-phnr-eta { color: var(--sfc-text-dim, #9098a8); }
.ls-cashier .spl-phnr-pill { margin-left: auto; display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 9px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1a1205; background: var(--sfc-accent-2, #f0b84d); }
.ls-cashier .cash-hp-comp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.ls-cashier .cash-hp-comp:empty { display: none; }
.ls-cashier .cash-hp-comp .cash-comp-tot { color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; }
.ls-cashier .cash-hp-comp .cash-comp-quiet { color: var(--app-text-muted, #908da0); opacity: 0.85; }
/* Footer row — day-total/CTR strip (left, grows) on the SAME line as Verify ID
   (right). */
.ls-cashier .cash-hp-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--sfc-border, rgba(255,255,255,0.08)); }
.ls-cashier .cash-hp-footer .cash-hp-comp { flex: 1 1 auto; min-width: 0; }
.ls-cashier .cash-hp-footer .cash-hp-verify { flex: 0 0 auto; white-space: nowrap; }

/* ── Sharpen pass — crisper panels, KPI cards, list rows + tighter type. ─────── */
.ls-cashier .ls-panel { border: 1px solid var(--app-field-border, rgba(255,255,255,0.10)); box-shadow: 0 6px 22px rgba(0,0,0,0.22); }
.ls-cashier .cash-title { letter-spacing: -0.4px; }
.ls-cashier .cash-hero { box-shadow: 0 10px 30px rgba(245,165,36,0.22); }

/* ── Scope bar — Pit | Game segmented toggle + option pills, mirroring the Floor
   top bar (static/css/solstice_floor.css .sol-scope-*/.sol-pit-pill) so the two
   surfaces read identically. Filters the on-floor list client-side. ──────────── */
/* One line: primary toggle · Pit|Game|Table · the option pills (which take the
   remaining width and scroll horizontally, so they sit inline with the toggles
   rather than dropping to their own row). */
.ls-cashier .cash-scope-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-top: 7px; min-width: 0; }
.ls-cashier .cash-scope-modes { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 2px; border-radius: 7px; background: rgba(0,0,0,0.25); }
.ls-cashier .cash-scope-mode { padding: 4px 10px; min-height: 22px; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5c5970; background: transparent; border: none; border-radius: 5px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all 0.15s ease; }
.ls-cashier .cash-scope-mode:hover { color: #e8e6e3; }
.ls-cashier .cash-scope-mode.is-active { color: #0f1117; background: linear-gradient(135deg, #D4870A, #F0B84D); box-shadow: 0 1px 4px rgba(212,135,10,0.30), inset 0 1px 0 rgba(255,255,255,0.22); }
.ls-cashier .cash-gpills { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ls-cashier .cash-gpills::-webkit-scrollbar { height: 0; }
.ls-cashier .cash-gpill { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 6px 11px; min-height: 30px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; color: #908da0; background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; font-family: inherit; white-space: nowrap; }
.ls-cashier .cash-gpill:hover { color: #e8e6e3; background: rgba(212,135,10,0.08); }
.ls-cashier .cash-gpill.is-active { color: #0f1117; background: linear-gradient(135deg, #D4870A, #F0B84D); box-shadow: 0 1px 6px rgba(212,135,10,0.30), inset 0 1px 0 rgba(255,255,255,0.22); }
/* Static "Sort" label preceding the all-players sort chips (non-interactive). */
.ls-cashier .cash-sort-lbl { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5c5970; white-space: nowrap; padding-left: 2px; }

/* ── Table scope — Floor-style "Tables · N ▾" button + popover grid (mirrors
   solstice_floor.css .sol-cust-*). Button is scoped; the popover is body-level
   (position:fixed) so it uses the same hardcoded floor palette. ─────────────── */
.ls-cashier .cash-cust-wrap { display: inline-flex; align-items: center; position: relative; flex-shrink: 0; }
.ls-cashier .cash-cust-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; min-height: 30px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 600; color: #e8e6e3; font-family: inherit; white-space: nowrap; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.15s ease, background 0.15s ease; }
.ls-cashier .cash-cust-btn:hover, .ls-cashier .cash-cust-btn.is-open, .ls-cashier .cash-cust-btn.has-sel { border-color: rgba(212,135,10,0.5); }
.ls-cashier .cash-cust-ico { width: 14px; height: 14px; opacity: 0.8; flex: 0 0 14px; }
.ls-cashier .cash-cust-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 700; color: #0f1117; background: linear-gradient(135deg, #D4870A, #F0B84D); }
.ls-cashier .cash-cust-car { color: #908da0; font-size: 9px; }
.cash-cust-pop { position: fixed; z-index: 100001; min-width: 300px; max-width: 420px; background: #14171f; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.55); padding: 12px; }
.cash-cust-pop[hidden] { display: none; }
.cash-cust-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cash-cust-pop-head .t { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: #e8e6e3; }
.cash-cust-clear { font-size: 11px; font-weight: 600; color: #F0B84D; background: none; border: none; cursor: pointer; font-family: inherit; padding: 2px 4px; }
.cash-cust-clear:hover { text-decoration: underline; }
.cash-cust-pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cash-cust-pop-grp { grid-column: 1 / -1; margin: 8px 0 1px; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5c5970; }
.cash-cust-pop-grp:first-child { margin-top: 0; }
.cash-cust-gp { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 600; color: #908da0; font-family: inherit; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.cash-cust-gp:hover { background: rgba(255,255,255,0.06); color: #e8e6e3; }
.cash-cust-gp.is-on { color: #e8e6e3; border-color: rgba(212,135,10,0.5); background: rgba(212,135,10,0.10); }
.cash-cust-box { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 13px; position: relative; border: 1.5px solid #5c5970; }
.cash-cust-gp.is-on .cash-cust-box { border-color: #F0B84D; background: #F0B84D; }
.cash-cust-gp.is-on .cash-cust-box::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 7px; border: solid #0f1117; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cash-cust-gp-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .cash-cust-pop { min-width: 260px; } .cash-cust-pop-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── On-floor list grouped by game — a subtle section header + count. Sticks to
   the top of the scroll area so the game stays visible while scanning. ────────── */
/* Opaque background is load-bearing: a gradient fading to transparent let the
   scrolling rows (and the next sticky header) bleed straight through, so the game
   labels stacked and smeared on scroll. Solid panel colour + a higher z-index than
   the rows keeps exactly one header visible at a time. */
.ls-cashier .cash-group-h { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 7px 13px 6px; background: var(--sfc-surface, #13151c); border-bottom: 1px solid rgba(255,255,255,0.10); }
.ls-cashier .cash-group-h:not(:first-child) { margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.05); }
.ls-cashier .cash-group-nm { font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ls-amber-2, #f0b84d); }
.ls-cashier .cash-group-n { font-size: 10.5px; font-weight: 600; color: var(--app-text-muted, #908da0); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.06); }

/* Hero card — where they're playing + MTD points. */
.ls-cashier .cash-hp-loc { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--app-text-primary, #e8e6ef); opacity: 0.94; font-variant-numeric: tabular-nums; margin-top: 1px; }
.ls-cashier .cash-hp-loc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,0.16); }
.ls-cashier .cash-hp-loc-dot.is-paused { background: var(--ls-amber-2, #f0b84d); box-shadow: 0 0 0 3px rgba(240,184,77,0.16); }
.ls-cashier .cash-hp-pts-mtd { color: var(--app-text-muted, #908da0); font-size: 12px; }
.ls-cashier .cash-hp-pts-mtd b { color: var(--app-text-primary, #e8e6ef); font-weight: 700; }

/* Narrow / tablet-portrait: single column, natural heights (the viewport-fill only
   applies to the wide 3-column layout). KPI sidebar becomes a horizontal strip;
   cage actions move to the TOP so Cash Out is still the first thing reachable. */
@media (max-width: 900px) {
  .ls-cashier .cash-cols { grid-template-columns: 1fr; height: auto; }
  .ls-cashier .cash-col-side { order: -1; overflow: visible; }
  .ls-cashier .cash-sidebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ls-cashier .cash-sidebar .cash-kpi-in { margin-top: 0; }
  .ls-cashier .cash-who { flex: 0 1 auto; }
  .ls-cashier .cash-list { flex: 0 1 auto; max-height: 60vh; }
}
@media (max-width: 640px) {
  .ls-cashier .cash-sidebar { grid-template-columns: repeat(2, 1fr); }
}

/* ── Solstice Role Views console (Settings → Role Views) — layout only;
   reuses settings st-* classes for chrome. Scoped under #srv-root. ───────── */
#srv-root .srv-section-h { font-size: 13px; font-weight: 600; color: var(--st-text, #e8e6ef); margin-bottom: 10px; }
#srv-root .srv-surfaces { display: flex; flex-wrap: wrap; gap: 8px; }
#srv-root .srv-surf { font-size: 12px; padding: 5px 11px; border-radius: 14px; border: 1px solid var(--st-border, rgba(255,255,255,0.12)); white-space: nowrap; }
#srv-root .srv-surf.on { background: rgba(45,212,191,0.10); color: #2dd4bf; border-color: rgba(45,212,191,0.32); }
#srv-root .srv-surf.off { background: rgba(255,255,255,0.03); color: var(--st-text-muted, #908da0); }
#srv-root .srv-bundle { margin-bottom: 16px; }
#srv-root .srv-bundle:last-child { margin-bottom: 0; }
#srv-root .srv-bundle-h { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--st-text-muted, #908da0); margin-bottom: 8px; }
#srv-root .srv-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
#srv-root .srv-perm { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
#srv-root .srv-perm:hover { background: var(--st-surface-hover, rgba(255,255,255,0.04)); }
#srv-root .srv-perm input { margin-top: 2px; }
#srv-root .srv-perm-l { font-size: 13px; color: var(--st-text, #e8e6ef); }
#srv-root .srv-perm-k { font-size: 11px; color: var(--st-text-muted, #908da0); font-family: ui-monospace, monospace; margin-left: auto; }
/* Implied grants: auto-derived from a higher level, checked + locked. */
#srv-root .srv-perm-implied { cursor: default; }
#srv-root .srv-perm-implied input { cursor: not-allowed; }
#srv-root .srv-perm-implied .srv-perm-l { color: var(--st-text-muted, #908da0); }
/* Reserved (forward-declared) keys: enforcement not live yet. */
#srv-root .srv-perm-reserved .srv-perm-l { opacity: 0.7; }
#srv-root .srv-perm-badge { font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
#srv-root .srv-badge-implied { background: rgba(45,212,191,0.12); color: #2dd4bf; border: 1px solid rgba(45,212,191,0.30); }
#srv-root .srv-badge-soon { background: rgba(255,255,255,0.05); color: var(--st-text-muted, #908da0); border: 1px solid var(--st-border, rgba(255,255,255,0.14)); }
#srv-root .srv-meta-implied { color: #2dd4bf; }
#srv-root .srv-layout-stub { opacity: 0.85; }