/**
 * Mappo — Enterprise light theme (Metronic overrides)
 * Loads after style.bundle.css, app.css, dark-mode.css.
 * Light mode only: body:not(.dark-mode)
 *
 * Palette: soft purple primary, cyan secondary, warm accent, coral danger.
 */

/* --------------------------------------------------------------------------
   Design tokens (light)
   -------------------------------------------------------------------------- */
body:not(.dark-mode) {
    --mappo-primary: #6c5ce7;
    --mappo-primary-hover: #5a4fcf;
    --mappo-secondary: #00cec9;
    --mappo-accent-warm: #fdcb6e;
    --mappo-danger: #ff7675;
    --mappo-bg-page: #f8f9fa;
    --mappo-card: #ffffff;
    --mappo-text: #2d3436;
    --mappo-text-muted: #636e72;
    --mappo-border: #eaeaea;

    /* Bootstrap 5 bridge (Metronic bundles use these) */
    --bs-primary: #6c5ce7;
    --bs-primary-rgb: 108, 92, 231;
    --bs-secondary: #00cec9;
    --bs-secondary-rgb: 0, 206, 201;
    --bs-warning: #fdcb6e;
    --bs-warning-rgb: 253, 203, 110;
    --bs-danger: #ff7675;
    --bs-danger-rgb: 255, 118, 117;

    --bs-body-bg: #f8f9fa;
    --bs-body-color: #2d3436;
    --bs-body-color-rgb: 45, 52, 54;
    --bs-border-color: #eaeaea;
    --bs-link-color: #6c5ce7;
    --bs-link-hover-color: #5a4fcf;

    /* Stronger neutrals — reduce “washed” mid-gray text */
    --bs-gray-400: #8892a0;
    --bs-gray-500: #636e72;
    --bs-gray-600: #4f5a63;
    --bs-gray-700: #3d4446;
    --bs-gray-800: #2d3436;
    --bs-gray-900: #1e2224;
}

/* --------------------------------------------------------------------------
   Chrome: page, header, toolbar, content well
   -------------------------------------------------------------------------- */
body:not(.dark-mode),
body:not(.dark-mode) #kt_wrapper,
body:not(.dark-mode) .wrapper,
body:not(.dark-mode) .content,
body:not(.dark-mode) #kt_content,
body:not(.dark-mode) #kt_post,
body:not(.dark-mode) .page {
    background-color: var(--mappo-bg-page) !important;
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .header,
body:not(.dark-mode) #kt_header,
body:not(.dark-mode) .header-cicle {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(228, 230, 239, 0.85) !important;
    box-shadow: none !important;
}

body:not(.dark-mode) #kt_toolbar,
body:not(.dark-mode) .toolbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(228, 230, 239, 0.85) !important;
    box-shadow: none !important;
}

body:not(.dark-mode) #kt_toolbar.kt-toolbar-compact {
    border-bottom: 1px solid rgba(228, 230, 239, 0.75) !important;
}

