/* Reset & Hardcore Grid Style */
.js-datatable {
    border-collapse: collapse !important;
    border: 1px solid #000 !important; /* Garis luar hitam */
}

.js-datatable thead th {
    background-color: #000 !important; /* Header Hitam */
    color: #ffffff !important;        /* Teks Putih */
    font-weight: 900 !important;
    text-transform: uppercase;
    padding: 6px 10px !important;
    border: 1px solid #333 !important; /* Garis antar header */
    font-size: 11px !important;
}

.js-datatable tbody td {
    padding: 4px 8px !important;
    border: 1px solid #ccc !important; /* Garis antar cell abu-abu */
    background-color: #fff !important; /* Paksa semua row putih (no zebra) */
    color: #333 !important;
    font-size: 11px !important;
}

/* Menghilangkan sisa-sisa rounded dan shadow */
.dt-container *, .dt-search input {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Perbaikan Kotak Search DataTables */
.dt-search input, 
.dataTables_filter input {
    background-color: #ffffff !important; /* Latar Belakang Putih */
    color: #000000 !important;            /* Teks Hitam */
    border: 1px solid var(--bulma-border-weak) !important; /* Border Lembut */
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    outline: none !important;
    border-radius: 0px !important;        /* Tetap kaku (Excel-style) */
    width: 200px !important;              /* Ukuran pas untuk pencarian */
}

/* Efek saat kotak search diklik (Focus) */
.dt-search input:focus, 
.dataTables_filter input:focus {
    border: 1px solid var(--bulma-primary) !important;
    background-color: #ffffff !important;
}

/* Merapikan Label "Search" jika ada */
.dt-search label, 
.dataTables_filter label {
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-right: 5px !important;
}

/* Pastikan header tetap rapi saat scroll aktif */
.dt-scroll-head th {
    border-bottom: 2px solid #000 !important;
}

/* Mempercantik scrollbar agar terlihat minimalis di dalam widget */
.dt-scroll-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.dt-scroll-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.dt-scroll-body::-webkit-scrollbar-thumb {
    background: #000; /* Hitam agar sesuai tema */
}

/* Menghilangkan shadow bawaan browser pada input date di dropdown */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0); /* Tetap hitam */
}

/* Modal Animations */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-zoom-in {
    animation: zoomIn 0.3s ease-out forwards;
}

#modal-container .modal {
    z-index: 10000;
}

#global-loader.is-hidden {
    display: none !important;
    pointer-events: none !important;
}

/* Custom styling for logout button to guarantee visible hover state in all themes */
.button.is-primary.btn-logout {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s ease;
}
.button.is-primary.btn-logout:hover {
    background-color: #ffffff !important;
    color: #5c0612 !important;
    border-color: #ffffff !important;
}
.button.is-primary.btn-logout:focus {
    box-shadow: none !important;
}

/* Reset and style topbar buttons (burger and user profile buttons) for pure dark mode */
.navbar .button {
    background-color: var(--bulma-scheme-main-ter) !important;
    color: var(--bulma-text) !important;
    border: 1px solid var(--bulma-border-weak) !important;
    box-shadow: none !important;
}
.navbar .button:hover {
    background-color: var(--bulma-scheme-main-bis) !important;
    color: var(--bulma-text) !important;
    border-color: var(--bulma-border-weak) !important;
}
.navbar .button:focus,
.navbar .button:active,
.navbar .button.is-active {
    background-color: var(--bulma-scheme-main-ter) !important;
    color: var(--bulma-text) !important;
    border-color: var(--bulma-border-weak) !important;
    box-shadow: none !important;
}

/* ===== GLOBAL BORDER REGULATION ===== */
/* Remove borders from everything except cards, buttons, and tables */
*:not(
    table, thead, tbody, tfoot, tr, th, td, .table, .js-datatable, .table-container,
    .card, .card-header, .card-footer, .card-content,
    .modal-card, .modal-card-head, .modal-card-foot, .modal-card-body,
    .button, button, input[type="button"], input[type="submit"], input[type="reset"],
    .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success, .btn-info, 
    .btn-outline-primary, .btn-outline-danger, .btn-outline-warning, .btn-outline-success, .btn-outline-info,
    .btn-logout, .navbar-burger, .burger,
    .paginate_button, .dt-button, .dt-paging-button,
    a.button, a.btn,
    .swal2-popup, .swal2-actions, .swal2-confirm, .swal2-cancel,
    [class^="calendar"], [class*=" calendar"],
    input, select, textarea, .input, .select, .textarea,
    .form-control, .form-select, .form-input, .form-textarea,
    .dt-search input, .dataTables_filter input,
    .focus-item, .category-grid-main, .category-sub-item, .sidebar-box, .category-header-box,
    .news-list-card, .comment-card, .share-bar, .news-ticker-container,
    .category-dropdown-content, .category-submenu-bar, .category-menu-item,
    .popular-item, .popular-item-detail, .page-num
) {
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    outline: none !important;
}

