/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Custom Blue Theme Color Overrides */
:root {
    --blue-primary: #2E5AAC;
    --blue-dark: #1E3A7C;
    --blue-light: #4472C4;
    --blue-accent: #5B9BD5;
}

/* Primary Color Overrides */
.bg-primary {
    background-color: #2E5AAC !important;
}

.btn-primary {
    background-color: #2E5AAC !important;
    border-color: #2E5AAC !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1E3A7C !important;
    border-color: #1E3A7C !important;
}

.border-primary {
    border-color: #2E5AAC !important;
}

.text-primary {
    color: #2E5AAC !important;
}

/* Alerts */
.alert-primary {
    background: rgba(46, 90, 172, 0.12) !important;
    color: #2E5AAC !important;
}

/* Badges */
.badge-primary,
.badge.badge-primary {
    background-color: #2E5AAC !important;
}

.badge.badge-light-primary {
    background-color: rgba(46, 90, 172, 0.12) !important;
    color: #2E5AAC !important;
}

/* Buttons */
.btn-flat-primary {
    color: #2E5AAC !important;
}

.btn-flat-primary:hover {
    background-color: rgba(46, 90, 172, 0.12) !important;
}

.btn-outline-primary {
    color: #2E5AAC !important;
    border-color: #2E5AAC !important;
}

.btn-outline-primary:hover {
    background-color: rgba(46, 90, 172, 0.2) !important;
    color: #2E5AAC !important;
}

.btn-gradient-primary {
    background-image: linear-gradient(47deg, #2E5AAC, #5B9BD5) !important;
}

/* Links */
a.text-primary:hover,
a.text-primary:focus {
    color: #1E3A7C !important;
}

/* Forms */
.form-check-primary .form-check-input:checked {
    background-color: #2E5AAC !important;
    border-color: #2E5AAC !important;
}

.form-check-primary .form-check-input:not(:disabled):checked,
.form-check-primary .form-check-input:not(:disabled):focus {
    border-color: #2E5AAC !important;
    box-shadow: 0 2px 4px 0 rgba(46, 90, 172, 0.4) !important;
}

input:focus ~ .bg-primary {
    box-shadow: 0 0 0 0.075rem #FFF, 0 0 0 0.21rem #2E5AAC !important;
}

/* Pagination */
.pagination-primary .page-item.active .page-link {
    background: #2E5AAC !important;
    border-color: #2E5AAC !important;
}

.pagination-primary .page-item .page-link:hover {
    color: #2E5AAC !important;
}

/* Navigation Pills */
.nav-pill-primary .nav-item .nav-link.active {
    background-color: #2E5AAC !important;
    border-color: #2E5AAC !important;
    box-shadow: 0 4px 18px -4px rgba(46, 90, 172, 0.65) !important;
}

/* Progress Bars */
.progress-bar-primary .progress-bar {
    background-color: #2E5AAC !important;
}

/* Timeline */
.timeline .timeline-point-primary {
    border-color: #2E5AAC !important;
}

.timeline .timeline-point-primary.timeline-point-indicator {
    background-color: #2E5AAC !important;
}

.timeline .timeline-point-primary.timeline-point-indicator:before {
    background: rgba(46, 90, 172, 0.12) !important;
}

/* Sidebar and Menu */
.main-menu.menu-light .navigation > li.active > a {
    background: linear-gradient(118deg, #2E5AAC, rgba(46, 90, 172, 0.7)) !important;
}

.main-menu .navigation > li > a:hover {
    background-color: rgba(46, 90, 172, 0.1) !important;
}

/* Modals */
.modal.modal-primary .modal-header .modal-title {
    color: #2E5AAC !important;
}

/* Dividers */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
    border-color: #2E5AAC !important;
}

/* Select2 */
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #2E5AAC !important;
    border-color: #2E5AAC !important;
}

/* Bullet points */
.bullet.bullet-primary {
    background-color: #2E5AAC !important;
}

/* Card Header with Primary Background */
.card .card-header.bg-primary {
    background-color: #2E5AAC !important;
}

/* Active states */
.active.bg-primary,
.show > .bg-primary {
    background-color: #1E3A7C !important;
}

/* Light backgrounds */
.bg-light-primary {
    background: rgba(46, 90, 172, 0.12) !important;
    color: #2E5AAC !important;
}

/* ========================================
   CUSTOM SIDEBAR STYLING - Blue Theme
   ======================================== */

/* Main sidebar background - Solid Blue */
.main-menu {
    background: #4267E8 !important;
    background-image: none !important;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05) !important;
}

.main-menu.menu-dark,
.main-menu.menu-light {
    background: #4267E8 !important;
}

/* Navbar header styling */
.main-menu .navbar-header {
    background: #4267E8 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.main-menu .navbar-header .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.main-menu .navbar-header .brand-logo {
    display: block !important;
    transition: all 0.3s ease !important;
}

.main-menu .navbar-header .brand-logo img {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    object-fit: contain !important;
}

