:root {
    --bg: #eeeeee;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-strong: #f8fafc;
    --line: #d9dee7;
    --ink: #27364a;
    --muted: #667085;
    --accent: #3a9fbf;
    --accent-strong: #1d2b3d;
    --navy: #1d2b3d;
    --navy-2: #26364b;
    --blue: #3a9fbf;
    --blue-2: #4db4c7;
    --silver: #d6dde8;
    --warn: #936b05;
    --ok: #155f45;
    --danger: #9f2f2b;
    --shadow: 0 12px 28px rgba(31, 42, 56, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 48px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 18px 22px;
    background: var(--navy);
    color: white;
    border: 1px solid rgba(214, 221, 232, 0.24);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(184, 198, 219, 0.7);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.brand h1 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
}

.brand p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.nav-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-links a,
.btn,
button {
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nav-links a,
.btn {
    padding: 11px 16px;
    font-weight: 600;
}

.nav-links a {
    color: white;
    background: rgba(255, 255, 255, 0.12);
}

.nav-links .nav-back {
    color: #334155;
    background: #f1f5f9;
}

.nav-links .nav-portal {
    color: #0f5132;
    background: #dff7ea;
}

.nav-links .nav-support {
    color: #214f88;
    background: #e0f2fe;
}

.nav-links .nav-logout {
    color: var(--accent-strong);
    background: #dbeafe;
}

.nav-links a:hover,
.btn:hover,
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-secondary {
    background: white;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-light-blue {
    background: #dbeafe;
    color: var(--accent-strong);
    border: 1px solid #bfdbfe;
}

.btn-navy {
    background: #0f2745;
    color: #ffffff;
    border: 1px solid #0f2745;
}

.btn-standard {
    display: inline-flex;
    width: auto;
    min-width: 0;
    padding: 9px 14px;
    justify-self: start;
}

.btn-two-line {
    text-align: center;
    line-height: 1.15;
}

.btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger-soft {
    background: #fde8e6;
    color: var(--danger);
    border: 1px solid rgba(166, 44, 33, 0.22);
}

.btn:disabled,
button:disabled,
.btn[disabled],
button[disabled] {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 1;
    box-shadow: none !important;
    transform: none !important;
}

.btn:disabled:hover,
button:disabled:hover,
.btn[disabled]:hover,
button[disabled]:hover {
    background: #e5e7eb !important;
    box-shadow: none !important;
    transform: none !important;
}

.hero,
.card,
.table-card,
.form-card {
    background: var(--panel);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    padding: 28px;
    margin-bottom: 24px;
}

.hero h2,
.section-head h2 {
    margin-top: 0;
    font-size: 2rem;
}

.hero p,
.section-head p,
.muted {
    color: var(--muted);
}

.text-center {
    text-align: center;
}

.nowrap {
    white-space: nowrap;
}

.portal-greeting {
    margin: 0 0 8px;
    color: var(--accent-strong);
    font-weight: 700;
}

.portal-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.85fr);
    align-items: stretch;
    overflow: hidden;
}

.portal-hero-copy {
    display: grid;
    align-content: center;
    gap: 12px;
}

.portal-kicker,
.portal-panel-label,
.module-eyebrow {
    color: var(--accent-strong);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-hero-copy h2 {
    margin: 0;
    max-width: 780px;
    color: #18375f;
    font-size: 2.35rem;
}

.portal-hero-copy > p:not(.portal-greeting) {
    max-width: 720px;
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.6;
}

.portal-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.portal-status-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(184, 198, 219, 0.78);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    color: #526376;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
}

.portal-status-row span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2f855a;
}

.portal-command-panel {
    display: grid;
    gap: 14px;
    align-content: stretch;
}

.portal-panel-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.portal-panel-card strong {
    color: #18375f;
    font-size: 1.25rem;
}

.portal-panel-card p {
    margin: 0;
    line-height: 1.5;
}

.portal-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
    overflow: visible;
    padding-bottom: 0;
}

.portal-admin-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    font-size: 0.9rem;
}

.portal-admin-panel {
    gap: 14px;
}

.portal-modules-section {
    position: relative;
    overflow: hidden;
}

.portal-modules-section .section-head {
    justify-content: center;
    text-align: center;
}

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

.finance-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
}

.finance-rail {
    align-content: start;
}

.finance-rail .crm-rail-actions .btn {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 9px 10px;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
}

.finance-rail-panel {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(184, 198, 219, 0.68);
}

.finance-rail-form,
.finance-rail-kpis {
    display: grid;
    gap: 8px;
}

.finance-rail-form label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.finance-rail-form input {
    margin-top: 5px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.finance-rail-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.finance-rail-form-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 8px 9px;
}

.finance-rail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-rail-kpis div {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
}

.finance-rail-kpis span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.finance-rail-kpis strong {
    display: block;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.finance-command {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
}

.finance-kpi-row {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.finance-kpi-row .crm-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88px;
    text-align: center;
}

.finance-kpi-row .crm-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.finance-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.commercial-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
}

.commercial-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.commercial-command {
    align-items: stretch;
}

.commercial-command > div:first-child p {
    margin: 6px 0 0;
    color: var(--muted);
}

.commercial-kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.commercial-kpi-row .crm-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.commercial-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.commercial-chart-card {
    min-height: 330px;
}

.commercial-chart-card canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
}

.commercial-filter-form {
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) auto;
}

.commercial-table-scroll {
    max-height: 520px;
    overflow: auto;
}

.commercial-table-scroll table {
    font-size: 0.82rem;
}

.commercial-table-scroll th,
.commercial-table-scroll td {
    padding: 8px 9px;
    line-height: 1.25;
}

.commercial-table-scroll .btn-sm {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.commercial-quotes-scroll {
    max-height: 720px;
    overflow: auto;
}

.commercial-quotes-scroll table {
    min-width: 920px;
}

.support-filter-form.commercial-catalog-filter-form {
    grid-template-columns: minmax(250px, 1fr) minmax(150px, 190px) minmax(150px, 190px) minmax(238px, auto);
}

.support-filter-actions.commercial-catalog-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, 112px);
    gap: 12px;
    align-items: end;
    justify-content: end;
    min-width: 236px;
}

.support-filter-actions.commercial-catalog-filter-actions .btn {
    justify-content: center;
    width: 112px;
    min-width: 112px;
    text-align: center;
}

.commercial-catalog-scroll table {
    min-width: 0;
    table-layout: fixed;
}

.commercial-catalog-scroll .commercial-product-col {
    width: 28%;
    max-width: 320px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.commercial-catalog-scroll th:nth-child(n+3),
.commercial-catalog-scroll td:nth-child(n+3) {
    text-align: center;
}

.commercial-price-grid,
.commercial-items {
    display: grid;
    gap: 10px;
}

.commercial-price-row,
.commercial-item-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(110px, 0.8fr);
    gap: 10px;
    align-items: center;
}

.commercial-item-row {
    grid-template-columns: 28px minmax(280px, 1fr) 100px 120px 120px;
}

.commercial-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.commercial-item-check input {
    width: 16px;
    height: 16px;
}

.commercial-item-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.commercial-item-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    color: var(--navy);
    font-weight: 800;
}

.commercial-add-price {
    margin-top: 10px;
}

.commercial-total-panel {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 18px;
    justify-content: end;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 14px;
    background: #f8fbff;
}

.commercial-total-panel span {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
}

.commercial-total-panel strong {
    color: var(--navy);
    font-size: 1.2rem;
}

.compact-head {
    margin-bottom: 10px;
}

.compact-head h3 {
    margin: 0;
    color: var(--navy);
}

.compact-head p {
    margin: 4px 0 0;
}

.commercial-quote-paper {
    display: grid;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 12px;
    background: #fff;
    color: #1c2f48;
}

.commercial-quote-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 2px solid #dbe7f5;
    padding-bottom: 16px;
}

.commercial-quote-brand {
    display: flex;
    gap: 14px;
    align-items: center;
}

.commercial-quote-brand img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
}

.commercial-quote-brand h2,
.commercial-quote-brand p,
.commercial-quote-brand span,
.commercial-quote-meta span,
.commercial-quote-info p,
.commercial-quote-terms p,
.commercial-quote-footer span {
    margin: 0;
}

.commercial-quote-brand h2 {
    color: var(--navy);
    font-size: 1.45rem;
}

.commercial-quote-meta,
.commercial-quote-footer {
    display: grid;
    gap: 5px;
    text-align: right;
}

.commercial-quote-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

.commercial-quote-intro {
    margin: 0;
    line-height: 1.5;
}

.commercial-quote-table {
    width: 100%;
    border-collapse: collapse;
}

.commercial-quote-table th,
.commercial-quote-table td {
    border: 1px solid #dbe7f5;
    padding: 10px;
    vertical-align: top;
}

.commercial-quote-table th {
    background: #eaf2ff;
    color: var(--navy);
}

