:root {
    --page-bg: #0f172a;
    --sidebar-bg: #152238;
    --sidebar-panel: #1d2d48;
    --sidebar-panel-hover: #263a5c;
    --sidebar-border: #304766;
    --content-bg: #111c2f;
    --content-surface: #17263f;
    --text-main: #e6edf7;
    --text-muted: #b5c4d8;
    --accent: #7fb3d5;
    --accent-strong: #a9d6e5;
    --accent-text: #07111f;
}

body.theme-light {
    --page-bg: #f3efe6;
    --sidebar-bg: #fbf8f1;
    --sidebar-panel: #f1eadf;
    --sidebar-panel-hover: #e7dfd2;
    --sidebar-border: #d6ccbc;
    --content-bg: #f8f4ec;
    --content-surface: #fffaf2;
    --text-main: #102033;
    --text-muted: #687386;
    --accent: #2563eb;
    --accent-strong: #1646a1;
    --accent-text: #ffffff;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
}

.layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 100vh;
    background: linear-gradient(135deg, var(--page-bg), #16253d);
    transition: grid-template-columns 0.22s ease;
}

body.sidebar-collapsed .layout {
    grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
    width: max-content;
    min-width: 210px;
    max-width: 340px;
    background: var(--sidebar-bg);
    color: var(--text-main);
    padding: 34px 28px;
    box-sizing: border-box;
    box-shadow: 8px 0 28px rgba(5, 12, 24, 0.24);
    overflow: hidden;
    transition: opacity 0.18s ease, padding 0.22s ease, min-width 0.22s ease;
}

body.sidebar-collapsed .sidebar {
    min-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 42px;
    padding: 0 6px 22px;
    border-bottom: 1px solid var(--sidebar-border);
}

.site-logo h2 {
    margin: 0;
    font-size: 30px;
    color: var(--accent-strong);
}

.site-logo-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 12px;
    background: rgba(127, 179, 213, 0.12);
    stroke: var(--accent-strong);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.side-menu {
    display: flex;
    width: max-content;
    min-width: 170px;
    flex-direction: column;
    gap: 24px;
}

.menu-group {
    min-width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 10px;
    background: var(--sidebar-panel);
    overflow: hidden;
}

.menu-group summary {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    list-style: none;
    user-select: none;
    color: var(--text-main);
}

.menu-group summary:hover {
    background: var(--sidebar-panel-hover);
}

.menu-link {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    color: var(--text-muted);
    font-size: 17px;
    text-decoration: none;
    border-top: 1px solid var(--sidebar-border);
}

.menu-link:hover,
.menu-link.active {
    background: var(--accent);
    color: var(--accent-text);
}

.content {
    flex: 1;
    padding: 30px;
    box-sizing: border-box;
    background: var(--content-bg);
    color: var(--text-main);
}

.content h1 {
    color: var(--accent-strong);
}

.content p {
    color: var(--text-muted);
}

body.theme-light .layout {
    background: linear-gradient(135deg, #eef3f8, #dce8f5);
}

body.theme-light .summary-card,
body.theme-light .performance-card,
body.theme-light .department-summary-card,
body.theme-light .delivery-summary-card,
body.theme-light .transaction-filter-panel,
body.theme-light .transactions-list,
body.theme-light .management-filters,
body.theme-light .management-listing,
body.theme-light .delivery-listing {
    box-shadow: 0 18px 42px rgba(59, 89, 128, 0.14);
}

@media (max-width: 700px) {
    .layout {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-width: none;
    }

    body.sidebar-collapsed .sidebar {
        margin-left: 0;
        max-height: 0;
        padding-bottom: 0;
        padding-top: 0;
    }

    .side-menu {
        width: 100%;
    }
}

.dashboard {
    width: 100%;
    margin: 0;
}

.dashboard h1 {
    margin: 0 0 28px;
    text-align: left;
}

.summary-cards {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    margin-bottom: 34px;
    overflow-x: auto;
}

.summary-card {
    flex: 1 1 240px;
    min-width: 220px;
    padding: 28px;
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--content-surface), #1d3354);
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.28);
    box-sizing: border-box;
    text-align: left;
}

.summary-label {
    display: block;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
}

.summary-amount {
    display: block;
    color: var(--accent-strong);
    font-size: 34px;
    line-height: 1;
}


.recent-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
}

.recent-list li {
    padding: 8px 0;
}

@media (max-width: 700px) {
    .summary-cards {
        flex-direction: column;
        align-items: stretch;
    }

    .summary-card {
        width: 100%;
    }
}

.menu-link-direct {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border: 1px solid var(--sidebar-border);
    border-radius: 10px;
    background: var(--sidebar-panel);
    color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
}

.dashboard-hero {
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    margin-bottom: 28px;
    border: 1px solid var(--sidebar-border);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(127, 179, 213, 0.22), transparent 34%),
        linear-gradient(145deg, #172943, #101b2e);
    box-shadow: 0 24px 60px rgba(5, 12, 24, 0.3);
}

.hero-heading {
    margin-bottom: 26px;
    text-align: left;
}

.hero-heading h1 {
    margin: 0;
}

.dashboard-hero .summary-cards {
    margin-bottom: 0;
}

.dashboard-hero .summary-cards + .summary-cards {
    margin-top: 22px;
}

.dashboard-queue-cards .summary-card {
    padding: 22px;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.content-boxes {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.content-box {
    text-align: left;
    min-height: 180px;
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: var(--content-surface);
    box-sizing: border-box;
}

.content-box h2 {
    margin: 0 0 16px;
    color: var(--accent-strong);
    font-size: 22px;
}

.content-box p {
    margin: 0;
}

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

.dashboard-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-surface);
    box-shadow: 0 16px 36px rgba(5, 12, 24, 0.18);
}

.dashboard-panel-wide {
    grid-column: 1 / -1;
}

.dashboard-activity-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 18px;
}

.dashboard-range-tabs,
.dashboard-range-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
}

.dashboard-range-tabs button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: var(--content-surface);
    color: var(--text-muted);
    font-weight: 800;
    cursor: pointer;
}

.dashboard-range-tabs button.active,
.dashboard-range-tabs button:hover {
    border-color: var(--accent);
    color: var(--text-main);
    background: rgba(127, 179, 213, 0.16);
}

.dashboard-range-form label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-range-form input {
    min-height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: var(--content-surface);
    color: var(--text-main);
    padding: 0 10px;
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-panel-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 22px;
}

.dashboard-panel-header > span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.summary-card small {
    display: block;
    margin-top: 14px;
    color: var(--text-muted);
    font-weight: 700;
}

.dashboard-activity-list,
.dashboard-risk-list {
    display: grid;
    gap: 10px;
}

.dashboard-site-activity-list,
.dashboard-department-activity-list {
    display: grid;
    gap: 8px;
}

.dashboard-site-activity-row,
.dashboard-department-activity-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.35fr) repeat(7, minmax(84px, 1fr));
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(169, 214, 229, 0.12);
}

.dashboard-department-activity-row {
    grid-template-columns: minmax(150px, 1.3fr) repeat(9, minmax(78px, 1fr));
}

.dashboard-site-activity-row:last-child,
.dashboard-department-activity-row:last-child {
    border-bottom: 0;
}

.dashboard-site-activity-row span,
.dashboard-department-activity-row span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-site-activity-row strong,
.dashboard-department-activity-row strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.dashboard-site-activity-name strong,
.dashboard-department-activity-name strong {
    color: var(--accent-strong);
    font-size: 15px;
}

.dashboard-activity-row,
.dashboard-risk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(169, 214, 229, 0.12);
}

.dashboard-activity-row:last-child,
.dashboard-risk-row:last-child {
    border-bottom: 0;
}

.dashboard-activity-row div:last-child {
    text-align: right;
}

.dashboard-activity-row strong,
.dashboard-risk-row strong {
    display: block;
    color: var(--text-main);
    font-size: 15px;
}

.dashboard-activity-row span,
.dashboard-risk-row span,
.dashboard-empty {
    color: var(--text-muted);
    font-size: 13px;
}

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

.dashboard-mini-stats div {
    padding: 16px;
    border: 1px solid rgba(169, 214, 229, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dashboard-mini-stats span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-mini-stats strong {
    color: var(--accent-strong);
    font-size: 24px;
}

.dashboard-balance-list {
    display: grid;
    gap: 12px;
    margin: 0;
}

.dashboard-balance-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(169, 214, 229, 0.12);
}

.dashboard-balance-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-balance-list dt {
    color: var(--text-muted);
    font-weight: 700;
}

.dashboard-balance-list dd {
    margin: 0;
    color: var(--text-main);
    font-weight: 800;
    text-align: right;
}

.dashboard-risk-row {
    grid-template-columns: minmax(0, 1fr) minmax(90px, 130px) 58px;
}

.dashboard-risk-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-risk-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3ddc97, #f5cb5c, #ff6363);
}

