:root {
--gold: #c8a75a;
--gold-deep: #a8883e;
--navy: #2c3e50;
--ink: #1a2430;
--cream: #f3eee4;
--bg: #f3eee4;
--fg: #2c3e50;
--muted: #5c6570;
--card: rgb(255 253 248 / 0.94);
--card-solid: #fffdf8;
--border: color-mix(in oklab, #2c3e50 12%, transparent);
--hadir: #2f7d4a;
--sakit: #c47a1a;
--izin: #2c3e50;
--alpa: #b42318;
--wa: #2f9e44;
--on-status: #ffffff;
--banner-fg: #ffffff;
--shadow: 0 10px 30px -18px rgb(44 62 80 / 0.28);
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--font: "Poppins", ui-sans-serif, system-ui, sans-serif;
--font-ar: "Amiri", "Times New Roman", serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--motion-fast: 180ms;
--bottom-nav: 72px;
}

html.dark {
--bg: #121820;
--fg: #f3eee4;
--ink: #fffdf8;
--navy: #d4c4a0;
--muted: #c4bba8;
--card: #1b232c;
--card-solid: #1b232c;
--border: color-mix(in oklab, #f3eee4 14%, transparent);
--hadir: #62c084;
--sakit: #e0b15a;
--izin: #9bb4c9;
--alpa: #f08078;
--wa: #51cf66;
--on-status: #1a2430;
--banner-fg: #fffdf8;
--shadow: 0 12px 32px -16px rgb(0 0 0 / 0.55);
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
-webkit-font-smoothing: antialiased;
}

body {
margin: 0;
min-height: 100dvh;
font-family: var(--font);
color: var(--fg);
background-color: #2c3e50;
background-image:
linear-gradient(
180deg,
rgb(26 36 48 / 0.3) 0%,
rgb(243 238 228 / 0.58) 32%,
rgb(243 238 228 / 0.86) 100%
),
url("img/ponpes-bg.jpg");
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

html.dark body {
background-image:
linear-gradient(180deg, rgb(12 16 22 / 0.55) 0%, rgb(18 24 32 / 0.9) 100%),
url("img/ponpes-bg.jpg");
}

button:not(:disabled),
[role="button"]:not(:disabled),
a {
cursor: pointer;
}

button,
input,
select,
textarea {
font: inherit;
color: inherit;
}

h1,
h2,
h3 {
text-wrap: balance;
letter-spacing: -0.03em;
margin: 0;
}

p {
text-wrap: pretty;
}

img {
display: block;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

.topbar {
position: sticky;
top: 0;
z-index: 30;
background: var(--gold);
color: var(--banner-fg);
box-shadow: var(--shadow);
}

.topbar-inner {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 12px 16px;
}

.brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.brand img {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: #fff;
object-fit: contain;
padding: 2px;
}

.brand strong {
display: block;
font-size: 15px;
line-height: 1.2;
}

.brand small {
display: block;
font-size: 12px;
opacity: 0.82;
}

.top-nav {
display: none;
gap: 4px;
margin-left: 8px;
}

.top-nav a {
padding: 8px 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
opacity: 0.84;
}

.top-nav a:hover,
.top-nav a.active {
background: rgb(255 255 255 / 0.2);
opacity: 1;
}

.topbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}

.select {
height: 40px;
min-width: 108px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-solid);
padding: 0 12px;
color: var(--fg);
}

.select-gold {
background: #fff;
color: #1a2430; /* Teks kelas dipaksa hitam/gelap agar tidak putih di atas putih */
border-color: rgb(255 255 255 / 0.4);
}

.icon-btn {
width: 40px;
height: 40px;
border: 1px solid rgb(255 255 255 / 0.35);
background: transparent;
color: inherit;
border-radius: 999px;
display: grid;
place-items: center;
padding: 0;
}

.icon-btn svg {
width: 18px;
height: 18px;
}

.view {
max-width: 1120px;
margin: 0 auto;
padding: 20px 16px calc(var(--bottom-nav) + 28px);
}

.hero {
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: var(--banner-fg);
border-radius: var(--radius-xl);
padding: 22px 22px 20px;
box-shadow: var(--shadow);
}

.hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgb(255 255 255 / 0.16);
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
}

.hero h1 {
margin-top: 12px;
font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
font-weight: 600;
}

.hero p {
margin: 6px 0 0;
font-size: 14px;
opacity: 0.86;
}

.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 18px;
}