.commercial-quote-table td:nth-child(2),
.commercial-quote-table td:nth-child(4),
.commercial-quote-table td:nth-child(5),
.commercial-quote-table tfoot th {
    text-align: center;
}

.commercial-quote-terms {
    display: grid;
    gap: 6px;
}

.commercial-quote-terms h3 {
    margin: 0;
    color: var(--navy);
}

.commercial-quote-footer {
    margin-top: 20px;
    text-align: left;
}

@media print {
    .topbar,
    .no-print,
    .nav-links,
    .flash-stack {
        display: none !important;
    }

    .shell,
    .table-card,
    .commercial-quote-view-card {
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: 0;
        background: #fff;
    }

    .commercial-quote-paper {
        max-width: none;
        border: 0;
        padding: 0;
    }
}

.finance-receivables-scroll {
    max-height: 760px;
    overflow: auto;
    border: 1px solid rgba(184, 198, 219, 0.65);
    border-radius: 10px;
}

.finance-receivables-scroll table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.finance-receivables-table th,
.finance-receivables-table td {
    padding: 9px 8px;
    font-size: 0.82rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.finance-receivables-table th:nth-child(1),
.finance-receivables-table td:nth-child(1) {
    width: 19%;
}

.finance-receivables-table th:nth-child(2),
.finance-receivables-table td:nth-child(2) {
    width: 15%;
}

.finance-receivables-table th:nth-child(3),
.finance-receivables-table td:nth-child(3),
.finance-receivables-table th:nth-child(4),
.finance-receivables-table td:nth-child(4) {
    width: 12%;
}

.finance-receivables-table th:nth-child(5),
.finance-receivables-table td:nth-child(5) {
    width: 11%;
}

.finance-receivables-table th:nth-child(6),
.finance-receivables-table td:nth-child(6) {
    width: 13%;
}

.finance-receivables-table th:nth-child(7),
.finance-receivables-table td:nth-child(7) {
    width: 18%;
}

.finance-receivables-table .btn-table {
    padding: 7px 9px;
    font-size: 0.76rem;
}

.finance-receivables-page-table th,
.finance-receivables-page-table td {
    padding: 8px 8px;
    font-size: 0.8rem;
    text-align: center;
}

.finance-receivables-page-table .pill,
.finance-receivables-page-table .btn-table {
    font-size: 0.75rem;
}

.finance-receivables-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.finance-date-cell {
    white-space: nowrap;
}

.finance-status-cell {
    text-align: center;
}

.finance-status-cell .pill {
    justify-content: center;
}

.finance-summary-grid,
.finance-indicator-grid,
.finance-category-grid {
    display: grid;
    gap: 12px;
}

.finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-summary-card,
.finance-indicator-card,
.finance-category-card {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.finance-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.finance-summary-card span,
.finance-indicator-card span,
.finance-category-card span {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.finance-summary-card strong,
.finance-indicator-card strong,
.finance-category-card strong {
    position: relative;
    z-index: 1;
    color: var(--accent-strong);
    font-size: 1.45rem;
}

.finance-summary-wide {
    grid-column: 1 / -1;
    background: #e0f2fe;
}

.finance-summary-grid .finance-summary-card:nth-child(1) {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.finance-summary-grid .finance-summary-card:nth-child(2) {
    background: #fff8e6;
    border-color: #f4d58d;
}

.finance-summary-grid .finance-summary-card:nth-child(3) {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.finance-summary-grid .finance-summary-card:nth-child(4) {
    background: #f8f5ff;
    border-color: #d8ccff;
}

.finance-summary-grid .finance-summary-card:nth-child(1)::before {
    background: #2b63a8;
}

.finance-summary-grid .finance-summary-card:nth-child(2)::before {
    background: #c58a11;
}

.finance-summary-grid .finance-summary-card:nth-child(3)::before {
    background: #2f855a;
}

.finance-summary-grid .finance-summary-card:nth-child(4)::before {
    background: #6b5bb8;
}

.finance-indicator-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.62);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.finance-indicator-form input {
    border-radius: 10px;
    background: white;
}

.finance-indicator-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-indicator-card p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.finance-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.accounting-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.accounting-filter-form {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
}

.accounting-table-scroll {
    max-height: 620px;
    overflow: auto;
}

.accounting-lines {
    display: grid;
    gap: 10px;
}

.accounting-line-head,
.accounting-line-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
}

.accounting-line-head {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stat-card {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 96px;
    padding: 16px 18px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.stat-grid .stat-card:nth-child(1) {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.stat-grid .stat-card:nth-child(2) {
    background: #fff8e6;
    border-color: #f4d58d;
}

.stat-grid .stat-card:nth-child(3) {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.stat-grid .stat-card:nth-child(4) {
    background: #f8f5ff;
    border-color: #d8ccff;
}

.stat-grid .stat-card:nth-child(1)::before {
    background: #2b63a8;
}

.stat-grid .stat-card:nth-child(2)::before {
    background: #c58a11;
}

.stat-grid .stat-card:nth-child(3)::before {
    background: #2f855a;
}

.stat-grid .stat-card:nth-child(4)::before {
    background: #6b5bb8;
}

.stat-card span {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #526376;
    margin-bottom: 6px;
}

.stat-card strong {
    position: relative;
    z-index: 1;
    font-size: 1.65rem;
    line-height: 1;
    color: #1f3f68;
}

.stat-grid .stat-card:nth-child(even) strong {
    color: #1f3f68;
}

.hr-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.hr-rail {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hr-rail-title {
    margin-bottom: 2px;
}

.hr-rail-menu {
    display: grid;
    gap: 0;
}

.hr-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.hr-rail-header {
    display: grid;
    gap: 8px;
}

.hr-rail-header h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1.7rem;
}

.hr-rail-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.hr-eyebrow {
    width: fit-content;
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eef7ff;
    color: var(--accent-strong);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hr-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hr-hero-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(184, 198, 219, 0.75);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.hr-rail-actions {
    display: grid;
    gap: 8px;
}

.hr-rail-actions .btn {
    justify-content: center;
    width: min(100%, 220px);
    justify-self: center;
    text-align: center;
}

.hr-dashboard-command {
    margin: 0;
}

.hr-dashboard-kpis {
    margin: 0;
}

.hr-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hr-dashboard-summary-grid {
    align-items: stretch;
}

.hr-dashboard-card {
    display: grid;
    gap: 14px;
    min-height: 236px;
}

.hr-dashboard-card .section-head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

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

.hr-mini-metrics div {
    display: grid;
    gap: 6px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 8px;
    background: #f8fbff;
}

.hr-mini-metrics span,
.hr-distribution-list span,
.hr-card-footer span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.hr-mini-metrics strong {
    color: var(--navy);
    font-size: 1.35rem;
}

.hr-distribution-list,
.hr-alert-list {
    display: grid;
    gap: 10px;
}

.hr-distribution-list div,
.hr-alert-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 8px;
    background: #f8fbff;
    color: var(--text);
    text-decoration: none;
}

.hr-distribution-list strong {
    color: var(--navy);
    font-size: 1.1rem;
}

.hr-alert-list a {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

.hr-alert-list span {
    color: var(--navy);
    font-weight: 900;
}

.hr-alert-list strong {
    color: var(--text);
    font-size: 0.9rem;
}

.hr-alert-list small {
    color: var(--muted);
    font-weight: 700;
}

.hr-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.hr-card-footer span {
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eef7ff;
    color: var(--accent-strong);
}

.hr-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
}

.hr-rail .hr-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hr-stat-grid .stat-card {
    min-height: 96px;
}

.hr-rail .hr-stat-grid .stat-card {
    min-height: 82px;
    padding: 14px;
}

.hr-rail .hr-stat-grid .stat-card strong {
    font-size: 1.35rem;
}

.hr-rail-note {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eef7ff;
}

.hr-rail-note strong {
    color: var(--accent-strong);
}

.hr-rail-note span {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.hr-stat-grid .stat-card:nth-child(1) {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.hr-stat-grid .stat-card:nth-child(2) {
    background: #fff8e6;
    border-color: #f4d58d;
}

.hr-stat-grid .stat-card:nth-child(3) {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.hr-stat-grid .stat-card:nth-child(4) {
    background: #f4f0ff;
    border-color: #d8ccff;
}

.hr-stat-grid .stat-card:nth-child(1)::before {
    background: #2b63a8;
}

.hr-stat-grid .stat-card:nth-child(2)::before {
    background: #c58a11;
}

.hr-stat-grid .stat-card:nth-child(3)::before {
    background: #2f855a;
}

.hr-stat-grid .stat-card:nth-child(4)::before {
    background: #6b5bb8;
}

.hr-employee-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr);
}

.hr-employee-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hr-avatar {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
    border-radius: 22px;
    background: #e0f2fe;
    color: var(--accent-strong);
    border: 1px solid #bfdbfe;
    font-weight: 900;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
}

.hr-employee-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
}

.hr-employee-metrics .stat-card {
    min-height: 96px;
}

.hr-dashboard-layout {
    grid-template-columns: 1fr;
}

.hr-employee-panel {
    overflow: hidden;
    padding: 20px;
}

.hr-employee-panel > .section-head {
    margin-bottom: 12px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
}

.hr-employee-panel > .section-head h2 {
    font-size: 1.45rem;
}

.hr-table-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid rgba(184, 198, 219, 0.62);
    border-radius: 10px;
    background: #f8fbff;
}

.hr-table-legend,
.hr-table-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hr-table-legend span,
.hr-table-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.hr-table-meta span {
    border: 1px solid #bfdbfe;
    color: var(--accent-strong);
}

.hr-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--muted);
}

.hr-dot-ok {
    background: var(--ok);
}

.hr-dot-warning {
    background: var(--warn);
}

.hr-dot-muted {
    background: var(--muted);
}

.hr-employee-table {
    min-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
}

.hr-employee-group-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.hr-employee-table th {
    padding: 12px 14px;
    background: rgba(242, 246, 251, 0.82);
}

.hr-employee-table th:first-child {
    border-top-left-radius: 12px;
}

.hr-employee-table th:last-child {
    border-top-right-radius: 12px;
}

.hr-employee-table td {
    padding: 16px 14px;
    vertical-align: middle;
}

.hr-employee-table tbody tr {
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

.hr-employee-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.92);
}

.hr-employee-table th:nth-child(1),
.hr-employee-table td:nth-child(1) {
    width: 34%;
}

.hr-employee-table th:nth-child(2),
.hr-employee-table td:nth-child(2) {
    width: 22%;
}

.hr-employee-table th:nth-child(3),
.hr-employee-table td:nth-child(3) {
    width: 10%;
}

.hr-employee-table th:nth-child(4),
.hr-employee-table td:nth-child(4) {
    width: 27%;
}

.hr-employee-table th:nth-child(5),
.hr-employee-table td:nth-child(5) {
    width: 7%;
    text-align: center;
}

.hr-employee-group-table th:nth-child(1),
.hr-employee-group-table td:nth-child(1) {
    width: 38%;
}

.hr-employee-group-table th:nth-child(2),
.hr-employee-group-table td:nth-child(2) {
    width: 24%;
}

.hr-employee-group-table th:nth-child(3),
.hr-employee-group-table td:nth-child(3) {
    width: 14%;
}

.hr-employee-group-table th:nth-child(4),
.hr-employee-group-table td:nth-child(4) {
    width: 24%;
    text-align: center;
}

.hr-employee-row-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.hr-avatar-sm {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

.hr-employee-cell strong,
.hr-role-stack strong {
    display: block;
    color: var(--text);
    line-height: 1.3;
}

.hr-employee-code {
    margin-top: 3px;
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 800;
}

.hr-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.hr-role-stack {
    display: grid;
    justify-items: start;
    gap: 7px;
    min-width: 160px;
}

.hr-role-stack > span:last-child {
    color: var(--muted);
    font-size: 0.82rem;
}

.hr-availability-cell {
    min-width: 240px;
}

.hr-availability-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: 360px;
}

.hr-availability-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eef7ff;
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.hr-actions-cell {
    text-align: center;
    white-space: nowrap;
}

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

.hr-detail-grid div {
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.58);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
}

.hr-detail-grid .wide {
    grid-column: 1 / -1;
}

.hr-availability-list {
    display: grid;
    gap: 12px;
}

.hr-availability-day {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
}

.hr-availability-day legend {
    padding: 0 6px;
    color: var(--text);
    font-weight: 800;
}

.hr-availability-slot {
    display: grid;
    grid-template-columns: 88px repeat(2, minmax(120px, 1fr));
    gap: 10px;
    align-items: end;
    padding: 8px 0;
    border-top: 1px solid rgba(184, 198, 219, 0.45);
}

.hr-availability-slot:first-of-type {
    border-top: 0;
}

.hr-availability-slot span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.hr-availability-slot label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.hr-availability-slot input[type="time"] {
    padding: 8px;
}

@media (max-width: 720px) {
    .hr-availability-slot {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.hr-detail-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hr-detail-grid strong {
    display: block;
    line-height: 1.35;
}

.hr-table-scroll {
    max-height: 420px;
    overflow: auto;
}

.hr-employee-secondary {
    margin-top: 32px;
    padding-top: 4px;
}

.layout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

.card,
.table-card,
.form-card {
    padding: 22px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(184, 198, 219, 0.65);
}

th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.th-normal {
    font-weight: 400;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.pill-ok {
    background: rgba(22, 101, 52, 0.18);
    color: var(--ok);
}

.pill-low {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warn);
}

.pill-info {
    background: rgba(43, 99, 168, 0.16);
    color: var(--accent-strong);
}

.pill-danger {
    background: #fee2e2;
    color: #991b1b;
}

.pill-warning {
    background: #fff1c7;
    color: #795209;
}

.pill-muted {
    background: rgba(95, 111, 132, 0.16);
    color: var(--muted);
}

.pill-qx-new,
.pill-qx-scheduled,
.pill-qx-review,
.pill-qx-completed {
    justify-content: center;
    min-width: 112px;
    padding: 8px 14px;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 400;
}

.pill-qx-new {
    background: #dff7ea;
}

.pill-qx-scheduled {
    background: #fff4bf;
}

.pill-qx-review {
    background: #ffead5;
}

.pill-qx-completed {
    background: #dbeafe;
}

.pill-qx-status {
    font-size: 0.92rem;
    font-weight: 400;
}

.pill-qx-priority {
    justify-content: center;
    min-width: 84px;
    padding: 7px 10px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 500;
}

.pill-qx-priority-urgent {
    background: #ffd9d9;
}

.pill-qx-priority-high {
    background: #fff1c7;
}

.pill-qx-priority-normal {
    background: #dbeafe;
}

.qx-stat-new {
    background: linear-gradient(135deg, #f4fff8, #dff7ea);
    border-color: rgba(15, 107, 69, 0.24);
}

.qx-stat-new::before {
    background: #2fbf71;
}

.qx-stat-new strong {
    color: #0f6b45;
}

.qx-stat-scheduled {
    background: linear-gradient(135deg, #fffdf0, #fff4bf);
    border-color: rgba(122, 90, 0, 0.22);
}

.qx-stat-scheduled::before {
    background: #f2c94c;
}

.qx-stat-scheduled strong {
    color: #7a5a00;
}

.qx-stat-review {
    background: linear-gradient(135deg, #fff8f0, #ffead5);
    border-color: rgba(154, 75, 0, 0.22);
}

.qx-stat-review::before {
    background: #f59e0b;
}

.qx-stat-review strong {
    color: #9a4b00;
}

.qx-stat-completed {
    background: linear-gradient(135deg, #f5f9ff, #dbeafe);
    border-color: rgba(29, 79, 145, 0.24);
}

.qx-stat-completed::before {
    background: #3b82f6;
}

.qx-stat-completed strong {
    color: #1d4f91;
}

.flash-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.flash {
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 600;
}

.flash-success {
    background: rgba(43, 99, 168, 0.14);
    color: var(--accent-strong);
}

.flash-error {
    background: rgba(166, 44, 33, 0.12);
    color: var(--danger);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.toolbar form,
.inline-form,
.form-grid {
    display: grid;
    gap: 14px;
}

.toolbar form {
    width: min(380px, 100%);
}

.products-control-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
}

.products-filter-form {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) minmax(190px, 0.8fr) minmax(190px, 0.8fr) auto;
    gap: 12px;
    align-items: end;
}

.products-filter-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.products-filter-form input,
.products-filter-form select {
    width: 100%;
    min-width: 0;
    background: #fff;
}

.products-filter-actions {
    display: grid;
    gap: 8px;
}

.products-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 104px;
}

.products-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.products-result-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #c5dff4;
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    white-space: nowrap;
}

.products-result-count strong {
    color: var(--navy);
    font-size: 1rem;
}

.products-result-count span {
    font-size: 0.86rem;
}

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

.products-selection-actions .btn {
    min-width: 96px;
    justify-content: center;
}

.products-select-column {
    width: 52px;
    min-width: 52px;
    text-align: center;
}

.products-table-wrap {
    max-height: 882px;
    overflow: auto;
}

.products-selection-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.products-selection-table th,
.products-selection-table td {
    height: 42px;
    padding: 8px 10px;
    font-size: 0.86rem;
    white-space: nowrap;
}

.products-sku-column {
    white-space: nowrap;
}

.products-name-column {
    width: 34%;
    min-width: 230px;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.products-quantity-column {
    text-align: center;
}

.product-selector {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.products-selection-table tbody tr {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.products-selection-table tbody tr.is-selected {
    background: #eaf6fb;
    box-shadow: inset 4px 0 0 var(--accent);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fffdf8;
    color: var(--ink);
    font: inherit;
}

input[type="checkbox"] {
    width: auto;
    margin: 0;
}

input[type="file"] {
    padding: 8px;
    background: rgba(255, 255, 255, 0.62);
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #e0f2fe;
    color: var(--accent-strong);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.large-textarea {
    min-height: 240px;
}

.field-help {
    display: block;
    margin-top: 8px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.field-label {
    display: block;
    margin-bottom: 8px;
}

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

.form-grid .full {
    grid-column: 1 / -1;
}

.form-section-title {
    margin-top: 10px;
    padding: 12px 0 4px;
    color: var(--navy);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdff;
    color: var(--ink);
    font-weight: 750;
}

.checkbox-field input {
    flex: 0 0 auto;
}

.action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.inventory-import-form {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.inventory-import-file {
    display: grid;
    gap: 8px;
}

.inventory-import-file input[type="file"] {
    min-height: 44px;
}

.inventory-import-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 1px;
}

.inventory-import-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.qx-action-stack {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.btn-qx-review-main {
    min-width: 112px;
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
}

.admin-action-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
}

.admin-action-row .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

.mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-actions form {
    margin: 0;
}

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

.table-actions .inline-form {
    display: inline-flex;
    margin: 0;
}

.btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    white-space: nowrap;
    line-height: 1.2;
}

.user-actions {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.empty-state {
    padding: 26px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 18px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.45);
}

.ticket-list {
    display: grid;
    gap: 18px;
}

.ticket-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ticket-metric {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.ticket-metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.ticket-metric span {
    position: relative;
    z-index: 1;
    color: #526376;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ticket-metric strong {
    position: relative;
    z-index: 1;
    color: #1f3f68;
    font-size: 1.65rem;
    line-height: 1;
}

.ticket-metric-open {
    background: #fff8e6;
    border-color: #f4d58d;
}

.ticket-metric-open::before {
    background: #c58a11;
}

.ticket-metric-pending {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.ticket-metric-pending::before {
    background: #2b63a8;
}

.ticket-metric-done {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.ticket-metric-done::before {
    background: #2f855a;
}

.support-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) repeat(5, minmax(130px, 0.75fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.62);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.support-filter-form input,
.support-filter-form select {
    border-radius: 10px;
    background: white;
}

.support-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.support-filter-actions .btn {
    width: 112px;
    justify-content: center;
}

.finance-receivable-filter-actions {
    justify-content: flex-start;
    justify-self: start;
}

.finance-receivable-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ticket-card {
    display: grid;
    gap: 18px;
    justify-items: start;
    padding: 20px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 16px;
    background: rgba(247, 250, 255, 0.92);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.ticket-head h3,
.ticket-comments h4,
.ticket-section p,
.ticket-comment p,
.ticket-card p {
    margin: 0;
}

.ticket-section {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(184, 198, 219, 0.45);
}

.ticket-section .btn {
    justify-self: start;
}

.ticket-description-section {
    margin-bottom: 18px;
}

.ticket-section-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ticket-detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 16px;
    margin-bottom: 18px;
}

.ticket-user-wrapper {
    margin-bottom: 18px;
}

.ticket-comments {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(184, 198, 219, 0.58);
}

.ticket-comments-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ticket-comment {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(184, 198, 219, 0.52);
    border-radius: 12px;
    background: rgba(247, 250, 255, 0.82);
}

.ticket-empty-state {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
}

.ticket-comment + .ticket-comment {
    margin-top: 2px;
}

.ticket-update-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(184, 198, 219, 0.58);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.54);
}

.ticket-update-form .full {
    grid-column: auto;
}

.ticket-update-form textarea {
    min-height: 96px;
}

.ticket-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    gap: 18px;
    align-items: stretch;
    justify-content: center;
}

.module-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    min-height: 196px;
    padding: 22px;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.module-card-active {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.module-card-active:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 99, 168, 0.34);
    box-shadow: 0 18px 34px rgba(31, 41, 51, 0.16);
}

.module-card-disabled {
    opacity: 0.72;
}

.module-tone-blue {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.module-tone-blue::before {
    background: #2b63a8;
}

.module-tone-green {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.module-tone-green::before {
    background: #2f855a;
}

.module-tone-gold {
    background: #fff8e6;
    border-color: #f4d58d;
}

.module-tone-gold::before {
    background: #c58a11;
}

.module-tone-lilac {
    background: #f8f5ff;
    border-color: #d8ccff;
}

.module-tone-lilac::before {
    background: #6b5bb8;
}

.module-tone-rose {
    background: #fff1f4;
    border-color: #f6c4ce;
}

.module-tone-rose::before {
    background: #c2415b;
}

.module-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.module-card h3 {
    margin: 0;
    color: #18375f;
    font-size: 1.22rem;
}

.module-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.module-eyebrow {
    position: relative;
    z-index: 1;
}

.module-card-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(184, 198, 219, 0.56);
    color: #526376;
    font-size: 0.86rem;
    font-weight: 800;
}

.crm-workspace,
.crm-record {
    display: grid;
    gap: 18px;
}

.crm-workspace {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
}

.crm-rail,
.crm-command,
.crm-filter-bar,
.crm-list-panel,
.crm-side-panel,
.crm-activity-panel,
.crm-record-header {
    background: rgba(247, 250, 255, 0.94);
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(31, 41, 51, 0.1);
}

.crm-rail {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 8px;
    padding: 16px;
}

.crm-rail-title {
    margin-bottom: 8px;
    color: var(--accent-strong);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

.crm-rail-item {
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.crm-rail-item.active,
.crm-rail-item:hover {
    background: #eaf2ff;
    color: var(--accent-strong);
}

.crm-rail-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.crm-rail-action-button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.crm-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.crm-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}

.crm-command h2,
.crm-record-header h2 {
    margin: 0 0 10px;
    font-size: 1.45rem;
}

.crm-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-focus-value {
    margin-bottom: 20px;
}

.crm-record-header .crm-focus-value {
    display: block;
    margin: 4px 0 24px;
}

.crm-tab {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.crm-tab.active {
    background: #dbeafe;
    border-color: #9dbaf0;
    color: var(--accent-strong);
}

.crm-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    gap: 8px;
    min-width: 430px;
}

.crm-kpi {
    position: relative;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.08);
}

.crm-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.crm-kpi-blue {
    background: #eef7ff;
    border-color: #bfdbfe;
}

.crm-kpi-blue::before {
    background: #2b63a8;
}

.crm-kpi-green {
    background: #eefaf3;
    border-color: #b9e7c8;
}

.crm-kpi-green::before {
    background: #2f855a;
}

.crm-kpi-gold {
    background: #fff8e6;
    border-color: #f4d58d;
}

.crm-kpi-gold::before {
    background: #c58a11;
}

.crm-kpi-rose {
    background: #fff1f4;
    border-color: #f6c4ce;
}

.crm-kpi-rose::before {
    background: #c2415b;
}

.crm-kpi span,
.crm-field-grid span,
.crm-detail-list dt {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crm-kpi strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 4px;
    color: #1f3f68;
    font-size: 1.52rem;
    line-height: 1;
}

.crm-kpi span {
    position: relative;
    z-index: 1;
    color: #526376;
}

.crm-filter-bar {
    padding: 14px;
}

.crm-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(120px, 0.65fr)) auto;
    gap: 10px;
    align-items: start;
}

.crm-filter-form input,
.crm-filter-form select {
    border-radius: 10px;
    background: white;
}

.crm-filter-search {
    display: grid;
    gap: 8px;
}

.crm-filter-subrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.crm-filter-actions {
    display: grid;
    gap: 8px;
}

.interaction-filter-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(130px, 0.8fr)) auto auto;
    gap: 10px;
    align-items: center;
}

.interaction-list-filter-form {
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 1fr) repeat(2, minmax(130px, 0.8fr)) auto auto;
    margin: 0 0 12px;
}

.medical-map-filter-form {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, 0.8fr)) auto auto;
}

.medical-map-primary-grid {
    grid-template-columns: 1fr;
}

.audit-filter-form {
    margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto;
    align-items: end;
}

.audit-filter-form .btn {
    width: 128px;
    justify-content: center;
}

.audit-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    grid-column: auto;
}

.audit-table-scroll {
    max-height: 980px;
    overflow: auto;
}

.audit-json summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-weight: 700;
}