@media (max-width: 850px) {
    .content-boxes {
        grid-template-columns: 1fr;
    }

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

    .dashboard-activity-controls {
        align-items: stretch;
    }

    .dashboard-panel-wide {
        grid-column: auto;
    }

    .dashboard-risk-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-site-activity-row,
    .dashboard-department-activity-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-site-activity-name,
    .dashboard-department-activity-name {
        grid-column: 1 / -1;
    }

    .dashboard-activity-row,
    .dashboard-activity-row div:last-child {
        grid-template-columns: 1fr;
        text-align: left;
    }
}





.secondary-hero {
    background:
        radial-gradient(circle at left top, rgba(169, 214, 229, 0.16), transparent 32%),
        linear-gradient(145deg, #122037, #182d49);
}

.hero-heading h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 28px;
}





.summary-card-investments {
    box-shadow:
        0 18px 40px rgba(5, 12, 24, 0.28),
        12px 12px 0 rgba(61, 220, 151, 0.42);
}

.summary-card-withdrawals {
    box-shadow:
        0 18px 40px rgba(5, 12, 24, 0.28),
        12px 12px 0 rgba(255, 99, 99, 0.42);
}

.summary-card-net {
    box-shadow:
        0 18px 40px rgba(5, 12, 24, 0.28),
        12px 12px 0 rgba(93, 173, 226, 0.42);
}

.summary-card-pending {
    box-shadow:
        0 18px 40px rgba(5, 12, 24, 0.28),
        12px 12px 0 rgba(245, 203, 92, 0.42);
}

.summary-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.summary-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    stroke: var(--accent-strong);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.summary-card-investments .summary-icon {
    stroke: #3ddc97;
}

.summary-card-withdrawals .summary-icon {
    stroke: #ff6363;
}

.summary-card-net .summary-icon {
    stroke: #5dade2;
}

.summary-card-pending .summary-icon {
    stroke: #f5cb5c;
}

.summary-card-approved .summary-icon {
    stroke: #3ddc97;
}

.summary-card-rejected .summary-icon {
    stroke: #ff6363;
}

.menu-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.9;
}


.menu-group summary::-webkit-details-marker {
    display: none;
}


.transaction-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
}

.filter-button,
.custom-date-filter button {
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 10px 16px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-button:hover,
.filter-button.active,
.custom-date-filter button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.custom-date-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
    gap: 16px;
    width: 100%;
    margin: 0 0 24px;
    padding: 18px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
}

.custom-date-filter[hidden] {
    display: none;
}

.custom-date-filter label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.custom-date-filter input {
    min-height: 42px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    padding: 0 12px;
    font: inherit;
}

.custom-date-filter button {
    align-self: end;
    border-radius: 12px;
    min-height: 42px;
}

@media (max-width: 850px) {
    .custom-date-filter {
        grid-template-columns: 1fr;
    }
}

.investment-details,
.withdrawal-details {
    min-height: auto;
    margin-bottom: 24px;
}

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

.detail-card {
    text-align: center;
    align-items: center;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(29, 45, 72, 0.92), rgba(17, 28, 47, 0.94));
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.detail-card-title {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-card-count {
    color: var(--text-main);
    font-size: 30px;
    line-height: 1;
}

.detail-card-amount {
    color: var(--accent-strong);
    font-size: 18px;
    font-weight: 800;
}

.detail-card-pending {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24), 8px 8px 0 rgba(245, 203, 92, 0.34);
}

.detail-card-processing {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24), 8px 8px 0 rgba(127, 179, 213, 0.34);
}

.detail-card-approved {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24), 8px 8px 0 rgba(61, 220, 151, 0.34);
}

.detail-card-failed,
.detail-card-expired {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24), 8px 8px 0 rgba(255, 99, 99, 0.34);
}

.detail-card-cancelled {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24), 8px 8px 0 rgba(181, 196, 216, 0.26);
}

@media (max-width: 1050px) {
    .detail-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .detail-card-grid {
        grid-template-columns: 1fr;
    }
}




.system-status {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(127, 179, 213, 0.16), transparent 28%),
        var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.system-status-header {
    margin-bottom: 20px;
}

.system-status-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 24px;
}

.system-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.system-status-card {
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(29, 45, 72, 0.92), rgba(17, 28, 47, 0.94));
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.22);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.system-status-label {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.system-status-value {
    color: var(--accent-strong);
    font-size: 28px;
    line-height: 1;
}

.system-status-card.is-online .system-status-value {
    color: #3ddc97;
}

.system-status-card.is-offline .system-status-value {
    color: #ff6363;
}

.system-status-card.is-online {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.22), 8px 8px 0 rgba(61, 220, 151, 0.34);
}

.system-status-card.is-offline {
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.22), 8px 8px 0 rgba(255, 99, 99, 0.34);
}

@media (max-width: 850px) {
    .system-status-grid {
        grid-template-columns: 1fr;
    }
}

.transactions-page {
    width: 100%;
}

.transactions-header {
    margin-bottom: 24px;
}

.transactions-header h1 {
    margin: 0 0 8px;
    color: var(--accent-strong);
    font-size: 34px;
}

.transactions-header p {
    margin: 0;
    color: var(--text-muted);
}

.transaction-filter-panel,
.transactions-list {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.transaction-filter-panel {
    margin-bottom: 24px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.filter-field {
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-field-wide,
.date-range-field {
    grid-column: span 2;
}

.filter-field span,
.filter-field legend {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
}

.filter-field input,
.filter-field select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    padding: 0 12px;
    font: inherit;
    box-sizing: border-box;
}

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

.range-field legend,
.date-range-field legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}

.quick-date-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.quick-date-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 700;
}

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

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.primary-action,
.secondary-action {
    min-height: 44px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0 18px;
}

.primary-action {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.secondary-action {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.transactions-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.transactions-list-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 24px;
}

.transactions-list-header span {
    color: var(--text-muted);
    font-weight: 800;
}

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

.transactions-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.transactions-table th {
    color: var(--text-muted);
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 14px 6px;
}

.sortable-table th.sortable-column {
    cursor: pointer;
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.sortable-table th.sortable-column::after {
    color: rgba(181, 196, 216, 0.56);
    content: "";
    display: inline-block;
    font-size: 11px;
    margin-left: 7px;
}

.sortable-table th.sortable-column[data-sort-direction="asc"]::after {
    color: var(--accent-strong);
    content: "^";
}

.sortable-table th.sortable-column[data-sort-direction="desc"]::after {
    color: var(--accent-strong);
    content: "v";
}

.transactions-table td {
    background: rgba(17, 28, 47, 0.78);
    border-bottom: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
    color: var(--text-main);
    padding: 16px 14px;
    vertical-align: middle;
}

.transactions-table td:first-child {
    border-left: 1px solid var(--sidebar-border);
    border-radius: 14px 0 0 14px;
}

.transactions-table td:last-child {
    border-right: 1px solid var(--sidebar-border);
    border-radius: 0 14px 14px 0;
}

.transactions-table td span {
    color: var(--text-muted);
    font-size: 13px;
}

.investments-page .transactions-table tbody tr.transaction-row-pending td,
.withdrawals-page .transactions-table tbody tr.transaction-row-pending td {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.42);
}

.investments-page .transactions-table tbody tr.transaction-row-approved td,
.withdrawals-page .transactions-table tbody tr.transaction-row-approved td {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.42);
}

.withdrawals-page .transactions-table tbody tr.transaction-row-assigned td {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.42);
}

.investments-page .transactions-table tbody tr.transaction-row-failed td,
.withdrawals-page .transactions-table tbody tr.transaction-row-failed td {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.42);
}

.investments-page .transactions-table tbody tr.transaction-row-pending:hover td,
.withdrawals-page .transactions-table tbody tr.transaction-row-pending:hover td {
    background: rgba(245, 158, 11, 0.24);
}

.investments-page .transactions-table tbody tr.transaction-row-approved:hover td,
.withdrawals-page .transactions-table tbody tr.transaction-row-approved:hover td {
    background: rgba(34, 197, 94, 0.24);
}

.withdrawals-page .transactions-table tbody tr.transaction-row-assigned:hover td {
    background: rgba(59, 130, 246, 0.24);
}

.investments-page .transactions-table tbody tr.transaction-row-failed:hover td,
.withdrawals-page .transactions-table tbody tr.transaction-row-failed:hover td {
    background: rgba(239, 68, 68, 0.24);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 10px;
}

