/* File: public/css/scripture-database.css */

/* 1. LAYOUT UMUM */
body {
    background-color: #f8f9fa; /* Light Gray Background */
}

.container-fluid {
    max-width: 100%;
}

/* 2. TABEL STYLING */
/* Agar Header Tabel tetap menempel di atas saat scroll */
.table-responsive {
    position: relative; 
}

thead.sticky-top th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Warna latar header */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Pastikan di atas konten tabel */
    vertical-align: middle;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Garis batas sel */
.table-bordered th, 
.table-bordered td {
    border: 1px solid #dee2e6;
}

/* Hover effect pada baris */
.table-hover tbody tr:hover {
    background-color: #f1f3f5;
}

/* 3. EDITABLE CELL STYLING */
/* Menandakan cell bisa diklik */
.cursor-pointer {
    cursor: pointer;
}

/* Wrapper untuk switch antara Teks dan Input */
.editable-cell-wrapper {
    position: relative;
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Tampilan saat mode baca */
.editable-cell-wrapper .view-mode {
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.cursor-pointer:hover .view-mode {
    background-color: rgba(0, 0, 0, 0.05); /* Highlight tipis saat hover */
}

/* Tampilan Input saat mode edit */
.editable-cell-wrapper .form-control {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    height: auto;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* Fokus biru */
}

/* Warna cell yang sudah diedit (Unsaved) */
.table-warning {
    background-color: #fff3cd !important; /* Kuning Bootstrap */
}

/* 4. NAVIGASI TABS */
.nav-tabs .nav-link {
    color: #6c757d;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    padding-bottom: 10px;
}

.nav-tabs .nav-link:hover {
    color: #0d6efd;
    border-color: transparent;
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: #0d6efd;
    background-color: transparent;
    border-bottom: 3px solid #0d6efd; /* Garis biru di bawah tab aktif */
}

/* 5. UTILITY LAINNYA */
#unsaved-indicator {
    /* 1. Warna & Teks */
    background-color: #dc3545; /* Merah (Kode warna Bootstrap Danger) */
    color: white;

    /* 2. Ukuran & Spacing */
    font-size: 0.9em;
    padding: 8px 12px;
    
    /* 3. Default State (Sembunyi dulu) */
    display: none; 
}

/* 6. STORIES TABLE CONTAINER */
#stories-table-container {
    /* Mengatur tinggi maksimal tabel */
    max-height: 65vh; /* Artinya 70% dari tinggi layar monitor */
    
    /* Agar muncul scrollbar jika data melebihi tinggi tersebut */
    overflow-y: auto;
    
    /* Opsional: Border agar terlihat batasnya */
    border-bottom: 1px solid #dee2e6;
}

/* Loading Spinner Container */
#stories-table-container .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* =========================================
   STYLE KHUSUS COLUMN CHOOSER DROPDOWN
   (Meniru Gaya Language Database / Bootstrap Dropdown Item)
   ========================================= */

/* 1. Container Dropdown Menu */
.column-chooser-dropdown .dropdown-menu {
    z-index: 2000 !important; /* Agar tampil di atas header tabel sticky */
    min-width: 240px;         /* Lebar standar */
    padding: 0.5rem 0;        /* Padding atas bawah standar Bootstrap */
    margin: 0.125rem 0 0;     /* Margin standar */
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Shadow halus */
}

/* 2. Item Wrapper - Dibuat mirip .dropdown-item */
.column-chooser-dropdown .form-check {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.25rem 1.5rem; /* Padding standar dropdown-item (kiri kanan lega) */
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer; /* Penting: Pointer */
    margin-bottom: 0; /* Reset margin form-check */
    min-height: auto; /* Reset min-height form-check */
}

/* 3. Efek Hover (Highlight penuh satu baris) */
.column-chooser-dropdown .form-check:hover {
    color: #1e2125;
    background-color: #e9ecef; /* Abu-abu standar hover Bootstrap */
}

/* 4. Checkbox Input */
.column-chooser-dropdown .form-check-input {
    margin-top: 0;
    margin-left: -0.5em; /* Geser sedikit agar rapi */
    margin-right: 0.8em; /* Jarak ke teks */
    cursor: pointer;
    flex-shrink: 0;
    float: none; /* Reset float bawaan bootstrap form-check */
}

/* 5. Label Teks */
.column-chooser-dropdown .form-check-label {
    cursor: pointer;
    width: 100%;
    user-select: none;
    margin-bottom: 0;
}

/* 6. Fix jika ada element yang tidak sengaja ter-klik */
.column-chooser-dropdown .form-check * {
    cursor: pointer;
}