/* =========================================================
   BATIK CIPRAT SAMBUNG ROSO — CSS KHUSUS HALAMAN ADMIN
   Muat style.css terlebih dahulu, lalu admin.css.
   ========================================================= */

/* Pesan galat. Aturan ini sempat hilang, sehingga pesan "Gagal ..." tampil
   seperti teks biasa. Penandanya sengaja tidak hanya merah: ada garis tebal
   di kiri, huruf tebal, dan tanda peringatan, jadi tetap jelas bagi
   pengguna buta warna. Kosong = tidak tampil. */
.err:not(:empty) {
    margin: .5rem 0;
    padding: .5rem .75rem;
    color: var(--bad);
    font-weight: 700;
    border-left: .4rem solid var(--bad);
}

.err:not(:empty)::before {
    content: "\26A0  ";
    content: "\26A0  " / "";
}

/* Form admin */
form label {
    display: block;
    margin: .5rem 0 .15rem;
    font-weight: 600;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form select,
form textarea {
    width: 100%;
    padding: .5rem;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line-kuat);
    border-radius: .5rem;
}

form p {
    margin: 0;
}

/* Baris kontrol dan tombol */
.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
}

.cek-baris {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.cek-baris label {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.cek-baris input,
td input[type="checkbox"],
dialog input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
}

/* Tabel admin */
.scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    background: var(--card);
    border-collapse: collapse;
}

th,
td {
    padding: .35rem .5rem;
    text-align: left;
    vertical-align: middle;
    border: 1px solid var(--line);
}

th {
    background: var(--code);
    white-space: nowrap;
}

td input[type="number"],
td input[type="text"],
td select {
    width: 100%;
    min-width: 6rem;
    min-height: 2.5rem;
    padding: .3rem;
    background: var(--bg);
    border: 1px solid var(--line-kuat);
    border-radius: .35rem;
}

td .btn {
    min-height: 2.5rem;
    margin: .1rem;
}

/* Tabel yang kolomnya bisa diisi langsung (artis, struktur, narasi) */
.tbl-edit input {
    min-width: 9rem;
}

.tbl-edit select {
    min-width: 14rem;
}

.tbl-edit td.ringkas {
    min-width: 12rem;
    max-width: 24rem;
}

/* Jika tabel terlalu lebar di ponsel, area tabel tetap bisa digeser */
@media (max-width: 40rem) {
    .admin-wrap {
        padding-inline: .75rem;
    }
}