/* =====================================================================
   SiTeman 2.0 — lapisan tema portal pegawai (dimuat SETELAH mobile.css & calendar.css).
   Hanya tampilan; kelas HTML tidak berubah. TANPA animasi opacity (lihat CLAUDE.md).
   ===================================================================== */
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{--navy:#0B2A4D;--navy-deep:#071A33;--navy-soft:#123C66;--sky:#00A0EC;--surface:#F2F6FA;--line:#E3ECF4}
body{font-family:"Plus Jakarta Sans",Inter,"Segoe UI",system-ui,sans-serif;word-spacing:.06em;background:#0B2A4D}
h1,h2,h3{font-weight:750;letter-spacing:-.015em}

/* kerangka & header navy */
.mobile-shell{background:radial-gradient(500px 260px at 100% 0,rgba(0,160,236,.10),transparent 70%),var(--surface)}
.mobile-header{background:linear-gradient(160deg,var(--navy-soft),var(--navy-deep));border-bottom:0;border-radius:0 0 24px 24px;box-shadow:0 10px 28px rgba(7,26,51,.25);padding:14px 20px 16px}
.mobile-header strong{color:var(--accent)}
.mobile-header small{color:rgba(255,255,255,.7)}
.mobile-header .siteman-logo{height:54px}

/* hero */
.mobile-hero{border-radius:24px;background:radial-gradient(260px 180px at 100% 0,rgba(0,160,236,.35),transparent 70%),radial-gradient(200px 160px at 0 100%,rgba(252,204,16,.16),transparent 70%),linear-gradient(150deg,var(--navy-soft),var(--navy-deep));box-shadow:0 16px 36px rgba(7,26,51,.25)}
.mobile-hero::before{background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px}
.mobile-hero p,.mobile-hero small,.mobile-hero span{color:rgba(255,255,255,.7)}
.mobile-avatar{border-radius:50%;background:var(--accent);color:var(--navy-deep)!important;border:0;box-shadow:0 0 0 3px rgba(255,255,255,.18)}

/* panel */
.panel{border:0;border-radius:22px;box-shadow:0 1px 2px rgba(11,42,77,.04),0 8px 22px rgba(11,42,77,.06)}
.panel-heading{border-bottom:1px dashed #D3E4F2}
.panel-heading::after{display:none}
.page-heading h1{padding-left:0;font-size:26px;font-weight:800}
.page-heading h1::before{display:none}
.clock-status{background:var(--navy);border-radius:18px}
.clock-status>div+div{border-left-color:rgba(255,255,255,.12)}
.clock-status small{color:rgba(255,255,255,.6)}.clock-status strong{color:#fff}

/* tombol */
.button{border-radius:999px;font-weight:700;box-shadow:none}
.button.primary{background:var(--navy);border-color:var(--navy);box-shadow:0 10px 22px rgba(11,42,77,.24)}
.button.primary:hover{background:var(--primary);border-color:var(--primary)}
.button.small{border-radius:999px}

/* grid modul: ikon solid */
.module-grid span{border-radius:16px;background:var(--sky);color:#fff;box-shadow:0 8px 16px rgba(0,160,236,.22)}
.module-grid a:nth-child(3n+2) span{background:var(--accent);color:var(--navy-deep);box-shadow:0 8px 16px rgba(252,204,16,.25)}
.module-grid a:nth-child(3n) span{background:var(--navy);color:var(--accent);box-shadow:0 8px 16px rgba(11,42,77,.22)}

/* form */
input,textarea,select{border-radius:14px;background:#F5F9FC;border-color:var(--line)}
input:focus,textarea:focus,select:focus{background:#fff;border-color:var(--sky);box-shadow:0 0 0 4px rgba(0,160,236,.14)}

/* navigasi bawah: pil navy, item aktif lingkaran kuning */
.mobile-bottom::before{border-radius:999px;background:linear-gradient(150deg,var(--navy-soft),var(--navy-deep));box-shadow:0 16px 34px rgba(7,26,51,.38)}
.mobile-bottom a{color:rgba(255,255,255,.62)}
.mobile-bottom a.active{color:var(--accent)}
.mobile-bottom a.active i{background:var(--accent);color:var(--navy-deep);box-shadow:0 0 0 7px var(--surface),0 10px 20px rgba(252,204,16,.35)}

/* tabel & lain-lain */
th{background:#fff;color:#7C8DA3}
.pager-nav button.is-current{background:var(--navy);border-color:var(--navy)}
.calendar-day.today{border-color:var(--sky)}
.badge{font-weight:700}
.alert{border-radius:16px}

/* login: navy penuh */
body:has(.mobile-login) .mobile-shell{background:radial-gradient(400px 300px at 0 0,rgba(0,160,236,.25),transparent 70%),radial-gradient(400px 300px at 100% 100%,rgba(252,204,16,.14),transparent 70%),linear-gradient(160deg,var(--navy-soft),var(--navy-deep))}
body:has(.mobile-login) .mobile-header{box-shadow:none;background:transparent}
.mobile-login h1{color:#fff}.mobile-login>p,.mobile-login .muted{color:rgba(255,255,255,.7)}
.mobile-login form{padding:22px;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mobile-login .text-link{color:var(--accent)}
.login-symbol{border-radius:20px;background:var(--accent);color:var(--navy-deep)}