:root {
    --navy:#16253b;
    --blue:#2563eb;
    --blue-pale:#eff6ff;
    --ink:#182233;
    --muted:#697586;
    --line:#e6eaf0;
    --surface:#fff;
    --canvas:#f7f8fb;
    --green:#12835b;
    --red:#cf3f48;
    --amber:#a76410
}
*
{
    box-sizing:border-box
}

body {
    margin:0;
    color:var(--ink);
    font:14px/1.45 Inter,Segoe UI,Arial,sans-serif;
    background:var(--canvas)
}

a {
    color:var(--blue);
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer
}

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

.sidebar {
    width:248px;
    background:var(--navy);
    color:#c8d1df;
    display:flex;
    flex-direction:column;
    padding:25px 14px;
    position:fixed;
    inset:0 auto 0 0;
    z-index:3
}

.brand {
    display:flex;
    align-items:center;
    gap:9px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    padding:0 10px 29px
}

.brand>span:last-child span {
    color:#79a7ff
}

.brand-mark {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:7px;
    background:#3474ee;
    font-weight:800;
    font-size:15px
}

.sidebar nav {
    display:grid;
    gap:5px
}

.sidebar nav a {
    color:#b5c0d0;
    display:flex;
    align-items:center;
    gap:13px;
    padding:11px 12px;
    border-radius:7px;
    font-weight:500
}

.sidebar nav a span {
    font-size:19px;
    width:20px;
    text-align:center
}

.sidebar nav a:hover,.sidebar nav a.active {
    background:#263850;
    color:#fff
}

.sidebar-foot {
    margin-top:auto;
    padding:14px 10px;
    border-top:1px solid #304158;
    display:flex;
    align-items:center;
    gap:10px
}

.avatar,.initials {
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#dceaff;
    color:#1e56b9;
    font-weight:700;
    width:29px;
    height:29px;
    flex:none
}

.sidebar-foot .avatar {
    background:#3f5a7c;
    color:#fff
}

.sidebar-foot small,.employee-cell small,table small {
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:400
}

.sidebar-foot small {
    color:#9cadc1
}

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

.topbar {
    height:64px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 34px
}

.menu-toggle {
    display:none
}

.text-button {
    border:0;
    background:none;
    color:#506176;
    padding:8px
}

.page-container {
    max-width:1400px;
    margin:auto;
    padding:38px 34px 56px
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:27px;
    gap:20px
}

.page-heading h1 {
    font-size:27px;
    line-height:1.15;
    margin:3px 0 7px;
    letter-spacing:-.5px
}

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

.eyebrow {
    font-size:11px!important;
    font-weight:800;
    letter-spacing:1.2px;
    color:var(--blue)!important
}

.button {
    border:1px solid transparent;
    border-radius:6px;
    padding:9px 14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    white-space:nowrap
}

.button.primary {
    background:var(--blue);
    color:white
}

.button.primary:hover {
    background:#1d55ce
}

.button.secondary {
    background:#fff;
    color:#344258;
    border-color:#d8dee8
}

.button.danger {
    border-color:#fac8cc;
    background:#fff5f5;
    color:#b72531
}

.button.small {
    font-size:12px;
    padding:7px 10px;
    background:#eff5ff;
    border-color:#cfe0ff;
    color:#2456ac
}

.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 1px 2px #15233a05
}

.panel-header {
    padding:20px 22px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.panel-header h2,.form-panel h2 {
    font-size:16px;
    margin:0 0 3px
}

.panel-header p {
    margin:0;
    color:var(--muted);
    font-size:13px
}

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

.stat-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:19px;
    display:flex;
    gap:15px;
    border-top:3px solid var(--blue)
}

.stat-card.accent-green {
    border-top-color:var(--green)
}

.stat-card.accent-red {
    border-top-color:var(--red)
}

.stat-card.accent-amber {
    border-top-color:#e39a2e
}

