/* ==========================================================================
   DUTRA Football Academy — assets/css/dashboard.css
   Tema: DARK SIDEBAR + LIGHT CONTENT (ala referensi).
   ========================================================================== */

/* ---------- LOGIN PAGE (tetap dark) ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(242,201,76,0.08), transparent 60%),
        linear-gradient(180deg, #0c0c0c, #0F0F0F);
    padding: 24px;
}
.login-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.login-logo { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; text-align: center; color: #fff; }
.login-logo span { display: block; font-size: 0.7rem; letter-spacing: 0.26em; color: var(--gold); font-weight: 600; margin-top: 4px; }
.login-logo-img { height: 64px; width: auto; margin: 0 auto; display: block; }
.login-card { width: 100%; background: var(--black-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 32px 28px; }
.login-title { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; letter-spacing: 0.02em; color: #fff; margin-bottom: 4px; }
.login-sub { color: var(--gray); font-size: 0.9rem; margin-bottom: 24px; }
.login-error { background: rgba(220,60,60,0.12); border: 1px solid rgba(220,60,60,0.35); color: #f2a0a0; font-size: 0.88rem; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 18px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-family: var(--font-d); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-l); }
.field input, .field select, .field textarea {
    background: var(--black-3); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
    color: #fff; font-family: var(--font-b); font-size: 0.95rem; padding: 12px 14px; outline: none; transition: border-color .15s ease;
}
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.login-btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-back { display: inline-block; margin-top: 18px; color: var(--gray); font-size: 0.85rem; text-align: center; width: 100%; }
.login-back:hover { color: var(--gold); }
.login-foot { color: var(--gray); font-size: 0.75rem; }

/* ==========================================================================
   DASHBOARD — SIDEBAR (DARK)
   ========================================================================== */
.dash-shell { display: flex; min-height: 100vh; background: #f4f5f7; }
.dash-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #0c0c0c;
    border-right: 1px solid rgba(255,255,255,0.08);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex; flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}
