/* ====================================================================== */
/*  Ofaami Enterprise Dashboard — Override / integration layer            */
/*  Loaded AFTER the legacy `style.css` so it restyles the existing       */
/*  Laravel admin classes (bootstrap + legacy custom) to the new tokens.  */
/* ====================================================================== */

/* ----------------------------------------------------------------- base */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-interface);
    font-size: var(--fz-13);
    -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--primary-mid); outline-offset: 2px; border-radius: 4px; }

/* topbar link/btn base color reset */
.header a, .navbar a { color: inherit; }

/* ----------------------------------------------------------------- cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-14);
    box-shadow: var(--shadow-sm);
}
.card-body { padding: 18px; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 14px 18px;
    border-radius: var(--r-14) var(--r-14) 0 0;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.card-header .card-title, .card-header h4, .card-header h5, .card-header .title {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
}
.card-header .card-title small { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.card-footer { background: transparent; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-14) var(--r-14); padding: 12px 18px; }
.card-shadowed { box-shadow: var(--shadow-sm); }
.card .card-header + .card-body { border-radius: 0; }

/* ----------------------------------------------------------------- title */
.page-title-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: var(--fz-20); font-weight: 700; color: var(--text); margin: 0; }
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 11.5px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-faint); content: "/"; }
.breadcrumb-item.active { color: var(--primary-dark); font-weight: 600; }

/* ------------------------------------------------------------------ tabs */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-radius: var(--r-10) var(--r-10) 0 0; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 9px 14px; }
.nav-tabs .nav-link:hover { color: var(--primary); }
.nav-tabs .nav-link.active { color: var(--primary-dark); background: transparent; position: relative; }
.nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--primary-gradient); }

/* ---------------------------------------------------------------- buttons */
.btn--primary, .btn-primary, .btn--action, .theme-btn {
    background: var(--primary-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--shadow-purple);
}
.btn--primary:hover, .btn-primary:hover, .btn--action:hover, .theme-btn:hover { color: #fff; filter: brightness(1.06); }
.btn--danger { background: transparent !important; border-color: rgba(226,75,74,.4) !important; color: var(--danger) !important; }
.btn--danger:hover { background: var(--danger-soft); color: var(--danger-dark); }
.btn-outline, .btn--outline { background: transparent; border-color: var(--primary-mid); color: var(--primary-dark); }
.btn--outline:hover { background: var(--primary-soft); }
.btn-primary { border-color: transparent; }
.btn-primary:hover { border-color: transparent; filter: brightness(1.06); }
.btn-secondary { background: var(--primary-soft); border-color: var(--border-strong); color: var(--text-2); }
.btn-secondary:hover { background: var(--primary-p50); color: var(--primary-dark); }
.btn-success { background: var(--success); border-color: transparent; }
.btn-success:hover { background: var(--success-dark); border-color: transparent; }
.btn-warning { background: var(--warning); border-color: transparent; color: #fff; }
.btn-warning:hover { color: #fff; filter: brightness(1.05); }
.btn-light { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-2); }
.btn-outline-primary { color: var(--primary-dark); border-color: var(--primary-mid); }
.btn-outline-primary:hover { background: var(--primary-soft); border-color: var(--primary-mid); color: var(--primary-dark); }
.btn-outline-danger { color: var(--danger); border-color: rgba(226,75,74,.4); }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger-dark); }
.action-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-8); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2); font-size: 13px; }
.action-btn:hover { border-color: var(--primary-mid); color: var(--primary); }
.action-btn.danger:hover { border-color: rgba(226,75,74,.4); color: var(--danger); }

/* --------------------------------------------------------------- badges */
.badge, .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .4px; border-radius: var(--r-full); padding: 3px 10px; line-height: 1.55; white-space: nowrap; }
.badge-primary, .badge-soft-primary, .status-badge-primary, .badge--primary { color: var(--primary-dark); background: var(--primary-soft); }
.badge-success, .badge-soft-success, .status-badge-success, .badge--success { color: var(--success-dark); background: var(--success-soft); }
.badge-warning, .badge-soft-warning, .status-badge-warning, .badge--warning { color: var(--warning-dark); background: var(--warning-soft); }
.badge-danger, .badge-soft-danger, .status-badge-danger, .badge--danger { color: var(--danger-dark); background: var(--danger-soft); }
.badge-info, .badge-soft-info { color: var(--info-dark); background: var(--info-soft); }
.badge-secondary, .badge-soft-secondary, .badge-dark, .badge-slate { color: var(--text-2); background: var(--primary-p50); }
.badge-gold { color: var(--gold-dark); background: var(--gold-soft); }
.badge-pill { border-radius: var(--r-full); }

