/* ============================================================
   RUNDOWN CLIENT – SELARAS TEMA CLIENT (PERLENGKAPAN / KONTAK)
   ============================================================ */

/* Fallback tokens (kalau global belum ada) */
:root {
    --elev-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --elev-2: 0 4px 8px rgba(0, 0, 0, 0.1);
    --elev-3: 0 8px 16px rgba(0, 0, 0, 0.12);

    --bottom-nav-h: 72px;
}

html[data-theme="dark"] {
    --elev-1: 0 1px 3px rgba(0, 0, 0, 0.35);
    --elev-2: 0 4px 8px rgba(0, 0, 0, 0.45);
    --elev-3: 0 8px 16px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   WRAP – SPACING SAMA DENGAN PERLENGKAPAN/KONTAK
   ============================================================ */
.rundown-wrap {
    background: var(--surface);
    min-height: calc(100vh - var(--head-h));
    padding-top: 0 !important;
    padding-bottom: 1rem;
    padding-inline: 0.75rem;

    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;

    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mobile */
@media (max-width: 575.98px) {
    .rundown-wrap {
        padding-inline: 0.5rem;
        padding-bottom: calc(var(--bottom-nav-h) + 1rem) !important;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .rundown-wrap {
        padding-inline: 0.75rem;
        padding-bottom: calc(var(--bottom-nav-h) + 1rem) !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .rundown-wrap {
        padding: 2rem;
        padding-top: 1rem !important;
    }
}

/* ============================================================
   TYPO / HEADER
   ============================================================ */
.text-surface {
    color: var(--text);
    font-weight: 600;
}

.rundown-wrap p {
    margin-bottom: 0.25rem;
}

/* Info jumlah (mobile) tweak */
.rundown-wrap .bi-calendar-check {
    vertical-align: -1px;
}

/* ============================================================
   CARD BASE (Filter + Tabel)
   ============================================================ */
.rundown-wrap .card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--elev-1);
    transition: box-shadow 0.22s ease, transform 0.16s ease,
        border-color 0.18s ease, background-color 0.18s ease;
}

.rundown-wrap .card:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: color-mix(in srgb, var(--surface) 97%, transparent);
}

/* Filter card: padding sedikit lebih lega di desktop */
.rundown-wrap .card-body {
    padding: 0.8rem 1rem;
}

@media (min-width: 768px) {
    .rundown-wrap .card-body {
        padding: 1rem 1.25rem;
    }
}

/* Alert auto hide (nyamain perlengkapan) */
.auto-hide {
    transition: opacity 0.5s ease;
}

/* ============================================================
   FORM FILTER
   ============================================================ */
.rundown-wrap .form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.rundown-wrap .form-control-sm {
    border-radius: 8px;
    border-color: var(--border);
    font-size: 0.82rem;
    padding-block: 0.35rem;
    padding-inline: 0.6rem;
    background: var(--surface-2, var(--surface));
    color: var(--text);
    transition: border-color 0.16s ease, box-shadow 0.16s ease,
        background-color 0.16s ease;
}

.rundown-wrap .form-control-sm:focus {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

/* Filter badge info (badge kecil di bawah filter) */
.rundown-wrap .small.text-muted .badge.bg-light.border {
    background: color-mix(in srgb, var(--surface) 94%, #ffffff 6%) !important;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
}

/* Dark mode: badge filter info jangan terlalu gelap */
html[data-theme="dark"] .rundown-wrap .small.text-muted .badge.bg-light.border {
    background: color-mix(
        in srgb,
        var(--surface-2) 80%,
        #ffffff 20%
    ) !important;
    border-color: color-mix(in srgb, var(--border) 70%, #ffffff 30%) !important;
    color: var(--text) !important;
}

/* Badge "Aktif" di tombol filter mobile */
html[data-theme="dark"] .rundown-wrap button .badge.bg-light {
    background: color-mix(
        in srgb,
        var(--surface-2) 75%,
        #ffffff 25%
    ) !important;
    color: var(--text) !important;
    border: 1px solid color-mix(in srgb, var(--border) 65%, #ffffff 35%) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: 8px;
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
    line-height: 1.3;
    transition: background-color 0.18s ease, box-shadow 0.18s ease,
        transform 0.14s ease, border-color 0.18s ease;
}

.btn-sm {
    border-radius: 7px;
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.btn-light {
    border-color: color-mix(in srgb, var(--border) 80%, #ffffff 20%);
    background: color-mix(in srgb, var(--surface) 96%, #ffffff 4%);
    color: var(--text-muted);
}

.btn-light:hover {
    background: color-mix(in srgb, var(--surface) 93%, #ffffff 7%);
}

/* ============================================================
   HEADER TANGGAL (PILL TANGGAL + STATUS)
   ============================================================ */
.date-header {
    /* flex sudah dari Blade, di sini hanya warna */
}

/* garis di samping tanggal */
.rundown-wrap .date-header hr {
    border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
}

/* Status chip di dalam pill (HARI INI / AKAN DATANG / SELESAI) */
.rundown-wrap .status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;

    border: 1px solid transparent;
    background: transparent;
}

/* Hari ini */
.rundown-wrap .status-chip-today {
    color: var(--success);
    background-color: color-mix(
        in srgb,
        var(--success) 14%,
        transparent
    ) !important;
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

/* Akan datang */
.rundown-wrap .status-chip-upcoming {
    color: var(--primary);
    background-color: color-mix(
        in srgb,
        var(--primary) 14%,
        transparent
    ) !important;
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Selesai */
.rundown-wrap .status-chip-past {
    color: var(--text-muted);
    background-color: color-mix(
        in srgb,
        var(--surface-2) 88%,
        var(--text-muted) 12%
    ) !important;
    border-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

/* Pill tanggal (date-pill) */
.date-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.45rem 1rem;
    border-radius: 999px;

    background: color-mix(
        in srgb,
        var(--surface) 92%,
        var(--primary-contrast) 8%
    );
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
    color: var(--text) !important;

    font-size: 0.82rem;
    font-weight: 600;
}

/* Dark mode: pill tanggal tetap cerah */
html[data-theme="dark"] .date-pill {
    background: color-mix(
        in srgb,
        var(--surface-2) 88%,
        var(--primary-contrast) 12%
    );
    color: var(--text) !important;
}

/* ============================================================
   TABLE RUNDOWN
   ============================================================ */
.table-rundown {
    font-size: 0.82rem;
    margin-bottom: 0;
}

.table-rundown thead.table-light {
    background: color-mix(in srgb, var(--surface) 96%, #ffffff 4%);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.table-rundown thead th {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.table-rundown tbody tr {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    transition: background-color 0.14s ease;
}

.table-rundown tbody tr:last-child {
    border-bottom: none;
}

.table-rundown tbody tr:hover {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.table-rundown tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.table-rundown tbody td .bi-clock {
    font-size: 0.9rem;
}

/* Kegiatan judul */
.table-rundown tbody td strong.text-surface {
    font-weight: 600;
}

/* Hint kecil di mobile */
.x-small {
    font-size: 0.75rem;
}

/* Kolom lebar khusus */
.table-rundown .col-jam {
    width: 140px;
    min-width: 120px;
    white-space: nowrap;
}

.table-rundown .col-penanggung {
    width: 220px;
    min-width: 180px;
}

.table-rundown .col-kegiatan {
    /* fleksibel, isi sisa space */
}

.table-rundown .col-keterangan {
    width: 260px;
    min-width: 200px;
}

/* Di layar <= lg, kolom keterangan disembunyikan (Bootstrap),
   jadi aturan lebar ini tidak mengganggu. */
@media (max-width: 991.98px) {
    .table-rundown .col-keterangan {
        width: auto;
        min-width: 0;
    }
}

/* Empty state di tabel */
.table-rundown tbody td.text-center {
    color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 767.98px) {
    .rundown-wrap .card {
        border-radius: 10px;
    }

    .rundown-wrap .card-body {
        padding: 0.75rem 0.85rem;
    }
}

/* Modal filter – biar konsisten spacing dengan halaman */
@media (max-width: 575.98px) {
    #rundownFilterModal .modal-content {
        border-radius: 14px;
    }

    #rundownFilterModal .modal-body {
        padding-inline: 1rem;
    }
}