/* Explicitly guarantee borders for cards, buttons, and tables */
.card, .modal-card {
    border: 1px solid var(--bulma-border-weak) !important;
}
.card-header, .modal-card-head {
    border-bottom: 1px solid var(--bulma-border-weak) !important;
}
.card-footer, .modal-card-foot {
    border-top: 1px solid var(--bulma-border-weak) !important;
}
.table, .js-datatable {
    border: 1px solid var(--bulma-border-weak) !important;
}
.table td, .table th, .js-datatable td, .js-datatable th {
    border-bottom: 1px solid var(--bulma-border-weak) !important;
}

/* User Profile Button in navbar - make it borderless, transparent, and seamless */
.navbar .button.user-profile-btn,
.navbar .button.user-profile-btn:hover,
.navbar .button.user-profile-btn:focus,
.navbar .button.user-profile-btn:active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hamburger Button in navbar - make it borderless, transparent, and seamless */
.navbar .button.hamburger-btn,
.navbar .button.hamburger-btn:hover,
.navbar .button.hamburger-btn:focus,
.navbar .button.hamburger-btn:active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== MEDIUM-STYLE TABLES ===== */
/* Relieve layout padding and fonts for medium look */
table th, 
table td,
.table th, 
.table td,
.js-datatable th, 
.js-datatable td {
    padding: 8px 10px !important; /* Medium padding */
    vertical-align: middle !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

/* Make table header cells slightly larger and prominent */
table thead th,
.table thead th,
.js-datatable thead th {
    padding: 10px 10px !important; /* Slightly larger padding for headers */
    font-size: 13px !important;   /* Medium font size for headers */
    line-height: 1.4 !important;
    font-weight: bold !important;
    text-transform: uppercase !important; /* Prominent header look */
    letter-spacing: 0.03em !important;
}

/* Medium buttons inside tables */
table .button,
table button,
table .btn,
.table .button,
.table button,
.table .btn,
.js-datatable .button,
.js-datatable button,
.js-datatable .btn {
    padding: 4px 8px !important;
    height: 1.75rem !important;
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Medium icons inside tables */
table i,
table .bx,
.table i,
.table .bx,
.js-datatable i,
.js-datatable .bx {
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* If a button contains an icon inside a table, make sure there's no extra margin */
table .button i,
table button i,
table .btn i,
.table .button i,
.table button i,
.table .btn i {
    margin-right: 4px !important;
    font-size: 13px !important;
}

/* Align checkbox and custom switch inside tables */
table input[type="checkbox"],
.table input[type="checkbox"],
.js-datatable input[type="checkbox"] {
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Medium tags inside tables */
table .tag,
.table .tag,
.js-datatable .tag {
    height: 1.5rem !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
}

/* ===== CKEDITOR CUSTOM STYLING FOR DARK/LIGHT INTEGRATION ===== */
.ck-editor {
    border: 1px solid var(--bulma-border-weak) !important;
    border-radius: 0.375rem !important;
    overflow: hidden !important;
    background-color: var(--bulma-scheme-main-bis) !important;
    color: var(--bulma-text) !important;
    display: flex !important;
    flex-direction: column !important;
}

.ck.ck-editor__top .ck-toolbar {
    background-color: var(--bulma-scheme-main-ter) !important;
    border: none !important;
    border-bottom: 1px solid var(--bulma-border-weak) !important;
}

.ck.ck-editor__main>.ck-editor__editable {
    background-color: var(--bulma-scheme-main-bis) !important;
    color: var(--bulma-text) !important;
    border: none !important;
    min-height: 300px;
}

.ck.ck-editor__main>.ck-editor__editable:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure toolbar icons/text are visible in dark mode */
.ck.ck-toolbar .ck-button,
.ck.ck-toolbar .ck-dropdown {
    color: var(--bulma-text) !important;
    background-color: transparent !important;
}

.ck.ck-toolbar .ck-button:hover,
.ck.ck-toolbar .ck-dropdown:hover,
.ck.ck-toolbar .ck-button.ck-on,
.ck.ck-toolbar .ck-button:focus {
    background-color: var(--bulma-scheme-main-bis) !important;
    color: var(--bulma-primary) !important;
}

.ck.ck-toolbar .ck-button .ck-icon {
    color: var(--bulma-text) !important;
}

.ck.ck-toolbar .ck-button.ck-on .ck-icon,
.ck.ck-toolbar .ck-button:hover .ck-icon {
    color: var(--bulma-primary) !important;
}

/* Dropdown panels, lists, inputs in CKEditor */
.ck.ck-dropdown__panel {
    background-color: var(--bulma-scheme-main-ter) !important;
    border: 1px solid var(--bulma-border-weak) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.ck.ck-list {
    background-color: var(--bulma-scheme-main-ter) !important;
}

.ck.ck-list__item .ck-button {
    background-color: transparent !important;
    color: var(--bulma-text) !important;
}

.ck.ck-list__item .ck-button:hover {
    background-color: var(--bulma-scheme-main-bis) !important;
    color: var(--bulma-primary) !important;
}

.ck.ck-list__item .ck-button.ck-on {
    background-color: var(--bulma-primary) !important;
    color: #ffffff !important;
}

.ck.ck-list__item .ck-button.ck-on:hover {
    background-color: var(--bulma-primary) !important;
    color: #ffffff !important;
}

/* Editor links, inputs & modals */
.ck.ck-balloon-panel {
    background-color: var(--bulma-scheme-main-ter) !important;
    border: 1px solid var(--bulma-border-weak) !important;
    color: var(--bulma-text) !important;
}

.ck.ck-input {
    background-color: var(--bulma-scheme-main-bis) !important;
    border: 1px solid var(--bulma-border-weak) !important;
    color: var(--bulma-text) !important;
}

.ck.ck-input:focus {
    border-color: var(--bulma-primary) !important;
    box-shadow: 0 0 0 3px rgba(92, 6, 18, 0.15) !important;
}

.ck.ck-labeled-field-label {
    background-color: var(--bulma-scheme-main-ter) !important;
    color: var(--bulma-text) !important;
}

.ck.ck-button.ck-button-save,
.ck.ck-button.ck-button-cancel {
    color: var(--bulma-text) !important;
}

.ck.ck-button.ck-button-save:hover {
    background-color: var(--color-success, #16a34a) !important;
    color: white !important;
}

.ck.ck-button.ck-button-cancel:hover {
    background-color: var(--color-danger, #dc2626) !important;
    color: white !important;
}

/* Sidebar Menu Styling - Maroon Gradient Override */
.sidebar .menu-list a,
.sidebar .menu-list button {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-left: 2px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.15s ease;
    font-size: 14px !important;
}

.sidebar .menu-list a:hover,
.sidebar .menu-list button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sidebar .menu-list a:focus,
.sidebar .menu-list button:focus,
.sidebar .menu-list a:active,
.sidebar .menu-list button:active {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-left-color: transparent !important;
}

/* Active Highlight Styling */
.sidebar .menu-list a.is-active-custom,
.sidebar .menu-list a.is-active-custom:hover,
.sidebar .menu-list a.is-active-custom:focus,
.sidebar .menu-list a.is-active-custom:active,
.sidebar .menu-list button.is-active-custom,
.sidebar .menu-list button.is-active-custom:hover,
.sidebar .menu-list button.is-active-custom:focus,
.sidebar .menu-list button.is-active-custom:active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-left-color: #ffffff !important;
}

/* Submenu container overrides */
.sidebar .menu-list div a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

.sidebar .menu-list div a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sidebar .menu-list div a.is-active-custom,
.sidebar .menu-list div a.is-active-custom:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ===== GLOBAL BUTTON THEME & CONTRAST OVERRIDES ===== */
/* Menjamin warna teks putih pekat dan hover gelap maroon pada tombol utama */
.button.is-primary,
.btn-primary,
.button.is-link,
.btn-link {
    color: #ffffff !important;
    background-color: #5c0612 !important;
    border-color: #5c0612 !important;
}

.button.is-primary:hover,
.btn-primary:hover,
.button.is-link:hover,
.btn-link:hover {
    background-color: #41020a !important;
    border-color: #41020a !important;
    color: #ffffff !important;
}

/* Outline Primary Buttons */
.button.is-primary.is-outlined,
.btn-outline-primary {
    background-color: transparent !important;
    color: #5c0612 !important;
    border-color: #5c0612 !important;
}

.button.is-primary.is-outlined:hover,
.btn-outline-primary:hover {
    background-color: #5c0612 !important;
    color: #ffffff !important;
}

/* Tombol Default/Biasa - Hover dengan warna soft rose-maroon */
.button:not(.is-primary):not(.is-danger):not(.is-success):not(.is-warning):not(.is-info):not(.is-link):hover,
.btn-secondary:hover {
    background-color: #fdf2f4 !important;
    color: #5c0612 !important;
    border-color: #e2dadc !important;
}