.status-pending {
    background: rgba(245, 203, 92, 0.14);
    color: #f5cb5c;
}

.status-processing {
    background: rgba(127, 179, 213, 0.14);
    color: var(--accent-strong);
}

.status-assigned {
    background: rgba(127, 179, 213, 0.14);
    color: var(--accent-strong);
}

.status-approved {
    background: rgba(61, 220, 151, 0.14);
    color: #3ddc97;
}

.status-failed,
.status-expired {
    background: rgba(255, 99, 99, 0.14);
    color: #ff6363;
}

.status-cancelled {
    background: rgba(181, 196, 216, 0.14);
    color: var(--text-muted);
}

.status-active {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

.status-passive {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}

.status-suspended {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

@media (max-width: 1200px) {
    .filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .filter-grid,
    .date-inputs {
        grid-template-columns: 1fr;
    }

    .filter-field-wide,
    .date-range-field {
        grid-column: span 1;
    }

    .filter-actions,
    .transactions-list-header {
        align-items: stretch;
        flex-direction: column;
    }
}

.deliveries-page {
    width: 100%;
}

.deliveries-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.deliveries-header h1 {
    margin: 0 0 8px;
    color: var(--accent-strong);
    font-size: 34px;
}

.deliveries-header p {
    margin: 0;
    color: var(--text-muted);
}

.deliveries-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.delivery-action {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
}

.cash-action {
    background: #2f80ed;
}

.crypto-action {
    background: #8e44ec;
}

.delivery-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.delivery-summary-card {
    min-height: 130px;
    padding: 22px;
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--content-surface), #1d3354);
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.delivery-summary-card span {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 800;
}

.delivery-summary-card strong {
    color: var(--accent-strong);
    font-size: 30px;
    line-height: 1;
}

.delivery-listing {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.delivery-listing-header h2 {
    margin: 0 0 18px;
    color: var(--accent-strong);
    font-size: 24px;
}

.delivery-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.delivery-tab {
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 10px 16px;
}

.delivery-tab.active,
.delivery-tab:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.delivery-filter-row {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(150px, 1fr)) repeat(2, minmax(140px, 1fr)) auto auto;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.delivery-filter-row input,
.delivery-filter-row select,
.delivery-filter-row button {
    min-height: 44px;
    width: 100%;
    font: inherit;
    box-sizing: border-box;
}

.delivery-filter-row input,
.delivery-filter-row select {
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    padding: 0 12px;
}

.delivery-crypto-fields[hidden] {
    display: none;
}

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

.delivery-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.delivery-table th {
    color: var(--text-muted);
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 14px 6px;
}

.delivery-table td {
    background: rgba(17, 28, 47, 0.78);
    border-bottom: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
    color: var(--text-main);
    padding: 16px 14px;
    vertical-align: middle;
}

.delivery-table td:first-child {
    border-left: 1px solid var(--sidebar-border);
    border-radius: 14px 0 0 14px;
}

.delivery-table td:last-child {
    border-right: 1px solid var(--sidebar-border);
    border-radius: 0 14px 14px 0;
}

.delivery-table td span:not(.status-pill):not(.type-pill) {
    color: var(--text-muted);
    font-size: 13px;
}

.type-pill {
    display: inline-flex;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    padding: 7px 10px;
}

.crypto-type {
    background: rgba(142, 68, 236, 0.16);
    color: #c6a2ff;
}

.cash-type {
    background: rgba(47, 128, 237, 0.16);
    color: #8fc2ff;
}

.row-actions {
    white-space: nowrap;
}

td.row-actions {
    display: table-cell;
}

.row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sidebar-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px;
    white-space: nowrap;
}

.row-actions button + button {
    margin-left: 8px;
}

.row-actions button:hover {
    background: var(--accent);
    color: var(--accent-text);
}

.row-actions .danger-row-action:hover {
    background: #ff6363;
    border-color: #ff6363;
    color: white;
}

.row-actions .warning-row-action:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #111827;
}

.inline-status-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-status-form select {
    border: 1px solid var(--sidebar-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
}

@media (max-width: 1250px) {
    .delivery-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .delivery-filter-row {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .deliveries-header,
    .deliveries-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .delivery-summary-grid,
    .delivery-filter-row {
        grid-template-columns: 1fr;
    }
}

.sites-page {
    width: 100%;
}

.departments-page {
    width: 100%;
}

.sites-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sites-header h1 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 34px;
}

.sites-filter-panel,
.sites-listing {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.sites-filter-panel {
    margin-bottom: 24px;
}

.performance-panel {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.13), transparent 34%),
        var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
    margin-bottom: 24px;
}

.performance-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.performance-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 24px;
}

.performance-header > span {
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
    padding: 8px 12px;
    white-space: nowrap;
}

.performance-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) repeat(2, minmax(140px, 0.8fr)) auto;
    gap: 12px;
    margin-bottom: 20px;
}

.performance-filter-row select,
.performance-filter-row input {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.performance-filter-row button {
    min-height: 42px;
    white-space: nowrap;
}

.performance-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.performance-card {
    padding: 18px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.performance-card span,
.performance-card small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.performance-card strong {
    display: block;
    margin: 8px 0;
    color: var(--text-main);
    font-size: 24px;
}

.performance-bars {
    display: grid;
    gap: 12px;
}

.performance-bar-row {
    display: grid;
    grid-template-columns: 140px 1fr 110px;
    align-items: center;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
}

.performance-bar-row div {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.performance-bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3ddc97, #7dd3fc);
    box-shadow: 0 0 18px rgba(125, 211, 252, 0.28);
}

.performance-bar-row strong {
    color: var(--text-main);
    text-align: right;
}

.sites-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(170px, 1fr));
    gap: 14px;
    align-items: center;
}

.sites-filter-grid input[type="search"],
.sites-filter-grid select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.checkbox-filter {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-weight: 800;
    padding: 0 12px;
    box-sizing: border-box;
    white-space: nowrap;
}

.checkbox-filter input {
    accent-color: var(--accent);
}

.sites-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sites-list-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 24px;
}

.sites-list-header span {
    color: var(--text-muted);
    font-weight: 800;
}

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

.sites-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.sites-table th {
    color: var(--text-muted);
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 14px 6px;
}

.sites-table td {
    background: rgba(17, 28, 47, 0.78);
    border-bottom: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
    color: var(--text-main);
    padding: 16px 14px;
    vertical-align: middle;
}

.sites-table td:first-child {
    border-left: 1px solid var(--sidebar-border);
    border-radius: 14px 0 0 14px;
}

.sites-table td:last-child {
    border-right: 1px solid var(--sidebar-border);
    border-radius: 0 14px 14px 0;
}

.empty-table-cell {
    color: var(--text-muted);
    font-weight: 600;
    padding: 34px 18px;
    text-align: center;
}

@media (max-width: 1250px) {
    .sites-filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

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

    .performance-filter-row {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .sites-filter-grid,
    .sites-list-header {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .sites-list-header {
        flex-direction: column;
    }

    .performance-header {
        flex-direction: column;
    }

    .performance-card-grid,
    .performance-filter-row,
    .performance-bar-row {
        grid-template-columns: 1fr;
    }

    .performance-bar-row strong {
        text-align: left;
    }
}

.investments-page {
    --transaction-accent: #3ddc97;
    --transaction-accent-rgb: 61, 220, 151;
    --transaction-accent-text: #071f16;
}

.withdrawals-page {
    --transaction-accent: #ff6363;
    --transaction-accent-rgb: 255, 99, 99;
    --transaction-accent-text: #260707;
}

.investments-page .transactions-header h1,
.withdrawals-page .transactions-header h1,
.investments-page .transactions-list-header h2,
.withdrawals-page .transactions-list-header h2 {
    color: var(--transaction-accent);
}

.investments-page .transaction-filter-panel,
.withdrawals-page .transaction-filter-panel,
.investments-page .transactions-list,
.withdrawals-page .transactions-list {
    border-color: rgba(var(--transaction-accent-rgb), 0.28);
    box-shadow:
        0 18px 42px rgba(5, 12, 24, 0.26),
        10px 10px 0 rgba(var(--transaction-accent-rgb), 0.2);
}

.investments-page .transaction-filter-panel,
.investments-page .transactions-list {
    background:
        radial-gradient(circle at top right, rgba(61, 220, 151, 0.1), transparent 32%),
        var(--content-surface);
}

.withdrawals-page .transaction-filter-panel,
.withdrawals-page .transactions-list {
    background:
        radial-gradient(circle at top right, rgba(255, 99, 99, 0.1), transparent 32%),
        var(--content-surface);
}

.investments-page .primary-action,
.withdrawals-page .primary-action {
    background: var(--transaction-accent);
    border-color: var(--transaction-accent);
    color: var(--transaction-accent-text);
}

.investments-page .filter-field input:focus,
.investments-page .filter-field select:focus,
.withdrawals-page .filter-field input:focus,
.withdrawals-page .filter-field select:focus {
    border-color: var(--transaction-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--transaction-accent-rgb), 0.18);
}

.investments-page .transactions-table td:first-child,
.withdrawals-page .transactions-table td:first-child {
    border-left-color: rgba(var(--transaction-accent-rgb), 0.6);
}

.today-summary-hero {
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.58), transparent 38%),
        radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.28), transparent 34%),
        linear-gradient(145deg, #2f7fc7, #1e5f9f 48%, #164b83);
}