body:not(.dark-mode) .breadcrumb .breadcrumb-item,
body:not(.dark-mode) .breadcrumb-item.active {
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .breadcrumb-item.text-gray-600,
body:not(.dark-mode) .breadcrumb-item.text-muted a {
    color: var(--mappo-text-muted) !important;
}

/* --------------------------------------------------------------------------
   Typography — high contrast
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .text-gray-800,
body:not(.dark-mode) .text-dark {
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .text-gray-700 {
    color: #3d4446 !important;
}

body:not(.dark-mode) .text-gray-600 {
    color: var(--mappo-text-muted) !important;
}

body:not(.dark-mode) .text-gray-500 {
    color: #636e72 !important;
}

body:not(.dark-mode) .text-muted {
    color: var(--mappo-text-muted) !important;
    opacity: 1 !important;
}

body:not(.dark-mode) .fw-bold.text-gray-400,
body:not(.dark-mode) .text-gray-400 {
    color: #8892a0 !important;
}

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) .card-title {
    color: var(--mappo-text) !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .btn-primary {
    background-color: var(--mappo-primary) !important;
    border-color: var(--mappo-primary) !important;
    color: #ffffff !important;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn-primary:focus {
    background-color: var(--mappo-primary-hover) !important;
    border-color: var(--mappo-primary-hover) !important;
    color: #ffffff !important;
}

body:not(.dark-mode) .btn-primary:active {
    background-color: #5248c4 !important;
    border-color: #5248c4 !important;
}

body:not(.dark-mode) .btn-secondary {
    background-color: var(--mappo-secondary) !important;
    border-color: var(--mappo-secondary) !important;
    color: #0d3d3c !important;
}

body:not(.dark-mode) .btn-secondary:hover {
    background-color: #00bfb9 !important;
    border-color: #00bfb9 !important;
    color: #042a29 !important;
}

body:not(.dark-mode) .btn-light-primary {
    background-color: rgba(108, 92, 231, 0.1) !important;
    border-color: transparent !important;
    color: var(--mappo-primary) !important;
}

body:not(.dark-mode) .btn-light-primary:hover {
    background-color: rgba(108, 92, 231, 0.18) !important;
    color: var(--mappo-primary-hover) !important;
}

body:not(.dark-mode) .btn-light {
    background-color: #ffffff !important;
    border: 1px solid var(--mappo-border) !important;
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .btn-light:hover {
    background-color: #f0f1ff !important;
    border-color: #dcd6ff !important;
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .btn-warning {
    background-color: var(--mappo-accent-warm) !important;
    border-color: #f5c45a !important;
    color: #3d3319 !important;
}

body:not(.dark-mode) .btn-danger {
    background-color: var(--mappo-danger) !important;
    border-color: #ff6b6a !important;
    color: #ffffff !important;
}

body:not(.dark-mode) .btn-danger:hover {
    background-color: #ff5c5b !important;
    border-color: #ff5c5b !important;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .card {
    background-color: var(--mappo-card) !important;
    border: 1px solid var(--mappo-border) !important;
    box-shadow: 0 1px 2px rgba(45, 52, 54, 0.04) !important;
}

body:not(.dark-mode) .card .card-header,
body:not(.dark-mode) .card .card-footer {
    background-color: var(--mappo-card) !important;
    border-color: var(--mappo-border) !important;
}

body:not(.dark-mode) .card .card-body {
    color: var(--mappo-text) !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select,
body:not(.dark-mode) .form-control-solid {
    background-color: #ffffff !important;
    border: 1px solid var(--mappo-border) !important;
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) .form-select:focus {
    border-color: rgba(108, 92, 231, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.15) !important;
}

body:not(.dark-mode) .form-label,
body:not(.dark-mode) label {
    color: var(--mappo-text) !important;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .table {
    color: var(--mappo-text) !important;
    --bs-table-border-color: var(--mappo-border);
}

body:not(.dark-mode) .table thead th {
    color: var(--mappo-text) !important;
    border-bottom-color: var(--mappo-border) !important;
    font-weight: 600;
}

body:not(.dark-mode) .table td,
body:not(.dark-mode) .table tbody th {
    border-color: var(--mappo-border) !important;
}

body:not(.dark-mode) .table.table-row-gray-300 td,
body:not(.dark-mode) .table.table-row-gray-300 th {
    border-color: #eceef0 !important;
}

body:not(.dark-mode) .table tbody tr:hover {
    background-color: rgba(108, 92, 231, 0.07) !important;
}

body:not(.dark-mode) .table.gs-0 tbody tr:hover td {
    --bs-table-accent-bg: rgba(108, 92, 231, 0.07);
}

/* DataTables / striped */
body:not(.dark-mode) table.dataTable tbody tr:hover {
    background-color: rgba(108, 92, 231, 0.07) !important;
}

/* --------------------------------------------------------------------------
   Sidebar — semi-dark (project app)
   -------------------------------------------------------------------------- */
body:not(.dark-mode) #kt_aside.aside-light,
body:not(.dark-mode) #kt_aside.project-sidebar {
    background: linear-gradient(180deg, #252836 0%, #1e2130 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body:not(.dark-mode) #kt_aside.aside-light .aside-logo,
body:not(.dark-mode) #kt_aside.project-sidebar #kt_aside_logo {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Logo workspace di sidebar: tanpa kotak / latar solid (override Metronic) */
#kt_aside .workspace-brand-sidebar-logo {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body:not(.dark-mode) #kt_aside .sidebar-company-name {
    color: #f1f2f6 !important;
}

body:not(.dark-mode) #kt_aside .menu-heading,
body:not(.dark-mode) #kt_aside .menu-content .text-muted {
    color: #a4abb6 !important;
    opacity: 1 !important;
}

body:not(.dark-mode) #kt_aside .menu-link {
    color: #d1d5db !important;
}

body:not(.dark-mode) #kt_aside .menu-link .menu-title,
body:not(.dark-mode) #kt_aside .menu-link .text-gray-800 {
    color: #e8eaed !important;
}

body:not(.dark-mode) #kt_aside .menu-link:hover,
body:not(.dark-mode) #kt_aside .menu-link.active {
    background-color: rgba(108, 92, 231, 0.22) !important;
    color: #ffffff !important;
}

body:not(.dark-mode) #kt_aside .menu-link:hover .text-hover-primary,
body:not(.dark-mode) #kt_aside .menu-link.active .text-hover-primary,
body:not(.dark-mode) #kt_aside .menu-link:hover .menu-title,
body:not(.dark-mode) #kt_aside .menu-link.active .menu-title {
    color: #e8e4ff !important;
}

