/* ===================================================================
   Tema UI Raport PAUD — dipakai di semua halaman admin.
   (Preview & PDF punya CSS terpisah di templates/raport_template.php)
=================================================================== */
:root {
    --brand:        #2f6b3c;
    --brand-dark:   #245430;
    --brand-light:  #e9f2ec;
    --ink:          #1f2d27;
    --muted:        #6b7280;
    --line:         #e9ecef;
    --radius:       14px;
}

body {
    background: #f3f5f4;
    color: var(--ink);
    font-size: 15px;
}

/* ---------- Navbar ---------- */
.app-navbar {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.app-navbar .navbar-brand { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.app-navbar .navbar-brand img { height: 34px; width: 34px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.app-navbar .nav-link { border-radius: 8px; padding: .4rem .75rem !important; transition: background .15s; }
.app-navbar .nav-link:hover { background: rgba(255,255,255,.12); }
.app-navbar .nav-link.active { background: rgba(255,255,255,.18); }

/* ---------- Cards ---------- */
.card {
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    padding: .85rem 1.1rem;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* ---------- Tombol ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-brand { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-brand:focus { box-shadow: 0 0 0 .2rem rgba(47,107,60,.25); }
.btn-icon { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- Form ---------- */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(47,107,60,.15);
}
.form-label { margin-bottom: .25rem; }
textarea.form-control { font-size: 14px; }

/* ---------- Tabel ---------- */
.table { vertical-align: middle; }
.table > thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); font-weight: 600; border-bottom-width: 1px;
}
.table > :not(caption) > * > * { padding: .7rem .8rem; }
.table-group-row td { background: var(--brand-light) !important; color: var(--brand-dark); font-weight: 700; }

/* Tombol aksi pada tabel */
.aksi-grup { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; }
.aksi-grup .btn { padding: .3rem .55rem; line-height: 1; }

/* ---------- Tom Select agar serasi ---------- */
.ts-control { border-radius: 10px !important; min-height: 38px; }

/* ---------- Halaman login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #eef4f0, #dfeee4); }
.login-card { border-radius: 18px; }

/* ---------- QR & gambar ---------- */
.qr-thumb { background: #fff; border-radius: 10px; }
.preview-baru { object-fit: contain; }

/* ---------- Responsive ---------- */
@media (max-width: 576px) {
    body { font-size: 14px; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    main.container { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    h4 { font-size: 1.15rem; }
    .card-body { padding: 1rem; }
    .btn-lg-block-sm { width: 100%; }
}

/* Tombol simpan melayang di bawah pada layar kecil (form raport) */
.action-bar { display: flex; gap: .5rem; }
@media (max-width: 576px) {
    .action-bar { flex-direction: column; }
    .action-bar .btn { width: 100%; }
}