.main-menu .navbar-header .brand-text {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

/* When sidebar is collapsed - SHOW LOGO, HIDE TEXT */
.main-menu.menu-collapsed .navbar-header .brand-logo {
    display: block !important;
}

.main-menu.menu-collapsed .navbar-header .brand-text {
    display: none !important;
}

.main-menu.menu-collapsed .navbar-header .brand-logo img {
    height: 35px !important;
}

/* Ensure logo is centered when collapsed */
.main-menu.menu-collapsed .navbar-header {
    padding: 1rem 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
}

.main-menu.menu-collapsed .navbar-header .navbar-brand {
    justify-content: center !important;
}

/* Navigation items */
.main-menu .navigation {
    background: transparent !important;
}

.main-menu .navigation > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.8rem 1.2rem !important;
    margin: 0.3rem 1rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.main-menu .navigation > li > a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Show full menu title on hover for truncated text */
.main-menu .navigation > li > a .menu-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Tooltip on hover using title attribute */
.main-menu .navigation > li > a[title]:hover::before {
    content: attr(title) !important;
    position: absolute !important;
    left: calc(100% + 0.5rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #2c3e50 !important;
    color: #FFFFFF !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    font-size: 0.9rem !important;
    pointer-events: none !important;
}

/* Arrow for tooltip */
.main-menu .navigation > li > a[title]:hover::after {
    content: '' !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: 6px solid transparent !important;
    border-right-color: #2c3e50 !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

/* Active menu item */
.main-menu .navigation > li.active > a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Parent menu when child is active (open state) */
.main-menu .navigation > li.open > a,
.main-menu .navigation > li.has-sub.open > a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Override dark theme for parent menu when child is active */
.main-menu.menu-dark .navigation>li.open:not(.menu-item-closing)>a,
.main-menu.menu-dark .navigation>li.sidebar-group-active>a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Override dark theme for parent menu when collapsed and child is active */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.open > a,
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.sidebar-group-active > a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Menu icons */
.main-menu .navigation li a i,
.main-menu .navigation li a svg {
    color: #FFFFFF !important;
    margin-right: 0.75rem !important;
}

/* Menu background when sidebar is collapsed */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.active a {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    color: #FFFFFF !important;
}
       
/* Navigation header (section titles) */
.main-menu .navigation .navigation-header {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 1.5rem !important;
}

.main-menu .navigation .navigation-header i,
.main-menu .navigation .navigation-header svg {
    color: rgba(255, 255, 255, 0.5) !important;
}

.main-menu .navigation .navigation-header span {
    color: rgba(255, 255, 255, 0.739) !important;
}

/* Submenu styling */
.main-menu .navigation .menu-content {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.3rem 0 !important;
}

.main-menu .navigation .menu-content li {
    list-style: none !important;
}

.main-menu .navigation .menu-content li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.8rem 1.2rem 0.8rem 3rem !important;
    margin: 0.3rem 1rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
    background: transparent !important;
    position: relative !important;
}

/* Hide default icons and add circle bullet */
.main-menu .navigation .menu-content li a i,
.main-menu .navigation .menu-content li a svg {
    display: none !important;
}

/* Circle bullet for child menu items */
.main-menu .navigation .menu-content li a::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.7) !important;
    position: absolute !important;
    left: 1.8rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
}

.main-menu .navigation .menu-content li a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.main-menu .navigation .menu-content li a:hover::before {
    background: #FFFFFF !important;
    width: 8px !important;
    height: 8px !important;
}

.main-menu .navigation .menu-content li.active a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.main-menu .navigation .menu-content li.active a::before {
    background: #FFFFFF !important;
    width: 8px !important;
    height: 8px !important;
}

