/* ==========================================================================
   NGADIDIK — Design system
   Arah: institusional hangat (hijau tua + krem, senada identitas SAPA PAI)
   ========================================================================== */

:root {
    /* Situs ini light-only. Deklarasi eksplisit menghentikan widget native
       (date picker, scrollbar, file button) dan auto-dark browser ikut mode
       gelap OS, yang menghasilkan teks putih di latar putih. */
    color-scheme: light;

    /* Warna dasar */
    --ink: #1d2b24;            /* teks utama, hijau sangat gelap */
    --muted: #5c6b60;
    --border: #e2e0d4;
    --border-strong: #c9c6b4;

    /* Permukaan */
    --surface: #fffdf8;        /* kartu, panel */
    --bg: #f6f4ec;             /* latar halaman, krem lembut */
    --bg-deep: #edeade;        /* strip sekunder */

    /* Aksen — hijau institusi */
    --accent: #0b6e4f;
    --accent-deep: #084c37;
    --accent-soft: #e3efe7;    /* latar chip/badge */
    --accent-line: #bcd6c6;
    /* Warna header tabel: --muted (4.34) gagal AA di ujung gradient terang. */
    --th-ink: #455149;

    /* Sekunder — oranye hangat (aksen logo SAPA PAI) */
    --warm: #d97b1c;
    --warm-soft: #fdf0e2;

    --error: #b3392c;
    --error-soft: #fbe9e5;
    --error-line: #f0c4bc;

    --success: #1e6b3c;
    --success-soft: #e8f4ea;
    --success-line: #cde5d4;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-card: 0 1px 2px rgba(29, 43, 36, .05), 0 4px 14px rgba(29, 43, 36, .06);
    --shadow-pop: 0 2px 4px rgba(29, 43, 36, .08), 0 10px 28px rgba(29, 43, 36, .12);

    /* Gradasi — dipakai hemat, semua turunan palet di atas supaya tetap satu
       keluarga. Hanya di titik yang butuh bobot visual, bukan di badge/chip. */
    --accent-bright: #0f7a58;
    --grad-accent: linear-gradient(135deg, #063a2a 0%, var(--accent-deep) 40%, var(--accent) 78%, var(--accent-bright) 100%);
    --grad-warm: linear-gradient(135deg, #a8590a 0%, var(--warm) 55%, #f0a13a 100%);
    --grad-strip: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent-bright) 55%, var(--warm) 100%);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */

.site-header {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f1 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(29, 43, 36, .04);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .8rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--accent-deep);
    text-decoration: none;
    line-height: 1.2;
}

.brand img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(29, 43, 36, .2);
}

.tagline {
    color: var(--muted);
    font-size: .82rem;
    border-left: 2px solid var(--accent-line);
    padding-left: .75rem;
    line-height: 1.35;
}

main.container {
    padding-top: 2rem;
    padding-bottom: 3rem;
    min-height: 65vh;
}

.site-footer {
    background: linear-gradient(160deg, #063a2a 0%, var(--accent-deep) 45%, var(--accent) 100%);
    color: #d9e8de;
    padding: 2rem 0 2.25rem;
    margin-top: 3rem;
    font-size: .9rem;
}

.site-footer a { color: #fff; text-underline-offset: 2px; }
.site-footer .foot-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: #fff;
    margin: 0 0 .35rem;
}
.site-footer .foot-brand img { border-radius: 6px; }
.site-footer p { margin: .2rem 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 62%, #128a63 100%);
    color: #fff;
    border-radius: 16px;
    padding: 2.75rem 2.25rem 2.5rem;
    margin: 0 0 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

/* ornamen lingkaran halus, mengikuti kehangatan brand */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero::before {
    width: 340px; height: 340px;
    right: -90px; top: -140px;
    background: rgba(255, 255, 255, .07);
}
.hero::after {
    width: 220px; height: 220px;
    right: 110px; bottom: -130px;
    background: rgba(217, 123, 28, .18);
}

.hero-kicker {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fffdf8;
    background: var(--grad-warm);
    border: 1px solid rgba(253, 240, 226, .5);
    border-radius: 999px;
    padding: .25rem .8rem;
    margin: 0 0 .9rem;
}

.hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 .6rem;
    color: #fff;
    position: relative;
}

.hero p.lead {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .88);
    max-width: 620px;
    margin: 0 0 1.4rem;
    position: relative;
}

