:root {
    --bg: #f6faf8;
    --bg-soft: #eef6f3;
    --surface: rgba(255, 255, 255, .90);
    --surface-2: #f8fbfa;
    --surface-solid: #ffffff;
    --border: rgba(26, 31, 46, .10);
    --border-strong: rgba(15, 110, 86, .20);
    --text: #1a1f2e;
    --muted: #6d7886;
    --primary: #1d9e75;
    --primary-strong: #0f6e56;
    --secondary: #3c3489;
    --accent: #1d9e75;
    --mint: #e1f5ee;
    --warm: #f1efe8;
    --success: #14865f;
    --warning: #bd7b12;
    --danger: #c84555;
    --info: #2c72c7;
    --shadow: 0 18px 55px rgba(31, 53, 46, .10);
    --shadow-soft: 0 8px 26px rgba(31, 53, 46, .07);
    --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 8% 0%, rgba(29, 158, 117, .12), transparent 27%),
        radial-gradient(circle at 100% 4%, rgba(60, 52, 137, .08), transparent 30%),
        linear-gradient(180deg, #fbfdfc 0%, #f4f9f7 55%, #eef6f3 100%);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(rgba(15, 110, 86, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 110, 86, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
}

a { color: var(--primary-strong); }
img { max-width: 100%; }
.container { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 52px; position: relative; z-index: 1; }