.stat-icon {
    width:36px;
    height:36px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:var(--blue-pale);
    color:var(--blue);
    font-size:19px
}

.accent-green .stat-icon {
    background:#e8f7f0;
    color:var(--green)
}

.accent-red .stat-icon {
    background:#fff0f1;
    color:var(--red)
}

.accent-amber .stat-icon {
    background:#fff7e8;
    color:var(--amber)
}

.stat-card span:not(.stat-icon) {
    color:var(--muted);
    font-size:12px
}

.stat-card strong {
    font-size:26px;
    line-height:1.2;
    display:block;
    margin:2px 0
}

.stat-card small {
    color:#8b96a5;
    font-size:11px
}

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

th {
    background:#f9fafc;
    color:#758093;
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:700;
    padding:12px 18px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    white-space:nowrap
}

td {
    padding:13px 18px;
    border-bottom:1px solid var(--line);
    vertical-align:middle
}

tbody tr:last-child td {
    border-bottom:0
}

tbody tr:hover {
    background:#fcfdff
}

.employee-cell {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink)
}

.employee-cell strong,td strong {
    font-weight:650
}

.employee-cell.compact {
    gap:8px
}

.badge {
    display:inline-flex;
    padding:3px 8px;
    border-radius:12px;
    font-size:11px;
    font-weight:700;
    background:#eef2f6;
    color:#536273
}

.badge.present,.badge.active {
    background:#e8f7ef;
    color:#16734f
}

.badge.absent,.badge.inactive {
    background:#fff0f1;
    color:#bd3540
}

.badge.leave {
    background:#f1edff;
    color:#6947a3
}

.badge.late {
    background:#fff5df;
    color:#a46511
}

.row-link {
    font-weight:600;
    font-size:13px
}

.empty {
    padding:34px;
    text-align:center;
    color:var(--muted)
}

.filter-bar,.date-bar {
    padding:17px 20px;
    display:flex;
    gap:11px;
    align-items:end;
    border-bottom:1px solid var(--line)
}

.search-box {
    position:relative;
    flex:1;
    max-width:420px
}

.search-box span {
    position:absolute;
    left:12px;
    top:7px;
    font-size:19px;
    color:#718096
}

.search-box input {
    padding-left:32px
}

.filter-bar select {
    max-width:180px
}

.filter-bar input,.filter-bar select,.date-bar input,.date-bar select,.filter-grid input,.filter-grid select,input,textarea {
    border:1px solid #d5dce7;
    border-radius:6px;
    padding:9px 10px;
    background:#fff;
    width:100%;
    outline-color:#80aaf8
}

.form-panel {
    padding:25px
}

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

.form-grid label,.filter-grid label,.date-bar label,.login-form label {
    display:grid;
    gap:6px;
    color:#425167;
    font-size:13px;
    font-weight:600
}

.form-grid label.wide {
    grid-column:span 2
}

em {
    font-style:normal;
    color:var(--red)
}

.form-actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:24px;
    font-weight:600
}

.field-error,.form-error {
    color:#bd3540;
    font-size:12px
}

.form-error {
    background:#fff0f1;
    padding:9px;
    border-radius:5px
}

.breadcrumb {
    margin-bottom:17px;
    color:var(--muted);
    font-size:13px
}

.breadcrumb span {
    margin:0 8px
}

.profile-header {
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:24px;
    display:flex;
    gap:17px;
    align-items:center;
    margin-bottom:20px
}

.profile-avatar {
    width:60px;
    height:60px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#e7f0ff;
    color:#245cbd;
    font-size:25px;
    font-weight:700
}

.profile-header h1 {
    margin:0 0 4px;
    font-size:23px
}

.profile-header p {
    margin:0 0 8px;
    color:var(--muted)
}

.profile-actions {
    margin-left:auto;
    display:flex;
    gap:9px
}

.profile-actions form {
    margin:0
}

.detail-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px
}