.audit-json pre {
    max-width: 360px;
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--ink);
    font-size: 0.78rem;
    white-space: pre-wrap;
}

.filter-multi {
    position: relative;
}

.filter-multi summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.filter-multi summary::-webkit-details-marker {
    display: none;
}

.filter-multi summary::after {
    content: "v";
    margin-left: auto;
    color: var(--muted);
    font-size: 0.78rem;
}

.filter-multi[open] summary::after {
    content: "^";
}

.filter-multi-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 6px;
    max-height: 210px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    box-shadow: 0 16px 28px rgba(31, 41, 51, 0.16);
}

.filter-multi-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.filter-multi-menu label:hover {
    background: #eaf2ff;
}

.crm-grid,
.crm-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 16px;
    align-items: start;
}

.crm-record-grid {
    grid-template-columns: 320px minmax(0, 1fr);
}

.crm-grid .crm-list-panel:only-child {
    grid-column: 1 / -1;
}

.crm-list-panel,
.crm-side-panel,
.crm-activity-panel {
    padding: 16px;
}

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

.crm-panel-head h3,
.crm-account-card h4 {
    margin: 0;
}

.crm-table th,
.crm-table td {
    padding: 11px 9px;
}

.crm-table tbody tr:hover {
    background: rgba(234, 242, 255, 0.62);
}