.payment-page {
    min-height: calc(100vh - 60px);
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
}

.payment-card {
    width: min(560px, 100%);
    padding: 30px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.2), transparent 34%),
        linear-gradient(145deg, #182d49, #101b2e);
    box-shadow: 0 28px 70px rgba(5, 12, 24, 0.36);
    box-sizing: border-box;
}

.payment-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.payment-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(127, 179, 213, 0.14);
}

.payment-logo svg {
    width: 34px;
    height: 34px;
    stroke: var(--accent-strong);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.payment-brand {
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.payment-header h1 {
    margin: 4px 0 0;
    color: var(--accent-strong);
    font-size: 30px;
}

.payment-bank,
.payment-amount,
.payment-bank-details,
.payment-meta {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
    background: rgba(17, 28, 47, 0.72);
}

.payment-bank span,
.payment-amount span,
.payment-detail-row span,
.payment-meta span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-bank strong,
.payment-detail-row strong,
.payment-meta strong {
    color: var(--text-main);
    font-size: 18px;
}

.payment-qr {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 20px;
    color: var(--text-muted);
    font-weight: 800;
    text-align: center;
}

.qr-pattern {
    width: 180px;
    height: 180px;
    border: 12px solid white;
    border-radius: 18px;
    background-color: white;
    background-image:
        linear-gradient(90deg, #0f172a 12px, transparent 12px),
        linear-gradient(#0f172a 12px, transparent 12px),
        linear-gradient(90deg, transparent 24px, #0f172a 24px 36px, transparent 36px 60px, #0f172a 60px 72px, transparent 72px),
        linear-gradient(transparent 24px, #0f172a 24px 36px, transparent 36px 60px, #0f172a 60px 72px, transparent 72px);
    background-size: 48px 48px, 48px 48px, 84px 84px, 84px 84px;
    box-shadow: 0 18px 36px rgba(5, 12, 24, 0.26);
}

.payment-amount strong {
    display: block;
    color: #7dd3fc;
    font-size: 40px;
    line-height: 1;
}

.payment-amount p {
    margin: 10px 0 0;
    color: #f5cb5c;
    font-size: 14px;
    font-weight: 800;
}

.payment-bank-details {
    display: grid;
    gap: 14px;
}

.payment-warning {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 99, 99, 0.44);
    border-radius: 16px;
    background: rgba(255, 99, 99, 0.12);
    color: #ffb4b4;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

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

.return-site-button {
    min-height: 48px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 620px) {
    .payment-card {
        padding: 22px;
    }

    .payment-meta {
        grid-template-columns: 1fr;
    }

    .payment-amount strong {
        font-size: 34px;
    }
}

.payment-body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--page-bg), #16253d);
}

.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.22), transparent 34%),
        linear-gradient(135deg, var(--page-bg), #16253d);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
}

.login-card {
    width: min(430px, 100%);
    padding: 32px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 34%),
        linear-gradient(145deg, #182d49, #101b2e);
    box-shadow: 0 28px 70px rgba(5, 12, 24, 0.36);
    box-sizing: border-box;
}

.login-logo {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(127, 179, 213, 0.14);
    margin-bottom: 18px;
}

.login-logo svg {
    width: 36px;
    height: 36px;
    stroke: var(--accent-strong);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.login-brand {
    color: var(--accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.login-card h1 {
    margin: 6px 0 8px;
    color: var(--accent-strong);
    font-size: 30px;
}

.login-card p,
.login-card small {
    color: var(--text-muted);
}

.login-card p {
    margin: 0 0 22px;
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
}

.login-card input {
    min-height: 46px;
    border: 1px solid var(--sidebar-border);
    border-radius: 14px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 14px;
}

.login-card input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(127, 179, 213, 0.18);
}

.login-card button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 16px;
    background: var(--accent);
    color: var(--accent-text);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    margin: 6px 0 14px;
}

.login-secondary-link {
    color: var(--accent-strong);
    display: block;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.login-error {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(255, 99, 99, 0.44);
    border-radius: 14px;
    background: rgba(255, 99, 99, 0.12);
    color: #ffb4b4;
    font-weight: 800;
}

.login-success {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(61, 220, 151, 0.44);
    border-radius: 14px;
    background: rgba(61, 220, 151, 0.12);
    color: #86efac;
    font-weight: 800;
}


.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
}

.top-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 30px;
    border-bottom: 1px solid var(--sidebar-border);
    background: rgba(17, 28, 47, 0.92);
    box-shadow: 0 10px 28px rgba(5, 12, 24, 0.18);
    box-sizing: border-box;
}

.top-header-left {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.sidebar-toggle-button {
    align-items: center;
    background: rgba(127, 179, 213, 0.12);
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    color: var(--accent-strong);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    height: 42px;
    justify-content: center;
    padding: 0;
    width: 42px;
}

.sidebar-toggle-button:hover {
    background: var(--accent);
    color: var(--accent-text);
}

.sidebar-toggle-button span {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 18px;
}

.top-header-title,
.top-user-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.top-header-title span,
.top-user-details span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.top-header-title strong,
.top-user-details strong {
    color: var(--accent-strong);
    font-size: 18px;
}

.top-user-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-user-details {
    align-items: flex-end;
}

.top-logout-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255, 99, 99, 0.3);
    border-radius: 12px;
    background: rgba(255, 99, 99, 0.1);
    color: #ffb4b4;
    font-weight: 900;
    text-decoration: none;
}

.top-logout-link:hover {
    background: #ff6363;
    color: white;
}

@media (max-width: 700px) {
    .top-header,
    .top-user-area {
        align-items: stretch;
        flex-direction: column;
    }

    .top-user-details {
        align-items: flex-start;
    }

    .top-header-left {
        align-items: center;
    }
}


.top-user-details time {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.management-page {
    width: 100%;
}

.management-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.management-header h1 {
    margin: 0 0 8px;
    color: var(--accent-strong);
    font-size: 34px;
}

.management-header p {
    margin: 0;
    color: var(--text-muted);
}

.management-primary-action {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--accent-text);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
}

.management-filters,
.management-listing {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.management-filters {
    display: grid;
    grid-template-columns: 2fr repeat(2, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.management-filters input,
.management-filters select {
    min-height: 44px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
}

.management-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.management-list-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 24px;
}

.management-list-header span {
    color: var(--text-muted);
    font-weight: 800;
}

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

.management-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.personnel-table {
    min-width: 1420px;
}

.users-table {
    min-width: 1120px;
}

.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}

.online-dot.online {
    background: #3ddc97;
    box-shadow: 0 0 14px rgba(61, 220, 151, 0.55);
}

.online-dot.idle {
    background: #f5cb5c;
    box-shadow: 0 0 14px rgba(245, 203, 92, 0.45);
}

.online-dot.offline {
    background: #ff6363;
    box-shadow: 0 0 14px rgba(255, 99, 99, 0.42);
}

.session-state {
    align-items: center;
    color: var(--text-main);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    white-space: nowrap;
}

.session-state-dot {
    border-radius: 999px;
    display: inline-block;
    height: 11px;
    width: 11px;
}

.session-state.is-active {
    color: #86efac;
}

.session-state.is-active .session-state-dot {
    background: #22c55e;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.52);
}

.session-state.is-passive {
    color: #fca5a5;
}

.session-state.is-passive .session-state-dot {
    background: #ef4444;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.44);
}

.session-state.is-suspended {
    color: #fbbf24;
}

.session-state.is-suspended .session-state-dot {
    background: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
}

.staff-coverage-panel {
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(61, 220, 151, 0.11), transparent 32%),
        var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
    margin-bottom: 24px;
}

.staff-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.staff-live-card {
    padding: 18px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.staff-live-card span,
.staff-live-card small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.staff-live-card strong {
    display: block;
    margin: 8px 0;
    color: var(--text-main);
    font-size: 22px;
}

.staff-live-card.is-online {
    border-color: rgba(61, 220, 151, 0.32);
    box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.08);
}

.staff-live-card.is-warning {
    border-color: rgba(245, 203, 92, 0.35);
    box-shadow: inset 0 0 0 1px rgba(245, 203, 92, 0.08);
}

.shift-coverage-table {
    display: grid;
    gap: 10px;
}

.shift-coverage-row {
    display: grid;
    grid-template-columns: 150px 90px 110px 1fr 140px;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
}

.shift-coverage-head {
    background: transparent;
    border-color: transparent;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shift-coverage-row strong {
    color: var(--text-main);
}

.shift-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.shift-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3ddc97, #7dd3fc);
}

.shift-status {
    justify-self: start;
    border-radius: 999px;
    font-style: normal;
    padding: 7px 10px;
}

.shift-status.ok {
    background: rgba(61, 220, 151, 0.13);
    color: #3ddc97;
}

.shift-status.warning {
    background: rgba(245, 203, 92, 0.13);
    color: #f5cb5c;
}

.management-table th {
    color: var(--text-muted);
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 14px 6px;
}

.management-table td {
    background: rgba(17, 28, 47, 0.78);
    border-bottom: 1px solid var(--sidebar-border);
    border-top: 1px solid var(--sidebar-border);
    color: var(--text-main);
    padding: 16px 14px;
    vertical-align: middle;
}

.management-table td:first-child {
    border-left: 1px solid var(--sidebar-border);
    border-radius: 14px 0 0 14px;
}

.management-table td:last-child {
    border-right: 1px solid var(--sidebar-border);
    border-radius: 0 14px 14px 0;
}

.management-table td span {
    color: var(--text-muted);
    font-size: 13px;
}

.commissioners-table {
    min-width: 1280px;
}

.commissioner-child-list {
    display: grid;
    gap: 8px;
}

.commissioner-child-list article {
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    padding: 10px 12px;
}

.commissioner-child-list strong,
.commissioner-child-list span {
    display: block;
}

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

.role-card {
    min-height: 170px;
    padding: 20px;
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(29, 45, 72, 0.92), rgba(17, 28, 47, 0.94));
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    box-sizing: border-box;
}