.dash-sidebar-head { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash-logo { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; line-height: 1.1; color: #fff; }
.dash-logo span { display: block; font-size: 0.56rem; letter-spacing: 0.22em; color: var(--gold); font-weight: 600; }
.dash-sidebar-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.dash-sidebar-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 6px;
    color: #c7ccd4;
    font-family: var(--font-d);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-left: 2px solid transparent;
    transition: background .12s ease, color .12s ease;
}
.dash-sidebar-nav a .ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; color: #8a919d; transition: color .12s ease; }
.dash-sidebar-nav a .ic svg { width: 18px; height: 18px; }
.dash-sidebar-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.dash-sidebar-nav a.active { background: rgba(242,201,76,0.12); color: var(--gold); border-left-color: var(--gold); }
.dash-sidebar-nav a.active .ic { color: var(--gold); }

.dash-content { flex: 1; margin-left: 240px; min-width: 0; display: flex; flex-direction: column; }

.dash-sidebar-backdrop { display: none; }

/* ==========================================================================
   DASHBOARD — TOPBAR + CONTENT (LIGHT)
   ========================================================================== */
.dash-topbar {
    height: 64px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 40;
    background: #ffffff;
}
.dash-burger {
    display: none;
    background: none; border: 1px solid #d1d5db; border-radius: 6px;
    color: #0f172a; font-size: 1.2rem; line-height: 1; padding: 7px 11px; cursor: pointer;
}
.dash-user { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.dash-user .who { text-align: right; }
.dash-user .who b { display: block; font-size: 0.85rem; color: #0f172a; }
.dash-user .who .role-badge { display: inline-block; margin-top: 2px; }
.role-badge { font-family: var(--font-d); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a; background: var(--gold); border-radius: 4px; padding: 2px 8px; }
.dash-logout { font-family: var(--font-d); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; border: 1px solid #d1d5db; border-radius: var(--radius); padding: 8px 12px; }
.dash-logout:hover { border-color: #b45309; color: #b45309; }
.dash-lang { font-family: var(--font-d); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: #475569; border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 11px; }
.dash-lang:hover { border-color: #b45309; color: #b45309; }

.dash-main { padding: 28px 0 64px; flex: 1; }
.dash-title { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 4px; color: #0f172a; }
.dash-sub { color: #64748b; margin-bottom: 26px; }
.dash-back { color: #64748b; font-size: 0.85rem; display: inline-block; }
.dash-back:hover { color: #b45309; }

/* ---------- CARDS & STATS (light) ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dash-card {
    background: #ffffff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.dash-card { display: block; }
a.dash-card:hover { border-color: #e5b860; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.07); }
.dash-card h3 { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 6px; color: #0f172a; }
.dash-card p { color: #64748b; font-size: 0.88rem; }
.dash-card .soon { display: inline-block; font-family: var(--font-d); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 8px; margin-top: 12px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.stat-card {
    background: #ffffff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.stat-card .n { font-family: var(--font-d); font-weight: 800; font-size: 2rem; color: #b45309; line-height: 1; letter-spacing: -0.02em; }
.stat-card .n.red { color: #dc2626; }
.stat-card .l { color: #64748b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-d); font-weight: 600; margin-top: 6px; }

/* ---------- TABLE (light) ---------- */
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dash-table th { font-family: var(--font-d); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; color: #64748b; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.dash-table td { padding: 12px 14px; border-bottom: 1px solid #f1f3f5; font-size: 0.85rem; color: #334155; vertical-align: top; }
.cell-sub { color: #94a3b8; font-size: 0.76rem; margin-top: 3px; line-height: 1.4; }
.cell-strong { color: #111827; font-weight: 600; }
.dash-table tr:hover td { background: #f8fafc; }

.btn-sm { font-family: var(--font-d); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius); border: 1px solid #d1d5db; color: #475569; background: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm:hover { border-color: #b45309; color: #b45309; }
.btn-sm.danger { border-color: #f0b4b4; color: #dc2626; }
.btn-sm.danger:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }

/* ---------- FORM (light) ---------- */
.dash-form { background: #ffffff; border: 1px solid #eceef1; border-radius: 10px; padding: 24px; margin-bottom: 26px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.dash-form h3 { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1rem; margin-bottom: 16px; color: #0f172a; }
.dash-form .row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dash-form .field span { color: #475569; }
.dash-form .field input, .dash-form .field select, .dash-form .field textarea {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #0f172a;
}

.dash-notice { background: #fffbeb; border: 1px solid #f5d78e; color: #a16207; font-size: 0.88rem; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 20px; }

/* ---------- MEDIA GRID (light) ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.media-card { background: #ffffff; border: 1px solid #eceef1; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.media-card .thumb { aspect-ratio: 4/3; background: #f1f3f5; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.media-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card .meta { padding: 10px 12px; }
.media-card .meta .cap { font-size: 0.82rem; color: #334155; }
.media-card .meta .dt { font-size: 0.7rem; color: #64748b; margin-top: 3px; }

/* ---------- RADAR (SVG, light) ---------- */
.radar-wrap { max-width: 300px; margin: 0 auto; }
.radar-wrap svg { width: 100%; height: auto; }
.radar-axis { stroke: rgba(15,23,42,0.14); }
.radar-ring { stroke: rgba(15,23,42,0.07); fill: none; }
.radar-poly { fill: rgba(242,201,76,0.30); stroke: #b45309; stroke-width: 2; }
.radar-dot { fill: #b45309; }
.radar-label { fill: #475569; font-family: var(--font-d); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- GAUGE (light) ---------- */
.gauge { display: flex; flex-direction: column; align-items: center; }
.gauge svg { width: 100%; height: auto; }
.gauge-num { fill: #0f172a; font-family: var(--font-d); font-weight: 800; font-size: 26px; }
.gauge-label { font-family: var(--font-d); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin-top: 4px; }

/* ---------- DASHBOARD COLS & SECTION TITLE ---------- */
.dash-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
.dash-sec-title { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; margin-bottom: 12px; color: #0f172a; }

/* ---------- PARENT DASHBOARD (ortu, light) ---------- */
.child-block { background: #ffffff; border: 1px solid #eceef1; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
.child-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.child-avatar {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%;
    background: #fffbeb;
    border: 2px solid #b45309;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-d); font-weight: 800; font-size: 1.4rem; color: #b45309;
}
.child-name { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.01em; margin: 0; color: #0f172a; }
.child-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.child-age { color: #64748b; font-size: 0.82rem; }
.child-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-form .row { grid-template-columns: 1fr 1fr; }
    .child-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .dash-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
    .dash-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
    .child-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
    .dash-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .dash-sidebar.open { transform: translateX(0); }
    .dash-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90; }
    .dash-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
    .dash-content { margin-left: 0; }
    .dash-burger { display: block; }
}

/* ---- Responsive "card" tables: opt-in via .dash-table--cards, no more horizontal sliding on phones ---- */
.dash-table-wrap { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.dash-table-wrap .dash-table { min-width: 0; }
.dash-table--cards thead { position: sticky; top: 0; background: #fff; z-index: 1; }
.status-pill { display: inline-block; font-family: var(--font-d); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 760px) {
    .dash-table-wrap { border: none; overflow: visible; }
    .dash-table--cards thead { display: none; }
    .dash-table--cards, .dash-table--cards tbody, .dash-table--cards tr, .dash-table--cards td { display: block; width: 100%; }
    .dash-table--cards tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
    .dash-table--cards tr.dash-empty-row { border: none; box-shadow: none; padding: 20px 4px; }
    .dash-table--cards td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed #f1f3f5; text-align: right; }
    .dash-table--cards td:last-child { border-bottom: none; padding-top: 12px; flex-direction: column; align-items: stretch; text-align: left; }
    .dash-table--cards td::before { content: attr(data-label); font-family: var(--font-d); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; text-align: left; flex-shrink: 0; }
    .dash-table--cards td[data-label=""]::before { display: none; }
    .dash-table--cards td > form { width: 100%; }
    .dash-table--cards .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .dash-table--cards .row-actions form, .dash-table--cards .row-actions a, .dash-table--cards .row-actions button { width: auto; }
}
/* ==========================================================================
   REV 2 — perbaikan mobile + Parents Zone
   ========================================================================== */
.dash-site-link { display: inline-block; margin-top: 10px; font-size: 0.75rem; color: #8a919d; font-family: var(--font-d); letter-spacing: 0.04em; }
.dash-site-link:hover { color: var(--gold); }

/* Tabel: selalu bisa digeser horizontal (tidak terpotong) */
.dash-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.dash-table-wrap .dash-table { min-width: 560px; }
.dash-table-wrap .dash-table--cards { min-width: 0; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.dash-actions form { display: inline; margin: 0; }
.inline-select { background: #ffffff; border: 1px solid #d1d5db; color: #111827; border-radius: 6px; padding: 6px 8px; font-size: 0.8rem; max-width: 100%; }

/* Grid 2 kolom yang turun jadi 1 kolom di HP */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.cms-field { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.cms-field input, .cms-field textarea { background: #fff; border: 1px solid #d1d5db; color: #111827; border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; width: 100%; font-family: var(--font-b); }
.cms-field label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cms-field .lang { font-size: 0.72rem; color: #6b7280; }
.cms-field .meta { font-size: 0.78rem; color: #6b7280; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cms-field code { color: #9ca3af; word-break: break-all; }

.dash-hint { color: #64748b; font-size: 0.82rem; margin-top: 6px; }
.file-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 0.82rem; color: #475569; }
.file-current img { height: 64px; width: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; }
.file-current a { color: #b45309; text-decoration: underline; }
.asset-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .asset-grid { grid-template-columns: 1fr 1fr; } }
.asset-card { background: #fff; border: 1px solid #eceef1; border-radius: 10px; padding: 18px; }
.asset-card h4 { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; color: #0f172a; margin-bottom: 4px; }
.asset-card form { margin-top: 10px; }
.asset-card .btn { padding: 10px 16px; }
.asset-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.asset-row input[type=file] { max-width: 100%; font-size: 0.85rem; }
.dash-ok { border-color: rgba(22,163,74,0.35) !important; color: #15803d !important; background: #ecfdf5 !important; }
.dash-err { border-color: rgba(220,38,38,0.35) !important; color: #b91c1c !important; background: #fef2f2 !important; }

/* ---------- Parents Zone ---------- */
.pz-hero { background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(242,201,76,0.28), transparent 60%), linear-gradient(150deg, #151515, #0b0b0b); color: #fff; border-radius: 14px; padding: 24px 22px; margin-bottom: 22px; }
.pz-hero .eb { font-family: var(--font-d); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pz-hero h2 { font-family: var(--font-d); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.1; margin: 8px 0 6px; }
.pz-hero p { color: #d1d5db; font-size: 0.92rem; max-width: 640px; }
.pz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pz-action { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; color: #fff; min-height: 88px; transition: border-color .15s ease, background .15s ease; }
.pz-action:hover { border-color: var(--gold); background: rgba(242,201,76,0.08); }
.pz-action svg { width: 22px; height: 22px; color: var(--gold); }
.pz-action b { font-family: var(--font-d); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.pz-action span { font-size: 0.74rem; color: #9ca3af; line-height: 1.35; }
.pz-action.is-disabled { opacity: 0.5; pointer-events: none; }
.pz-action.wa svg { color: #25D366; }

.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #eceef1; border-radius: 10px; padding: 14px; }
.event-date { flex-shrink: 0; width: 58px; text-align: center; background: #fffbeb; border: 1px solid #f5d78e; border-radius: 8px; padding: 6px 4px; }
.event-date .d { font-family: var(--font-d); font-weight: 900; font-size: 1.4rem; color: #b45309; line-height: 1; }
.event-date .m { font-family: var(--font-d); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #92400e; margin-top: 3px; }
.event-item h4 { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: 0.9rem; color: #0f172a; }
.event-item .where { font-size: 0.78rem; color: #b45309; margin-top: 2px; }
.event-item p { font-size: 0.85rem; color: #475569; margin-top: 4px; }
.news-badge { display: inline-block; font-family: var(--font-d); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; background: #0f172a; color: var(--gold); padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }

.profile-card { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.profile-photo { width: 120px; height: 150px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #fffbeb, #fef3c7); border: 2px solid #f5d78e; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 900; font-size: 2.6rem; color: #b45309; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.profile-dl div { min-width: 0; }
.profile-dl dt { font-family: var(--font-d); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
.profile-dl dd { margin: 2px 0 0; font-size: 0.92rem; color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.row-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f3f5; font-size: 0.86rem; color: #334155; }
.row-line:last-child { border-bottom: none; }
.row-line .muted { color: #64748b; font-size: 0.8rem; }
.pill { font-family: var(--font-d); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: #dcfce7; color: #15803d; } .pill.warn { background: #fef3c7; color: #92400e; } .pill.bad { background: #fee2e2; color: #b91c1c; }

@media (min-width: 640px) {
    .pz-actions { grid-template-columns: repeat(4, 1fr); }
    .profile-card { grid-template-columns: 120px 1fr; }
    .profile-dl { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Topbar & form di HP ---------- */
@media (max-width: 560px) {
    .dash-topbar { padding: 0 14px; height: 58px; }
    .dash-user { gap: 8px; }
    .dash-user .who b { display: none; }
    .dash-logout, .dash-lang { padding: 7px 9px; }
    .dash-main { padding: 20px 0 48px; }
    .dash-form, .dash-card, .child-block { padding: 18px 16px; }
    .field input, .field select, .field textarea { font-size: 16px; } /* cegah auto-zoom iOS */
    .login-card { padding: 26px 20px; }
    .stat-card .n { font-size: 1.5rem; overflow-wrap: anywhere; }
    .dash-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
    .dash-table-wrap:has(.dash-table--cards) { overflow: visible; background: transparent; }
}

/* Grid & input tidak boleh melebar keluar layar HP */
.dash-form .row > *, .grid-2 > *, .child-grid > *, .dash-grid > *, .stat-grid > *, .dash-cols > * { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.field input[type=checkbox], .field input[type=radio] { width: auto; }
.dash-table--cards td, .cell-sub { overflow-wrap: anywhere; }
.dash-form[style*="display:flex"] > .field { flex: 1 1 160px; }
@media (max-width: 760px) {
    .dash-table--cards td { display: grid; grid-template-columns: minmax(84px, auto) 1fr; column-gap: 14px; row-gap: 3px; align-items: start; }
    .dash-table--cards td::before { grid-column: 1; grid-row: 1 / span 4; }
    .dash-table--cards td > * { grid-column: 2; justify-self: end; text-align: right; max-width: 100%; }
    .dash-table--cards td[data-label=""] { display: block; }
    .dash-table--cards td:last-child { display: flex; }
    .dash-table--cards tr.dash-empty-row td { display: block; text-align: left; }
}

/* ==========================================================================
   Sesi latihan coach (Head Coach -> Assistant Coach)
   ========================================================================== */
.pill.info { background: #e0f2fe; color: #075985; }
.session-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .session-list { grid-template-columns: 1fr 1fr; } }
.session-card { display: block; background: #fff; border: 1px solid #eceef1; border-left: 4px solid #d1d5db; border-radius: 10px; padding: 16px 18px; color: inherit; min-width: 0; }
a.session-card:hover { border-color: #e5b860; box-shadow: 0 6px 16px rgba(15,23,42,0.07); }
.session-card.is-today { border-left-color: #16a34a; background: #f7fef9; }
.session-card.is-past { border-left-color: #cbd5e1; }
.session-card.is-detail { margin-bottom: 8px; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sc-date { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: 0.95rem; color: #0f172a; }
.sc-meta { color: #64748b; font-size: 0.84rem; margin-top: 2px; }
.sc-coaches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.coach-tag { display: inline-flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 0.8rem; color: #0f172a; }
.sc-stats { margin-top: 10px; font-size: 0.82rem; color: #475569; }
.sc-notes { margin-top: 8px; font-size: 0.84rem; color: #475569; background: #fffbeb; border-radius: 6px; padding: 8px 10px; }
.sc-sub { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: #94a3b8; margin: 16px 0 4px; }
.month-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 14px; color: #0f172a; font-family: var(--font-d); }

.coach-pick { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; margin-top: 14px; min-width: 0; }
.coach-pick legend { font-family: var(--font-d); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #475569; padding: 0 6px; }
.coach-pick legend span { color: #94a3b8; }
.coach-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d1d5db; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 0.88rem; color: #0f172a; background: #fff; }
.coach-chip:has(input:checked) { border-color: #b45309; background: #fffbeb; }
.coach-chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.coach-chip input { width: 18px; height: 18px; accent-color: #b45309; }
.coach-chip small { color: #b45309; font-weight: 700; }

.checkin-box { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.checkin-box .field { flex: 1 1 220px; }
.checkin-btn { background: #16a34a; color: #fff; font-size: 0.9rem; padding: 14px 22px; }
.checkin-btn:hover { background: #15803d; }

.student-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 1000px) { .student-list { grid-template-columns: 1fr 1fr; } }
.student-card { background: #fff; border: 1px solid #eceef1; border-radius: 10px; padding: 14px; min-width: 0; }
.stu-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stu-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: #0f172a; }
.stu-name img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.stu-name .muted { font-size: 0.75rem; color: #94a3b8; }
.stu-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.stu-scores label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stu-scores span { font-size: 0.62rem; font-family: var(--font-d); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-scores input, .stu-note { width: 100%; min-width: 0; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 6px; font-size: 16px; color: #0f172a; background: #fff; font-family: var(--font-b); }
.stu-scores input { text-align: center; }
.stu-note { margin-top: 8px; padding: 9px 10px; font-size: 0.9rem; }
fieldset[disabled] .student-card { opacity: 0.6; }
.save-sticky { position: sticky; bottom: 12px; margin-top: 16px; width: 100%; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 5; }
@media (min-width: 640px) { .save-sticky { width: auto; } }
@media (max-width: 400px) { .stu-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.month-nav .btn-sm { white-space: nowrap; }

/* =====================================================================
   Rev 4 — Payment Gateway, WhatsApp, Video Anak, Impor, Panduan
   ===================================================================== */
.inline-input { background: #fff; border: 1px solid #d1d5db; color: #111827; border-radius: 6px; padding: 7px 9px; font-size: 0.82rem; flex: 1; min-width: 130px; }
.btn-sm.pay-btn { border-color: #b45309; background: #F2C94C; color: #111; }
.btn-sm.pay-btn:hover { background: #e3b93a; color: #111; }
.btn-sm.wa-btn { border-color: #86efac; color: #15803d; }
.btn-sm.wa-btn:hover { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.copy-box { margin-top: 16px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; color: #334155; line-height: 1.7; word-break: break-all; }
.copy-box code { background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 6px; color: #0f172a; user-select: all; }
.imp-opt { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 0.88rem; color: #334155; }
.imp-opt input { margin-top: 3px; }

/* Video & foto anak */
.media-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.media-card .thumb.is-video { aspect-ratio: 16 / 9; background: #0b0b0b; }
.media-link-play { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #F2C94C; font-family: var(--font-d); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #334155; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.chip:hover { border-color: #b45309; color: #b45309; }
.chip.is-active { background: #0f172a; border-color: #0f172a; color: #F2C94C; }

/* QR pendaftaran */
.qr-card summary { cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; list-style: none; }
.qr-card summary::-webkit-details-marker { display: none; }
.qr-card summary::before { content: '▸'; color: #b45309; }
.qr-card[open] summary::before { content: '▾'; }
.qr-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; }
.qr-box { width: 180px; height: 180px; background: #fff; padding: 10px; border: 1px solid #e2e8f0; border-radius: 10px; flex-shrink: 0; }
.qr-box img, .qr-box canvas { width: 100% !important; height: 100% !important; }
.qr-wrap > div:last-child { flex: 1; min-width: 200px; }

/* Panduan (guide.php) */
.guide-toc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.guide-sec { background: #fff; border: 1px solid #eceef1; border-radius: 12px; padding: 20px 20px 14px; margin-bottom: 16px; scroll-margin-top: 80px; }
.guide-sec h2 { font-family: var(--font-d); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; color: #0f172a; margin-bottom: 4px; }
.guide-sec .who { font-size: 0.72rem; color: #b45309; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.guide-sec ol, .guide-sec ul { padding-left: 20px; margin: 8px 0; color: #334155; font-size: 0.9rem; line-height: 1.6; }
.guide-sec li { margin-bottom: 6px; }
.guide-sec p { color: #334155; font-size: 0.9rem; line-height: 1.6; margin: 6px 0; }
.guide-sec .tip { background: #fffbeb; border-left: 3px solid #F2C94C; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; color: #78350f; margin: 10px 0; }
.guide-sec a { color: #b45309; text-decoration: underline; }