/* ----------------------------------------------------------------- inputs */
.form-control, .theme-input-style, .form-select {
    background: var(--surface-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-10);
    color: var(--text);
    font-size: 12.5px;
    padding: 8px 13px;
    min-height: 38px;
}
.form-control:focus, .theme-input-style:focus, .form-select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,79,232,.12); background: #fff; color: var(--text);
}
.form-control::placeholder, .theme-input-style::placeholder { color: var(--text-faint); }
.form-label, label.form-label { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.input-group-text { background: var(--primary-p50); border: 1px solid var(--border-strong); border-radius: var(--r-10); color: var(--text-2); font-size: 12.5px; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }

/* search inputs */
.search-form { display: flex; align-items: center; }
.search-form__input {
    background: var(--surface-input); border: 1px solid var(--border-strong); border-radius: var(--r-10);
    color: var(--text); font-size: 12px; padding: 8px 13px; min-height: 36px; outline: 0;
}
.search-form__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,79,232,.10); }

/* ---------------------------------------------------------------- select2 */
.select2-container--default .select2-selection--single {
    background-color: var(--surface-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-10);
    height: 38px; display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); font-size: 12.5px; line-height: 36px; padding-left: 13px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,79,232,.12); }
.select2-container--default .select2-dropdown { border: 1px solid var(--border-strong); border-radius: var(--r-12); box-shadow: var(--shadow-sm); padding: 6px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary-soft); color: var(--primary-dark); border-radius: var(--r-8); }
.select2-container--default .select2-selection--multiple { background-color: var(--surface-input); border: 1px solid var(--border-strong); border-radius: var(--r-10); min-height: 38px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary-soft); border: 1px solid var(--primary-mid); border-radius: var(--r-full); color: var(--primary-dark); font-size: 11px; padding: 1px 10px 1px 8px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--primary); }

/* ---------------------------------------------------------- data tables */
.data-table-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.data-table-top .filter-items { display: flex; gap: 8px; flex-wrap: wrap; }
.data-table-top .dataTable-label, .data-table-top label { font-size: 11.5px; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.data-table-container { width: 100%; }
.dataTables_wrapper .dataTables_filter input, .dataTables_length select {
    background: var(--surface-input); border: 1px solid var(--border-strong); border-radius: var(--r-10);
    color: var(--text); font-size: 12px; padding: 5px 10px; outline: 0; margin-left: 6px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); }
table.dataTable { border-collapse: collapse; }
table.dataTable thead th { background: var(--primary-p50); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); padding: 10px 14px; }
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { background-image: none; }
table.dataTable td { border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fz-12); padding: 11px 14px; }
table.dataTable tbody tr:hover { background: var(--primary-p50); }
.dataTables_wrapper .dataTables_info { font-size: 11.5px; color: var(--text-muted); }
.dataTables_wrapper .pagination { display: flex; gap: 4px; flex-wrap: wrap; }
.dataTables_wrapper .page-item .page-link { border: 1px solid var(--border); border-radius: var(--r-8); background: var(--bg-card); color: var(--text-2); font-size: 11.5px; padding: 5px 11px; min-width: 30px; text-align: center; }
.dataTables_wrapper .page-item .page-link:hover { color: var(--primary); border-color: var(--primary-mid); }
.dataTables_wrapper .page-item.active .page-link { background: var(--primary-gradient); border-color: transparent; color: #fff; box-shadow: var(--shadow-purple); }
.pagination .page-link { border: 1px solid var(--border); border-radius: var(--r-8); background: var(--bg-card); color: var(--text-2); font-size: 11.5px; padding: 5px 11px; }

/* -------------------------------------------------------------- modals */
.modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-18); box-shadow: var(--shadow-lg); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); align-items: center; }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); }
.modal-header .btn-close { color: var(--text-muted); }

/* ---------------------------------------------------------- dropdowns */
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-14); box-shadow: var(--shadow-lg); padding: 8px; font-size: 12.5px; }
.dropdown-item { border-radius: var(--r-10); color: var(--text-2); padding: 9px 12px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: var(--primary-soft); color: var(--primary-dark); }
.dropdown-divider { border-color: var(--border); margin: 6px 4px; }
.dropdown-menu-right { right: 0; }
.dropdown-menu .mi { font-size: 16px; color: var(--text-muted); }
.dropdown-item .mi { color: var(--text-muted); }
.dropdown-item:hover .mi { color: var(--primary); }

