/* =====================================================
   GMS Usher - tampilan mobile leader (Ketua Team/Group, Koordinator, Wakor)
   Warna & huruf mengikuti app kita: krem, oranye bata, cokelat tua, Fraunces + Inter.
   File ini dimuat SETELAH <style> bawaan tiap halaman, jadi menimpa tampilan lama
   tanpa mengubah class/ID yang dipakai JavaScript.
   ===================================================== */
:root {
    --lm-bg: #faf7f2;
    --lm-card: #ffffff;
    --lm-ink: #2b2620;
    --lm-ink-2: #3a322b;
    --lm-ink-line: #4a4038;
    --lm-soft: #6f675c;
    --lm-on-dark: #d8cfc2;
    --lm-line: #ebe5da;
    --lm-line-2: #e2dace;
    --lm-amber: #e0904f;
    --lm-amber-deep: #c96f34;
    --lm-amber-text: #a85a28;
    --lm-amber-bg: #fdf1e6;
    --lm-green: #2d8a6e;
    --lm-green-bg: #dff3ea;
    --lm-green-text: #1f6b55;
    --lm-red: #c4463a;
    --lm-red-bg: #fbe9e4;
    --lm-red-text: #a8392e;
    --lm-gray: #6f675c;
    --lm-gray-bg: #eeeae2;
    --lm-blue: #2f5bb7;
    --lm-blue-bg: #e3ebfb;
    --lm-shadow: 0 10px 30px rgba(43,38,32,.10);
}

body.lm {
    margin: 0; padding: 0;
    background: var(--lm-bg); color: var(--lm-ink);
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body.lm * { box-sizing: border-box; }
body.lm a { color: inherit; }

/* ---------- Header gelap ---------- */
.lm-head {
    background: var(--lm-ink); color: #faf7f2;
    padding: calc(16px + env(safe-area-inset-top)) 16px 20px;
    border-radius: 0 0 26px 26px;
    display: flex; flex-direction: column; gap: 16px;
    background-size: cover; background-position: center;
}
.lm-head-row { display: flex; align-items: center; gap: 12px; max-width: 560px; width: 100%; margin: 0 auto; }
.lm-head > *:not(.lm-head-row) { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; }
.lm-logo { width: 42px; height: 42px; border-radius: 12px; background: #faf7f2; flex-shrink: 0; }
.lm-icon-btn {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    background: var(--lm-ink-2); border: 1px solid var(--lm-ink-line); color: #faf7f2 !important;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.lm-head-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-head-title h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: #faf7f2; }
.lm-head-title span { font-size: 12.5px; color: var(--lm-on-dark); }

.lm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--lm-ink-2); border: 1px solid var(--lm-ink-line); border-radius: 14px; padding: 4px; }
.lm-seg a { height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--lm-on-dark) !important; text-decoration: none; }
.lm-seg a.active { background: var(--lm-amber); color: var(--lm-ink) !important; font-weight: 700; }

/* ---------- Isi halaman ---------- */
.lm-page { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(110px + env(safe-area-inset-bottom)); }
.lm-overlap { margin-top: -44px; position: relative; }

.lm-section { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 4px 10px; }
.lm-section h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; }
.lm-section a { font-size: 13px; font-weight: 600; color: var(--lm-amber-deep) !important; text-decoration: none; }
.lm-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-amber-text); }