.crm-directory-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
}

.crm-directory-scroll .crm-table {
    min-width: 860px;
    font-size: 0.88rem;
}

.crm-directory-scroll .crm-table th,
.crm-directory-scroll .crm-table td {
    padding: 8px 7px;
}

.crm-directory-scroll .crm-table th:last-child,
.crm-directory-scroll .crm-table td:last-child {
    min-width: 132px;
    white-space: nowrap;
}

.medical-planning-export-form {
    margin: 0;
}

.medical-planning-export-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: -4px 0 12px;
}

.medical-planning-check-col {
    width: 42px;
    min-width: 42px;
}

.medical-planning-check-col input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1d4ed8;
}

.crm-directory-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7faff;
}

.crm-account-link {
    color: var(--accent-strong);
    font-weight: 800;
    text-decoration: none;
}

.crm-account-link:hover {
    text-decoration: underline;
}

.crm-side-panel {
    position: sticky;
    top: 18px;
}

.crm-account-card,
.crm-record-identity {
    display: flex;
    gap: 12px;
    align-items: center;
}

.crm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #dbeafe;
    color: var(--accent-strong);
    font-weight: 900;
}

.crm-avatar-large {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    font-size: 1.35rem;
}

.crm-account-card p,
.crm-record-header p,
.crm-timeline-item p,
.crm-detail-list dd {
    margin: 4px 0 0;
    color: var(--muted);
}