.role-card h3 {
    margin: 0 0 10px;
    color: var(--accent-strong);
}

.role-card p {
    margin: 0 0 18px;
    color: var(--text-muted);
}

.role-card span {
    display: inline-flex;
    border-radius: 999px;
    background: rgba(127, 179, 213, 0.14);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
    padding: 7px 10px;
}

@media (max-width: 1000px) {
    .management-filters,
    .role-grid {
        grid-template-columns: 1fr;
    }

    .management-header,
    .management-list-header {
        align-items: stretch;
        flex-direction: column;
    }
}

.site-add-button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--accent-text);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
}


.site-modal[hidden] {
    display: none;
}

.department-add-button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: #7dd3fc;
    color: #061625;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    white-space: nowrap;
}

.bank-accounts-page {
    width: 100%;
}

.bank-accounts-header p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

.bank-account-add-button,
.bank-add-button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: #3ddc97;
    color: #071f16;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    white-space: nowrap;
}

.bank-account-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(170px, 1fr));
    gap: 14px;
    align-items: center;
}

.bank-account-filter-grid input,
.bank-account-filter-grid select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.bank-accounts-table {
    min-width: 1580px;
}

.sets-page {
    width: 100%;
}

.sets-header p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

.set-add-button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: #7dd3fc;
    color: #061625;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    white-space: nowrap;
}

.sets-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(170px, 1fr));
    gap: 14px;
    align-items: center;
}

.sets-filter-grid input,
.sets-filter-grid select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.sets-table {
    min-width: 1580px;
}

.set-members-panel {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
    box-sizing: border-box;
}

.set-member-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) 2fr auto;
    gap: 14px;
    margin-bottom: 18px;
}

.set-member-filter-grid input,
.set-member-filter-grid select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.set-member-filter-grid button {
    min-height: 44px;
    white-space: nowrap;
}

.set-members-table {
    min-width: 1380px;
}

.set-member-modal-form input[readonly] {
    color: rgba(232, 240, 255, 0.74);
    cursor: not-allowed;
    opacity: 0.78;
}

.departments-header p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

.department-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.department-summary-card,
.department-bank-section {
    border: 1px solid var(--sidebar-border);
    border-radius: 20px;
    background: var(--content-surface);
    box-shadow: 0 18px 42px rgba(5, 12, 24, 0.26);
}

.department-summary-card {
    padding: 20px;
}

.department-summary-card span,
.department-summary-card small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.department-summary-card strong {
    display: block;
    margin: 9px 0;
    color: var(--accent-strong);
    font-size: 26px;
}

.department-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(170px, 1fr));
    gap: 14px;
    align-items: center;
}

.department-filter-grid input,
.department-filter-grid select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.departments-table {
    min-width: 1900px;
}

.reports-departments-table {
    min-width: 1500px;
}

.reports-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.reports-tabs button {
    min-height: 40px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-muted);
    font: inherit;
    font-weight: 800;
    padding: 0 16px;
    cursor: pointer;
}

.reports-tabs button.active,
.reports-tabs button:hover {
    border-color: rgba(143, 194, 255, 0.55);
    color: var(--text-main);
    background: rgba(143, 194, 255, 0.12);
}

.reports-sites-table {
    min-width: 1700px;
}

.reports-commissioners-table {
    min-width: 1100px;
}

.reports-system-table {
    min-width: 640px;
}

.reports-departments-table .report-total-row th,
.reports-departments-table .report-total-row td {
    border-bottom: 1px solid var(--sidebar-border);
    background: rgba(255, 255, 255, 0.045);
    font-weight: 900;
    white-space: nowrap;
}

.reports-departments-table .report-total-row th {
    color: var(--accent-strong);
}

.reports-departments-table .report-value-green {
    color: #3ddc97;
}

.reports-departments-table .report-value-red {
    color: #ff6363;
}

.reports-departments-table .report-value-blue {
    color: #8fc2ff;
}

.reports-departments-table .report-value-white {
    color: #ffffff;
}

.departments-table .department-sites-actions,
.departments-table .department-edit-actions {
    display: table-cell;
    min-width: 150px;
    white-space: nowrap;
}

.departments-table .department-sites-actions button,
.departments-table .department-edit-actions button {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
}

.department-bank-section {
    margin-top: 24px;
    padding: 24px;
}

.department-bank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.department-bank-grid article {
    padding: 16px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.department-bank-grid span,
.department-bank-grid small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.department-bank-grid strong {
    display: block;
    margin: 8px 0;
    color: var(--text-main);
}

@media (max-width: 1250px) {
    .department-summary-grid,
    .staff-live-grid,
    .department-bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .department-filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .bank-account-filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .sets-filter-grid,
    .set-member-filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 700px) {
    .department-summary-grid,
    .staff-live-grid,
    .department-bank-grid,
    .department-filter-grid,
    .bank-account-filter-grid,
    .sets-filter-grid,
    .set-member-filter-grid {
        grid-template-columns: 1fr;
    }

    .shift-coverage-row {
        grid-template-columns: 1fr;
    }

    .shift-coverage-head {
        display: none;
    }
}

.site-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
}

.site-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 24, 0.72);
    backdrop-filter: blur(6px);
}

.site-modal-panel {
    position: relative;
    width: min(880px, 100%);
    max-height: min(86vh, 920px);
    overflow-y: auto;
    padding: 26px;
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.16), transparent 34%),
        var(--content-surface);
    box-shadow: 0 28px 80px rgba(5, 12, 24, 0.48);
    box-sizing: border-box;
}

.site-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.site-modal-header h2 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 28px;
}

.site-modal-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

.site-modal-form {
    display: grid;
    gap: 18px;
}

.site-modal-form fieldset {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.site-modal-form legend {
    color: var(--accent-strong);
    font-weight: 900;
    padding: 0 8px;
}

.site-modal-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
}

.site-modal-form input,
.site-modal-form select {
    min-height: 44px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
    box-sizing: border-box;
}

.site-modal-wide-fieldset label {
    grid-column: span 2;
}

.panel-expense-payment-modal-panel {
    width: min(1180px, 100%);
}

.panel-expense-pending-fieldset {
    grid-column: span 2;
}

.panel-expense-pending-fieldset .sites-table-wrap {
    grid-column: 1 / -1;
    width: 100%;
}