/* ---------------------------------------------------------------- tables */
.table { --bs-table-bg: transparent; }
.table thead th { background: var(--primary-p50); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.table td { border-color: var(--border); color: var(--text-2); font-size: var(--fz-12); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--primary-p50); }
.table-hover > tbody > tr:hover > * { background: var(--primary-soft); }
.table-bordered { border-color: var(--border); }
.table-responsive { border-radius: var(--r-14); }

/* ---------------------------------------------------------------- alerts */
.alert { border-radius: var(--r-12); font-size: 12.5px; border: 1px solid transparent; }
.alert-success { background: var(--success-soft); border-color: rgba(29,158,117,.3); color: var(--success-dark); }
.alert-danger { background: var(--danger-soft); border-color: rgba(226,75,74,.3); color: var(--danger-dark); }
.alert-warning { background: #FFF3CD; border-color: rgba(226,160,0,.3); color: var(--warning-dark); }
.alert-info { background: var(--info-soft); border-color: rgba(43,108,176,.2); color: var(--info-dark); }

/* ------------------------------------------------- summary metric cards */
.business-summary, .business_summary_card, .statistics_card, .statistic-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-14);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.business-summary .business-block-card-title, .business_summary_card .card-title {
    font-size: 16px; font-weight: 700; color: var(--text);
}
.business-summary:hover { border-color: var(--primary-mid); }

/* --------------------------------------------------------- dashboard sync */
.dashboard-sync-card { background: linear-gradient(var(--primary-gradient)); color: #fff; border-radius: var(--r-14); padding: 18px; }

/* ------------------------------------------------------- apex chart skin */
.apexcharts-tooltip { border: 1px solid var(--border) !important; border-radius: var(--r-12) !important; box-shadow: var(--shadow-sm) !important; color: var(--text) !important; background: var(--bg-card) !important; }
.apexcharts-tooltip .apexcharts-tooltip-title { background: var(--primary-p50) !important; border-bottom: 1px solid var(--border) !important; }
.apexcharts-legend-text { font-size: 11.5px !important; color: var(--text-muted) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--text-muted) !important; }
.apexcharts-toolbar { opacity: .6; }

/* ------------------------------------------------ toastr / custom toast */
.toast-list, .toastify { border-radius: var(--r-12) !important; }

/* legend horizontal scroll guard */
.apexcharts-legend { white-space: nowrap; overflow-x: auto; }

/* keep bootstrap grid & layout utilities untouched */
.row.g-0 > *, .row.g-1 > *, .row.g-2 > *, .row.g-3 > *, .row.g-4 > *, .row.g-5 > * { padding: inherit; }

/* ----------------------------------------------------------- icon helper */
.mi { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
[class*=" ti-"] { line-height: 1; }

/* header specifics (new partials) */
.dd-toggle, .topbar-select .dd-toggle { background: none; border: 0; padding: 0; color: inherit; }
.topbar-select { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: var(--r-10); background: var(--surface-input); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 500; cursor: pointer; }
.topbar-select:hover { border-color: var(--border-strong); color: var(--primary); }
.topbar-search-mobile { display: none; }
.header .dd-menu { left: auto; }
.header .dd:first-of-type .dd-menu, .dd.topbar-select .dd-menu { left: 0; right: auto; }

/* global search modal */
.modal-content__search { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-18); }
.global-search-bar { display: flex; align-items: center; gap: 10px; background: var(--surface-input); border: 1px solid var(--border); border-radius: var(--r-full); padding: 4px 6px 4px 16px; color: var(--text-muted); }
.global-search-bar:focus-within { border-color: var(--primary-mid); box-shadow: 0 0 0 3px rgba(108,79,232,.10); }
.global-search-bar .global-search-container { display: flex; align-items: center; gap: 9px; flex: 1; }
.global-search-bar .search-input { background: transparent; border: 0; outline: 0; box-shadow: none; width: 100%; }
.global-search-bar .search-input:focus { border: 0; box-shadow: none; background: transparent; }
.esc-btn { border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-muted); font-size: 11px; font-weight: 600; border-radius: var(--r-8); padding: 4px 12px; }
.esc-btn:hover { color: var(--primary); border-color: var(--primary-mid); }
.search-loader-overlay { backdrop-filter: blur(4px); background-color: rgba(255,255,255,.6); }
.loader-spinner { border: 4px solid #f3f3f3; border-top-color: var(--primary); }

/* ------------------------------------------------------ dark minor zones */
.dropdown-menu .topbar-profile_item .info h6 { color: var(--text); }
.list-group-item { background: transparent; border-color: var(--border); font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------ print friendly */
@media print {
    .aside, .header, .app-footer, .no-print { display: none !important; }
    .main-area { margin: 0 !important; } .header { position: static; }
    .page { padding: 0; }
}