/* ==========================================================================
   ScrapTrade Admin Theme Override
   Loaded globally on every AdminLTE page (see config/adminlte.php -> plugins.CustomStyle),
   right after vendor/adminlte/dist/css/adminlte.min.css.
   Overrides AdminLTE's default Bootstrap-blue (#007bff) with the brand green (#00A63E),
   and fixes DataTables sorting-arrow icons rendering oversized when per-page CDN CSS
   is inconsistent (1.11.5 vs 1.13.6) or fails to load.
   ========================================================================== */

:root {
    --brand-primary: #00A63E;
    --brand-primary-hover: #008230;
    --brand-primary-active: #006625;
    --brand-primary-light: #E6FFEF;
    --brand-primary-lighter: #CCFFDF;
    --brand-primary-shadow: rgba(0, 166, 62, 0.25);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-primary:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary.focus,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-shadow) !important;
}
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-link { color: var(--brand-primary); }

/* ---------- Text / background / border utilities ---------- */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* ---------- Links ---------- */
a { color: var(--brand-primary); }
a:hover,
a:focus { color: var(--brand-primary-active); }

/* ---------- Badges ---------- */
.badge-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ---------- Cards ---------- */
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.card-primary.card-outline {
    border-top-color: var(--brand-primary) !important;
}
.card.card-outline-primary { border-top: 3px solid var(--brand-primary) !important; }

/* ---------- Alerts / callouts ---------- */
.alert-primary {
    background-color: var(--brand-primary-light) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-active) !important;
}
.callout.callout-primary { border-left-color: var(--brand-primary) !important; }

/* ---------- Sidebar (AdminLTE sidebar-dark-primary) ---------- */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item .nav-treeview > .nav-item > .nav-link.active {
    background-color: transparent !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
}
.nav-sidebar > .nav-item > .nav-link:hover:not(.active) {
    color: var(--brand-primary-lighter);
}
.brand-link { border-bottom: 1px solid rgba(0, 166, 62, 0.35) !important; }

/* ---------- Top navbar ---------- */
.main-header.navbar { border-bottom: 1px solid var(--brand-primary-lighter); }

/* ---------- Nav tabs / pills ---------- */
.nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
    border-color: #dee2e6 #dee2e6 #fff;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ---------- Pagination ---------- */
.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.page-link { color: var(--brand-primary); }
.page-link:hover { color: var(--brand-primary-active); }

/* ---------- Forms ---------- */
.form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-shadow) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-shadow) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
select.form-control:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--brand-primary) !important;
}

/* ---------- Progress bars ---------- */
.progress-bar { background-color: var(--brand-primary); }

/* ---------- Small box / info box (dashboard widgets) ---------- */
.small-box.bg-primary,
.info-box.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ---------- Spinners / loaders ---------- */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--brand-primary) !important; }

/* ---------- Dropdown active items ---------- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   DataTables sorting-arrow fix
   Root cause: each admin page loads its own DataTables CSS from cdn.datatables.net
   (inconsistently pinned to v1.11.5 or v1.13.6), with no local fallback. When that
   stylesheet is missing/slow/blocked, the .sorting/.sorting_asc/.sorting_desc
   pseudo-elements DataTables' JS still injects have no size/position constraint and
   can render at an oversized, unconstrained scale. These rules pin sane fixed values
   with !important so the icons render correctly regardless of the CDN stylesheet's
   version or load state.
   ========================================================================== */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
    position: relative !important;
    background-image: none !important;
    padding-right: 26px !important;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after {
    position: absolute !important;
    display: block !important;
    right: 0.85em !important;
    font-family: inherit !important;
    font-size: 0.75em !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.3;
    color: inherit;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:before {
    bottom: 0.9em !important;
    content: "\2191" !important;
}
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:after {
    bottom: 0.5em !important;
    content: "\2193" !important;
}

table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:after {
    opacity: 1 !important;
    color: var(--brand-primary) !important;
}
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:before {
    content: "" !important;
}

/* DataTables Bootstrap4 wrapper controls (search box, length select, pagination) */
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-primary-shadow) !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--brand-primary-light) !important;
}

/* ==========================================================================
   Sidebar menu clarity upgrade
   The sidebar menu (config/adminlte.php -> 'menu') is already grouped with
   ~20 section headers, but AdminLTE's default header style is a barely-visible
   dim label with no spacing rhythm, so the whole thing reads as one long list.
   These rules give each header a divider + brand color + breathing room, and
   turn nav-links into rounded, hoverable rows so groups and items scan clearly.
   ========================================================================== */
.nav-sidebar .nav-header {
    color: #7FE0A0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    padding: 0.5rem 1rem 0.35rem;
    margin-top: 0.25rem;
}
.nav-sidebar .nav-header:not(:first-of-type) {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-sidebar > .nav-item {
    margin-bottom: 1px;
}
.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: 6px;
    margin: 0 0.5rem;
    padding: 0.55rem 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 1.6rem;
}
.nav-sidebar > .nav-item > .nav-link:hover:not(.active),
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.nav-sidebar .nav-icon {
    width: 1.5rem;
    text-align: center;
    opacity: 0.85;
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    opacity: 1;
}
.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
    opacity: 0.7;
}

/* ==========================================================================
   Sidebar width fix
   The shipped public/vendor/adminlte/dist/css/adminlte.min.css hardcodes the
   sidebar (and its dependent offsets) at the old AdminLTE default of 250px,
   while the unminified adminlte.css sitting next to it was partially updated
   to 16.3rem for the .main-sidebar rule only (the two files are out of sync,
   and the dependent content-wrapper/brand-link/collapse offsets were never
   updated in either file). These rules pin every offset that has to match the
   sidebar's width to a single 16.3rem value so nothing overlaps or gaps.
   ========================================================================== */
.main-sidebar,
.main-sidebar::before {
    width: 16.3rem !important;
}
/* Hover/focus re-expand while the sidebar is icon-only collapsed */
.main-sidebar:not(.sidebar-no-expand).sidebar-focused,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover {
    width: 16.3rem !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link,
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link {
    width: 16.3rem !important;
}
.layout-fixed .brand-link {
    width: 16.3rem !important;
}
/* Content area must start where the sidebar ends */
@media (min-width: 768px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        margin-left: 16.3rem !important;
    }
}
/* Collapsed sidebar slides fully off-canvas by its own width */
.sidebar-collapse .main-sidebar,
.sidebar-collapse .main-sidebar::before {
    margin-left: -16.3rem !important;
}
@media (max-width: 767.98px) {
    .main-sidebar,
    .main-sidebar::before {
        margin-left: -16.3rem !important;
    }
    /* Hamburger toggle adds .sidebar-open to slide the sidebar back on-screen —
       without this the dark #sidebar-overlay backdrop shows but the sidebar
       itself stays hidden off-canvas underneath it. */
    .sidebar-open .main-sidebar,
    .sidebar-open .main-sidebar::before {
        margin-left: 0 !important;
    }
}