.panel-expense-payment-form {
    grid-column: 1 / -1;
    display: grid;
    gap: 14px;
    width: 100%;
}

.panel-expense-select-button.is-selected {
    background: #3ddc97;
    border-color: #3ddc97;
    color: #072019;
}

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

.site-modal-form .panel-expense-summary-field {
    grid-column: 1 / -1;
}

.panel-expense-summary-field span {
    font-size: 15px;
}

.panel-expense-summary-field input {
    min-height: 56px;
    font-size: 24px;
    font-weight: 900;
}

.panel-expense-crypto-modal-panel {
    width: min(720px, 100%);
}

.panel-expense-crypto-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-expense-crypto-amount,
.panel-expense-crypto-address,
.panel-expense-crypto-conversion,
.panel-expense-crypto-timeout {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.panel-expense-crypto-currency {
    grid-column: 1 / -1;
}

.panel-expense-crypto-amount span,
.panel-expense-crypto-address span,
.panel-expense-crypto-conversion span,
.panel-expense-crypto-timeout span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.panel-expense-crypto-amount strong,
.panel-expense-crypto-conversion strong,
.panel-expense-crypto-timeout strong {
    color: var(--accent-strong);
    font-size: 30px;
    line-height: 1.1;
}

.panel-expense-crypto-address strong {
    color: var(--text-main);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.panel-expense-crypto-conversion small {
    color: var(--text-muted);
    font-weight: 800;
}

.site-api-key-status {
    grid-column: span 2;
    margin: 0;
    color: var(--text-muted);
    font-weight: 800;
}

.site-api-key-status strong {
    color: var(--accent-strong);
}

.site-generated-key {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.site-generated-key label {
    grid-column: auto;
}

.site-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.audit-log-values-button {
    min-height: 34px;
    padding: 0 12px;
}

.audit-log-modal-panel {
    width: min(980px, 100%);
}

.audit-log-values-pre {
    max-height: 62vh;
    margin: 0;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 700px) {
    .site-modal-form fieldset,
    .site-modal-wide-fieldset label {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }

    .site-modal-actions,
    .site-modal-header {
        flex-direction: column;
    }
}

.transactions-header-with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.manual-deposit-button,
.manual-withdrawal-button,
.delivery-add-button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: #3ddc97;
    color: #071f16;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 0 18px;
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.24);
    white-space: nowrap;
}

.workflow-transactions-table {
    min-width: 1580px;
}

.workflow-transactions-table td {
    font-size: 14px;
}

.transaction-actions {
    min-width: 128px;
    white-space: normal;
}

.transaction-actions .withdrawal-manage-button {
    border-color: rgba(61, 220, 151, 0.34);
    color: #3ddc97;
}

.transaction-actions .deposit-status-change-button {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.transaction-actions .deposit-status-change-button:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.status-change-modal-success .site-modal-panel {
    border-color: rgba(22, 163, 74, 0.72);
    box-shadow: 0 24px 70px rgba(22, 163, 74, 0.22);
}

.status-change-modal-success .site-modal-header h2 {
    color: #3ddc97;
}

.status-change-modal-success .status-change-form button[type="submit"] {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.status-change-modal-failed .site-modal-panel {
    border-color: rgba(220, 38, 38, 0.72);
    box-shadow: 0 24px 70px rgba(220, 38, 38, 0.22);
}

.status-change-modal-failed .site-modal-header h2 {
    color: #f87171;
}

.status-change-modal-failed .status-change-form button[type="submit"] {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.status-change-form input[readonly],
.withdrawal-assignment-form input[readonly] {
    color: rgba(232, 240, 255, 0.74);
    cursor: not-allowed;
    opacity: 0.78;
}

.withdrawal-assignment-fieldset {
    grid-column: 1 / -1;
}

.withdrawal-assignment-list {
    counter-reset: withdrawal-assignment;
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
}

.withdrawal-assignment-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1.35fr) minmax(0, 1fr) auto;
}

.withdrawal-assignment-row::before {
    align-items: center;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--sidebar-border);
    border-radius: 14px;
    color: var(--text-primary);
    content: counter(withdrawal-assignment) ".";
    counter-increment: withdrawal-assignment;
    display: flex;
    font-size: 18px;
    font-weight: 900;
    justify-content: center;
    min-height: 48px;
}

.assignment-add-button {
    justify-self: start;
}

.assignment-remove-button {
    white-space: nowrap;
}

.withdrawal-manage-panel {
    max-height: 92vh;
    max-width: min(1180px, calc(100vw - 36px));
    overflow: auto;
    width: min(1180px, calc(100vw - 36px));
}

.withdrawal-manage-header {
    align-items: flex-start;
    gap: 18px;
}

.withdrawal-manage-header p {
    color: var(--text-muted);
    margin: 6px 0 0;
}

.withdrawal-manage-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.withdrawal-manage-summary article,
.withdrawal-manage-card,
.withdrawal-assignment-balance {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--sidebar-border);
    border-radius: 18px;
}

.withdrawal-manage-summary article {
    padding: 16px;
}

.withdrawal-manage-summary span,
.withdrawal-assignment-balance span {
    color: var(--text-muted);
    display: block;
    font-size: 13px;
}

.withdrawal-manage-summary strong {
    display: block;
    font-size: 22px;
    margin-top: 6px;
}

.withdrawal-manage-summary [data-withdrawal-manage-total] {
    color: #ffffff;
}

.withdrawal-manage-summary [data-withdrawal-manage-assigned] {
    color: #38bdf8;
}

.withdrawal-manage-summary [data-withdrawal-manage-paid] {
    color: #22c55e;
}

.withdrawal-manage-summary [data-withdrawal-manage-waiting] {
    color: #f97316;
}

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

.withdrawal-assignment-choice {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.withdrawal-assignment-choice[hidden],
.withdrawal-manage-card[hidden] {
    display: none !important;
}

.withdrawal-assignment-choice-button {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(14, 165, 233, 0.16));
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 22px;
    color: var(--text-strong);
    cursor: pointer;
    display: grid;
    gap: 8px;
    justify-items: center;
    min-height: 128px;
    padding: 24px;
    text-align: center;
}

.withdrawal-assignment-choice-button[data-show-withdrawal-assignment="direct"] {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.26), rgba(5, 150, 105, 0.14));
    border-color: rgba(74, 222, 128, 0.42);
}

.withdrawal-assignment-choice-button[data-show-withdrawal-assignment="partial"] {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.26), rgba(245, 158, 11, 0.14));
    border-color: rgba(251, 146, 60, 0.46);
}

.withdrawal-assignment-choice-button strong {
    font-size: 22px;
    font-weight: 900;
}

.withdrawal-assignment-choice-button span {
    color: var(--text-muted);
    font-weight: 800;
    line-height: 1.45;
}

.withdrawal-manage-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.withdrawal-manage-card h3 {
    margin: 0;
}

.withdrawal-active-assignments-list {
    display: grid;
    gap: 12px;
}

.withdrawal-active-assignment-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 14px 16px;
}

.withdrawal-active-assignment-actions {
    align-items: flex-end;
    display: grid;
    gap: 10px;
    justify-items: flex-end;
}

.withdrawal-assignment-item-cancel-button {
    min-width: 180px;
}

.withdrawal-active-assignment-item div {
    display: grid;
    gap: 4px;
}

.withdrawal-active-assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.withdrawal-active-assignment-item span {
    color: var(--text-muted);
    font-size: 13px;
}

.withdrawal-assignment-cancel-form,
.withdrawal-status-cancel-form {
    justify-self: center;
    max-width: 560px;
    width: 100%;
}

.withdrawal-manage-card p {
    color: var(--text-muted);
    margin: -6px 0 0;
}

.direct-withdrawal-assignment-form {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 720px;
    text-align: center;
    width: 100%;
}

.direct-assignment-amount-display {
    color: var(--text-primary);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    padding: 18px 0 10px;
    text-align: center;
}

.direct-assignment-department,
.direct-assignment-note {
    justify-self: center;
    max-width: 560px;
    width: 100%;
}

.direct-assignment-department select {
    font-size: 18px;
    min-height: 58px;
    text-align: center;
}

.direct-assignment-note input {
    text-align: center;
}

.direct-assignment-submit {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: #16a34a;
}

.withdrawal-partial-assignment-form {
    grid-column: 1 / -1;
}

.withdrawal-partial-assignment-form .withdrawal-assignment-row label:first-of-type {
    text-align: left;
}

.withdrawal-partial-assignment-form .withdrawal-assignment-row select {
    min-height: 52px;
}

.withdrawal-assignment-balance {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 20px;
    text-align: center;
}