.crm-detail-list {
    display: grid;
    gap: 12px;
    margin: 14px 0 18px;
}

.crm-detail-list div {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 198, 219, 0.58);
}

.crm-detail-list dd {
    margin-left: 0;
}

.crm-flag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-flag-row span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(95, 111, 132, 0.12);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.crm-flag-row span.active,
.crm-side-panel .crm-flag-row span {
    background: rgba(22, 101, 52, 0.14);
    color: var(--ok);
}

.crm-timeline {
    display: grid;
    gap: 12px;
}

.crm-timeline-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(184, 198, 219, 0.58);
    border-radius: 12px;
    background: white;
}

.crm-timeline-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--accent);
}

.crm-timeline-item span {
    color: var(--muted);
    font-size: 0.85rem;
}

.interaction-chart-grid {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(180px, 320px);
    justify-content: center;
    gap: 18px;
    align-items: center;
}

.interaction-pie {
    display: grid;
    place-items: center;
    width: 170px;
    height: 170px;
    justify-self: center;
    border-radius: 50%;
    border: 1px solid var(--line);
}

.interaction-pie span {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: white;
    color: var(--accent-strong);
    font-size: 1.5rem;
    font-weight: 900;
}

.interaction-legend {
    display: grid;
    gap: 10px;
    justify-self: center;
    width: min(100%, 320px);
}

.interaction-legend div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.interaction-legend i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.alert-stack,
.task-grid {
    display: grid;
    gap: 10px;
}

.alert-band,
.task-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}

.alert-urgent {
    background: #fde8e6;
    border-color: rgba(166, 44, 33, 0.22);
}

.alert-important {
    background: #fff9db;
    border-color: #f2df8a;
}

.alert-ok {
    background: #ecfdf3;
    border-color: #b7ebc9;
}

.task-item {
    background: white;
}

.task-item span,
.alert-band span {
    color: var(--muted);
}

.interaction-note {
    min-height: 280px;
    padding: 16px;
    border: 1px solid rgba(184, 198, 219, 0.58);
    border-radius: 12px;
    background: white;
    line-height: 1.6;
    white-space: normal;
}

.medical-map-canvas {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(184, 198, 219, 0.28) 1px, transparent 1px),
        linear-gradient(180deg, rgba(184, 198, 219, 0.28) 1px, transparent 1px),
        #f7faff;
    background-size: 64px 64px;
}

.medical-leaflet-map {
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 18px;
    background: #eef3fb;
}

.map-note {
    margin-bottom: 0;
    font-size: 0.88rem;
}

.map-bubble {
    position: absolute;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(33, 79, 136, 0.18);
    border-radius: 999px;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(31, 41, 51, 0.12);
    transform: translate(-50%, -50%);
}

.map-bubble strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.1;
    text-overflow: ellipsis;
}

.map-bubble span {
    color: var(--accent-strong);
    font-size: 1.25rem;
    font-weight: 900;
}

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

.crm-record-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px;
}

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

.crm-field-grid div {
    padding: 13px;
    border: 1px solid rgba(184, 198, 219, 0.58);
    border-radius: 12px;
    background: white;
}

.crm-field-grid .wide {
    grid-column: 1 / -1;
}

.crm-field-grid strong {
    display: block;
    margin-top: 6px;
    line-height: 1.35;
}

.medical-planning-detail-panel .crm-field-grid strong {
    color: var(--ink);
    font-weight: 400;
}

.medical-planning-completed-scroll {
    max-height: 470px;
    overflow-y: auto;
}

.user-admin-grid {
    grid-template-columns: 0.85fr 1.35fr;
}

.system-grid {
    margin-bottom: 24px;
}

.surgery-case-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.surgery-case-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.surgery-flow-grid {
    margin-top: 24px;
}

.surgery-entry-area {
    position: relative;
}

.surgery-entry-area.is-locked {
    opacity: 0.72;
}

.surgery-assignment-locked .form-card {
    background: #f8fafc;
}

.surgery-assignment-locked .btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.surgery-local-flash {
    margin: 14px 0 24px;
}

.surgery-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 42px;
}

.surgery-entry-message {
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #334155;
    font-weight: 800;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.surgery-entry-message:empty {
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.surgery-entry-message.tone-gray {
    background: #f4f6f9;
    border-color: #d6dde8;
    color: #3f4b5c;
}

.surgery-entry-message.tone-blue {
    background: #d9ecfb;
    border-color: #c5dff4;
    color: var(--navy);
}

.surgery-entry-message.is-error {
    background: #fff6f6;
    border-color: #efc7c4;
    color: var(--danger);
}

.surgery-action-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1000;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid #c5dff4;
    border-radius: 999px;
    background: #d9ecfb;
    color: var(--navy);
    box-shadow: 0 16px 34px rgba(29, 43, 61, 0.18);
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.surgery-action-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.surgery-action-toast.is-error {
    background: #fff6f6;
    border-color: #efc7c4;
    color: var(--danger);
}

.surgery-panel {
    min-width: 0;
}

.surgery-panel .section-head {
    align-items: flex-start;
}

.surgery-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    align-items: end;
    margin: 4px 0 14px;
}

.surgery-tabs {
    margin: 2px 0 16px;
}

.surgery-tab {
    min-height: 44px;
    padding: 12px 18px;
    border: 1px solid transparent;
    font-size: 0.94rem;
    justify-content: center;
}

.surgery-tab-orders {
    background: #eaf2ff;
    border-color: #c8dcff;
    color: #174a83;
}

.surgery-tab-patients {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.surgery-tab-orders.active,
.surgery-tab-orders:hover {
    background: #d7e8ff;
    color: #0f2745;
}

.surgery-tab-patients.active,
.surgery-tab-patients:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

.surgery-filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    grid-column: 1 / -1;
}

.surgery-filter-actions .btn {
    min-width: 104px;
    text-align: center;
}

.surgery-result-note {
    margin: 0 0 12px;
}

.surgery-table-scroll {
    max-height: 980px;
    overflow: auto;
    border: 1px solid rgba(184, 198, 219, 0.65);
    border-radius: 16px;
}

.surgery-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
}

.surgery-table-scroll th,
.surgery-table-scroll td {
    padding: 9px 8px;
    font-size: 0.82rem;
    text-align: center;
    vertical-align: middle;
}

.surgery-table-scroll .pill-qx-status {
    min-width: 98px;
    padding: 7px 10px;
    font-size: 0.82rem;
}

.surgery-table-scroll .btn-table {
    padding: 7px 10px;
    font-size: 0.78rem;
}

.surgery-table-scroll .table-actions {
    justify-content: center;
}

.btn-qx-view {
    background: #e8edf3;
    border-color: #cbd5e1;
    color: #3f4b5c;
}

.surgery-materials-panel {
    margin-bottom: 24px;
}

.surgery-materials-panel th:not(:first-child),
.surgery-materials-panel td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}

.surgery-materials-panel .table-actions {
    justify-content: center;
}

