:root {
    --green: #1f382b;
    --green-dark: #14271d;
    --gold: #d8b75d;
    --light-gold: #f0dc91;
    --cream: #f5f3ea;
    --line: #deded5;
    --muted: #66716a;
    --sidebar-width: 270px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: #17211b;
    background: #f3f5f2;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: var(--green);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(216, 183, 93, .25), transparent 28%),
        linear-gradient(135deg, #14271d, #1f382b);
}

.login-card {
    width: min(430px, 100%);
    border: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.brand-block {
    color: #fff;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
}

.btn-gold {
    color: var(--green-dark);
    border: 0;
    font-weight: 850;
    background: linear-gradient(135deg, var(--light-gold), var(--gold));
}

.btn-gold:hover,
.btn-gold:focus {
    color: #fff;
    background: var(--green);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sidebar-width);
    padding: 1rem;
    overflow-y: auto;
    color: #fff;
    background: var(--green-dark);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem .25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.sidebar-mark {
    width: 42px;
    height: 42px;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    color: var(--green-dark);
    font-weight: 950;
    background: linear-gradient(135deg, var(--light-gold), var(--gold));
}

.sidebar-title {
    font-weight: 900;
    line-height: 1.05;
}

.sidebar-subtitle {
    color: rgba(255,255,255,.65);
    font-size: .72rem;
}

.sidebar-nav {
    display: grid;
    gap: .35rem;
    margin-top: 1rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .72rem .75rem;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    border-radius: .75rem;
    font-size: .86rem;
    font-weight: 800;
}

.sidebar-link:hover,
.sidebar-link.active {
    color: var(--green-dark);
    background: linear-gradient(135deg, var(--light-gold), var(--gold));
}

.main-shell {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 68px;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(31, 56, 43, .11);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
}

.mobile-menu {
    display: none;
}

.page-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 900;
}

.page-date {
    color: var(--muted);
    font-size: .75rem;
}

.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--green-dark);
    font-weight: 950;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--light-gold), var(--gold));
}

.page-content {
    padding: 1rem;
}

.card-clean {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 39, 29, .05);
}

.stat-card {
    padding: 1rem;
}

.stat-label {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.stat-value {
    margin-top: .25rem;
    color: var(--green);
    font-size: 2rem;
    font-weight: 950;
}

.sheet-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 8px 26px rgba(20, 39, 29, .05);
}

.sheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .85rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.sheet-title {
    margin-right: auto;
    font-weight: 950;
}

.stage-tabs {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--line);
    background: #fbfcfa;
}

.stage-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: .38rem .75rem;
    color: #405048;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.stage-tab.active {
    color: #fff;
    border-color: var(--green);
    background: var(--green);
}

.filter-strip {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(145px, 1fr)) auto;
    gap: .5rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--line);
    background: #f9faf8;
}

.filter-strip .form-control,
.filter-strip .form-select,
.modal .form-control,
.modal .form-select {
    border-color: #d9ded7;
    border-radius: .55rem;
}

.table-area {
    padding: .75rem;
}

table.dataTable thead .stage-head th {
    color: #fff;
    text-align: center;
    font-size: .72rem;
    font-weight: 950;
    border: 1px solid #d9d9d9 !important;
}

.stage-head-1 {
    background: #3f3f3f !important;
}

.stage-head-2 {
    color: #111 !important;
    background: #ffd966 !important;
}

.stage-head-3 {
    color: #111 !important;
    background: #00e600 !important;
}

table.dataTable thead .column-head th {
    color: #111;
    vertical-align: middle;
    text-align: center;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    border: 1px solid #d6d6d6 !important;
    background: #f4f4f4;
}

table.dataTable thead .column-head th.stage2-col {
    background: #fff2cc !important;
}

table.dataTable tbody td {
    padding: .43rem .5rem;
    vertical-align: middle;
    font-size: .74rem;
    border-right: 1px solid #edf0eb;
    border-bottom: 1px solid #e5e9e3;
    white-space: nowrap;
}

table.dataTable tbody tr:nth-child(even) td {
    background: #fbfcfa;
}

table.dataTable tbody tr:hover td {
    background: #fff9e2;
}

.cell-link {
    color: var(--green);
    font-weight: 800;
    text-decoration: none;
}

.cell-link:hover {
    text-decoration: underline;
}

.sheet-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.action-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
}

.row-button {
    min-height: 29px;
    padding: .23rem .42rem;
    font-size: .62rem;
    font-weight: 850;
    border-radius: .45rem;
}

.modal-header {
    color: #fff;
    border-bottom: 0;
    background: var(--green);
}

.modal-title {
    font-size: 1rem;
    font-weight: 900;
}

.modal-section {
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: #fff;
}

.modal-section-title {
    margin-bottom: .7rem;
    color: var(--green);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.req-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.req-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: #fff;
    font-size: .85rem;
    font-weight: 750;
}

.toast-container {
    z-index: 2200;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .mobile-menu {
        display: inline-flex;
    }

    .main-shell {
        margin-left: 0;
    }

    .filter-strip {
        grid-template-columns: 1fr 1fr;
    }

    .filter-strip .search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .page-content {
        padding: .65rem;
    }

    .sheet-toolbar {
        padding: .7rem;
    }

    .sheet-title {
        width: 100%;
        margin-right: 0;
    }

    .filter-strip {
        grid-template-columns: 1fr;
        padding: .65rem;
    }

    .modal .form-control,
    .modal .form-select,
    .filter-strip .form-control,
    .filter-strip .form-select {
        min-height: 46px;
        font-size: 16px;
    }

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

.stage-panel { background: #fff; }