.hero .hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; position: relative; }

.hero .btn-hero {
    background: #fff;
    color: var(--accent-deep);
    font-weight: 700;
    padding: .65rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.hero .btn-hero:hover { background: var(--warm-soft); }

.hero .btn-hero-ghost {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: .65rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
}
.hero .btn-hero-ghost:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   Tipografi seksi & kartu
   -------------------------------------------------------------------------- */

h1 { font-size: 1.75rem; line-height: 1.25; color: var(--accent-deep); }
h2 { font-size: 1.25rem; color: var(--accent-deep); }

.section-title {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 2rem 0 1rem;
}
.section-title h2 { margin: 0; }
/* Batang aksen bergradasi di kiri judul seksi. */
.section-title h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-right: .55rem;
    border-radius: 2px;
    background: var(--grad-strip);
    vertical-align: -.12em;
}
.section-title a { font-size: .9rem; }

.lead { font-size: 1.08rem; color: var(--muted); max-width: 640px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
    margin: 1.25rem 0;
}

.card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

/* Strip gradasi tepi atas kartu. */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-strip);
}

.card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }

.card h3 { margin: 0 0 .2rem; font-size: 1.08rem; line-height: 1.35; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }

.card .card-meta {
    color: var(--muted);
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.card .card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

.card .card-foot { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--border); }

/* Info statis di halaman profil */
.info-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-card);
}
.info-section h2 { margin-top: 0; }

/* Tautan di dalam prosa: sebelumnya jatuh ke gaya bawaan browser. */
.info-section a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.info-section a:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }

.muted { color: var(--muted); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Badge status
   -------------------------------------------------------------------------- */

.status-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .15rem .65rem;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent-line);
}

.status-ongoing  { background: var(--warm-soft); color: #8a5200; border-color: #f0d9b4; }
.status-published { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.status-draft { background: var(--bg-deep); color: #55503f; border-color: var(--border-strong); }
.status-archived { background: var(--bg-deep); color: #55503f; border-color: var(--border-strong); }
.status-completed { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-line); }
.status-cancelled { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
/* Presensi: hadir = sukses, tidak hadir = error, belum = netral. Tanpa aturan ini
   ketiganya jatuh ke base .status-badge (mint) sehingga tak bisa dibedakan. */
.status-hadir { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.status-tidak_hadir { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.status-belum { background: var(--bg-deep); color: #55503f; border-color: var(--border-strong); }

/* --------------------------------------------------------------------------
   Form & kontrol
   -------------------------------------------------------------------------- */

label { display: block; margin-top: 1.05rem; font-weight: 600; font-size: .94rem; }

/* Semua kontrol isian (kecuali checkbox/radio) — termasuk number, datetime-local,
   dan file: sebelumnya tak ter-style sehingga tampil kecil default browser. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    margin-top: .35rem;
    background: #fff;
    color: var(--ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="file"] { padding: .5rem .7rem; cursor: pointer; }
input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    margin-right: .75rem;
    padding: .35rem .85rem;
    border: 1.5px solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-deep);
    cursor: pointer;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(11, 110, 79, .15);
}

/* FR-09.5: focus ring terlihat untuk navigasi keyboard pada elemen non-form. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

button {
    margin-top: 1.25rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: .62rem 1.5rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(8, 76, 55, .25);
    transition: background .12s ease, transform .06s ease;
}

button:hover { background: var(--accent-deep); }
button:active { transform: translateY(1px); }

.alert {
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    margin: .85rem 0;
    border: 1px solid transparent;
}

.alert-error {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error-line);
}

.alert-info {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}

/* --------------------------------------------------------------------------
   Panel halaman & meta
   -------------------------------------------------------------------------- */

.page-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf8 0%, #fcfaf3 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-card);
}

/* Strip gradasi yang sama dengan .card, supaya halaman detail sebahasa. */
.page-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-strip);
}

.meta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: 1rem 0; }
.meta dt { font-weight: 600; color: var(--muted); }
.meta dd { margin: 0; }

.description { margin-top: 1rem; }

.empty-state {
    text-align: center;
    padding: 2.75rem 1rem;
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Kode presensi & CTA
   -------------------------------------------------------------------------- */

.attendance-code {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: .14em;
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    color: var(--accent-deep);
    border-radius: var(--radius-sm);
    padding: .35rem .8rem;
    display: inline-block;
}

.consent { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.25rem; }
.consent input[type="checkbox"] { width: auto; margin-top: .4rem; accent-color: var(--accent); }

.code-input {
    font-family: var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Tab tipe konten publik */
.type-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
}

.type-tabs a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    padding: .35rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.type-tabs a:hover { color: var(--accent); border-color: var(--accent-line); }
.type-tabs a.active {
    background: var(--grad-accent);
    border-color: var(--accent);
    color: #fff;
}

.attach-title { font-size: 1.05rem; margin-top: 1.5rem; }
.attach-list { padding-left: 0; list-style: none; }
.attach-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--border);
}
.attach-list li:last-child { border-bottom: 0; }

/* Dipakai 2 view: "Konten terkait" (detail kegiatan) + "Lampiran" (detail konten).
   Sebelumnya tanpa aturan -> tampil teks polos. */
.attach-list a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--accent-soft);
    border: 1.5px solid var(--accent-line);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--accent-deep);
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.attach-list a:hover { background: rgba(8, 76, 55, .1); border-color: var(--accent); transform: translateY(-1px); }

