/* ============================================================
   THEME SEMI-DARK — aktif saat preferensi tema per-user = 'semi_dark'.
   Full-dark theme belum ada — enum DB masih menyisakan slot 'dark' untuk nanti.
   Body class `.theme-semi-dark` di-toggle di index.html applyThemeClass() +
   $rootScope.setTheme() di js/app.js (silent-save ke DB via /appuser/v2/saveTheme).
   Scope override: table header, button primary di thead, sidebar, modal-hayyu header.
   !important dipakai karena rule existing di custom.css spesifisitasnya tinggi.
   ============================================================ */

/* Table header — override .table-style thead + .bg-hayyu-grey-new.
   Sengaja sedikit lebih terang dari sidebar (#006664) supaya secara visual
   terasa setara: thead = strip tipis dikelilingi body putih, terkena
   simultaneous-contrast → dipersepsi lebih gelap dari sidebar walau hex sama.
   Naik ~1 stop lightness biar match perception. */
.theme-semi-dark .table-style > thead,
.theme-semi-dark .table-style > thead > tr > th,
.theme-semi-dark .bg-hayyu-grey-new {
    background-color: #0a7573 !important;
    color: #ffffff !important;
}

/* Button primary di dalam thead — supaya tak menyatu sama bg hijau tua.
   Invert jadi outline putih. */
.theme-semi-dark .table-style > thead .btn-primary,
.theme-semi-dark .table-style > thead .button-primary,
.theme-semi-dark .bg-hayyu-grey-new .btn-primary,
.theme-semi-dark .bg-hayyu-grey-new .button-primary {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #006664 !important;
    border-color: #ffffff !important;
}

.theme-semi-dark .table-style > thead .btn-primary:hover,
.theme-semi-dark .table-style > thead .btn-primary:focus,
.theme-semi-dark .table-style > thead .button-primary:hover,
.theme-semi-dark .table-style > thead .button-primary:focus,
.theme-semi-dark .bg-hayyu-grey-new .btn-primary:hover,
.theme-semi-dark .bg-hayyu-grey-new .btn-primary:focus,
.theme-semi-dark .bg-hayyu-grey-new .button-primary:hover,
.theme-semi-dark .bg-hayyu-grey-new .button-primary:focus {
    background-color: #e6f0ef !important;
    background-image: none !important;
    color: #006664 !important;
    border-color: #e6f0ef !important;
}

/* Button outline primary di dalam thead — tetap transparan, border + icon putih. */
.theme-semi-dark .table-style > thead .button-outline-primary,
.theme-semi-dark .bg-hayyu-grey-new .button-outline-primary {
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.theme-semi-dark .table-style > thead .button-outline-primary:hover,
.theme-semi-dark .table-style > thead .button-outline-primary:focus,
.theme-semi-dark .bg-hayyu-grey-new .button-outline-primary:hover,
.theme-semi-dark .bg-hayyu-grey-new .button-outline-primary:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ============================================================
   Sidebar theme-semi-dark rules — di-scope .theme-semi-dark.template-v2
   supaya V1 sidebar (tak carry .template-v2 body class dari index.html
   applyVersionClass) imun kalau user set semi-dark di V2 lalu buka V1.
   Struktur sidebar (bg width, flex column, sidebar-theme-toggle base)
   ada di css/_sidebar.css.
   ============================================================ */

/* Sidebar background + text */
.theme-semi-dark.template-v2 .dashboard .sidebar,
.theme-semi-dark.template-v2 .sidebar {
    background-color: #006664 !important;
}

.theme-semi-dark.template-v2 .sidebar .nav-link {
    color: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}

/* Click feedback -- scale down subtly saat pressed. */
.theme-semi-dark.template-v2 .sidebar .nav-link:active {
    transform: scale(0.98) !important;
}

/* Hover + active searah (escalating): keduanya lighter overlay di atas bg primary. */
.theme-semi-dark.template-v2 .sidebar .nav-link:hover,
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-link:hover,
.theme-semi-dark.template-v2 .dashboard .navbar .sidebar .dropdown-toggle:hover,
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-dropdown.open > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Active: overlay lebih tebal + border-left indicator + weight bold. */
.theme-semi-dark.template-v2 .sidebar .nav-link.active,
.theme-semi-dark.template-v2 .dashboard .navbar .sidebar .active.dropdown-toggle,
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-link.active,
.theme-semi-dark.template-v2 .dashboard .sidebar .navbar .active.dropdown-toggle,
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-dropdown.open > .nav-link {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    position: relative;
    overflow: hidden;
}

/* Active indicator ::after -- absolute bar, tak geser konten. */
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-link.active::after,
.theme-semi-dark.template-v2 .dashboard .sidebar .navbar .active.dropdown-toggle::after,
.theme-semi-dark.template-v2 .dashboard .sidebar .nav-dropdown.open > .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffffff;
}

