:root {
    --bg: #f4f6f8;
    --card: #fff;
    --text: #20262e;
    --muted: #66707a;
    --border: #d9dee3;
    --primary: #2457a7;
    --danger: #b42318;
    --success: #177245;
    --warning: #8a5a00;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}
a { color: var(--primary); }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px max(20px, calc((100vw - 1200px) / 2 + 18px));
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(217,222,227,.85);
    box-shadow: 0 8px 30px rgba(23,32,51,.06);
    backdrop-filter: blur(14px);
}
.brand a { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:-.2px; }
.brand-mark {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border-radius:11px;
    background:linear-gradient(135deg,#2457a7,#6c45c7);
    color:#fff;
    font-size:12px;
    letter-spacing:.5px;
    box-shadow:0 6px 15px rgba(36,87,167,.25);
}
.topbar nav { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.topbar nav a {
    position:relative;
    padding:9px 12px;
    border-radius:999px;
    color:#4f5b68;
    text-decoration:none;
    font-size:13px;
    font-weight:650;
    transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.topbar nav a:hover { background:#edf2f8; color:#183e76; transform:translateY(-1px); }
.topbar nav a.active { background:#e6eefb; color:#173d72; }
.topbar nav a.nav-primary {
    background:linear-gradient(135deg,#2457a7,#477fd2);
    color:#fff;
    box-shadow:0 5px 14px rgba(36,87,167,.2);
}
.topbar nav a.nav-primary:hover { background:linear-gradient(135deg,#1d4b94,#3d71c0); color:#fff; }
.topbar nav a.nav-logout { color:#9b2c24; }
.topbar nav a.nav-logout:hover { background:#fff0ef; color:#84211a; }
.nav-toggle { display:none; width:44px; height:42px; padding:9px; background:#edf2f8; }
.nav-toggle span { display:block; width:22px; height:2px; margin:4px auto; border-radius:2px; background:#263442; transition:transform .2s ease,opacity .2s ease; }
.page { max-width: 1200px; margin: 0 auto; padding: 18px; }
h1 { margin-top: 0; font-size: clamp(24px, 4vw, 34px); }
h2 { margin-top: 0; }

.panel, .auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}
.auth-card { max-width: 460px; margin: 30px auto; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.action-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    color: var(--text);
}
.action-card strong { display: block; margin-bottom: 4px; }
.action-card span { color: var(--muted); font-size: 14px; }

label { display: block; font-weight: 600; margin-bottom: 14px; }
label small, small { font-weight: 400; color: var(--muted); }
input, select, textarea, button {
    font: inherit;
}
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
    width: 100%;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid #bcc4cc;
    border-radius: 8px;
    background: #fff;
}
textarea { resize: vertical; }
button, .button {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 10px 15px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
button.secondary, .button.secondary { background: #5f6b78; }
button.danger, .button.danger { background: var(--danger); }
button.success, .button.success { background: var(--success); }

.form-grid, .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.date-summary {
    align-self: start;
    padding: 11px 13px;
    border: 1px solid #c9d8f0;
    border-radius: 8px;
    background: #eef5ff;
    color: #173d72;
}
.detail-grid > div {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.detail-grid span { display:block; color:var(--muted); font-size:13px; margin-bottom:3px; }
.checkline { font-weight: 400; display:flex; gap:8px; align-items:flex-start; }
.checkline input { margin-top:4px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

.flash, .warning-box, .info-box {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.flash.error { background:#fff0ef; color:#7a271a; border:1px solid #f4c7c3; }
.flash.success { background:#ecfdf3; color:#075e3b; border:1px solid #b7ebcd; }
.warning-box { background:#fff8e5; color:#704b00; border:1px solid #ecd89b; }
.info-box { background:#eef5ff; border:1px solid #c9d8f0; }
.hidden { display:none !important; }

.request-list { display:flex; flex-direction:column; }
.request-row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--border);
    text-decoration:none;
    color:var(--text);
}
.request-row:last-child { border-bottom:0; }

.status { display:inline-block; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:700; }
.status-pending { background:#fff3cd; color:#694c00; }
.status-approved { background:#dff5e8; color:#115b35; }
.status-declined { background:#fde2e0; color:#84211a; }
.status-cancelled { background:#e9ecef; color:#495057; }

.internal-note { background:#fff8e5; border:1px solid #ecd89b; border-radius:8px; padding:12px; }
.preserve { white-space:pre-wrap; }
.doc-list { padding-left:20px; }
.document-upload { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.document-upload .form-result { margin-top:10px; }
.extension-box {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:18px 0;
    padding:16px;
    border:1px solid #c9d8f0;
    border-radius:10px;
    background:#eef5ff;
}
.extension-box p { margin:4px 0 0; color:var(--muted); }
.extension-box form { flex:0 0 auto; }
.extension-box .form-result { margin-top:8px; max-width:240px; }

.calendar-controls {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.calendar-controls select { width:auto; min-width:180px; margin:0; }
.calendar-meta { margin-bottom:10px; font-weight:700; }
.calendar-panel {
    width:min(1800px, calc(100vw - 36px));
    margin-left:50%;
    transform:translateX(-50%);
}
.horizontal-calendar { overflow:auto; border:1px solid var(--border); border-radius:8px; background:#fff; }
.horizontal-calendar table { border-collapse:separate; border-spacing:0; table-layout:fixed; min-width:0; width:100%; }
.horizontal-calendar th, .horizontal-calendar td {
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    min-width:0;
    height:48px;
    text-align:center;
    padding:4px;
    background:#fff;
}
.horizontal-calendar thead th { position:sticky; top:0; z-index:4; background:#f7f9fb; }
.horizontal-calendar .sticky-name {
    position:sticky;
    left:0;
    z-index:6;
    min-width:180px;
    max-width:180px;
    width:180px;
    text-align:left;
    padding-left:10px;
    background:#fff;
}
.horizontal-calendar thead .sticky-name { z-index:8; background:#f7f9fb; }
.horizontal-calendar .sticky-name small { display:block; color:var(--muted); font-weight:400; }
.horizontal-calendar .today { background:#fff9dd; }
.leave-cell {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    border-radius:6px;
    background:#dce8f8;
    color:#173d72;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}
.loading-text { padding:20px; color:var(--muted); }

.responsive-table { overflow:auto; }
table { border-collapse:collapse; width:100%; }
td, th { border-bottom:1px solid var(--border); padding:9px; text-align:left; vertical-align:top; }
.inline-form { display:flex; gap:8px; align-items:flex-end; }
.inline-form input { margin:0; }
.simple-list { padding-left:20px; }
.code-input { font-size:28px; letter-spacing:8px; text-align:center; }

@media (max-width: 820px) {
    .horizontal-calendar table { table-layout:auto; min-width:1050px; }
    .horizontal-calendar th, .horizontal-calendar td { min-width:62px; }
}

@media (max-width: 720px) {
    .topbar { align-items:center; flex-wrap:wrap; gap:8px; padding:10px 14px; }
    .js .nav-toggle { display:block; }
    .js .topbar nav {
        display:none;
        width:100%;
        padding:8px 0 4px;
        border-top:1px solid var(--border);
        animation:menu-in .18s ease-out;
    }
    .js .topbar.nav-open nav { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .topbar nav a { padding:11px 13px; border-radius:10px; background:#f4f6f8; }
    .topbar nav a.nav-primary { grid-column:1 / -1; text-align:center; }
    .topbar.nav-open .nav-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
    .topbar.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
    .topbar.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
    .page { padding:12px; }
    .form-grid, .detail-grid { grid-template-columns:1fr; }
    .panel { padding:14px; border-radius:10px; }
    .request-row { align-items:flex-start; }
    .extension-box { align-items:flex-start; flex-direction:column; }
    .calendar-panel { width:auto; margin-left:0; transform:none; }
    .horizontal-calendar table { table-layout:auto; min-width:1050px; }
    .horizontal-calendar .sticky-name { min-width:135px; max-width:135px; width:135px; }
    .horizontal-calendar th, .horizontal-calendar td { min-width:62px; }
}

@keyframes menu-in {
    from { opacity:0; transform:translateY(-5px); }
    to { opacity:1; transform:translateY(0); }
}