.cta-register { margin-top: 1.5rem; }
.cta-register .btn { display: inline-block; }

.btn {
    display: inline-block;
    background: var(--grad-accent);
    color: #fff !important;
    border-radius: 999px;
    padding: .55rem 1.35rem;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    border: 0;
    box-shadow: 0 1px 2px rgba(8, 76, 55, .25);
    transition: background .12s ease;
}
.btn:hover { background: var(--accent-deep); }

/* Varian sekunder: aksi kecil/secondary (mis. "Semua kegiatan →"). */
.btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent-line);
    border-radius: 999px;
    padding: .4rem 1.05rem;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    transition: background .12s ease, border-color .12s ease;
}
.btn-ghost:hover { background: rgba(8, 76, 55, .06); border-color: var(--accent); }

/* Kembali: tombol kecil bergaya outline (bukan tautan teks polos). */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--surface);
    color: var(--accent) !important;
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    padding: .4rem 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: .88rem;
    transition: border-color .12s ease, background .12s ease;
}
.btn-back:hover { border-color: var(--accent); background: rgba(8, 76, 55, .05); }

/* Baris tautan kembali bawaan layout admin, di atas konten tiap halaman. */
.crumb-back { margin: 0 0 .9rem; }

/* FR-09.5: skip link keyboard — tersembunyi sampai fokus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent-deep);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Nav publik
   -------------------------------------------------------------------------- */

.nav-links { margin-left: auto; display: flex; gap: 1.1rem; }
.nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .94rem;
    padding: .3rem .1rem;
    border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }
.nav-links a[aria-current="page"] { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* Chip meta di kartu kegiatan (kuota, dsb.) */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .1rem .6rem;
}
.chip-full { color: var(--error); background: var(--error-soft); border-color: var(--error-line); }

/* Salin kode presensi */
.code-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copy-btn {
    margin-top: 0;
    background: transparent;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent-line);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: none;
}
.copy-btn:hover { background: var(--accent-soft); }
.copy-btn.done { color: var(--success) !important; border-color: var(--success-line); background: var(--success-soft); }

/* --------------------------------------------------------------------------
   Admin panel — satu bahasa desain dengan portal (FR-09.6)
   -------------------------------------------------------------------------- */

.admin-nav {
    display: flex;
    gap: .3rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .55rem 0;
}
.admin-nav .brand { margin-right: .6rem; }

/* Tautan nav = pill; halaman aktif ditandai, bukan garis bawah ganda. */
.admin-nav > a:not(.brand):not(.nav-logout) {
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: .92rem;
    padding: .4rem .95rem;
    border-radius: 999px;
    transition: background .12s ease, color .12s ease;
}
.admin-nav > a:not(.brand):not(.nav-logout):hover { color: var(--accent-deep); background: var(--accent-soft); }
.admin-nav > a.active { color: var(--accent-deep); background: var(--accent-soft); }