/* Dropdown caret ::before -- default muted, hover/active putih solid. */
.theme-semi-dark.template-v2 .sidebar .nav-dropdown-toggle::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !important;
}

.theme-semi-dark.template-v2 .sidebar .nav-link:hover.nav-dropdown-toggle::before,
.theme-semi-dark.template-v2 .sidebar .nav-link.active.nav-dropdown-toggle::before,
.theme-semi-dark.template-v2 .sidebar .nav-dropdown.open > .nav-link.nav-dropdown-toggle::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23ffffff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !important;
}

/* Dot sidebar (nested menu bullet) -- putih semi transparan default, solid saat active. */
.theme-semi-dark.template-v2 .sidebar .dot-sidebar {
    filter: brightness(0) invert(1) opacity(0.7) !important;
}

.theme-semi-dark.template-v2 .sidebar .active > .dot-sidebar,
.theme-semi-dark.template-v2 .sidebar .nav-dropdown.open > .nav-link > .dot-sidebar {
    filter: brightness(0) invert(1) opacity(1) !important;
}

/* Scrollbar sidebar-nav -- match primary bg. */
.theme-semi-dark.template-v2 .sidebar .sidebar-nav::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.theme-semi-dark.template-v2 .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #4a8e8c !important;
}

.theme-semi-dark.template-v2 .sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: #6ba9a7 !important;
}

/* Firefox scrollbar */
.theme-semi-dark.template-v2 .sidebar .sidebar-nav {
    scrollbar-color: #4a8e8c transparent;
    scrollbar-width: thin;
}

/* Sidebar theme toggle btn (bottom sidebar) dark variant */
.theme-semi-dark.template-v2 .sidebar-theme-toggle {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.theme-semi-dark.template-v2 .sidebar-theme-toggle .theme-toggle-btn {
    color: #ffffff;
}

.theme-semi-dark.template-v2 .sidebar-theme-toggle .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.theme-semi-dark.template-v2 .sidebar-theme-toggle .theme-toggle-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Icon default = assets/sidebar/{icon}_dark.svg (fill+stroke #ffffff) di dark,
   assets/sidebar/{icon}.svg (fill+stroke #6D6F78) di light.
   Sidebar-icon-selected PNG sudah dihapus dari template.
   Override rule main-layout.css yg hide .sidebar-icon saat active --
   sekarang tak ada replacement selected, icon harus tetap tampil di semua state.
   Scope tanpa .theme-semi-dark supaya light theme (V2 2.0.0) juga fix. */
.dashboard .sidebar .active.dropdown-toggle .sidebar-icon,
.dashboard .sidebar .nav-link.active .sidebar-icon,
.dashboard .sidebar .navbar .active.dropdown-toggle .sidebar-icon,
.dashboard .sidebar .nav-dropdown.open > .nav-link .sidebar-icon {
    display: block !important;
}

/* Header filter (inline table filter row -- V1 tableComponent).
   Existing bg #B0CFCE di js/components/tableComponent/index.css:161. */
.theme-semi-dark .header-filter,
.theme-semi-dark .header-filter td {
    background-color: #0a7573 !important;
    color: #ffffff !important;
}

.theme-semi-dark .header-filter input,
.theme-semi-dark .header-filter select {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.theme-semi-dark .header-filter input::placeholder {
    color: #6b7a7a !important;
}

/* Modal-hayyu header (existing bg #b0cfce di line 915-922) */
.theme-semi-dark .modal-hayyu .modal-header {
    background-color: #006664 !important;
    color: #ffffff !important;
}


.theme-semi-dark .modal-hayyu .modal-header .close,
.theme-semi-dark .modal-hayyu .modal-header h1,
.theme-semi-dark .modal-hayyu .modal-header h2,
.theme-semi-dark .modal-hayyu .modal-header h3,
.theme-semi-dark .modal-hayyu .modal-header h4,
.theme-semi-dark .modal-hayyu .modal-header h5,
.theme-semi-dark .modal-hayyu .modal-header .modal-title {
    color: #ffffff !important;
}