body:not(.dark-mode) #kt_aside .text-gray-500 {
    color: #9ca3af !important;
}

body:not(.dark-mode) #kt_aside .form-control.bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f2f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.dark-mode) #kt_aside .form-control::placeholder {
    color: #9ca3af !important;
}

body:not(.dark-mode) #kt_aside .btn-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #e8eaed !important;
}

body:not(.dark-mode) #kt_aside .aside-toggle-btn {
    color: #d1d5db !important;
}

body:not(.dark-mode) #kt_aside .aside-toggle-btn:hover {
    background-color: rgba(108, 92, 231, 0.25) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Super Admin — aside-dark accent (light shell)
   -------------------------------------------------------------------------- */
body:not(.dark-mode).super-admin-layout .aside-dark .menu-link.active,
body:not(.dark-mode).super-admin-layout .aside-dark .menu-link:hover {
    background-color: rgba(108, 92, 231, 0.22) !important;
}

body:not(.dark-mode).super-admin-layout .aside-dark .menu-link.active .menu-title,
body:not(.dark-mode).super-admin-layout .aside-dark .menu-link:hover .menu-title {
    color: #dfd9ff !important;
}

body:not(.dark-mode) .symbol-label.bg-primary {
    background-color: var(--mappo-primary) !important;
}

/* --------------------------------------------------------------------------
   Alerts & badges — rely on semantic colors without faint text
   -------------------------------------------------------------------------- */
body:not(.dark-mode) .alert {
    border-width: 1px;
}

body:not(.dark-mode) .alert-primary {
    background-color: rgba(108, 92, 231, 0.1);
    border-color: rgba(108, 92, 231, 0.35);
    color: #3b2f91;
}

body:not(.dark-mode) .badge-light-primary {
    background-color: rgba(108, 92, 231, 0.12);
    color: #4c3dbf;
}

body:not(.dark-mode) .badge-light-secondary {
    background-color: rgba(0, 206, 201, 0.15);
    color: #0a5e5b;
}

/* --------------------------------------------------------------------------
   Links & utilities (Metronic helpers)
   -------------------------------------------------------------------------- */
body:not(.dark-mode) a.text-hover-primary:hover,
body:not(.dark-mode) .link-primary {
    color: var(--mappo-primary) !important;
}

body:not(.dark-mode) .active.text-primary,
body:not(.dark-mode) .text-primary {
    color: var(--mappo-primary) !important;
}

body:not(.dark-mode) .border,
body:not(.dark-mode) .border-bottom,
body:not(.dark-mode) .border-gray-200,
body:not(.dark-mode) .separator {
    border-color: var(--mappo-border) !important;
}

body:not(.dark-mode) .bg-light {
    background-color: #f1f3f5 !important;
}

body:not(.dark-mode) .bg-body {
    background-color: var(--mappo-bg-page) !important;
}

/* Dropdowns — solid text */
body:not(.dark-mode) .dropdown-menu {
    border: 1px solid var(--mappo-border) !important;
    box-shadow: 0 0.5rem 1rem rgba(30, 34, 36, 0.08);
}

body:not(.dark-mode) .dropdown-item {
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .dropdown-item:hover,
body:not(.dark-mode) .dropdown-item:focus {
    background-color: rgba(108, 92, 231, 0.08) !important;
    color: var(--mappo-text) !important;
}

body:not(.dark-mode) .dropdown-item .text-gray-600 {
    color: var(--mappo-text-muted) !important;
}

body:not(.dark-mode) .modal-content {
    border: 1px solid var(--mappo-border) !important;
}

/* Pagination */
body:not(.dark-mode) .page-link {
    color: var(--mappo-primary);
    border-color: var(--mappo-border);
}

body:not(.dark-mode) .page-item.active .page-link {
    background-color: var(--mappo-primary);
    border-color: var(--mappo-primary);
}

/* --------------------------------------------------------------------------
   Tables — Metronic `.table.gs-0` membuat sel ujung mepet; kembalikan inset
   (berlaku light & dark; load setelah style.bundle)
   -------------------------------------------------------------------------- */
.table.gs-0 th:first-child,
.table.gs-0 td:first-child {
    padding-left: 1.25rem !important;
}

.table.gs-0 th:last-child,
.table.gs-0 td:last-child {
    padding-right: 1.25rem !important;
}

/* Card dengan tabel/DataTables full-bleed: beri padding ke body */
.card > .card-body.p-0:has(> table),
.card > .card-body.p-0:has(> .table-responsive),
.card > .card-body.p-0:has(> .dataTables_wrapper),
.card > .card-body.p-0:has(.dataTables_wrapper) {
    padding: 1rem 1.25rem 1.5rem !important;
}