:root { --navy:#24384b; --blue:#245ab5; --line:#d6dee8; --muted:#526477; }
* { box-sizing:border-box; }
body { color:#203044; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
button { min-height:42px; }
button:disabled { opacity:.55; cursor:not-allowed; }
:focus-visible { outline:3px solid #e4a727; outline-offset:3px; }
[hidden] { display:none !important; }
.site-nav { background:var(--navy); color:white; padding:16px 24px; margin-bottom:24px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.site-brand { font-size:18px; font-weight:750; color:white; text-decoration:none; }
.site-links { display:flex; flex-wrap:wrap; gap:5px; flex:1; }
.site-links a { padding:9px 11px; border-radius:6px; color:#f1f5fa; text-decoration:none; font-size:14px; }
.site-links a:hover,.site-links a[aria-current="page"] { background:#405875; }
.site-links a[aria-current="page"] { box-shadow:inset 0 -3px #b7d4ff; font-weight:700; }
.site-account { display:flex; align-items:center; gap:14px; font-size:13px; }
.site-nav button { width:auto; margin:0; padding:8px 14px; background:#fff; color:var(--navy); border:0; border-radius:6px; font-weight:650; }
.ui-actions,.ui-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:18px 0; }
.ui-actions > button { width:auto; }
.ui-button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 16px; border-radius:6px; border:1px solid var(--line); background:white; color:var(--blue); text-decoration:none; font-weight:650; }
.ui-primary { background:var(--blue); color:white; border-color:var(--blue); }
.ui-back { display:inline-block; margin-bottom:14px; color:var(--blue); }
.ui-hint { color:var(--muted); font-size:14px; }
.ui-notice { padding:12px 16px; background:#eef4ff; border-left:3px solid var(--blue); margin:14px 0; }
.ui-error { color:#a51d30; font-size:14px; margin:5px 0; }
[aria-invalid="true"] { border-color:#b42338 !important; }
.ui-filters label { display:grid; gap:5px; font-weight:600; font-size:14px; margin:0; }
.ui-filters input,.ui-filters select { padding:9px; min-height:42px; border:1px solid var(--line); border-radius:6px; }
.ui-table { overflow-x:auto; width:100%; }
.ui-table table { min-width:640px; }
.ui-password { width:auto !important; font-size:13px; padding:6px 10px; background:#eaf0f7 !important; color:#24384b; margin-top:6px; }
.ui-status { display:inline-block; padding:3px 8px; border-radius:5px; background:#eaf0f7; white-space:nowrap; }
.badge-date,.badge-time { display:inline-block; }
@media(min-width:1100px) {
 body[data-page="jadwal"] { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:0 8px; align-items:start; }
 body[data-page="jadwal"] .public-nav { grid-column:1/-1; }
 body[data-page="jadwal"] .container { width:calc(100% - 24px); margin:24px auto; }
 body[data-page="jadwal"] h2 { font-size:24px; }
}
.filter-box { flex-wrap:wrap; }
.container { max-width:calc(100% - 32px); }
body[data-page="index"] .container { width:510px; margin:24px auto; }
body[data-page="rengiat"] .container { width:900px; }
body[data-page="rengiat"] .grid-ket { grid-template-columns:100px 80px minmax(0,1fr); }
body[data-page="rengiat"] .grid-ket label { font-size:14px; }
body[data-page="rengiat"] .grid-ket label small { display:block; font-weight:400; color:var(--muted); }
body[data-page="login"],body[data-page="register"] { min-height:100vh; height:auto; padding:24px 0; }
body[data-page="login"] .container,body[data-page="register"] .container { width:410px; }
@media(max-width:700px) {
 body { padding:0 !important; margin:0 !important; }
 .site-nav { padding:14px 16px; gap:12px; }
 .site-brand,.site-account { width:100%; }
 .site-links { flex-basis:100%; }
 .site-links a { padding:9px; }
 .site-account { justify-content:space-between; }
 .container { margin:16px auto !important; padding:16px !important; }
 .header { margin:16px; }
 h2 { font-size:22px; }
 .card { padding:16px !important; }
 .grid-3 { grid-template-columns:1fr !important; gap:6px !important; }
 .rincian-grid { grid-template-columns:1fr !important; gap:0 !important; }
 .ui-filters > label { width:100%; }
 .ui-actions > * { flex:1 1 auto; }
 .filter-box #exportFormat { margin-left:0 !important; }
 .btn-tambah { float:none !important; margin-bottom:16px; }
 .public-nav { flex-wrap:wrap; gap:12px; }
}