nav, .top-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 72px;
    padding: 12px max(18px, 4vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text);
    background: rgba(255, 255, 255, .84) !important;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 8px 28px rgba(32, 58, 49, .06);
}
nav h1 { margin: 0; font-size: 1.05rem; letter-spacing: .02em; color: var(--text); }
nav a { color: var(--text) !important; text-decoration: none; }
.nav-brand { display:flex; align-items:center; gap:11px; color:var(--text)!important; text-decoration:none; font-weight:850; letter-spacing:.035em; }
.nav-brand img { width:42px; height:42px; object-fit:contain; margin:0!important; filter:drop-shadow(0 8px 14px rgba(15,110,86,.12)); }
.nav-links { display:flex; align-items:center; gap:7px!important; flex-wrap:wrap; }
.nav-links a { color:#42505f!important; text-decoration:none; padding:9px 12px; border-radius:12px; transition:.2s ease; margin:0!important; font-weight:650; }
.nav-links a:hover { color:var(--primary-strong)!important; background:var(--mint); transform:translateY(-1px); }
.btn-logout { color:#a33342!important; background:#fff1f2!important; border:1px solid #f4c8ce!important; }

.card, .announcement-box, .calendar-summary, .summary-card, .unit-divider, .form-box, .calendar-wrap {
    background: rgba(255,255,255,.91) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft);
    color: var(--text) !important;
}
.card { padding: 22px; margin-bottom: 20px; }
.card h2, .card h3, .card h4 { margin-top:0; color:var(--text); }
.card p, small { color:var(--muted); }

.grid-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:16px; margin-bottom:20px; }
.stat-card {
    position:relative;
    overflow:hidden;
    min-height:132px;
    padding:22px!important;
    border-radius:var(--radius)!important;
    border:1px solid rgba(255,255,255,.48);
    color:#fff!important;
    text-align:left!important;
    text-decoration:none;
    box-shadow:0 16px 38px rgba(31,53,46,.14);
    transition:transform .2s ease, box-shadow .2s ease;
}
.stat-card::before { content:""; position:absolute; width:140px; height:140px; border-radius:50%; right:-50px; top:-60px; background:rgba(255,255,255,.14); }
.stat-card::after { content:""; position:absolute; width:75px; height:75px; border-radius:50%; right:42px; bottom:-36px; border:1px solid rgba(255,255,255,.2); }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 20px 42px rgba(31,53,46,.18); }
.stat-card h2 { font-size:2.05rem!important; margin:0 0 4px!important; position:relative; z-index:1; }
.stat-card p { margin:0; color:rgba(255,255,255,.88); position:relative; z-index:1; }
.bg-blue { background:linear-gradient(135deg,#397cc4,#3c3489)!important; }
.bg-orange { background:linear-gradient(135deg,#c78b2b,#e3aa48)!important; }
.bg-green { background:linear-gradient(135deg,#0f6e56,#1d9e75)!important; }
.bg-purple { background:linear-gradient(135deg,#3c3489,#665bbb)!important; }
.bg-dark { background:linear-gradient(135deg,#1a1f2e,#3e4b59)!important; }

.table-responsive { width:100%; overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:#fff; }
table { width:100%; border-collapse:collapse; margin:0!important; font-size:.9rem; color:var(--text); }
th, td { padding:13px 14px!important; text-align:left; border:0!important; border-bottom:1px solid rgba(26,31,46,.075)!important; vertical-align:middle; }
th { color:#627080!important; background:#f5f9f7!important; font-size:.75rem; text-transform:uppercase; letter-spacing:.055em; white-space:nowrap; }
tbody tr { transition:background .16s ease; }
tbody tr:hover { background:#f7fbf9; }
tbody tr:last-child td { border-bottom:0!important; }

label { display:block; margin:0 0 6px; color:#596675; font-size:.82rem; font-weight:720; }
input, select, textarea {
    width:100%;
    min-height:44px;
    padding:10px 12px;
    margin:0 0 12px;
    color:var(--text);
    background:#fff;
    border:1px solid rgba(26,31,46,.14);
    border-radius:12px;
    outline:none;
    box-shadow:0 1px 0 rgba(26,31,46,.02);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea { min-height:110px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:rgba(29,158,117,.72); box-shadow:0 0 0 4px rgba(29,158,117,.10); background:#fff; }
input:disabled, select:disabled, textarea:disabled { background:#f0f3f2; color:#9aa3aa; cursor:not-allowed; }
input[type="checkbox"], input[type="radio"] { width:auto; min-height:auto; margin:0; accent-color:var(--primary); }
input[type="file"] { padding:8px; }
option { background:#fff; color:var(--text); }

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:9px 15px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--text);
    background:#fff;
    text-decoration:none;
    font-weight:760;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(31,53,46,.06);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(31,53,46,.11); }
.btn:disabled, .btn.disabled { opacity:.5; pointer-events:none; }
.btn-primary { background:linear-gradient(135deg,var(--primary-strong),var(--primary))!important; color:#fff!important; }
.btn-success { background:linear-gradient(135deg,#117754,#1d9e75)!important; color:#fff!important; }
.btn-danger { background:linear-gradient(135deg,#b73748,#d75c6a)!important; color:#fff!important; }
.btn-warning { background:linear-gradient(135deg,#c98a28,#e0aa4e)!important; color:#fff!important; }
.btn-secondary { border-color:var(--border); color:#42505f; background:#fff; }
.btn-action { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }

.alert { padding:13px 15px; border-radius:14px; margin-bottom:16px; border:1px solid transparent; font-weight:600; }
.alert-success { background:#edf9f4!important; border-color:#bfe7d8; color:#116b4d!important; }
.alert-error, .alert-danger { background:#fff1f3!important; border-color:#f1c7cd; color:#a73745!important; }
.alert-warning { background:#fff8e9!important; border-color:#efd89f; color:#8f6218!important; }
.alert-info { background:#eff6ff!important; border-color:#c9ddf4; color:#2c65a5!important; }

.badge, .status-tag, .shift-badge, .status-pending, .status-disetujui, .status-ditolak, .tugas-tag, .sk-tag, .ot-tag, .lembur-tag, .telat-tag, .flat-tag, .attendance-badge {
    display:inline-flex!important;
    align-items:center;
    gap:5px;
    padding:5px 9px!important;
    border-radius:999px!important;
    font-size:.71rem!important;
    font-weight:820!important;
    text-decoration:none;
    white-space:nowrap;
}
.status-pending { color:#8b6015; background:#fff4d7; border:1px solid #f2dea7; }
.status-disetujui { color:#116b4d; background:#e9f8f1; border:1px solid #c2e9da; }
.status-ditolak { color:#a73745; background:#fff0f2; border:1px solid #f1c6cc; }
.status-hadir { color:#116b4d; background:#e9f8f1; border:1px solid #c2e9da; }
.status-belum { color:#9c6715; background:#fff6df; border:1px solid #efdaa4; }
.status-cuti { color:#2d5fa5; background:#eef5ff; border:1px solid #ccddf4; }
.status-izin { color:#704d17; background:#fff5dc; border:1px solid #efdca9; }
.status-sakit { color:#a23b57; background:#fff0f5; border:1px solid #f2cada; }
.status-dinas { color:#3c3489; background:#f1efff; border:1px solid #dad5fa; }
.status-libur { color:#5f6975; background:#f0f2f3; border:1px solid #dfe3e6; }

.announcement-box { border-left:3px solid rgba(29,158,117,.42)!important; }
.announcement-item { padding:13px 0; border-bottom:1px dashed rgba(26,31,46,.12)!important; }
.announcement-item:last-child { border-bottom:0!important; }
.announcement-item small { display:block; margin-top:8px; }

.calendar-grid-mini { background:#fbfdfc!important; border:1px solid var(--border)!important; border-radius:14px!important; }
.cal-day-mini { border:1px solid rgba(26,31,46,.08)!important; background:#fff!important; }
.cal-head-mini { color:#657181; background:#f3f8f5!important; }
.calendar-nav-btn { display:inline-flex; padding:6px 10px; border-radius:9px; text-decoration:none; color:var(--primary-strong); background:var(--mint)!important; border:1px solid #c7e9dd!important; }

.modal { display:none; position:fixed; inset:0; z-index:2000; padding:24px; overflow-y:auto; background:rgba(26,31,46,.38)!important; backdrop-filter:blur(8px); }
.modal-content { width:min(680px,100%)!important; margin:4vh auto!important; padding:24px!important; color:var(--text); background:#fff!important; border:1px solid var(--border); border-radius:var(--radius)!important; box-shadow:0 24px 70px rgba(26,31,46,.20); }
.close-btn { color:var(--muted); cursor:pointer; }

.summary-card { padding:22px!important; }
.summary-item h2 { color:var(--primary-strong)!important; }
.unit-divider { padding:16px 18px!important; border-left:3px solid rgba(29,158,117,.35)!important; }
.unit-divider h3 { color:var(--text)!important; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.page-header h1, .page-header h2 { margin:0 0 6px; }
.page-header p { margin:0; color:var(--muted); }
.section-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.metric { padding:17px; border:1px solid var(--border); border-radius:15px; background:#f8fbfa; }
.metric-label { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.metric-value { margin-top:5px; font-size:1.45rem; font-weight:850; }
.empty-state { padding:42px 20px; text-align:center; color:var(--muted); }
.text-success { color:var(--success)!important; }
.text-danger { color:var(--danger)!important; }
.text-warning { color:var(--warning)!important; }
.text-muted { color:var(--muted)!important; }

/* Shared light-theme overrides for older page-local styles. */
.form-box, .calendar-wrap { background:#fff!important; }
.calendar-day-head { color:#617080!important; background:#f3f8f5!important; }
.calendar-day { background:#fff!important; }
.empty-day { background:#f4f6f5!important; }
.day-num { color:#647181!important; }
.btn-nav { background:var(--mint)!important; border-color:#c7e9dd!important; color:var(--primary-strong)!important; }
.employee img { background:#f1f5f3!important; }

@media (max-width:820px) {
    .top-navbar, nav { align-items:flex-start; flex-direction:column; }
    .nav-links { width:100%; }
    .nav-links a { flex:1 1 auto; text-align:center; }
    .page-header { flex-direction:column; }
    .grid-form { grid-template-columns:1fr!important; }
    .full-width { grid-column:span 1!important; }
    .container { width:min(100% - 20px,1280px); padding-top:18px; }
    .card { padding:17px; }
}

@media print {
    body { background:#fff!important; color:#111!important; }
    body::before, nav, .top-navbar, .no-print { display:none!important; }
    .card { box-shadow:none!important; }
}


/* ============================================================
   CRYPICODE HRIS LIGHT APPLICATION THEME v3
   All authenticated/application pages are forced to a bright UI.
   Login page keeps its time-of-day sky animation separately.
   ============================================================ */
body.app-light {
    --bg:#f5f9f7;
    --bg-soft:#edf5f1;
    --surface:#ffffff;
    --surface-2:#f7faf9;
    --surface-solid:#ffffff;
    --border:rgba(26,31,46,.10);
    --border-strong:rgba(15,110,86,.22);
    --text:#1a1f2e;
    --muted:#667483;
    --primary:#1d9e75;
    --primary-strong:#0f6e56;
    --secondary:#3c3489;
    --success:#14865f;
    --warning:#a66c12;
    --danger:#bc3f50;
    --info:#326dac;
    color:#1a1f2e!important;
    background:linear-gradient(180deg,#fbfdfc 0%,#f4f9f7 100%)!important;
}
body.app-light::before{
    opacity:.26!important;
    background-image:linear-gradient(rgba(15,110,86,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,110,86,.025) 1px,transparent 1px)!important;
    background-size:48px 48px!important;
}
body.app-light nav,body.app-light .top-navbar{
    background:rgba(255,255,255,.94)!important;color:#1a1f2e!important;border-bottom:1px solid #e2ebe7!important;box-shadow:0 8px 24px rgba(31,53,46,.06)!important;
}
body.app-light nav a,body.app-light .nav-brand,body.app-light .nav-links a{color:#354250!important}
body.app-light .nav-links a:hover{color:#0f6e56!important;background:#e8f6f0!important}
body.app-light .card,body.app-light .announcement-box,body.app-light .calendar-summary,body.app-light .summary-card,body.app-light .unit-divider,body.app-light .form-box,body.app-light .calendar-wrap{
    background:#fff!important;color:#1a1f2e!important;border:1px solid #e1e9e5!important;box-shadow:0 8px 24px rgba(31,53,46,.055)!important;
}
body.app-light .card h1,body.app-light .card h2,body.app-light .card h3,body.app-light .card h4,body.app-light h1,body.app-light h2,body.app-light h3,body.app-light h4{color:#1a1f2e!important}
body.app-light .card p,body.app-light small,body.app-light .text-muted{color:#667483!important}
body.app-light .table-responsive{background:#fff!important;border-color:#e1e9e5!important}
body.app-light table{color:#1a1f2e!important;background:#fff!important}
body.app-light th{background:#f2f7f5!important;color:#5b6977!important;border-bottom:1px solid #dde7e2!important}
body.app-light td{background:#fff!important;color:#24303b!important;border-bottom:1px solid #edf1ef!important}
body.app-light tbody tr:hover td{background:#f8fbfa!important}
body.app-light label{color:#536170!important}
body.app-light input,body.app-light select,body.app-light textarea{background:#fff!important;color:#1a1f2e!important;border-color:#dce5e1!important;box-shadow:none!important}
body.app-light input:focus,body.app-light select:focus,body.app-light textarea:focus{background:#fff!important;border-color:#58b497!important;box-shadow:0 0 0 4px rgba(29,158,117,.09)!important}
body.app-light input:disabled,body.app-light select:disabled,body.app-light textarea:disabled{background:#f1f4f3!important;color:#929ca4!important}
body.app-light option{background:#fff!important;color:#1a1f2e!important}
body.app-light .metric{background:#f7faf9!important;border-color:#e0e8e4!important}
body.app-light .modal{background:rgba(26,31,46,.24)!important}
body.app-light .modal-content{background:#fff!important;color:#1a1f2e!important;border-color:#dfe8e4!important;box-shadow:0 28px 70px rgba(26,31,46,.16)!important}
body.app-light .calendar-grid-mini{background:#fbfdfc!important}
body.app-light .cal-day-mini,body.app-light .calendar-day{background:#fff!important;color:#26323d!important}
body.app-light .cal-head-mini,body.app-light .calendar-day-head{background:#f2f7f5!important;color:#5e6d7b!important}
body.app-light .announcement-row,body.app-light .approval-detail,body.app-light .run-item,body.app-light .slip-summary{background:#fbfdfc!important;color:#1a1f2e!important;border-color:#e1e9e5!important}
body.app-light .run-item:hover,body.app-light .run-item.active{background:#eef8f4!important;border-color:#a8d8c8!important}

/* Statistic tiles are intentionally light instead of dark/saturated. */
body.app-light .stat-card{color:#1a1f2e!important;background:#fff!important;border:1px solid #e0e8e4!important;box-shadow:0 8px 22px rgba(31,53,46,.055)!important}
body.app-light .stat-card::before{background:rgba(29,158,117,.055)!important}
body.app-light .stat-card::after{border-color:rgba(29,158,117,.10)!important}
body.app-light .stat-card h2{color:#172430!important}
body.app-light .stat-card p{color:#687584!important}
body.app-light .stat-card.bg-blue{background:linear-gradient(135deg,#f6f9ff,#edf3ff)!important;border-color:#dce6f8!important}
body.app-light .stat-card.bg-orange{background:linear-gradient(135deg,#fffaf0,#fff5df)!important;border-color:#f1e3bc!important}
body.app-light .stat-card.bg-green{background:linear-gradient(135deg,#f3fbf8,#eaf8f2)!important;border-color:#cde8de!important}
body.app-light .stat-card.bg-purple{background:linear-gradient(135deg,#f8f7ff,#f1effd)!important;border-color:#e1ddf4!important}
body.app-light .stat-card.bg-dark{background:linear-gradient(135deg,#f6f8fa,#eef2f4)!important;border-color:#dfe5e8!important}

body.app-light .btn-primary{background:linear-gradient(135deg,#0f6e56,#1d9e75)!important;color:#fff!important}
body.app-light .btn-secondary{background:#fff!important;color:#43515f!important;border-color:#dce5e1!important}
body.app-light .btn-secondary:hover{background:#f2f8f5!important;color:#0f6e56!important;border-color:#badbcf!important}
body.app-light .btn-logout{background:#fff2f3!important;color:#a33342!important;border-color:#f2cbd0!important}
body.app-light .weather-card{background:#fff!important;color:#1a1f2e!important}
body.app-light .weather-now{background:linear-gradient(145deg,#edf9f4,#f9fcfb)!important;color:#1a1f2e!important}
body.app-light .weather-desc{color:#25333e!important}
body.app-light .weather-place,body.app-light .weather-extra{color:#667483!important}

@media (max-width:820px){
    body.app-light .stat-card{min-height:108px!important;padding:17px!important}
}