.withdrawal-assignment-balance strong {
    display: block;
    font-size: 30px;
    margin-top: 6px;
}

.withdrawal-assignment-balance span:first-child strong {
    color: #22c55e;
}

.withdrawal-assignment-balance span:last-child strong {
    color: #ef4444;
}

.partial-assignment-note {
    justify-self: center;
    max-width: 420px;
    width: 100%;
}

.partial-assignment-note input {
    min-height: 42px;
}

.withdrawal-manual-complete-button,
.withdrawal-cancel-button {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: 0;
    border-radius: 18px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.01em;
    margin-top: 18px;
    padding: 18px 22px;
    width: 100%;
}

.withdrawal-manual-complete-button[hidden],
.withdrawal-cancel-button[hidden] {
    display: none !important;
}

.withdrawal-result-panel {
    max-width: min(720px, calc(100vw - 36px));
    width: min(720px, calc(100vw - 36px));
}

.crypto-wallet-create-section {
    margin-bottom: 20px;
}

.crypto-wallet-grid {
    display: grid;
    gap: 18px;
}

.crypto-wallet-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--sidebar-border);
    border-radius: 22px;
    padding: 18px;
}

.crypto-wallet-card > header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.crypto-wallet-card h3 {
    margin: 4px 0;
}

.crypto-wallet-card p {
    color: var(--text-muted);
    font-family: Consolas, monospace;
    margin: 0;
    overflow-wrap: anywhere;
}

.crypto-wallet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.crypto-wallet-meta span {
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    padding: 8px 12px;
}

.crypto-wallet-meta strong {
    color: var(--text-primary);
}

.withdrawal-result-preview {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.34);
    border-radius: 18px;
    display: grid;
    gap: 6px;
    padding: 16px;
}

.withdrawal-result-preview span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.withdrawal-result-preview strong {
    font-size: 22px;
}

.withdrawal-result-actions {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.withdrawal-result-choice-actions {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

.withdrawal-scoped-result-actions {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
    padding: 16px;
}

.withdrawal-scoped-result-actions button {
    min-height: 54px;
}

.withdrawal-result-choice-actions button {
    border-radius: 16px;
    font-size: 16px;
    font-weight: 900;
    padding: 18px 22px;
}

.checkbox-field {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.checkbox-field input[type="checkbox"] {
    accent-color: #16a34a;
    height: 18px;
    width: 18px;
}

.withdrawal-result-detail-success .site-modal-panel {
    border-color: rgba(22, 163, 74, 0.72);
    box-shadow: 0 24px 70px rgba(22, 163, 74, 0.22);
}

.withdrawal-result-detail-success .site-modal-header h2 {
    color: #3ddc97;
}

.withdrawal-result-detail-success .withdrawal-result-actions .primary-action {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.withdrawal-result-detail-failed .site-modal-panel {
    border-color: rgba(220, 38, 38, 0.72);
    box-shadow: 0 24px 70px rgba(220, 38, 38, 0.22);
}

.withdrawal-result-detail-failed .site-modal-header h2 {
    color: #f87171;
}

[data-withdrawal-result-assignment-field][hidden],
.withdrawal-result-assignment-hidden {
    display: none !important;
}

.danger-action,
.withdrawal-result-failed-button {
    background: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    padding: 12px 18px;
}

.withdrawal-pay-button,
.withdrawal-scoped-result-actions .withdrawal-pay-button,
.withdrawal-scoped-result-actions .withdrawal-result-success-button,
.withdrawal-result-detail-success .withdrawal-result-actions .primary-action {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.withdrawal-pay-button:hover,
.withdrawal-scoped-result-actions .withdrawal-pay-button:hover,
.withdrawal-scoped-result-actions .withdrawal-result-success-button:hover,
.withdrawal-result-detail-success .withdrawal-result-actions .primary-action:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

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

.transaction-detail-grid article {
    padding: 16px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.transaction-detail-grid span,
.transaction-detail-grid small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.transaction-detail-grid strong {
    display: block;
    margin: 7px 0;
    color: var(--text-main);
    font-size: 17px;
}

.transaction-log-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transaction-log-list li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.transaction-log-list time {
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
}

.transaction-log-list strong,
.transaction-log-list span {
    display: block;
}

.transaction-log-list strong {
    color: var(--text-main);
    margin-bottom: 5px;
}

.transaction-log-list span {
    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 700px) {
    .transactions-header-with-action {
        align-items: stretch;
        flex-direction: column;
    }

    .transaction-detail-grid,
    .withdrawal-assignment-row,
    .withdrawal-assignment-balance,
    .withdrawal-assignment-choice,
    .withdrawal-manage-grid,
    .withdrawal-manage-summary,
    .transaction-log-list li {
        grid-template-columns: 1fr;
    }
}

.site-status-switch {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    letter-spacing: 0.04em;
    min-width: 94px;
    padding: 6px 10px 6px 6px;
    text-transform: uppercase;
}

.site-status-switch-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 15px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    width: 24px;
}

.site-status-switch.is-active {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #86efac;
}

.site-status-switch.is-active .site-status-switch-icon {
    background: #22c55e;
    color: #052e16;
}

.site-status-switch.is-passive {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.48);
    color: #fca5a5;
}

.site-status-switch.is-passive .site-status-switch-icon {
    background: #ef4444;
    color: #450a0a;
}

.site-status-toggle {
    align-items: center;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    letter-spacing: 0.04em;
    min-width: 94px;
    padding: 6px 10px 6px 6px;
    text-transform: uppercase;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.site-status-toggle:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.site-status-toggle-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 15px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    width: 24px;
}

.site-status-toggle.is-active {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #86efac;
}

.site-status-toggle.is-active .site-status-toggle-icon {
    background: #22c55e;
    color: #052e16;
}

.site-status-toggle.is-passive {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.48);
    color: #fca5a5;
}

.site-status-toggle.is-passive .site-status-toggle-icon {
    background: #ef4444;
    color: #450a0a;
}

.settings-option-row {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.settings-option-row strong {
    color: var(--text-main);
    display: block;
    font-size: 18px;
    margin-bottom: 6px;
}

.settings-option-row p {
    margin: 0;
}

.settings-section {
    margin-top: 24px;
}

.settings-alert {
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    font-weight: 800;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.settings-code,
.settings-recovery-codes pre {
    overflow-x: auto;
    border: 1px solid var(--sidebar-border);
    border-radius: 14px;
    background: var(--content-bg);
    color: var(--text-main);
    padding: 16px;
}

.settings-help {
    margin-top: 0;
}

.settings-inline-form {
    align-items: end;
    margin-top: 18px;
}

.settings-inline-form button {
    min-height: 44px;
}

.two-factor-setup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.two-factor-setup-grid label {
    color: var(--text-muted);
    display: grid;
    font-weight: 800;
    gap: 8px;
}

.two-factor-setup-grid input {
    min-height: 44px;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--content-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0 12px;
}

.settings-recovery-codes {
    margin-top: 18px;
}

.settings-recovery-codes strong {
    color: var(--accent-strong);
    display: block;
    margin-bottom: 6px;
}

.theme-mode-toggle.is-passive {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.42);
    color: #93c5fd;
}

.theme-mode-toggle.is-passive .site-status-toggle-icon {
    background: #2563eb;
    color: #eff6ff;
}

.site-status-confirm-modal[hidden] {
    display: none;
}

.site-status-confirm-modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 1200;
}

.site-status-confirm-backdrop {
    background: rgba(7, 10, 18, 0.72);
    inset: 0;
    position: absolute;
}

.site-status-confirm-panel {
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.98), rgba(180, 83, 9, 0.96));
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    color: #fff7ed;
    max-width: 430px;
    padding: 26px;
    position: relative;
    width: min(100%, 430px);
}

.site-status-confirm-panel h2 {
    font-size: 24px;
    margin: 6px 0 10px;
}

.site-status-confirm-panel p {
    color: #ffedd5;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 22px;
}

.site-status-confirm-panel label {
    color: #ffedd5;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    margin: 0 0 14px;
}

.site-status-confirm-panel input,
.site-status-confirm-panel select {
    background: rgba(255, 247, 237, 0.94);
    border: 1px solid rgba(251, 191, 36, 0.65);
    border-radius: 12px;
    box-sizing: border-box;
    color: #431407;
    font: inherit;
    min-height: 44px;
    padding: 0 12px;
}

.site-status-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.site-status-confirm-button {
    background: #facc15;
    border: 0;
    border-radius: 999px;
    color: #431407;
    cursor: pointer;
    font-weight: 900;
    padding: 12px 18px;
}

body.theme-light .layout {
    background: linear-gradient(135deg, #f3efe6, #e8eef4);
}

body.theme-light .content {
    background: var(--content-bg);
}

body.theme-light .top-header {
    background: rgba(255, 250, 242, 0.94);
    border-bottom-color: #d6ccbc;
    box-shadow: 0 10px 28px rgba(96, 80, 54, 0.12);
}

body.theme-light .sidebar-toggle-button {
    background: #f1eadf;
    border-color: #d6ccbc;
    color: #1646a1;
}

body.theme-light .top-logout-link {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

body.theme-light .summary-card,
body.theme-light .delivery-summary-card,
body.theme-light .role-card {
    background: linear-gradient(145deg, #fffaf2, #eef5f8);
}

body.theme-light .secondary-hero,
body.theme-light .today-summary-hero,
body.theme-light .dashboard-hero {
    background: linear-gradient(145deg, #fff6e6, #e5f1f7);
    border-color: #d6ccbc;
    box-shadow: 0 24px 60px rgba(96, 80, 54, 0.14);
}

body.theme-light .transaction-filter-panel,
body.theme-light .transactions-list,
body.theme-light .delivery-listing,
body.theme-light .management-listing,
body.theme-light .sites-filter-panel,
body.theme-light .sites-listing,
body.theme-light .performance-panel,
body.theme-light .staff-coverage-panel,
body.theme-light .department-summary-card,
body.theme-light .department-bank-section,
body.theme-light .content-box,
body.theme-light .dashboard-panel,
body.theme-light .system-status-card,
body.theme-light .detail-card,
body.theme-light .withdrawal-manage-summary article,
body.theme-light .withdrawal-manage-card,
body.theme-light .withdrawal-assignment-balance,
body.theme-light .crypto-wallet-card {
    background: var(--content-surface);
    border-color: #d6ccbc;
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12);
}

body.theme-light .detail-card-pending {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12), 8px 8px 0 rgba(245, 158, 11, 0.22);
}

body.theme-light .detail-card-processing {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12), 8px 8px 0 rgba(59, 130, 246, 0.22);
}

body.theme-light .detail-card-approved {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12), 8px 8px 0 rgba(34, 197, 94, 0.22);
}

body.theme-light .detail-card-failed,
body.theme-light .detail-card-expired {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12), 8px 8px 0 rgba(239, 68, 68, 0.22);
}

