:root {
    /* PalmSHIELD Master Calculator palette (blue = calculated/static, orange = user input) */
    --ps-blue-dark: #1F4E78;   /* section title bars / sidebar */
    --ps-blue: #2E6DA4;        /* primary buttons / accents */
    --ps-blue-mid: #5B9BD5;    /* column headers */
    --ps-blue-light: #DDEBF7;  /* calculated / static cells */
    --ps-orange: #ED7D31;      /* input accent / borders */
    --ps-orange-light: #FCE4D6;/* user-input cells */

    /* Legacy accent vars repointed from green to blue so existing rules recolor. */
    --ps-green: #2E6DA4;
    --ps-green-dark: #1F4E78;
    --ps-bg: #f3f3f4;
    --ps-sidebar: #1F4E78;
    --ps-sidebar-active: #163a5c;
    --ps-text-muted: #676a6c;
}

/* ============================ LOGIN ============================ */
.login-body {
    background: var(--ps-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.login-logo {
    max-width: 220px;
    height: auto;
    margin-bottom: 10px;
}

.middle-box {
    background: #fff;
    border-radius: 6px;
    padding: 30px 30px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .10);
}

.middle-box h3 {
    font-weight: 600;
    color: #333;
}

.btn-success {
    background-color: var(--ps-green);
    border-color: var(--ps-green);
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--ps-green-dark);
    border-color: var(--ps-green-dark);
}

/* fadeInDown, echoing AFPW's animate.css login entrance */
.animated-fade-in {
    animation: psFadeInDown .5s ease both;
}

@@keyframes psFadeInDown {
    0% { opacity: 0; transform: translate3d(0, -20px, 0); }
    100% { opacity: 1; transform: none; }
}