.lm-card { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: 20px; }
.lm-card-pad { padding: 16px; }
.lm-card-raised { border: 0; box-shadow: var(--lm-shadow); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.lm-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.lm-chip-amber { background: var(--lm-amber); color: var(--lm-ink); }
.lm-chip-dark { background: var(--lm-ink-2); color: #faf7f2; border: 1px solid var(--lm-ink-line); }

.lm-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.lm-badge-green { background: var(--lm-green-bg); color: var(--lm-green-text); }
.lm-badge-amber { background: var(--lm-amber-bg); color: var(--lm-amber-text); }
.lm-badge-gray { background: var(--lm-gray-bg); color: #5c554b; }
.lm-badge-red { background: var(--lm-red); color: #fff; }

.lm-btn { height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; text-decoration: none; border: 0; font-family: inherit; cursor: pointer; padding: 0 16px; }
.lm-btn-dark { background: var(--lm-ink); color: #faf7f2 !important; }
.lm-btn-amber { background: var(--lm-amber-deep); color: #fff !important; }
.lm-btn-light { background: var(--lm-card); color: var(--lm-ink) !important; border: 1.5px solid var(--lm-line-2); }
.lm-btn-danger { background: #fdf6f4; color: var(--lm-red-text) !important; border: 1.5px solid #f0c9c2; }

.lm-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lm-kv > div { background: var(--lm-bg); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.lm-kv small { font-size: 11px; color: var(--lm-soft); }
.lm-kv strong { font-size: 14px; }

.lm-task { background: var(--lm-amber-bg); border: 1px solid #f3d7bd; border-radius: 20px; padding: 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lm-task.done { background: var(--lm-green-bg); border-color: #bfe5d4; }
.lm-task-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--lm-amber); color: var(--lm-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-task.done .lm-task-ico { background: var(--lm-green); color: #fff; }
.lm-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-task-body strong { font-size: 15px; }
.lm-task-body span { font-size: 12.5px; color: #6f5a45; }
.lm-task .lm-btn { height: 40px; padding: 0 16px; border-radius: 12px; }

.lm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.lm-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--lm-ink) !important; }
.lm-tile span:first-child { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.lm-tile span:last-child { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
.t-amber { background: #fde8d6; color: var(--lm-amber-text); }
.t-green { background: var(--lm-green-bg); color: #23705a; }
.t-blue { background: var(--lm-blue-bg); color: var(--lm-blue); }
.t-purple { background: #efe7f8; color: #6a3fa0; }
.t-teal { background: #dcf1f0; color: #1d6f6b; }
.t-pink { background: #fde8ef; color: #a83a66; }
.t-stone { background: #f1ece4; color: #5c4f40; }
.t-dark { background: var(--lm-ink); color: #faf7f2; }

.lm-list { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: 20px; padding: 4px 14px; }
.lm-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f1ece4; text-decoration: none; color: var(--lm-ink) !important; }
.lm-row:last-child { border-bottom: 0; }
.lm-row-ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-row-body strong { font-size: 15px; }
.lm-row-body span { font-size: 12.5px; color: var(--lm-soft); }
.lm-row > svg { color: #b3a99b; flex-shrink: 0; }
.lm-date { width: 50px; height: 54px; border-radius: 14px; background: var(--lm-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.lm-date small { font-size: 11px; color: var(--lm-soft); font-weight: 600; text-transform: uppercase; }
.lm-date b { font-family: 'Fraunces', Georgia, serif; font-size: 20px; }
.lm-avatar { width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.lm-empty { text-align: center; color: var(--lm-soft); font-size: 13.5px; line-height: 1.6; padding: 26px 18px; }

/* ---------- Menu bawah ---------- */
.lm-nav {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
    max-width: 536px; margin: 0 auto; height: 68px; border-radius: 22px;
    background: var(--lm-ink); box-shadow: 0 10px 30px rgba(43,38,32,.28);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center;
}
.lm-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #b3a99b !important; font-size: 11px; font-weight: 600; text-decoration: none; height: 100%; justify-content: center; }
.lm-nav a.active { color: var(--lm-amber) !important; font-weight: 700; }

/* =====================================================
   Penyesuaian elemen lama di leader_attendance.php / leader_checkin.php
   (class & ID tetap, hanya tampilannya)
   ===================================================== */
body.lm .wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(110px + env(safe-area-inset-bottom)); }
body.lm .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

body.lm .period-select { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: 20px; padding: 14px 16px; margin-bottom: 14px; }
body.lm .period-select label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-amber-text); margin-bottom: 8px; }
body.lm .period-select select { height: 50px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--lm-line-2); background: var(--lm-bg); font-weight: 600; }

body.lm .no-period { border-radius: 20px; }
body.lm .locked-banner { border-radius: 14px; }

body.lm .summary-bar { gap: 8px; margin-bottom: 14px; }
body.lm .summary-chip { border-radius: 16px; padding: 12px 4px; border: 1px solid var(--lm-line); }
body.lm .summary-chip .num { font-size: 22px; font-weight: 700; }
body.lm .summary-chip .lbl { font-size: 10.5px; }

body.lm .reminder-box { background: var(--lm-amber-bg); border: 1px solid #f3d7bd; border-radius: 20px; padding: 14px 16px; }
body.lm .btn-copy { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--lm-amber-deep); color: #fff; }
body.lm .btn-copy.copied { background: var(--lm-green); color: #fff; }
body.lm .reminder-text { background: #fff; border-color: #f3d7bd; border-radius: 12px; }

body.lm .team-card { border-radius: 20px; border: 1px solid var(--lm-line); margin-bottom: 14px; }
body.lm .team-card-header { flex-wrap: wrap; background: var(--lm-card); color: var(--lm-ink); font-size: 15px; font-weight: 700; padding: 14px 16px 10px; border-bottom: 1px solid #f1ece4; }
body.lm .team-progress-count { background: var(--lm-amber-bg); color: var(--lm-amber-text); font-size: 12px; padding: 3px 10px; }
body.lm .team-progress-track { height: 5px; background: #f1ece4; }
body.lm .team-progress-fill { background: var(--lm-amber); }
body.lm .team-progress-fill.complete { background: var(--lm-green); }
body.lm .done-badge { background: var(--lm-green); font-size: 11px; padding: 4px 10px; }
body.lm .venue-tag { background: var(--lm-blue-bg); color: var(--lm-blue); font-size: 11px; }
body.lm .member-row { padding: 14px 16px; border-bottom-color: #f1ece4; }
body.lm .member-name { font-size: 15px; font-weight: 700; }
body.lm .member-venue-tag { background: var(--lm-blue-bg); color: var(--lm-blue); font-size: 11px; }

body.lm .att-btn { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--lm-line-2); background: #fff; color: var(--lm-soft); font-size: 13px; font-weight: 600; }
body.lm .att-btn.active { color: #fff !important; font-weight: 700; }
body.lm .att-btn.att-hadir.active { background: var(--lm-green); border-color: var(--lm-green); }
body.lm .att-btn.att-tidak.active { background: var(--lm-red); border-color: var(--lm-red); }
body.lm .att-btn.att-off.active,
body.lm .att-btn.att-belum.active { background: var(--lm-gray); border-color: var(--lm-gray); }
body.lm .att-btn.att-off_cuti.active { background: var(--lm-red); border-color: var(--lm-red); }
body.lm .att-btn.att-venue.active,
body.lm .att-btn.att-venue_lain.active { background: var(--lm-blue); border-color: var(--lm-blue); }
body.lm .att-btn.att-telat.active { background: var(--lm-amber-deep); border-color: var(--lm-amber-deep); }
body.lm .att-btn.att-ijin.active { background: #6a3fa0; border-color: #6a3fa0; }

body.lm .reason-preset-btn { min-height: 38px; border-radius: 20px; }
body.lm .reason-preset-btn.active { background: var(--lm-red); border-color: var(--lm-red); color: #fff; }
body.lm .reason-lain-row input { min-height: 44px; border-radius: 12px; }
body.lm .btn-save-reason { border-radius: 12px; background: var(--lm-amber-deep); border-color: var(--lm-amber-deep); }
body.lm .btn-save-reason.saved { background: var(--lm-green); border-color: var(--lm-green); }
body.lm .venue-field { background: var(--lm-blue-bg); border: 1.5px solid #b9cbf0; border-radius: 14px; }
body.lm .venue-hint { color: var(--lm-blue); }
body.lm .venue-select { min-height: 44px; border-radius: 12px; border-color: #b9cbf0; }

body.lm .readonly-all-header { background: var(--lm-amber-bg); border: 1px solid #f3d7bd; border-radius: 16px; color: var(--lm-amber-text); }

/* Baris anggota: nama + tag venue + centang sejajar, tombol status di bawahnya */
body.lm .member-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
body.lm .member-top .member-name { flex: 0 1 auto; }
body.lm .member-top .member-venue-tag { margin-left: 0; }
body.lm .member-top .saved-badge { margin-left: auto; }
body.lm .member-top .att-toggle { flex: 1 1 100%; width: 100%; }
body.lm .att-toggle .att-btn.att-venue { flex: 1.5; }

@media (max-width: 480px) {
    body.lm { padding: 0; }
    body.lm .wrap { padding: 14px 14px calc(110px + env(safe-area-inset-bottom)); }
    body.lm .att-btn { padding: 10px 4px; }
}

/* ===== Head (mobile, lintas unit) ===== */
.lm-bar { height: 7px; border-radius: 6px; background: #f1ece4; overflow: hidden; }
.lm-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--lm-amber); }
.lm-bar > i.full { background: var(--lm-green); }
.hd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hd-stats > div { background: var(--lm-bg); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.hd-stats strong { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 21px; line-height: 1.1; }
.hd-stats small { font-size: 11px; color: var(--lm-soft); line-height: 1.25; }
.hd-stats.dark > div { background: var(--lm-ink-2); border: 1px solid var(--lm-ink-line); }
.hd-stats.dark strong { color: #faf7f2; }
.hd-stats.dark small { color: var(--lm-on-dark); }
.hd-unit { display: flex; flex-direction: column; gap: 12px; padding: 16px; text-decoration: none; color: var(--lm-ink) !important; }
.hd-unit-top { display: flex; align-items: center; gap: 12px; }
.hd-unit-kode { width: 48px; height: 48px; border-radius: 15px; background: var(--lm-ink); color: #faf7f2; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hd-unit-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd-unit-name strong { font-size: 15px; }
.hd-unit-name span { font-size: 12.5px; color: var(--lm-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.hd-line > span:first-child { color: var(--lm-soft); }
.hd-venues { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-unit-top > svg { color: #b3a99b; flex-shrink: 0; }
.lm-nav a span { white-space: nowrap; letter-spacing: -.1px; }
.lm-nav.n5 { padding-left: 4px; padding-right: 4px; }
.lm-nav.n5 a { font-size: 10.5px; }