body.theme-light .detail-card-cancelled {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12), 8px 8px 0 rgba(104, 115, 134, 0.18);
}

body.theme-light .investments-page .transaction-filter-panel,
body.theme-light .investments-page .transactions-list {
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 32%),
        var(--content-surface);
}

body.theme-light .withdrawals-page .transaction-filter-panel,
body.theme-light .withdrawals-page .transactions-list {
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 32%),
        var(--content-surface);
}

body.theme-light .summary-card-investments,
body.theme-light .summary-card-withdrawals,
body.theme-light .summary-card-net,
body.theme-light .summary-card-pending {
    box-shadow: 0 18px 42px rgba(96, 80, 54, 0.12);
}

body.theme-light .filter-field input,
body.theme-light .filter-field select,
body.theme-light .delivery-filter-row input,
body.theme-light .delivery-filter-row select,
body.theme-light .management-filters input,
body.theme-light .management-filters select,
body.theme-light .sites-filter-grid input[type="search"],
body.theme-light .sites-filter-grid select,
body.theme-light .performance-filter-row input,
body.theme-light .performance-filter-row select,
body.theme-light .department-filter-grid input,
body.theme-light .department-filter-grid select {
    background: #fffdf8;
    border-color: #d6ccbc;
}

body.theme-light .secondary-action,
body.theme-light .delivery-tab,
body.theme-light .summary-icon,
body.theme-light .checkbox-filter,
body.theme-light .staff-live-card,
body.theme-light .shift-coverage-row,
body.theme-light .commissioner-child-list article,
body.theme-light .department-bank-grid article,
body.theme-light .transaction-detail-grid article,
body.theme-light .transaction-log-list li,
body.theme-light .performance-card,
body.theme-light .dashboard-site-activity-row,
body.theme-light .dashboard-department-activity-row,
body.theme-light .dashboard-activity-row,
body.theme-light .dashboard-risk-row,
body.theme-light .dashboard-mini-stats div,
body.theme-light .dashboard-balance-list div,
body.theme-light .withdrawal-active-assignment-item,
body.theme-light .crypto-wallet-meta span {
    background: #f4efe5;
    border-color: #d6ccbc;
}

body.theme-light .withdrawal-assignment-choice-button {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08));
    border-color: #bfdbfe;
    color: var(--text-main);
}

body.theme-light .withdrawal-assignment-choice-button[data-show-withdrawal-assignment="direct"] {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(5, 150, 105, 0.08));
    border-color: #86efac;
}

body.theme-light .withdrawal-assignment-choice-button[data-show-withdrawal-assignment="partial"] {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.16), rgba(245, 158, 11, 0.09));
    border-color: #fdba74;
}

body.theme-light .withdrawal-manage-summary [data-withdrawal-manage-total] {
    color: #102033;
}

body.theme-light .transactions-table td,
body.theme-light .delivery-table td,
body.theme-light .management-table td,
body.theme-light .sites-table td {
    background: #fff7ea;
    border-color: #d6ccbc;
}

body.theme-light .transactions-table tbody tr:hover td,
body.theme-light .delivery-table tbody tr:hover td,
body.theme-light .management-table tbody tr:hover td,
body.theme-light .sites-table tbody tr:hover td {
    background: #f2eadc;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-pending td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-pending td {
    background: #ffedd5;
    border-color: #fdba74;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-approved td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-approved td {
    background: #dcfce7;
    border-color: #86efac;
}

body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-assigned td {
    background: #dbeafe;
    border-color: #93c5fd;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-failed td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-failed td {
    background: #fee2e2;
    border-color: #fca5a5;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-pending:hover td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-pending:hover td {
    background: #fed7aa;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-approved:hover td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-approved:hover td {
    background: #bbf7d0;
}

body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-assigned:hover td {
    background: #bfdbfe;
}

body.theme-light .investments-page .transactions-table tbody tr.transaction-row-failed:hover td,
body.theme-light .withdrawals-page .transactions-table tbody tr.transaction-row-failed:hover td {
    background: #fecaca;
}

body.theme-light .site-status-switch.is-active,
body.theme-light .site-status-toggle.is-active {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}

body.theme-light .site-status-switch.is-active .site-status-switch-icon,
body.theme-light .site-status-toggle.is-active .site-status-toggle-icon {
    background: #16a34a;
    color: #ffffff;
}

body.theme-light .site-status-switch.is-passive,
body.theme-light .site-status-toggle.is-passive {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

body.theme-light .site-status-switch.is-passive .site-status-switch-icon,
body.theme-light .site-status-toggle.is-passive .site-status-toggle-icon {
    background: #dc2626;
    color: #ffffff;
}

body.theme-light .status-pending {
    background: #fef3c7;
    color: #78350f;
}

body.theme-light .status-processing,
body.theme-light .status-assigned {
    background: #dbeafe;
    color: #1e3a8a;
}

body.theme-light .status-approved {
    background: #dcfce7;
    color: #14532d;
}

body.theme-light .status-failed,
body.theme-light .status-expired {
    background: #fee2e2;
    color: #7f1d1d;
}

body.theme-light .status-cancelled {
    background: #e7dfd2;
    color: #4b5563;
}

body.theme-light .status-active {
    background: #dcfce7;
    color: #14532d;
}

body.theme-light .status-passive {
    background: #fee2e2;
    color: #7f1d1d;
}

body.theme-light .status-suspended {
    background: #fef3c7;
    color: #78350f;
}

body.theme-light .session-state.is-active {
    color: #166534;
}

body.theme-light .session-state.is-passive {
    color: #991b1b;
}

body.theme-light .session-state.is-suspended {
    color: #92400e;
}

body.theme-light .row-actions button {
    background: #fffaf2;
    border-color: #cfc2ae;
    color: #334155;
}

body.theme-light .row-actions button:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

body.theme-light .transaction-actions .withdrawal-manage-button {
    background: #ecfdf5;
    border-color: #16a34a;
    color: #14532d;
}

body.theme-light .transaction-actions .withdrawal-manage-button:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

body.theme-light .transaction-actions .deposit-status-change-button {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

body.theme-light .transaction-actions .deposit-status-change-button:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

body.theme-light .shift-coverage-head {
    background: transparent;
    border-color: transparent;
}

body.theme-light .theme-mode-toggle.is-passive {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.28);
    color: #1646a1;
}