.admin-nav .nav-logout {
    display: inline-block;
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.admin-nav .nav-logout:hover { color: var(--error); border-color: var(--error-line); background: var(--error-soft); }
.admin-nav .spacer { flex: 1; }
.admin-nav .brand span { font-weight: 800; color: var(--accent-deep); }
.admin-nav .muted { font-size: .85rem; }

/* Ikon SVG inline (pengganti glyph emoji). */
.ico { display: inline-block; vertical-align: -.18em; flex-shrink: 0; }

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.admin-head h1 { margin: 0; font-size: 1.45rem; color: var(--accent-deep); }

/* Kartu statistik dasbor */
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.2rem 1.3rem 1.2rem 1.45rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad-accent);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--accent-line); }
.stat-num { font-size: 1.9rem; font-weight: 800; color: var(--accent-deep); line-height: 1.15; letter-spacing: -.01em; }
.stat-label { font-size: .85rem; color: var(--muted); }

/* Ringkasan cepat */
.admin-quick h2 { font-size: 1.05rem; color: var(--accent-deep); margin-bottom: .5rem; }

/* Dasbor: kartu kegiatan dengan bar progres */
.dash-activities h2,
.admin-quick h2 { font-size: 1.05rem; color: var(--accent-deep); margin: 1.5rem 0 .75rem; }

.dash-activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.dash-activity:hover { border-color: var(--accent-line); box-shadow: var(--shadow-pop); }
.dash-activity-main { flex: 1 1 380px; min-width: 0; }
.dash-activity-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .15rem;
}
.dash-activity-title a {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--accent-deep);
    text-decoration: none;
}
.dash-activity-title a:hover { text-decoration: underline; }
.dash-activity-meta { margin: 0 0 .6rem; font-size: .85rem; }

.dash-bars { display: grid; gap: .35rem; max-width: 480px; }
.dash-bar-row { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.dash-bar-label { width: 6.5rem; color: var(--muted); flex-shrink: 0; }
.dash-bar {
    flex: 1;
    height: .55rem;
    background: var(--border-strong);
    border-radius: 999px;
    overflow: hidden;
}
.dash-bar-fill {
    display: block;
    height: 100%;
    background: var(--grad-accent);
    border-radius: 999px;
    transition: width .25s ease;
}
.dash-bar-fill.dash-bar-success { background: var(--grad-warm); }
.dash-bar-value { color: var(--ink); font-weight: 600; white-space: nowrap; }
.dash-activity-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .6rem;
}
.quick-links a {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--ink);
    transition: border-color .12s ease, color .12s ease, transform .12s ease;
}
.quick-links a:hover { border-color: var(--accent-line); color: var(--accent); transform: translateY(-1px); }
.quick-links .ico { color: var(--accent); }

/* Empty-state: aksi jelas, bukan teks polos. */
.empty-state .empty-action { margin-top: .9rem; }
.empty-state .ico { color: var(--accent-line); }

/* Pembungkus tabel: scroll di sini, bukan di <table>. Versi lama memakai
   `display:block` pada table — itu mematikan perilaku tabel (kolom tak lagi
   sejajar, header tak lagi merekat) sehingga kolom "melar" dan tabel jadi
   sangat lebar. Sekarang tabel tetap table, pembungkus yang menggulir. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    background: var(--surface);
}

.table {
    width: 100%;
    /* `min-width: max-content` membuat lebar tabel = jumlah lebar maksimum semua
       sel, sehingga kolom teks panjang (judul kegiatan) melebar tak terbatas:
       diukur 11.200 px pada halaman Laporan. Ganti ke 100% supaya tabel mengisi
       wadah dan pembungkus .table-wrap yang menggulir saat sempit. */
    min-width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
.table th, .table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
.table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, var(--bg-deep) 0%, #e6e2d4 100%);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--th-ink);
    white-space: nowrap;
}
.table tbody tr:nth-child(even) { background: rgba(29, 43, 36, .022); }
.table tbody tr:hover { background: rgba(11, 110, 79, .05); }
.table a { color: var(--accent); font-weight: 600; text-decoration: none; }
.table a:hover { text-decoration: underline; }