.surgery-staff-panel,
.surgery-final-account-panel {
    margin: 0 0 24px;
}

.surgery-staff-panel th:last-child,
.surgery-staff-panel td:last-child {
    text-align: center;
    vertical-align: middle;
}

.surgery-staff-panel .table-actions {
    justify-content: center;
}

.surgery-material-edit-panel {
    margin: 0 0 24px;
}

.surgery-followup-panel {
    margin-top: 24px;
}

.surgery-flow-actions {
    display: grid;
    gap: 14px;
}

.surgery-flow-actions form {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(220px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.62);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.surgery-flow-actions .btn {
    justify-content: center;
    width: 100%;
}

.surgery-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.surgery-checklist .btn {
    grid-column: 1 / -1;
    justify-self: start;
}

.surgery-review-actions {
    margin-top: 16px;
}

.qx-review-evidence {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.qx-review-warnings {
    display: grid;
    gap: 8px;
}

.qx-review-warnings div {
    padding: 10px 12px;
    border: 1px solid rgba(234, 179, 8, 0.28);
    border-radius: 10px;
    background: #fff8d7;
    color: var(--ink);
    font-size: 0.92rem;
}

.qx-review-warnings div.is-error {
    border-color: rgba(185, 28, 28, 0.24);
    background: #fee2e2;
}

.qx-evidence-form {
    grid-template-columns: 1fr;
    padding: 14px;
    border: 1px solid rgba(184, 198, 219, 0.64);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
}

.qx-file-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.qx-file-control .btn {
    flex: 0 0 auto;
}

.qx-patient-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 172px;
    height: 42px;
    padding: 0 16px;
    text-align: center;
    box-sizing: border-box;
    font-size: 0.88rem;
    white-space: nowrap;
}

.qx-file-name {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.qx-evidence-form .action-row {
    justify-content: flex-start;
}

.qx-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.qx-evidence-submit {
    text-align: center;
    font-size: inherit;
}

.qx-review-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.qx-review-check input {
    width: auto;
}

.qx-format-list {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: left;
}

.inventory-qx-order-list {
    display: grid;
    gap: 10px;
}

.inventory-qx-order {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.inventory-qx-order summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.inventory-qx-order summary::-webkit-details-marker {
    display: none;
}

.inventory-qx-order summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef7ff;
    color: var(--accent-strong);
    font-weight: 900;
}

.inventory-qx-order[open] summary::after {
    content: "-";
}

.inventory-qx-order summary > div:first-child strong {
    display: block;
    color: var(--text);
}

.inventory-qx-order summary > div:first-child span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
}

.inventory-qx-order-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.inventory-qx-count {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f4f6f9;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.inventory-qx-order-body {
    padding: 0 14px 14px;
    border-top: 1px solid rgba(184, 198, 219, 0.55);
}

.inventory-qx-items {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
    color: var(--ink);
    font-weight: 400;
    list-style: none;
}

.inventory-qx-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(184, 198, 219, 0.55);
    border-radius: 8px;
    background: #f8fbff;
}

.inventory-qx-items li strong {
    color: var(--accent-strong);
    white-space: nowrap;
}

.qx-cancel-confirm {
    margin-bottom: 24px;
}

.qx-cancel-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 18px 0 20px;
}

.qx-cancel-details > div {
    padding: 14px 16px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.qx-cancel-details span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.qx-cancel-details strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.35;
}

.option-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.option-row label,
.permission-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.permission-panel {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.45);
}

.permission-panel h3 {
    margin: 0 0 4px;
}

.permission-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(184, 198, 219, 0.55);
}

.permission-row .muted {
    display: block;
    font-size: 0.85rem;
}

.permission-stack {
    display: grid;
    gap: 8px;
}

.permission-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.permission-summary span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(43, 99, 168, 0.1);
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.health-list {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.health-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(184, 198, 219, 0.55);
}

ul.movement-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.movement-list li {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(184, 198, 219, 0.7);
}

.surgery-followup-note {
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.9);
    line-height: 1.55;
}

.movement-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.movement-qty-positive {
    color: var(--accent-strong);
    font-weight: 700;
}

.movement-qty-negative {
    color: var(--danger);
    font-weight: 700;
}

