:root { --ink:#192b34; --muted:#65747a; --line:#e4e9e8; --accent:#c95100; --brand-orange:#f57612; --page:#f6f8f7; }
body { color:var(--ink); background:var(--page); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-header { position:relative; z-index:10; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; flex-direction:column; align-items:flex-start; gap:.1rem; color:var(--ink); text-decoration:none; line-height:1.12; flex-shrink:0; }
.brand-logo { display:block; width:172px; height:auto; max-width:100%; }
.brand-subtitle { display:block; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.02em; }
.login-card .brand-logo { width:198px; }
.nav-link { color:var(--ink); font-size:.88rem; text-decoration:none; }.nav-link:hover { color:var(--accent); }
.desktop-nav { display:flex; align-items:center; gap:.7rem; white-space:nowrap; }
.mobile-menu { display:none; position:relative; }
.menu-toggle { list-style:none; cursor:pointer; padding:.5rem .75rem; border:1px solid var(--line); border-radius:.5rem; font-weight:700; color:var(--ink); }
.menu-toggle::-webkit-details-marker { display:none; }
.menu-toggle:focus-visible,.mobile-nav .nav-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mobile-nav { position:absolute; right:0; top:calc(100% + .5rem); width:min(19rem,calc(100vw - 1.5rem)); max-height:calc(100dvh - 5rem); overflow-y:auto; display:grid; gap:.1rem; padding:.6rem; background:#fff; border:1px solid var(--line); border-radius:.75rem; box-shadow:0 14px 35px rgba(25,43,52,.16); }
.mobile-nav .nav-link { display:block; padding:.55rem .65rem; border-radius:.4rem; white-space:normal; }
.mobile-nav .nav-link:hover { background:#fff3e8; }
.mobile-nav form { padding:.5rem .3rem .2rem; border-top:1px solid var(--line); }
.eyebrow { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.13em; }
.summary-card,.calendar-card,.panel,.login-card { background:#fff; border:1px solid var(--line); border-radius:1rem; box-shadow:0 7px 22px rgba(25,43,52,.035); }
.summary-card { min-height:134px; padding:1.35rem 1.5rem; display:flex; flex-direction:column; }.summary-card span { color:var(--muted); font-size:.84rem; }.summary-card strong { font-size:1.75rem; margin:.35rem 0; }.summary-card small { color:var(--muted); }.apply-card { background:#ecf5f3; border-color:#cce1dc; }.apply-card strong { font-size:1.1rem; margin-top:.65rem; }
.calendar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.calendar-card { padding:1rem; min-width:0; }
.fc { --fc-border-color:#e8eeec; --fc-today-bg-color:#eaf6f3; font-size:.76rem; }.fc .fc-toolbar-title { font-size:1rem; font-weight:700; }.fc .fc-toolbar.fc-header-toolbar { margin-bottom:.75rem; }.fc .fc-daygrid-day-number { color:var(--ink); text-decoration:none; }.fc .fc-col-header-cell-cushion { color:var(--muted); text-decoration:none; font-weight:600; }.fc .fc-daygrid-event { white-space:nowrap; border:0; background:#dcece8; color:#23594f; border-radius:.3rem; padding:1px 3px; font-size:.7rem; }.fc .fc-daygrid-more-link { color:var(--accent); font-weight:700; }.fc .fc-bg-event.public-holiday { background:#f5dfaa; opacity:.48; }.fc .fc-daygrid-day-frame { min-height:5.5rem; cursor:pointer; }.fc .fc-day-other { background:#fbfcfc; }
.fc .fc-daygrid-event.approved-leave .fc-event-main { color:#15473e; }
.fc .fc-bg-event.public-holiday { background:#fff0c4; opacity:1; }
.fc .fc-bg-event.public-holiday .fc-event-title { display:none; }
.day-dialog { width:min(420px,calc(100vw - 2rem)); border:1px solid var(--line); border-radius:1rem; box-shadow:0 20px 60px rgba(25,43,52,.2); padding:1.5rem; }.day-dialog::backdrop { background:rgba(18,35,40,.48); }
.panel { padding:1.5rem; }.login-shell { min-height:100vh; display:grid; place-items:center; padding:1rem; }.login-card { width:min(100%,430px); padding:2rem; }.btn-primary { --bs-btn-color:var(--ink); --bs-btn-bg:var(--brand-orange); --bs-btn-border-color:var(--brand-orange); --bs-btn-hover-color:var(--ink); --bs-btn-hover-bg:#e9710e; --bs-btn-hover-border-color:#e9710e; --bs-btn-active-color:var(--ink); --bs-btn-active-bg:#e9710e; --bs-btn-active-border-color:#e9710e; --bs-btn-disabled-color:var(--ink); --bs-btn-disabled-bg:var(--brand-orange); --bs-btn-disabled-border-color:var(--brand-orange); --bs-btn-focus-shadow-rgb:245,118,18; }.btn-outline-primary { --bs-btn-color:var(--accent); --bs-btn-border-color:var(--brand-orange); --bs-btn-hover-color:var(--ink); --bs-btn-hover-bg:var(--brand-orange); --bs-btn-hover-border-color:var(--brand-orange); --bs-btn-active-color:var(--ink); --bs-btn-active-bg:var(--brand-orange); --bs-btn-active-border-color:var(--brand-orange); --bs-btn-focus-shadow-rgb:245,118,18; }.status { border-radius:100px; padding:.25rem .55rem; font-size:.75rem; font-weight:600; }.status-active { color:#17613d; background:#e3f3e9; }.status-inactive { color:#7b4e10; background:#fff1d8; }
@media (max-width:1000px) { .calendar-grid { grid-template-columns:1fr; } }.table td,.table th { white-space:nowrap; }
@media (max-width:600px) { .fc { font-size:.7rem; }.fc .fc-daygrid-day-frame { min-height:4.1rem; }.fc .fc-daygrid-event { font-size:.64rem; }.calendar-card { padding:.6rem; }.site-header .brand-logo { width:150px; }.site-header .brand-subtitle { font-size:.64rem; }.site-header .nav-link { font-size:.76rem; } }
.status-pending { color:#795617; background:#fff1d5; }.status-approved { color:#17613d; background:#e3f3e9; }.status-rejected,.status-cancelled { color:#864545; background:#fbe9e9; }
.form-panel { max-width:700px; }.preview-box { padding:.9rem 1rem; background:#edf5f2; border:1px solid #cbe1db; border-radius:.6rem; color:#205c50; font-weight:700; }.preview-box.preview-error { color:#884b32; background:#fff0e7; border-color:#f0d0c0; }.reason-box { background:#f7f9f8; padding:.8rem; border-radius:.55rem; white-space:normal; }
.day-choice { padding:.25rem .45rem; border:1px solid var(--line); border-radius:.4rem; }
@media (max-width:1399px) { .desktop-nav { display:none; }.mobile-menu { display:block; } }