/* Override child menu active background - more specific selector */
.main-menu.menu-dark .navigation>li ul .active,
.main-menu.menu-light .navigation>li ul .active {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.main-menu.menu-dark .navigation>li ul .active>a,
.main-menu.menu-light .navigation>li ul .active>a {
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
}

/* Toggle icon colors */
.main-menu .toggle-icon,
.main-menu .collapse-toggle-icon {
    color: #FFFFFF !important;
}

/* Scrollbar styling for sidebar */
.main-menu-content::-webkit-scrollbar {
    width: 6px;
}

.main-menu-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.main-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.main-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Shadow at bottom of header */
.main-menu .shadow-bottom {
    display: none !important;
}

/* Menu title text */
.main-menu .menu-title {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* Expanded submenu parent */
.main-menu .navigation > li.open > a {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Remove any gradient overlays */
.main-menu::before,
.main-menu::after {
    display: none !important;
}

/* Ensure text is visible */
.main-menu * {
    color: inherit;
}

/* Menu arrow for submenus */
.main-menu .navigation li.has-sub > a::after {
    content: '' !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.3s ease !important;
    border: none !important;
}

/* Arrow rotation when submenu is open */
.main-menu .navigation li.has-sub.open > a::after {
    transform: translateY(-50%) rotate(90deg) !important;
}

/* Make room for arrow */
.main-menu .navigation li.has-sub > a {
    position: relative !important;
    padding-right: 3rem !important;
}

/* ========================================
   TABLE STYLING
   ======================================== */

/* Table header with blue theme */
table thead th,
.table thead th {
    background-color: #4267E8 !important;
    background: linear-gradient(90deg, #4267E8 0%, #4267E8 100%) !important;
    border-color: #4267E8 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
}

/* Table body */
.table tbody tr {
    transition: all 0.3s ease !important;
}

.table tbody tr:hover {
    background-color: rgba(66, 103, 232, 0.05) !important;
}

/* ========================================
   BUTTONS STYLING
   ======================================== */

/* Action buttons - Edit/Ubah */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.btn-primary,
.btn-primary.btn,
.btn-primary:not(:disabled):not(.disabled),
table .btn-primary,
.table .btn-primary,
.card .btn-primary,
.dataTables_wrapper .btn-primary,
td .btn-primary,
tbody .btn-primary {
    background: #4267E8 !important;
    background-color: #4267E8 !important;
    background-image: none !important;
    border-color: #4267E8 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
a.btn-primary:hover,
.btn.btn-primary:hover,
table .btn-primary:hover,
.table .btn-primary:hover {
    background: #3556D6 !important;
    background-color: #3556D6 !important;
    background-image: none !important;
    border-color: #3556D6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(66, 103, 232, 0.4) !important;
    color: #FFFFFF !important;
}

/* Delete button - Hapus */
.btn-danger,
button.btn-danger,
a.btn-danger {
    background: #EA5455 !important;
    border-color: #EA5455 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-danger:hover {
    background: #E42728 !important;
    border-color: #E42728 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(234, 84, 85, 0.4) !important;
}

/* Success button - Add/Tambah */
.btn-success,
button.btn-success,
a.btn-success {
    background: #28C76F !important;
    border-color: #28C76F !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover {
    background: #24B263 !important;
    border-color: #24B263 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(40, 199, 111, 0.4) !important;
}

/* ========================================
   PAGINATION STYLING
   ======================================== */

/* Pagination container */
.pagination {
    gap: 0.5rem !important;
}

/* Pagination buttons */
.pagination .page-item .page-link {
    color: #4267E8 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin: 0 0.2rem !important;
}

.pagination .page-item .page-link:hover {
    background: rgba(66, 103, 232, 0.1) !important;
    border-color: #4267E8 !important;
    color: #4267E8 !important;
}

/* Active pagination */
.pagination .page-item.active .page-link {
    background: #4267E8 !important;
    border-color: #4267E8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(66, 103, 232, 0.3) !important;
}

/* Disabled pagination */
.pagination .page-item.disabled .page-link {
    color: #B0B0B0 !important;
    border-color: #E0E0E0 !important;
    background: #F5F5F5 !important;
}

/* ========================================
   BREADCRUMB STYLING
   ======================================== */

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Adjust breadcrumb vertical position */
.content-header .breadcrumb {
    padding-left: 1rem !important;
    padding-top: 0.25rem !important;
}

.breadcrumb-item {
    color: #6E6B7B !important;
    font-size: 0.9rem !important;
}

.breadcrumb-item.active {
    color: #4267E8 !important;
    font-weight: 500 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #B0B0B0 !important;
}

.breadcrumb-item a {
    color: #6E6B7B !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.breadcrumb-item a:hover {
    color: #4267E8 !important;
}

/* ========================================
   CONTENT AREA STYLING
   ======================================== */

/* Content wrapper */
.content-wrapper {
    background: #F8F8F8 !important;
    padding: 1.5rem !important;
}

/* Cards */
.card {
    border: none !important;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
}

.card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0 !important;
    padding: 1.2rem 1.5rem !important;
}

.card-body {
    padding: 1.5rem !important;
    background: #FFFFFF !important;
}

/* Page title */
.content-header-title {
    color: #2C3E50 !important;
    font-weight: 600 !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Form controls */
.form-control,
.form-select {
    border: 1px solid #D8D6DE !important;
    border-radius: 6px !important;
    padding: 0.7rem 1rem !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #4267E8 !important;
    box-shadow: 0 3px 10px 0 rgba(66, 103, 232, 0.15) !important;
}

/* ========================================
   DATATABLE STYLING
   ======================================== */

/* DataTable controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #D8D6DE !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.8rem !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #4267E8 !important;
    outline: none !important;
    box-shadow: 0 3px 10px 0 rgba(66, 103, 232, 0.15) !important;
}

/* ========================================
   LOGIN PAGE BACKGROUND
   ======================================== */

/* Login page background image */
/* .blank-page .app-content {
    background-image: url('../images/pages/bg-1.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
} */

/* Optional: Add overlay for better card visibility */
/* .blank-page .auth-wrapper::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 0 !important;
}

.blank-page .auth-wrapper {
    position: relative !important;
    z-index: 1 !important;
} */

/* ========================================
   FINAL OVERRIDE - PRIMARY BUTTON COLOR
   Must be at the end to override bootstrap-extended
   ======================================== */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary,
.btn.btn-primary {
    background: #4267E8 !important;
    background-color: #4267E8 !important;
    background-image: none !important;
    border-color: #4267E8 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #3556D6 !important;
    background-color: #3556D6 !important;
    background-image: none !important;
    border-color: #3556D6 !important;
}