.stat {
background: rgb(255 255 255 / 0.16);
border-radius: var(--radius-md);
padding: 10px 8px;
text-align: center;
}

.stat b {
display: block;
font-size: 1.25rem;
font-variant-numeric: tabular-nums;
}

.stat span {
font-size: 11px;
opacity: 0.9;
}

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0;
}

.search {
flex: 1;
min-width: 160px;
height: 44px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--card);
padding: 0 14px;
color: var(--fg);
}

/* Memastikan icon kalender tetap terlihat jika berpindah ke Dark Mode */
html.dark input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}

.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
padding: 16px;
}

.card h2 {
font-size: 1.1rem;
font-weight: 600;
}

.muted {
color: var(--muted);
font-size: 13px;
}

.row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}

.row:last-child {
border-bottom: 0;
}

.avatar {
width: 40px;
height: 40px;
border-radius: 12px;
background: color-mix(in oklab, var(--gold) 22%, var(--card-solid));
color: var(--ink);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}

html.dark .avatar {
color: var(--cream);
}

.grow {
flex: 1;
min-width: 0;
}

.grow strong {
display: block;
font-size: 14px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.grow small {
color: var(--muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.status-group {
display: flex;
gap: 4px;
flex-shrink: 0;
}

.status-btn {
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--border);
background: transparent;
font-size: 12px;
font-weight: 600;
color: var(--muted);
}

.status-btn[data-s="H"].on {
background: var(--hadir);
border-color: var(--hadir);
color: var(--on-status);
}
.status-btn[data-s="S"].on {
background: var(--sakit);
border-color: var(--sakit);
color: var(--on-status);
}
.status-btn[data-s="I"].on {
background: var(--izin);
border-color: var(--izin);
color: var(--on-status);
}
.status-btn[data-s="A"].on {
background: var(--alpa);
border-color: var(--alpa);
color: var(--on-status);
}

.note {
width: 100%;
margin-top: 6px;
height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in oklab, var(--card-solid) 70%, transparent);
padding: 0 10px;
font-size: 13px;
color: var(--fg);
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-solid);
font-weight: 600;
font-size: 14px;
}

.btn:active {
transform: scale(0.98);
}

.btn-primary {
background: var(--gold);
border-color: var(--gold);
color: var(--ink);
}

.btn-wa {
background: var(--wa);
border-color: var(--wa);
color: #fff;
}

.btn-ghost {
background: rgb(255 255 255 / 0.18);
border-color: transparent;
color: var(--banner-fg);
}

.grid-2 {
display: grid;
gap: 12px;
}

.field {
display: grid;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--muted);
}

.field input,
.field select {
height: 44px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--card-solid);
padding: 0 12px;
color: var(--fg);
font-weight: 400;
}

.overview {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}

.ov-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px;
box-shadow: var(--shadow);
}

.ov-card h3 {
font-size: 16px;
}

.ov-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}

.chip {
font-size: 12px;
font-weight: 600;
border-radius: 999px;
padding: 4px 10px;
background: color-mix(in oklab, var(--gold) 16%, var(--card-solid));
}

.chip.hadir { background: color-mix(in oklab, var(--hadir) 18%, var(--card-solid)); color: var(--hadir); }
.chip.sakit { background: color-mix(in oklab, var(--sakit) 18%, var(--card-solid)); color: var(--sakit); }
.chip.izin { background: color-mix(in oklab, var(--izin) 18%, var(--card-solid)); color: var(--izin); }
.chip.alpa { background: color-mix(in oklab, var(--alpa) 18%, var(--card-solid)); color: var(--alpa); }

.grade-input {
width: 72px;
height: 40px;
text-align: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--card-solid);
font-variant-numeric: tabular-nums;
color: var(--fg);
}

.letter {
width: 28px;
text-align: center;
font-weight: 700;
color: var(--gold-deep);
}