/* Tombol aksi kecil (tabel admin, dasbor, filter): chip konsisten, bukan teks polos.
   Sebelumnya hanya di-scope ke .table → tautan di dasbor/filter tampil teks polos. */
.btn-sm {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent-deep) !important;
    border: 1.5px solid var(--accent-line);
    border-radius: 999px;
    padding: .35rem .9rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    margin-top: 0;
    transition: background .12s ease, border-color .12s ease;
}
.btn-sm:hover { background: rgba(8, 76, 55, .1); border-color: var(--accent); }

.btn-sm.danger {
    background: transparent;
    color: var(--error) !important;
    border-color: var(--error-line);
}
.btn-sm.danger:hover { background: var(--error-soft, #fdecea); border-color: var(--error); }

/* Form presensi inline di tabel pendaftar: satu baris rapi, kontrol sejajar
   dan tak lagi butuh inline style lebar. Kolom aksi diberi min-width supaya
   select + alasan + tombol muat sebaris (kalau tidak, form melipat 3 baris
   dan baris tabel jadi 2x tinggi). */
.table td:has(.form-presensi) { min-width: 26rem; }
.form-presensi { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.form-presensi select { width: auto; flex: 0 0 auto; margin-top: 0; font-size: .85rem; padding: .3rem .5rem; }
.form-presensi input[type="text"] { width: 12rem; max-width: 100%; flex: 1 1 12rem; margin-top: 0; font-size: .85rem; padding: .3rem .5rem; }

/* Samakan tinggi kontrol ringkas (filter & presensi tabel) supaya sebaris rapi
   dan tetap >= target sentuh WCAG 2.2 AA (24px). */
.filter-bar select,
.filter-bar input[type="text"],
.form-presensi select,
.form-presensi input[type="text"] { min-height: 34px; }

.form-presensi button {
    margin-top: 0;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    border: 0;
    cursor: pointer;
}
.form-presensi button:hover { background: var(--accent-deep); }

.form-stack { max-width: 640px; }
.form-stack button { margin-top: 1.25rem; }
.form-stack a { margin-left: 1rem; }
.form-stack input,
.form-stack select,
.form-stack textarea { width: 100%; }

.filter-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0;
}

.filter-bar select,
.filter-bar input[type="text"] { width: auto; margin-top: 0; }

.filter-bar button { margin-top: 0; }
.filter-bar .btn-sm { margin-top: 0; align-self: center; }

.pagination { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; row-gap: .4rem; }
.pagination a, .pagination strong {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--border);
}
.pagination strong { background: var(--grad-accent); color: #fff; border-color: var(--accent); }

/* Presensi alur nama: daftar peserta */
.attendee-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0;
    max-height: 340px;
    overflow-y: auto;
    display: grid;
    gap: .4rem;
}
.attendee-btn {
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .55rem .8rem;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease;
}
.attendee-btn:hover { border-color: var(--accent-line); }
.attendee-btn.selected { border-color: var(--accent); background: var(--accent-soft); }
.attendee-btn.attendee-done { opacity: .55; cursor: not-allowed; }
.badge-done {
    font-size: .72rem;
    font-weight: 700;
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid var(--success-line);
    border-radius: 999px;
    padding: .05rem .5rem;
}
.checkin-form details { margin-top: .75rem; }
.checkin-form summary { cursor: pointer; font-weight: 700; color: var(--accent-deep); margin-bottom: .5rem; }
.checkin-form hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* Login admin */
.auth-card {
    position: relative;
    overflow: hidden;
    max-width: 400px;
    margin: 3.5rem auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem;
    box-shadow: var(--shadow-pop);
}
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-strip);
}

.auth-card h1 { margin-top: 0; font-size: 1.3rem; }