/* Central portal color system */
.brand-logo {
    border-radius: 10px;
    border-color: rgba(214, 221, 232, 0.86);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.brand p {
    color: rgba(238, 242, 245, 0.82);
}

.nav-links a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.nav-links .nav-back {
    color: var(--navy);
    background: #f4f6f9;
    border-color: #d6dde8;
}

.nav-links .nav-portal {
    color: #155f45;
    background: #dff3ea;
    border-color: #bee5d3;
}

.nav-links .nav-support,
.nav-links .nav-logout,
.btn-light-blue {
    color: var(--navy);
    background: #d9ecfb;
    border-color: #c5dff4;
}

.btn-primary {
    color: #ffffff;
    background: var(--navy);
}

.btn-secondary {
    color: var(--navy);
    background: #ffffff;
    border-color: var(--line);
}

.btn-danger {
    background: #df625d;
}

.btn-danger-soft {
    color: #8a2b2b;
    background: #fff6f6;
    border-color: #efc7c4;
}

.hero,
.card,
.table-card,
.form-card,
.crm-rail,
.crm-command,
.crm-filter-bar,
.crm-list-panel,
.crm-side-panel,
.crm-activity-panel,
.crm-record-header,
.ticket-card {
    background: var(--panel);
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.portal-hero-copy h2,
.portal-panel-card strong,
.module-card h3,
.finance-summary-card strong,
.finance-indicator-card strong,
.finance-category-card strong,
.stat-card strong,
.ticket-metric strong,
.crm-kpi strong {
    color: var(--navy);
}

.portal-kicker,
.portal-panel-label,
.module-eyebrow,
.crm-rail-title,
.crm-account-link,
.audit-json summary,
.movement-qty-positive {
    color: var(--blue);
}

.portal-status-row span {
    background: #ffffff;
    border-color: var(--line);
    color: var(--muted);
}

.portal-status-row span::before {
    background: var(--blue);
}

.portal-panel-card,
.finance-summary-card,
.finance-indicator-card,
.finance-category-card,
.stat-card,
.ticket-metric,
.crm-kpi,
.hr-detail-grid div,
.crm-field-grid div,
.permission-panel,
.permission-row,
.health-list li,
.movement-list li {
    background: #ffffff;
    border-color: var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(31, 42, 56, 0.08);
}

.finance-summary-card::before,
.stat-card::before,
.ticket-metric::before,
.module-card::before,
.crm-kpi::before {
    background: var(--blue);
}

.stat-grid .stat-card:nth-child(1),
.finance-summary-grid .finance-summary-card:nth-child(1),
.hr-stat-grid .stat-card:nth-child(1),
.ticket-metric-pending,
.crm-kpi-blue,
.module-tone-blue {
    background: #f3fbfe;
    border-color: #bfe5ee;
}

.stat-grid .stat-card:nth-child(1)::before,
.finance-summary-grid .finance-summary-card:nth-child(1)::before,
.hr-stat-grid .stat-card:nth-child(1)::before,
.ticket-metric-pending::before,
.crm-kpi-blue::before,
.module-tone-blue::before {
    background: var(--blue);
}

.stat-grid .stat-card:nth-child(2),
.finance-summary-grid .finance-summary-card:nth-child(2),
.hr-stat-grid .stat-card:nth-child(2),
.ticket-metric-open,
.crm-kpi-gold,
.module-tone-gold {
    background: #fffaf0;
    border-color: #f3d58d;
}

.stat-grid .stat-card:nth-child(2)::before,
.finance-summary-grid .finance-summary-card:nth-child(2)::before,
.hr-stat-grid .stat-card:nth-child(2)::before,
.ticket-metric-open::before,
.crm-kpi-gold::before,
.module-tone-gold::before {
    background: #f0bd3e;
}

.stat-grid .stat-card:nth-child(3),
.finance-summary-grid .finance-summary-card:nth-child(3),
.hr-stat-grid .stat-card:nth-child(3),
.ticket-metric-done,
.crm-kpi-green,
.module-tone-green {
    background: #f0faf5;
    border-color: #b9e7c8;
}

.stat-grid .stat-card:nth-child(3)::before,
.finance-summary-grid .finance-summary-card:nth-child(3)::before,
.hr-stat-grid .stat-card:nth-child(3)::before,
.ticket-metric-done::before,
.crm-kpi-green::before,
.module-tone-green::before {
    background: #4fa47a;
}

.stat-grid .stat-card:nth-child(4),
.finance-summary-grid .finance-summary-card:nth-child(4),
.hr-stat-grid .stat-card:nth-child(4),
.crm-kpi-rose,
.module-tone-rose {
    background: #fff6f6;
    border-color: #efc7c4;
}

.stat-grid .stat-card:nth-child(4)::before,
.finance-summary-grid .finance-summary-card:nth-child(4)::before,
.hr-stat-grid .stat-card:nth-child(4)::before,
.crm-kpi-rose::before,
.module-tone-rose::before {
    background: #df625d;
}

.stat-grid .qx-stat-new {
    background: linear-gradient(135deg, #f4fff8, #dff7ea);
    border-color: rgba(15, 107, 69, 0.24);
}

.stat-grid .qx-stat-new::before {
    background: #2fbf71;
}

.stat-grid .qx-stat-scheduled {
    background: linear-gradient(135deg, #fffdf0, #fff4bf);
    border-color: rgba(122, 90, 0, 0.22);
}

.stat-grid .qx-stat-scheduled::before {
    background: #f2c94c;
}

.stat-grid .qx-stat-review {
    background: linear-gradient(135deg, #fff8f0, #ffead5);
    border-color: rgba(154, 75, 0, 0.22);
}

.stat-grid .qx-stat-review::before {
    background: #f59e0b;
}

.stat-grid .qx-stat-completed {
    background: linear-gradient(135deg, #f5f9ff, #dbeafe);
    border-color: rgba(29, 79, 145, 0.24);
}

.stat-grid .qx-stat-completed::before {
    background: #3b82f6;
}

.module-tone-lilac {
    background: #f4f7fb;
    border-color: #d6dde8;
}

.module-tone-lilac::before {
    background: #8b95a5;
}

.module-card {
    border-radius: 10px;
}

.module-card-active:hover {
    border-color: rgba(58, 159, 191, 0.38);
    box-shadow: 0 16px 30px rgba(31, 42, 56, 0.14);
}

input,
select,
textarea,
input[type="file"],
.filter-multi summary {
    background: #fbfdff;
    border-color: var(--line);
    border-radius: 8px;
}

input[type="file"]::file-selector-button {
    color: var(--navy);
    background: #d9ecfb;
    border-color: #c5dff4;
}

th {
    color: var(--muted);
    background: #f8fafc;
}

td,
th {
    border-bottom-color: var(--line);
}

.pill-info,
.permission-summary span {
    color: var(--navy);
    background: #d9ecfb;
}

.pill-ok {
    color: #155f45;
    background: #dff3ea;
}

.pill-low {
    color: #795209;
    background: #fff1c7;
}

.pill-muted {
    color: var(--muted);
    background: #eef1f5;
}

.flash-success {
    color: var(--navy);
    background: #d9ecfb;
}

.flash-error,
.alert-urgent {
    color: #8a2b2b;
    background: #fff6f6;
}

.crm-rail-item.active,
.crm-rail-item:hover,
.crm-table tbody tr:hover,
.filter-multi-menu label:hover {
    color: var(--navy);
    background: #eaf6fb;
}

.crm-tab.active,
.crm-avatar,
.hr-avatar {
    color: var(--navy);
    background: #d9ecfb;
    border-color: #c5dff4;
}

.medical-map-canvas,
.medical-leaflet-map {
    background-color: #f8fafc;
    border-color: var(--line);
    border-radius: 10px;
}

.stat-grid .stat-card.qx-stat-new {
    background: #dff7ea;
    border-color: #9fdabf;
}

.stat-grid .stat-card.qx-stat-new::before {
    background: #2fbf71;
}

.stat-grid .stat-card.qx-stat-scheduled {
    background: #fff4bf;
    border-color: #e9c84f;
}

.stat-grid .stat-card.qx-stat-scheduled::before {
    background: #f2c94c;
}

.stat-grid .stat-card.qx-stat-review {
    background: #ffead5;
    border-color: #f0b06a;
}

.stat-grid .stat-card.qx-stat-review::before {
    background: #f59e0b;
}

.stat-grid .stat-card.qx-stat-completed {
    background: #dbeafe;
    border-color: #9ec5fe;
}

.stat-grid .stat-card.qx-stat-completed::before {
    background: #3b82f6;
}

.stat-grid .stat-card.qx-stat-new strong,
.stat-grid .stat-card.qx-stat-scheduled strong,
.stat-grid .stat-card.qx-stat-review strong,
.stat-grid .stat-card.qx-stat-completed strong {
    color: var(--navy);
}

.surgery-table-scroll .btn.btn-qx-view {
    background: #e8edf3;
    border-color: #cbd5e1;
    color: #3f4b5c;
}

.inventory-workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 232px minmax(0, 1fr);
    overflow: hidden;
}

.inventory-rail {
    gap: 7px;
    top: 0;
    align-self: start;
    margin-top: 0;
}

.inventory-rail-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.inventory-main,
.inventory-main > *,
.inventory-report-grid,
.inventory-report-grid > *,
.inventory-dashboard-grid,
.inventory-dashboard-grid > *,
.inventory-workspace .crm-filter-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.inventory-command {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.inventory-kpi-row {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    width: 100%;
    min-width: 0;
}

.inventory-kpi-row-compact {
    grid-template-columns: repeat(4, minmax(96px, 1fr));
}

.inventory-kit-grid,
.inventory-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.inventory-kit-summary-kpis {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
}

.inventory-kit-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.inventory-kit-summary-card {
    min-width: 0;
}

.inventory-kit-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.inventory-kit-summary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inventory-kit-summary-numbers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.inventory-kit-summary-numbers > div {
    min-width: 0;
    padding: 14px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
    background: #f8fbff;
}

.inventory-kit-summary-numbers span,
.inventory-kit-summary-numbers strong {
    display: block;
}

.inventory-kit-summary-numbers span {
    min-height: 2.4em;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.inventory-kit-summary-numbers strong {
    margin-top: 6px;
    color: var(--navy);
    font-size: 1.5rem;
}

.inventory-kit-card,
.report-chart-card {
    --chart-start: #78b9dc;
    --chart-end: #286b9e;
    --chart-accent: #286b9e;
    padding: 18px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-top: 4px solid var(--chart-accent);
    border-radius: 16px;
    background: rgba(247, 250, 255, 0.94);
    box-shadow: 0 14px 30px rgba(31, 41, 51, 0.1);
}

.inventory-chart-products {
    --chart-start: #73b9e6;
    --chart-end: #255f91;
    --chart-accent: #2e75b6;
}

.inventory-chart-category {
    --chart-start: #79c9a0;
    --chart-end: #287a57;
    --chart-accent: #32906a;
}

.inventory-chart-month {
    --chart-start: #efc86a;
    --chart-end: #b67a18;
    --chart-accent: #c58a22;
}

.inventory-chart-prosthesis {
    --chart-start: #6bc6c8;
    --chart-end: #247f87;
    --chart-accent: #329da2;
}

.inventory-chart-rotation {
    --chart-start: #8198bd;
    --chart-end: #304b76;
    --chart-accent: #48658f;
}

.report-chart-card .section-head h2 {
    color: var(--chart-accent);
}

.report-chart-card-wide {
    grid-column: span 2;
}

.inventory-kit-card-head,
.inventory-kit-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inventory-kit-card h3 {
    margin: 4px 0 6px;
    color: var(--navy);
    font-size: 1.1rem;
}

.inventory-kit-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.inventory-eyebrow {
    color: var(--accent-strong);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inventory-kit-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.inventory-kit-detail-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-kit-table th,
.inventory-kit-table td {
    padding: 10px 8px;
    font-size: 0.84rem;
}

.inventory-kit-table th {
    font-size: 0.72rem;
}

.inventory-kit-numeric,
.inventory-kit-status {
    text-align: center;
    vertical-align: middle;
}

.inventory-kit-status .pill {
    justify-content: center;
}

.inventory-kit-metrics > div {
    padding: 12px;
    border: 1px solid rgba(184, 198, 219, 0.7);
    border-radius: 12px;
    background: #fff;
}

.inventory-kit-metrics span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inventory-kit-metrics strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 1.35rem;
}

.inventory-kit-items {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.inventory-kit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(184, 198, 219, 0.48);
}

.inventory-kit-item strong,
.inventory-kit-item span {
    display: block;
}

.inventory-kit-item strong {
    color: var(--ink);
    font-size: 0.92rem;
}

.inventory-kit-item div span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.84rem;
}

.inventory-dashboard-grid {
    align-items: start;
}

.inventory-consumption-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 0;
}

.inventory-consumption-heading h2 {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 1.25rem;
}

.inventory-consumption-heading p {
    margin: 0;
    color: var(--muted);
}

.inventory-dashboard-reports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 2px;
}

.inventory-side-stack {
    display: grid;
    gap: 18px;
}

.inventory-table-scroll {
    max-height: 520px;
    overflow: auto;
}

.inventory-table-scroll-large {
    max-height: 680px;
}

.inventory-movements-scroll {
    max-height: 2450px;
}

.nowrap {
    white-space: nowrap;
}

.inventory-filter-form,
.inventory-report-filter-form,
.inventory-template-add-form {
    display: grid;
    gap: 10px;
    align-items: end;
}

.inventory-filter-form {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
}

.inventory-movements-filter-form {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.inventory-movements-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.inventory-report-filter-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-report-filter-form .inventory-filter-actions {
    grid-column: 1 / -1;
    justify-self: end;
}

.inventory-report-generator {
    display: grid;
    gap: 20px;
}

.inventory-report-downloads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-report-downloads > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "format title button"
        "format text button";
    gap: 4px 14px;
    align-items: center;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.inventory-report-format {
    grid-area: format;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    color: var(--navy);
    background: #d9ecfb;
    font-size: 0.78rem;
    font-weight: 900;
}

.inventory-report-downloads h3 {
    grid-area: title;
    margin: 0;
    color: var(--navy);
    font-size: 1rem;
}

.inventory-report-downloads p {
    grid-area: text;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.inventory-report-downloads .btn {
    grid-area: button;
    min-width: 140px;
    justify-content: center;
}

.inventory-report-clear {
    display: flex;
    justify-content: flex-end;
}

.inventory-template-add-form {
    grid-template-columns: minmax(180px, 0.7fr) minmax(320px, 1.4fr) minmax(120px, 0.35fr) auto;
}

.inventory-template-create-form {
    display: grid;
    gap: 16px;
}

.inventory-template-create-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.6fr) minmax(260px, 1.2fr);
    gap: 12px;
    align-items: end;
}

.inventory-template-create-grid input,
.inventory-template-qty-input {
    border-radius: 10px;
    background: #fff;
}

.inventory-template-product-picker {
    max-height: 560px;
}

.inventory-template-product-search {
    display: grid;
    gap: 6px;
    max-width: 520px;
}

.inventory-template-product-search input {
    border-radius: 10px;
    background: #fff;
}

.inventory-template-product-picker th,
.inventory-template-product-picker td {
    vertical-align: middle;
}

.inventory-template-qty-input {
    width: 76px;
    text-align: center;
}

.inventory-template-create-actions {
    justify-content: flex-end;
}

.inventory-filter-form input,
.inventory-filter-form select,
.inventory-report-filter-form input,
.inventory-report-filter-form select,
.inventory-template-add-form input,
.inventory-template-add-form select {
    border-radius: 10px;
    background: #fff;
}

.inventory-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.inventory-filter-actions .btn {
    min-width: 112px;
    justify-content: center;
}

.inventory-inline-edit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-inline-edit input {
    width: 86px;
}

.inventory-unit-filter-form {
    grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 0.7fr) minmax(240px, 1fr) auto;
}

.qx-unit-code-list,
.qx-unit-review-list {
    display: grid;
    gap: 5px;
    margin-top: 7px;
}

.qx-unit-code-list span {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 6px;
    color: #31577c;
    background: #e8f2fb;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.qx-unit-review-list .qx-review-check {
    justify-content: flex-start;
    white-space: nowrap;
}

.inventory-bar-chart {
    display: grid;
    gap: 11px;
}

.inventory-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(64px, auto);
    gap: 10px;
    align-items: center;
}

.inventory-bar-label {
    min-width: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.inventory-bar-track {
    min-width: 0;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5ebf1;
    box-shadow: inset 0 1px 2px rgba(29, 43, 61, 0.1);
}

.inventory-bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--chart-start), var(--chart-end));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--chart-accent) 35%, transparent);
}