.bottom-nav {
position: fixed;
inset: auto 0 0;
z-index: 30;
display: grid;
grid-template-columns: repeat(5, 1fr);
background: color-mix(in oklab, var(--card-solid) 92%, transparent);
backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
}

.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 2px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
min-height: 44px;
}

.bottom-nav svg {
width: 20px;
height: 20px;
}

.bottom-nav a.active {
color: var(--ink);
}

html.dark .bottom-nav a.active {
color: var(--gold);
}

.chat-fab {
position: fixed;
right: 16px;
bottom: calc(var(--bottom-nav) + 16px);
z-index: 40;
width: 56px;
height: 56px;
border: 0;
border-radius: 999px;
background: var(--gold);
color: var(--ink);
box-shadow: var(--shadow);
display: grid;
place-items: center;
}

.chat-fab svg {
width: 24px;
height: 24px;
}

.chat-panel {
position: fixed;
z-index: 45;
left: 12px;
right: 12px;
bottom: calc(var(--bottom-nav) + 80px);
max-height: min(70dvh, 560px);
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}

.chat-panel header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}

.chat-panel header .icon-btn {
border-color: var(--border);
color: var(--fg);
}

.chat-panel small {
display: block;
color: var(--muted);
font-size: 12px;
}

.chat-log {
flex: 1;
overflow: auto;
padding: 14px;
display: grid;
gap: 10px;
}

.bubble {
max-width: 90%;
padding: 10px 12px;
border-radius: 14px;
font-size: 14px;
line-height: 1.45;
white-space: pre-wrap;
}

.bubble.bot {
background: color-mix(in oklab, var(--gold) 16%, var(--card-solid));
}

.bubble.user {
margin-left: auto;
background: var(--navy);
color: #fff;
}

html.dark .bubble.user {
background: var(--gold);
color: var(--ink);
}

.suggest {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.suggest button {
border: 1px solid var(--border);
background: transparent;
border-radius: 999px;
padding: 6px 10px;
font-size: 12px;
}

.chat-form {
display: flex;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--border);
}

.chat-form input {
flex: 1;
height: 44px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 0 12px;
background: var(--card);
}

.chat-panel[hidden] {
display: none;
}

/* Memperbaiki Modal/Pop-up Laporan WA */
.modal {
border: 0;
padding: 0;
background: transparent;
width: 100%;
max-width: min(500px, calc(100vw - 32px));
margin: auto;
}

.modal::backdrop {
background: rgb(26 36 48 / 0.65);
backdrop-filter: blur(4px);
}

.modal-card {
background: var(--card-solid);
color: var(--fg);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
padding: 24px;
display: grid;
gap: 16px;
box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.4);
}

.modal-card header {
display: flex;
align-items: center;
justify-content: space-between;
}

.modal-card header strong {
font-size: 1.15rem;
}

.modal-card header .icon-btn {
border-color: var(--border);
color: var(--fg);
}

.modal-card textarea {
width: 100%;
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 16px;
background: var(--bg);
line-height: 1.6;
resize: vertical;
font-size: 13.5px;
color: var(--fg);
}

.modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}

.toast {
position: fixed;
left: 50%;
top: 76px;
transform: translateX(-50%);
z-index: 60;
background: var(--ink);
color: #fff;
padding: 10px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow);
}

html.dark .toast {
background: var(--gold);
color: var(--ink);
}

.empty {
text-align: center;
padding: 32px 12px;
color: var(--muted);
}

.arabic {
font-family: var(--font-ar);
font-size: 1.15rem;
}

@media (min-width: 768px) {
body {
background-attachment: fixed;
}
.top-nav {
display: flex;
}
.bottom-nav {
display: none;
}
.view {
padding-bottom: 40px;
}
.chat-fab {
bottom: 24px;
right: 24px;
}
.chat-panel {
left: auto;
right: 24px;
bottom: 96px;
width: 380px;
}
.grid-2 {
grid-template-columns: 1fr 1fr;
}
.overview {
grid-template-columns: repeat(3, 1fr);
}
.hero {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-end;
justify-content: space-between;
}
}

@media (prefers-reduced-motion: reduce) {

{
transition: none !important;
animation: none !important;
}
}