.page-panel h2.panel-title {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    color: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   Aksi baris tabel & perapian kontrol admin
   -------------------------------------------------------------------------- */

/* Sel aksi: satu baris flex rapi. Form inline tak lagi saling mendorong
   sehingga tombol tak pecah baris di tengah label. */
.row-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.row-actions form { display: inline; margin: 0; }
.row-actions .btn-sm { margin: 0; }

/* Varian tombol aksi kecil: aksi maju = tegas, aksi merusak = hangat. */
.btn-sm.primary {
    background: var(--grad-accent);
    color: #fff !important;
    border-color: transparent;
}
.btn-sm.primary:hover { filter: brightness(1.08); border-color: transparent; }
.btn-sm.warn {
    background: var(--warm-soft);
    color: #8a5200 !important;
    border-color: #f0d9b4;
}
.btn-sm.warn:hover { background: #fbe3c6; border-color: var(--warm); }

/* Tag tautan ringkas: label kecil + isi, satu baris per tautan. */
.link-tag {
    display: block;
    font-size: .82rem;
    color: var(--ink);
    margin-bottom: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-tag-k {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 .45rem;
    margin-right: .35rem;
    vertical-align: 1px;
}

/* Kolom aksi: lebar minimum supaya baris ber-2 tombol (Arsipkan + Laporan +
   "Lainnya") tetap satu baris. 18rem = ambang itu; di bawahnya "Lainnya"
   terlempar ke baris kedua dan tinggi baris jadi tak seragam. */
.table td:has(.row-actions) { width: 18rem; }

/* Kolom nomor urut: cukup untuk 3 digit. Tanpa batas ini kolom "#" menyerap
   sisa lebar tabel dan mendorong kolom lain (keluhan halaman sertifikat). */
.col-no, .cell-no {
    width: 1%;
    min-width: 3.1rem;
    white-space: nowrap;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Nama orang: batas wajar supaya kolom panjang (sekolah/kecamatan) tidak
   terdesak; teks tetap utuh, sel boleh membungkus. */
.cell-person { min-width: 12rem; max-width: 20rem; }
/* Kolom deskriptif pendek: kecamatan, status, kode. */
.cell-compact { min-width: 7rem; }
/* Sel berkas/lampiran. */
.cell-src { min-width: 12rem; max-width: 18rem; }

/* Menu aksi tambahan: <details> native, tanpa JS. */
.act-more { position: relative; display: inline-block; }
.act-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    background: var(--surface);
    color: var(--ink) !important;
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    user-select: none;
}
.act-more > summary::-webkit-details-marker { display: none; }
.act-more > summary::after { content: " ▾"; font-size: .7rem; }
.act-more > summary:hover { border-color: var(--accent); color: var(--accent-deep) !important; }
.act-more[open] > summary { border-color: var(--accent); background: var(--accent-soft); }
.act-more .act-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 20;
    display: grid;
    gap: .3rem;
    min-width: 10rem;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
}
.act-more .act-menu .btn-sm { display: block; width: 100%; text-align: left; margin: 0; }

/* Sel angka/tanggal/nama berkas: jangan pecah di tengah nilai.
   Aksi hanya boleh wrap sebagai satu kesatuan, tak pernah pecah di tengah baris. */
.cell-num, .cell-date { white-space: nowrap; }
/* Catatan presensi (status + sumber + alasan koreksi) perlu lebar wajar —
   di kolom sempit teksnya pecah 7 baris dan baris tabel jadi 2x tinggi. */
.cell-att { min-width: 15rem; }
.cell-link { max-width: 18rem; }
.cell-date small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.cell-file { max-width: 20rem; }
.cell-file a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td { vertical-align: top; }

/* Grid form: banyak field pendek sejajar, bukan satu kolom bermil-mil. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .25rem 1.35rem;
    align-items: start;
}
.form-grid .span-all { grid-column: 1 / -1; }
.form-grid label { margin-top: .85rem; }

.field-hint {
    display: block;
    font-weight: 400;
    font-size: .84rem;
    color: var(--muted);
    margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .tagline { display: none; }
    .hero { padding: 2rem 1.5rem; border-radius: 12px; }
    .meta { grid-template-columns: 1fr; gap: .1rem; }
    .meta dt { margin-top: .55rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
    .page-panel { padding: 1.15rem 1.1rem; }

    /* Admin */
    .admin-nav { flex-wrap: wrap; gap: .6rem .9rem; }
    .admin-nav .muted { display: none; }
    .admin-head h1 { font-size: 1.2rem; }
    /* Tabel: biarkan pembungkus yang menggulir. `white-space: nowrap` pada
       seluruh tabel dulu membuat setiap sel selebar isinya sehingga tabel
       membengkak; kini hanya kolom angka/tanggal yang menahan satu baris. */
    .table th, .table td { padding: .5rem .55rem; }
    .cell-att { min-width: 12rem; }
    .stat-num { font-size: 1.4rem; }
    .nav-links { gap: .9rem; }
    .dash-activity-actions .btn-sm { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card, .card:hover { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Pengaturan portal & panel umum
   -------------------------------------------------------------------------- */

.panel-title {
    margin: 0 0 .35rem;
    font-size: 1.08rem;
    color: var(--accent-deep);
}

/* Pratinjau latar sertifikat: dibatasi tinggi supaya tak mendorong form ke bawah. */
.bg-preview {
    margin: .9rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-deep);
}
.bg-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.inline-form { display: inline; margin: 0; }

/* Baris filter laporan: satu baris, label kecil di atas kontrol. */
.filter-bar label { margin: 0; font-size: .82rem; color: var(--muted); font-weight: 600; }
.filter-bar .field { display: flex; flex-direction: column; gap: .2rem; }
.filter-bar input[type="search"] {
    width: 16rem;
    max-width: 100%;
}

/* Tombol dasbor di header admin: ikon saja, tapi tetap target sentuh 34px. */
.nav-dash {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.nav-dash .ico { vertical-align: -2px; }

/* Isi konten berformat (editor WYSIWYG publik). */
.rich-text { line-height: 1.75; }
.rich-text > *:first-child { margin-top: 0; }
.rich-text h2 { font-size: 1.25rem; color: var(--accent-deep); margin: 1.6rem 0 .5rem; }
.rich-text h3 { font-size: 1.1rem; color: var(--accent-deep); margin: 1.3rem 0 .4rem; }
.rich-text p { margin: .7rem 0; }
.rich-text ul, .rich-text ol { margin: .7rem 0 .7rem 1.35rem; }
.rich-text li { margin: .3rem 0; }
.rich-text blockquote {
    margin: 1rem 0;
    padding: .55rem 1rem;
    border-left: 3px solid var(--accent-line);
    background: rgba(8, 76, 55, .04);
    color: var(--ink-soft, #3d4a42);
}
.rich-text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rich-text a { color: var(--accent); font-weight: 600; }
/* Gambar mengambang: teks mengalir di sisinya. */
.rich-text img.align-left,
.rich-text img[data-align="left"] { float: left; margin: .2rem 1rem .6rem 0; max-width: 46%; }
.rich-text img.align-right,
.rich-text img[data-align="right"] { float: right; margin: .2rem 0 .6rem 1rem; max-width: 46%; }
.rich-text img.align-center,
.rich-text img[data-align="center"] { display: block; margin: .9rem auto; }
.rich-text::after { content: ""; display: table; clear: both; }

/* --------------------------------------------------------------------------
 Form pengaturan — fieldset per kelompok, tanpa card bertumpuk
 -------------------------------------------------------------------------- */

.form-card { display: block; }
.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.1rem 1.2rem 1.3rem;
    margin: 0 0 1.1rem;
    min-width: 0;
}
.form-section legend {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    padding: 0 .45rem;
}
.form-section .field { margin-bottom: .8rem; }
.form-section .field:last-child { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-row .field { margin-bottom: .8rem; }
.field-help { font-size: .8rem; color: var(--muted); margin: .1rem 0 .8rem; line-height: 1.5; }
.field-help code { font-size: .78rem; }
.form-section .check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
    margin-bottom: .9rem;
}
.form-section .check input { margin-top: .18rem; }
.empty-inline { color: var(--muted); font-size: .88rem; margin: .2rem 0 .9rem; }
.form-actions { display: flex; gap: .7rem; margin-bottom: 1.1rem; }
.btn-sm.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--border)); }
.btn-sm.danger:hover { background: color-mix(in srgb, var(--error) 8%, transparent); }

/* Kolom tabel sempit: angka/tanggal/status — jangan biarkan melebar. */
.cell-no, .cell-num, .cell-date, .cell-compact { white-space: nowrap; }
.cell-no { width: 1%; }
.cell-compact { width: 1%; }

@media (max-width: 640px) {
    .field-row { grid-template-columns: 1fr; }
}