* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:"Segoe UI",Arial,sans-serif;
    background:#f3f5f4;
    color:#1e2924
}

a {
    text-decoration:none;
    color:inherit
}

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

.sidebar {
    width:250px;
    background:#173a2d;
    color:#fff;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    z-index:100
}

.brand {
    height:76px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    border-bottom:1px solid rgba(255,255,255,.08)
}

.brand-logo {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#d7a643;
    color:#173a2d;
    font-weight:900
}

.brand-title {
    font-size:15px;
    font-weight:700
}

.brand-subtitle {
    font-size:10px;
    color:rgba(255,255,255,.5);
    margin-top:3px
}

.nav {
    flex:1;
    padding:18px 12px;
    overflow:auto
}

.nav-label {
    font-size:10px;
    color:rgba(255,255,255,.35);
    text-transform:uppercase;
    letter-spacing:1px;
    padding:12px 12px 8px
}

.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    margin-bottom:5px;
    border-radius:9px;
    color:rgba(255,255,255,.72);
    font-size:13px
}

.nav-item:hover,.nav-item.active {
    background:rgba(215,166,67,.14);
    color:#f2d687
}

.nav-icon {
    width:24px;
    text-align:center
}

.sidebar-user {
    padding:15px 18px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    gap:10px;
    align-items:center
}

.avatar {
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#275d48;
    font-size:12px;
    font-weight:700
}

.user-name {
    font-size:12px;
    font-weight:600
}

.user-role {
    font-size:10px;
    color:rgba(255,255,255,.45)
}

.main {
    width:calc(100% - 250px);
    margin-left:250px
}

.topbar {
    height:76px;
    background:#fff;
    border-bottom:1px solid #e2e7e4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    position:sticky;
    top:0;
    z-index:50
}

.page-title h1 {
    font-size:19px;
    margin:0
}

.page-title p {
    font-size:11px;
    color:#78827d;
    margin:4px 0 0
}

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

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 15px;
    border-radius:9px;
    border:1px solid #dfe5e2;
    background:#fff;
    color:#425048;
    cursor:pointer;
    font-weight:600
}

.btn-primary {
    background:#1f4d3a;
    color:#fff;
    border-color:#1f4d3a
}

.btn-danger {
    background:#fff0f0;
    color:#a23b3b;
    border-color:#efd1d1
}

.content {
    padding:26px 30px 40px;
    max-width:1700px;
    margin:auto
}

.stats {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin-bottom:24px
}

.stat-card,.panel {
    background:#fff;
    border:1px solid #e2e7e4;
    border-radius:13px
}

.stat-card {
    padding:17px
}

.stat-title {
    font-size:11px;
    color:#78827d
}

.stat-value {
    font-size:27px;
    font-weight:700;
    margin-top:9px
}

.stat-note {
    font-size:10px;
    color:#78827d;
    margin-top:4px
}

.panel {
    margin-bottom:20px
}

.panel-header {
    padding:17px 19px;
    border-bottom:1px solid #e2e7e4;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.panel-title {
    font-size:14px;
    font-weight:700
}

.panel-sub {
    font-size:10px;
    color:#78827d;
    margin-top:3px
}

.panel-body {
    padding:18px
}

.process-flow {
    padding:22px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px
}

.process-card {
    border:1px solid #e2e7e4;
    border-radius:11px;
    padding:15px;
    min-height:125px
}

.process-card h3 {
    font-size:13px;
    margin:15px 0 5px
}

.process-card p {
    font-size:10px;
    color:#78827d;
    line-height:1.5
}

.process-number {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#edf3f0;
    color:#1f4d3a;
    font-size:11px;
    font-weight:800
}

.process-count {
    font-size:11px;
    color:#56625c;
    margin-top:12px
}

.process-count strong {
    font-size:19px;
    color:#1e2924
}

.grid-2 {
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:20px
}

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

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