.inventory-bar-value {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.inventory-pie-layout {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    justify-content: center;
    min-height: 210px;
}

.inventory-pie-chart {
    position: relative;
    width: 180px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(29, 43, 61, 0.08);
}

.inventory-pie-chart::after {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: #f7faff;
    box-shadow: 0 0 0 1px rgba(184, 198, 219, 0.65);
}

.inventory-pie-chart > div {
    position: absolute;
    inset: 26%;
    z-index: 1;
    display: grid;
    place-content: center;
    text-align: center;
}

.inventory-pie-chart strong,
.inventory-pie-chart span {
    display: block;
}

.inventory-pie-chart strong {
    color: var(--navy);
    font-size: 1.45rem;
}

.inventory-pie-chart span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.75rem;
}

.inventory-pie-legend {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.inventory-pie-legend > div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.inventory-pie-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.inventory-pie-legend span {
    min-width: 0;
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.inventory-pie-legend strong {
    color: var(--navy);
}

.inventory-pie-legend small {
    grid-column: 2 / 4;
    color: var(--muted);
}

.hr-availability-filters {
    padding: 16px;
}

.hr-availability-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.hr-availability-filter-form > div:first-child {
    grid-column: 1 / 3;
}

.hr-availability-day-filter {
    grid-column: 3 / 5;
}

.hr-availability-filter-actions {
    grid-column: 3 / 5;
}

.hr-availability-filter-form > div:nth-child(3),
.hr-availability-filter-form > div:nth-child(4) {
    margin-top: -28px;
}

.hr-availability-filter-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hr-availability-filter-form select,
.hr-availability-filter-form input[type="time"] {
    min-height: 38px;
}

.hr-availability-day-filter {
    display: grid;
    gap: 6px;
}

.hr-availability-day-filter > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hr-availability-day-filter > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.hr-availability-day-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #dbe7f4;
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: none;
}

.hr-availability-day-filter input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.hr-availability-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.hr-availability-filter-actions .btn {
    justify-content: center;
    min-width: 96px;
}

.hr-week-calendar-card {
    overflow: hidden;
}

.hr-week-calendar-wrap {
    overflow-x: auto;
}

.hr-week-calendar {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.hr-week-calendar th,
.hr-week-calendar td {
    padding: 10px;
    border-bottom: 1px solid rgba(184, 198, 219, 0.72);
    vertical-align: top;
}

.hr-week-calendar th {
    background: #f2f6fb;
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.hr-week-calendar-time {
    width: 112px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.hr-calendar-cell {
    min-height: 72px;
}

.hr-coverage-stack {
    display: grid;
    gap: 6px;
}

.hr-coverage-chip {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid rgba(184, 198, 219, 0.72);
    border-left: 4px solid var(--hr-person-color);
    border-radius: 8px;
    background: var(--hr-person-bg);
    color: var(--navy);
    font-size: 0.76rem;
    line-height: 1.2;
    text-decoration: none;
}

.hr-coverage-chip strong {
    overflow-wrap: anywhere;
}

.hr-coverage-chip small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.hr-no-coverage {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: #8a98aa;
    font-size: 0.76rem;
    font-weight: 800;
}

.hr-availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(184, 198, 219, 0.72);
}

.hr-availability-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #dbe7f4;
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.hr-availability-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--hr-person-color);
}

@media (max-width: 860px) {
    .inventory-report-downloads {
        grid-template-columns: 1fr;
    }

    .inventory-report-downloads > div {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "format title"
            "format text"
            "button button";
    }

    .inventory-kit-summary-grid,
    .inventory-kit-summary-kpis,
    .inventory-kit-summary-numbers {
        grid-template-columns: 1fr;
    }

    .products-filter-form {
        grid-template-columns: 1fr;
    }

    .products-action-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-selection-actions {
        width: 100%;
    }

    .hero,
    .finance-workspace,
    .layout-grid,
    .form-grid,
    .finance-summary-grid,
    .finance-indicator-grid,
    .finance-indicator-form,
    .accounting-balance-grid,
    .accounting-filter-form,
    .accounting-line-head,
    .accounting-line-row,
    .surgery-case-grid-main,
    .surgery-filter-form,
    .surgery-flow-actions form,
    .surgery-checklist,
    .hr-stat-grid,
    .hr-workspace,
    .ticket-metrics,
    .support-filter-form,
    .ticket-detail-grid,
    .ticket-update-form,
    .hr-employee-hero,
    .hr-employee-metrics,
    .hr-dashboard-grid,
    .hr-mini-metrics,
    .hr-detail-grid,
    .crm-workspace,
    .crm-grid,
    .crm-record-grid,
    .crm-filter-form,
    .interaction-filter-form,
    .interaction-chart-grid,
    .inventory-filter-form,
    .inventory-report-filter-form,
    .inventory-template-add-form,
    .inventory-unit-filter-form,
    .hr-availability-filter-form,
    .inventory-kit-metrics,
    .inventory-kit-detail-metrics,
    .inventory-bar-row,
    .map-summary-grid {
        grid-template-columns: 1fr;
    }

    .report-chart-card-wide {
        grid-column: span 1;
    }

    .inventory-pie-layout {
        grid-template-columns: 1fr;
    }

    .crm-command,
    .crm-record-header,
    .crm-record-identity,
    .inventory-consumption-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .crm-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .hr-rail,
    .crm-rail,
    .crm-side-panel {
        position: static;
    }

    .hr-availability-filter-form > div:first-child,
    .hr-availability-day-filter,
    .hr-availability-filter-actions {
        grid-column: 1;
    }

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

    .brand-lockup {
        align-items: flex-start;
    }

    .topbar,
    .section-head,
    .toolbar,
    .movement-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .shell {
        width: min(100% - 20px, 1180px);
    }
}