.detail-list {
    padding:4px 22px 18px;
    margin:0
}

.detail-list div {
    display:grid;
    grid-template-columns:130px 1fr;
    padding:10px 0;
    border-bottom:1px solid #eff1f4
}

.detail-list div:last-child {
    border:0
}

.detail-list dt {
    color:var(--muted);
    font-size:13px
}

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

.date-note {
    color:var(--muted);
    font-size:12px;
    align-self:center
}

.daily-table td {
    padding:9px 11px
}

.daily-table th {
    padding:12px 11px
}

.daily-table select,.daily-table input {
    padding:7px;
    width:auto;
    min-width:95px
}

.daily-table .notes-input {
    width:125px
}

.daily-table .hours {
    font-weight:600;
    white-space:nowrap
}

.filter-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    padding:20px;
    border-bottom:1px solid var(--line)
}

.filter-action {
    display:flex;
    gap:12px;
    align-items:end
}

.filter-action a {
    padding:9px 0;
    font-weight:600
}

.report-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    margin:20px 0
}

.report-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    padding:17px
}

.report-card span {
    font-size:12px;
    color:var(--muted)
}

.report-card strong {
    font-size:24px;
    display:block;
    margin-top:2px
}

.wide-report {
    background:#f4f8ff;
    border-color:#d5e3ff
}

.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:#f1f5fb
}

.login-card {
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:38px;
    width:min(410px,calc(100vw - 32px));
    box-shadow:0 12px 35px #172b4d12
}

.login-brand {
    padding:0;
    margin-bottom:34px
}

.login-card h1 {
    font-size:25px;
    margin:0 0 6px
}

.login-card>p {
    margin:0 0 24px;
    color:var(--muted)
}

.login-form {
    display:grid;
    gap:16px
}

.login-form input {
    padding:11px
}

.full {
    width:100%;
    margin-top:3px
}

.login-card>small {
    display:block;
    text-align:center;
    color:#8c97a7;
    margin-top:20px;
    font-size:11px
}

.alert {
    margin-bottom:18px;
    padding:11px 14px;
    border-radius:7px;
    font-weight:500
}

.alert.success {
    color:#137450;
    background:#eaf8f0
}

.alert.error {
    color:#b42632;
    background:#fff0f1
}

@media(max-width:1050px) {
    .stat-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .report-grid {
        grid-template-columns:repeat(3,1fr)
    }
    .filter-grid {
        grid-template-columns:repeat(3,1fr)
    }
} 

@media(max-width:760px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s
    }
    .sidebar.open {
        transform:translateX(0)
    }
    .main-content {
        margin-left:0;width:100%
    }
    .topbar {
        padding:0 18px
    }
    .menu-toggle {
        display:block;
        border:0;
        background:none;
        font-size:20px
    }
    .page-container {
        padding:26px 16px
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:20px
    }
    .stat-grid,.detail-grid,.form-grid {
        grid-template-columns:1fr
    }
    .form-grid label.wide {
        grid-column:auto
    }
    .profile-header {
        align-items:flex-start;
        flex-wrap:wrap
    }
    .profile-actions {
        margin-left:0;
        width:100%
    }
    .table-wrap {
        overflow:auto
    }
    .filter-bar,.date-bar {
        align-items:stretch;
        flex-wrap:wrap
    }
    .search-box {
        flex-basis:100%;
        max-width:none
    }
    .filter-grid {
        grid-template-columns:1fr 1fr
    }
    .report-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .wide-report {
        grid-column:span 2
    }
    .detail-list div {
        grid-template-columns:1fr;
        gap:2px
    }
} 

@media(max-width:430px) {
    .stat-grid,.filter-grid,.report-grid {
        grid-template-columns:1fr
    }
    .wide-report {
        grid-column:auto
    }
    .page-heading h1 {
        font-size:24px
    }
    .profile-actions {
        flex-direction:column
    }
    .profile-actions .button {
        width:100%
    }
}