.field label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:7px
}

.input,select,textarea {
    width:100%;
    min-height:42px;
    border:1px solid #d9dfdc;
    border-radius:9px;
    padding:9px 11px;
    background:#fafbfa;
    color:#1e2924
}

.input:focus,select:focus,textarea:focus {
    outline:none;
    border-color:#1f4d3a;
    box-shadow:0 0 0 3px rgba(31,77,58,.08);
    background:#fff
}

textarea {
    min-height:90px
}

.actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:18px
}

.table-wrap {
    overflow:auto
}

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

th {
    text-align:left;
    font-size:10px;
    color:#78827d;
    font-weight:600;
    padding:11px 15px;
    border-bottom:1px solid #e2e7e4;
    background:#fafbfa
}

td {
    padding:12px 15px;
    border-bottom:1px solid #eef1ef;
    font-size:11px
}

.badge {
    display:inline-block;
    padding:5px 8px;
    border-radius:20px;
    font-size:9px;
    font-weight:600
}

.badge-success {
    background:#e9f6ee;
    color:#28744a
}

.badge-warning {
    background:#fff3d8;
    color:#a76b0c
}

.badge-info {
    background:#eaf2f9;
    color:#376b98
}

.badge-danger {
    background:#fbecec;
    color:#a33d3d
}

.alert {
    padding:12px 14px;
    border-radius:9px;
    margin-bottom:15px;
    font-size:12px
}

.alert-success {
    background:#edf8f1;
    color:#24603f;
    border:1px solid #cae8d5
}

.alert-danger {
    background:#fff1f1;
    color:#942c2c;
    border:1px solid #f1cccc
}

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

.search {
    max-width:360px
}

.check-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px
}

.check-item {
    border:1px solid #e2e7e4;
    padding:10px;
    border-radius:8px;
    font-size:11px
}

.muted {
    color:#78827d
}

.login-page {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr
}

.login-visual {
    background:linear-gradient(135deg,rgba(17,48,37,.97),rgba(29,80,59,.9));
    color:#fff;
    padding:48px 60px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.login-hero h1 {
    font-size:56px;
    line-height:1.03;
    margin:0;
    max-width:600px
}

.login-hero p {
    color:rgba(255,255,255,.67);
    line-height:1.7;
    max-width:520px
}

.login-side {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:45px
}

.login-box {
    width:100%;
    max-width:410px
}

.login-box h2 {
    font-size:32px;
    margin-bottom:8px
}

.login-box .sub {
    color:#78827d;
    font-size:13px;
    line-height:1.6;
    margin-bottom:28px
}

.login-logo {
    display:flex;
    gap:12px;
    align-items:center
}

.login-process {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:28px
}

.login-process span {
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:rgba(255,255,255,.06);
    font-size:12px
}

.login-btn {
    width:100%;
    height:50px;
    margin-top:10px
}

.mobile-toggle {
    display:none
}

@media(max-width:1000px) {
    .stats {
        grid-template-columns:repeat(3,1fr)
    }

    .process-flow {
        grid-template-columns:repeat(3,1fr)
    }

    .grid-2 {
        grid-template-columns:1fr
    }

}

@media(max-width:800px) {
    .sidebar {
        transform:translateX(-100%)
    }

    .sidebar.open {
        transform:translateX(0)
    }

    .main {
        width:100%;
        margin-left:0
    }

    .mobile-toggle {
        display:inline-flex
    }

    .login-page {
        grid-template-columns:1fr
    }

    .login-visual {
        display:none
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .check-list {
        grid-template-columns:1fr 1fr
    }

}

@media(max-width:600px) {
    .content {
        padding:18px 14px
    }

    .topbar {
        padding:0 14px
    }

    .stats {
        grid-template-columns:1fr 1fr
    }

    .process-flow {
        grid-template-columns:1fr
    }

    .check-list {
        grid-template-columns:1fr
    }

}