/* ============================ APP SHELL ============================ */
.app-body {
    background: var(--ps-bg);
    margin: 0;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 220px;
    background: var(--ps-sidebar);
    color: #a7b1c2;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-brand img {
    max-height: 28px;
    width: auto;
    background: #fff;
    border-radius: 4px;
    padding: 2px 4px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.sidebar-nav .nav-link {
    color: #a7b1c2;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: .93rem;
}

.sidebar-nav .nav-link:hover {
    color: #fff;
    background: var(--ps-sidebar-active);
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background: var(--ps-sidebar-active);
    border-left: 3px solid var(--ps-green);
}

.sidebar-nav .nav-link.disabled {
    opacity: .45;
    cursor: default;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-title {
    font-weight: 600;
    color: #333;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ps-text-muted);
    font-size: .9rem;
}

.app-content {
    padding: 24px;
}

/* ============================ DASHBOARD ============================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.stat-card {
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    padding: 18px;
}

.stat-label {
    color: var(--ps-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-top: 4px;
}

.panel {
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    overflow: hidden;
}

.panel-header {
    padding: 12px 18px;
    border-bottom: 1px solid #e7eaec;
    font-weight: 600;
    color: #333;
}

.panel-body {
    padding: 18px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--ps-blue);
}

a.estimate-link {
    text-decoration: none;
}

a.estimate-link:hover {
    text-decoration: underline;
}

.badge-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .78rem;
    background: #eef1f3;
    color: #5f5e5a;
    border: 1px solid #e0e4e7;
}

.detail-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    row-gap: 8px;
    column-gap: 12px;
    margin: 0;
}

.detail-list dt {
    color: var(--ps-text-muted);
    font-weight: 500;
    font-size: .88rem;
}

.detail-list dd {
    margin: 0;
    color: #333;
}

.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ps-text-muted);
    border-bottom: 1px solid #e7eaec;
}

.table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e7eaec;
    flex-wrap: wrap;
}

.table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.table thead th.sortable:hover { color: #2f4050; }

.table thead th.sortable::after {
    content: "";
    opacity: .35;
    margin-left: 4px;
    font-size: .8em;
}

.table thead th.sort-asc::after { content: "\2191"; opacity: 1; color: var(--ps-green); }
.table thead th.sort-desc::after { content: "\2193"; opacity: 1; color: var(--ps-green); }

.table thead th[draggable="true"] { }
.table thead th.drop-target {
    background: #e7f4f1;
    box-shadow: inset 2px 0 0 var(--ps-green);
}

/* ============================ ADMIN ============================ */
.admin-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: #333;
    transition: border-color .15s, box-shadow .15s;
}

.admin-card:hover {
    border-color: var(--ps-green);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.admin-card i {
    font-size: 1.8rem;
    color: var(--ps-green);
}

.admin-card-title { font-weight: 600; }
.admin-card-sub { color: var(--ps-text-muted); font-size: .88rem; }

.std-type {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #a0a4a8;
    margin-left: 4px;
    white-space: nowrap;
}

/* Sub-group heading inside a worksheet section panel */
.sub-head {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ps-blue, #2E6DA4);
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 4px;
    margin-bottom: 10px;
}

.std-item {
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 10px;
    background: #fcfcfd;
    height: 100%;
}

.std-name { font-weight: 600; }
.std-desc { font-size: .82rem; color: var(--ps-text-muted); }

/* View mode: inputs read as plain text; edit mode: normal input chrome */
.std-view .std-item .form-control {
    border-color: transparent;
    background: transparent;
    padding-left: 4px;
    cursor: default;
}
.std-view .std-active { pointer-events: none; opacity: .75; }

.badge-role {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 500;
}

.badge-admin { background: #e7f4f1; color: #0f6e56; border: 1px solid #bfe3da; }
.badge-estimator { background: #eef1f7; color: #3c4a63; border: 1px solid #d6ddea; }

.user-results { display: flex; flex-direction: column; gap: 8px; }

.user-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e7eaec;
    border-radius: 6px;
}

.user-result-email { font-size: .9rem; word-break: break-all; }
.user-result-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.user-result-actions .form-select { width: auto; }

/* ============================ LAYOUT TABLE ============================ */
.layout-table th {
    font-size: .74rem;
}

.layout-table .calc-col {
    background: #f7faf9;
    color: #333;
    font-variant-numeric: tabular-nums;
}

.layout-table tfoot th {
    border-top: 2px solid #e0e4e7;
    font-weight: 600;
}

.layout-table input.form-control-sm {
    max-width: 110px;
}

.layout-summary {
    font-size: .92rem;
    color: var(--ps-text-muted);
}

.layout-summary strong { color: var(--ps-blue); }

.badge-alert {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-alert.is-ok { background: #e7f4f1; color: #0f6e56; border: 1px solid #bfe3da; }
.badge-alert.is-alert { background: #fbeede; color: #854f0b; border: 1px solid #f3d69a; }

.alert-ok {
    background: #e7f4f1;
    color: #0f6e56;
    border: 1px solid #bfe3da;
    border-radius: 6px;
}

.readonly-field {
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 6px 10px;
    background: #fafbfc;
    min-height: 38px;
}

.section-sub {
    font-weight: 600;
    color: #2f4050;
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.slide-gate-card {
    border: 1px solid #e7eaec;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fcfdfd;
}

.slide-gate-card .sg-remove { text-decoration: none; }

.save-status {
    font-size: .82rem;
    color: var(--ps-text-muted);
    min-width: 120px;
    text-align: right;
}

.save-status.saving { color: #854f0b; }
.save-status.saved { color: var(--ps-green-dark); }
.save-status.dirty { color: #854f0b; }
.save-status.error { color: #a32d2d; }

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
}

.history-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: .9rem;
}

.history-when {
    font-family: ui-monospace, Consolas, monospace;
    color: #333;
    margin-right: 8px;
}

@@media (max-width: 768px) {
    .app-sidebar { width: 60px; }
    .sidebar-brand span,
    .sidebar-nav .nav-link span { display: none; }
    .detail-list { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ============================ CALCULATOR THEME (blue = calc, orange = input) ============================ */
/* Section title bars (dark blue, like the workbook's section headers) */
.panel-header {
    background: var(--ps-blue-dark);
    color: #fff;
    border-bottom: none;
}
.panel-header a { color: #d5e6f6; }
.panel-header a:hover { color: #fff; }
.panel-header .text-muted,
.panel-header .small { color: #b9d2ea !important; }

/* Sub-section headers */
.section-sub {
    color: var(--ps-blue-dark);
    border-bottom-color: #cddef0;
}

/* Column headers -> blue */
.table thead th { color: #24608f; }

/* Worksheet USER INPUTS = orange */
#ewsRoot .form-control,
#ewsRoot .form-select {
    background-color: var(--ps-orange-light);
    border-color: #f0c4a2;
}
#ewsRoot .form-control:focus,
#ewsRoot .form-select:focus {
    background-color: #fff;
    border-color: var(--ps-orange);
    box-shadow: 0 0 0 0.2rem rgba(237, 125, 49, 0.15);
}
#ewsRoot textarea.form-control { background-color: var(--ps-orange-light); }

/* CALCULATED / STATIC fields = light blue */
.readonly-field,
.layout-table .calc-col {
    background-color: var(--ps-blue-light) !important;
    color: #1c3d5a;
}

/* Legend swatches */
.legend { display: flex; gap: 18px; align-items: center; font-size: .85rem; color: var(--ps-text-muted); }
.legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.swatch.input { background: var(--ps-orange-light); border: 1px solid #f0c4a2; }
.swatch.calc { background: var(--ps-blue-light); border: 1px solid #bcd6ee; }

.std-inactive { opacity: 0.5; }
.std-inactive .std-name, .std-inactive .form-control { background: #f4f5f6; }
.nav-pills .nav-link.active { background-color: var(--ps-blue); }

/* ---- Worksheet inputs stay white (override the earlier orange rule) ---- */
#ewsRoot .form-control,
#ewsRoot .form-select,
#ewsRoot textarea.form-control {
    background-color: #fff;
    border-color: #ced4da;
}
#ewsRoot .form-control:focus,
#ewsRoot .form-select:focus {
    background-color: #fff;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(46, 109, 164, 0.2);
}
.swatch.input { background: #fff; border: 1px solid #ced4da; }

/* ---- Collapsible calculator sections ---- */
.collapse-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    border: none;
}
.collapse-header .chevron { transition: transform .2s ease; }
.collapse-header[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.collapse-header:hover { filter: brightness(1.08); }

/* ---- Floating alert card, anchored over the left sidebar ---- */
.sidebar-alert {
    position: fixed;
    left: 12px;
    bottom: 12px;
    width: 196px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .82rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
    z-index: 1050;
}
.sidebar-alert.is-ok { background: #e7f4f1; color: #0f6e56; border: 1px solid #bfe3da; }
.sidebar-alert.is-alert { background: #fbeede; color: #854f0b; border: 1px solid #f3d69a; }
.sidebar-alert-head { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sidebar-alert-list { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.sidebar-alert-list:empty { display: none; }
@@media (max-width: 768px) { .sidebar-alert { display: none; } }