/* ============================================================
   clean-theme.css  —  navbar + sidebar refresh
   Flat · minimal · indigo accent · light sidebar
   Drop-in override. Include AFTER your main style.css:
     <link rel="stylesheet" href="{{ asset('assets/css/clean-theme.css') }}">
   No Blade/markup changes required. Every menu item, collapse,
   dropdown and role-based link is preserved — this only restyles.
   ============================================================ */

:root {
    --nm-accent: #1E5E4E; /* emerald-600 */
    --nm-accent-600: #14342B; /* emerald-800 (hover / deep) */
    --nm-accent-tint: #E9F2ED; /* emerald-50 — active pill background */
    --nm-gold: #C9A24B; /* gold accent (use sparingly) */
    --nm-bg: #ffffff; /* navbar + sidebar surface */
    --nm-page: #F7F5EF; /* ivory page background */
    --nm-border: #E7E3D8; /* warm ivory hairlines */
    --nm-ink: #1C1A15; /* primary text (warm near-black) */
    --nm-muted: #5E564A; /* secondary text */
    --nm-icon: #A9A091; /* idle icons */
    --nm-hover: #F5F2EA; /* ivory hover wash */
    --nm-radius: 10px;
}

/* ------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------ */
.navbar,
.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper {
    background: var(--nm-bg);
}

.navbar {
    border-bottom: 1px solid var(--nm-border);
    box-shadow: none;
}

.navbar .navbar-brand-wrapper {
    border-right: 1px solid var(--nm-border);
}

/* Search field → soft filled pill */
.navbar .navbar-menu-wrapper .search-field .input-group {
    background: var(--nm-hover);
    border-radius: var(--nm-radius);
    padding: .15rem .55rem;
    min-width: 260px;
}

.navbar .navbar-menu-wrapper .search-field .input-group .input-group-text {
    background: transparent;
    color: var(--nm-icon);
}

.navbar .navbar-menu-wrapper .search-field .input-group .form-control {
    background: transparent;
    color: var(--nm-ink);
}

/* Idle icons muted, accent on hover */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: var(--nm-muted);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link i {
    color: var(--nm-icon);
    transition: color .15s ease;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link:hover i {
    color: var(--nm-accent);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle:after {
    color: var(--nm-icon);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-text p {
    color: var(--nm-ink) !important;
}

/* Dropdowns: hairline + soft shadow, and FIX the invisible white-on-light
   hover text from the base template */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu {
    border: 1px solid var(--nm-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
    padding: .35rem;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--nm-hover);
    color: var(--nm-ink);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu .text-primary {
    color: var(--nm-accent) !important;
}

/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */
.sidebar {
    background: var(--nm-bg);
    border-right: 1px solid var(--nm-border);
}

/* Tighter rail so each link can sit in its own rounded pill */
.sidebar .nav {
    padding: .5rem .75rem;
}

.sidebar .nav .nav-item {
    padding: 0;
    margin: 2px 0;
}

/* Neutralise the base template's full-bleed item hover/active fills —
   the pill lives on the link now */
.sidebar .nav .nav-item:hover,
.sidebar .nav .nav-item.active {
    background: transparent;
}

/* The link itself = the pill, with the icon moved to the LEFT */
.sidebar .nav .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .68rem .85rem;
    border-radius: var(--nm-radius);
    color: var(--nm-ink);
    transition: background .15s ease, color .15s ease;
}

.sidebar .nav .nav-item > .nav-link i.menu-icon {
    order: -1; /* pull icon before the label */
    margin: 0 !important;
    font-size: 1.15rem;
    color: var(--nm-icon);
}

.sidebar .nav .nav-item > .nav-link .menu-title {
    flex: 1;
    color: inherit;
    font-size: .9rem;
}

.sidebar .nav .nav-item > .nav-link i.menu-arrow {
    order: 1;
    margin-left: auto !important;
    color: var(--nm-icon);
}

/* Hover */
.sidebar .nav .nav-item > .nav-link:hover {
    background: var(--nm-hover);
}

.sidebar:not(.sidebar-offcanvas) .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
    color: var(--nm-ink);
}

/* Active — soft indigo pill */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item > .nav-link.active {
    background: var(--nm-accent-tint);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item > .nav-link.active .menu-title,
.sidebar .nav .nav-item > .nav-link.active i {
    color: var(--nm-accent);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title {
    font-weight: 600;
}

/* Open collapsible parent (Payroll / Settings) reads as accent */
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] .menu-title,
.sidebar .nav .nav-item > .nav-link[aria-expanded="true"] i {
    color: var(--nm-accent);
}

/* ----- Sub-menu (collapsed children) ----- */
.sidebar .nav.sub-menu {
    position: relative;
    margin: .1rem 0 .35rem;
    padding: 0 .35rem 0 2.7rem; /* indent under parent icon */
}

.sidebar .nav.sub-menu::before {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: .2rem;
    bottom: .25rem;
    width: 1px;
    background: var(--nm-border);
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    position: relative;
    padding: .5rem .8rem;
    margin: 1px 0;
    border-radius: 8px;
    font-size: .82rem;
    color: var(--nm-muted);
}

.sidebar .nav.sub-menu .nav-item .nav-link::before {
    display: none; /* drop the template's mdi bullet */
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
    background: var(--nm-hover);
    color: var(--nm-ink);
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
    background: var(--nm-accent-tint);
    color: var(--nm-accent);
    font-weight: 600;
}

/* ----- Profile block at top of sidebar ----- */
.sidebar .nav .nav-item.nav-profile {
    margin: .25rem 0 .6rem;
}

.sidebar .nav .nav-item.nav-profile .nav-link {
    background: var(--nm-hover);
    border-radius: 12px;
    padding: .85rem;
    gap: .75rem;
}

.sidebar .nav .nav-item.nav-profile .nav-link:hover {
    background: var(--nm-hover);
}

.sidebar .nav .nav-item.nav-profile .nav-profile-image,
.sidebar .nav .nav-item.nav-profile .nav-profile-image img {
    width: 42px;
    height: 42px;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .font-weight-bold {
    color: var(--nm-ink);
    font-size: .9rem;
}

.sidebar .nav .nav-item.nav-profile .nav-profile-text .text-small {
    color: var(--nm-muted);
}

.sidebar .nav .nav-item.nav-profile .nav-profile-badge {
    color: var(--nm-accent) !important;
}

/* ------------------------------------------------------------
   ICON-ONLY (mini) MODE — keep the flyout tidy
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .sidebar-icon-only .sidebar .nav.sub-menu::before {
        display: none;
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
        background: var(--nm-bg);
        box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
    }
}

/* ============================================================
   EMERALD & IVORY additions
   (page background, gold accents, button + badge helpers)
   ============================================================ */

/* Ivory page canvas behind the white cards */
body,
.container-scroller,
.main-panel,
.content-wrapper {
    background: var(--nm-page);
}

/* Cards / tables read as clean white on ivory */
.card {
    background: var(--nm-bg);
    border: 1px solid var(--nm-border);
    box-shadow: none;
}

/* Gold hairline accent on the active sidebar pill — the one "jewelry" cue */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item > .nav-link.active {
    border-left: 3px solid var(--nm-gold);
    padding-left: calc(.85rem - 3px);
}

/* Links + emphasis follow emerald */
a {
    color: var(--nm-accent);
}

a:hover {
    color: var(--nm-accent-600);
}

.text-primary {
    color: var(--nm-accent) !important;
}

.bg-primary {
    background-color: var(--nm-accent) !important;
}

.border-primary {
    border-color: var(--nm-accent) !important;
}

/* Primary buttons: solid emerald, no gradient glare */
.btn-primary,
.btn-gradient-primary {
    background: var(--nm-accent) !important;
    background-image: none !important;
    border-color: var(--nm-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-gradient-primary:hover {
    background: var(--nm-accent-600) !important;
    border-color: var(--nm-accent-600) !important;
}

.btn-outline-primary {
    color: var(--nm-accent) !important;
    border-color: var(--nm-accent) !important;
}

.btn-outline-primary:hover {
    background: var(--nm-accent) !important;
    color: #fff !important;
}

/* Gold utility — reserve for ONE hero action per screen (e.g. New sale) */
.btn-gold {
    background: var(--nm-gold);
    border: 1px solid var(--nm-gold);
    color: #14342B;
    font-weight: 600;
}

.btn-gold:hover {
    background: #AC8838;
    border-color: #AC8838;
    color: #14342B;
}

/* Focus ring in emerald */
.form-control:focus,
.btn:focus {
    border-color: var(--nm-accent) !important;
    box-shadow: 0 0 0 3px rgba(30, 94, 78, .18) !important;
}

/* Soft status badges that suit a luxury palette */
.badge-success, .badge.bg-success {
    background: #E7F1EA !important;
    color: #1E5E4E !important;
}

.badge-warning, .badge.bg-warning {
    background: #FBF0DC !important;
    color: #8A5A0B !important;
}

.badge-danger, .badge.bg-danger {
    background: #F7E7E7 !important;
    color: #A32D2D !important;
}

.badge-info, .badge.bg-info {
    background: #E9EFF5 !important;
    color: #1E4E6E !important;
}

/* ============================================================
   JewelDeskX avatar — sidebar profile block
   ============================================================ */

.sidebar .nav .nav-item.nav-profile .nav-profile-image {
    position: relative;
    display: flex;
    align-items: center;
}

/* ============================================================
   APPEND THIS TO THE END OF clean-theme.css
   Global UI kit — uniform control sizing, Select2 theming, and a
   table→card fallback so action buttons never scroll off on mobile.
   Every page picks these up; no per-page CSS needed.
   ============================================================ */

:root {
    --jdx-control-h: 42px; /* one height for every input, select and button */
    --jdx-control-h-sm: 34px;
    --jdx-radius: 9px;
}

/* ------------------------------------------------------------
   1. FIELDS — every control the same height and shape
   ------------------------------------------------------------ */
.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single {
    height: var(--jdx-control-h);
    min-height: var(--jdx-control-h);
    border: 1px solid var(--nm-border);
    border-radius: var(--jdx-radius);
    font-size: .9rem;
    padding: .5rem .75rem;
    color: var(--nm-ink);
    background-color: #fff;
}

textarea.form-control {
    height: auto;
    min-height: 84px;
}

.form-control-sm, .form-select-sm {
    height: var(--jdx-control-h-sm);
    min-height: var(--jdx-control-h-sm);
    font-size: .82rem;
    padding: .3rem .55rem;
}

input[type=file].form-control {
    padding: .4rem .55rem;
    font-size: .82rem;
}

.form-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--nm-muted);
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------
   2. BUTTONS — one height, one radius, icons always aligned
   ------------------------------------------------------------ */
.btn {
    height: var(--jdx-control-h);
    border-radius: var(--jdx-radius);
    font-size: .88rem;
    font-weight: 600;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: nowrap;
    line-height: 1;
}

.btn i, .btn .mdi {
    font-size: 1rem;
    line-height: 1;
}

.btn-sm {
    height: var(--jdx-control-h-sm);
    font-size: .8rem;
    padding: 0 .7rem;
}

.btn-lg {
    height: 48px;
    font-size: .95rem;
    padding: 0 1.4rem;
}

/* icon-only square button */
.btn-icon {
    width: var(--jdx-control-h);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--jdx-control-h-sm);
}

/* equal-width buttons inside a group (Approve / Reject etc.) */
.btn-equal {
    min-width: 108px;
}

.btn-equal.btn-sm {
    min-width: 92px;
}

/* soft semantic variants that suit the emerald/ivory palette */
.btn-approve {
    background: var(--nm-accent);
    border: 1px solid var(--nm-accent);
    color: #fff;
}

.btn-approve:hover {
    background: var(--nm-accent-600);
    border-color: var(--nm-accent-600);
    color: #fff;
}

.btn-reject {
    background: #fff;
    border: 1px solid #E3C4C4;
    color: #A32D2D;
}

.btn-reject:hover {
    background: #F7E7E7;
    border-color: #D9A9A9;
    color: #8F2B2B;
}

.btn-soft {
    background: #fff;
    border: 1px solid var(--nm-border);
    color: var(--nm-ink);
}

.btn-soft:hover {
    border-color: var(--nm-accent);
    color: var(--nm-accent);
    background: #fff;
}

/* keep the theme's .btn-light readable at the new height */
.btn-light {
    background: #fff;
    border: 1px solid var(--nm-border);
    color: var(--nm-ink);
}

.btn-light:hover {
    border-color: var(--nm-accent);
    color: var(--nm-accent);
}

/* ------------------------------------------------------------
   3. SELECT2 — matches the native fields exactly, with a clear ×
   ------------------------------------------------------------ */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    padding: 0;
    padding-right: 2.6rem; /* room for the × and the arrow */
    color: var(--nm-ink);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #A9A091;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--jdx-control-h) - 2px);
    right: 6px;
}

/* the × that clears the selection */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #A9A091;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 2;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #A32D2D;
    background: #F7E7E7;
}

/* multi-select */
.select2-container--default .select2-selection--multiple {
    min-height: var(--jdx-control-h);
    border: 1px solid var(--nm-border);
    border-radius: var(--jdx-radius);
    padding: .2rem .4rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--nm-accent-tint);
    border: 1px solid #CBE0D6;
    color: var(--nm-accent);
    border-radius: 6px;
    font-size: .8rem;
    padding: .1rem .45rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--nm-accent);
    margin-right: .3rem;
}

/* focus / open ring, same as native fields */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.form-control:focus, .form-select:focus {
    border-color: var(--nm-accent) !important;
    box-shadow: 0 0 0 3px rgba(30, 94, 78, .12) !important;
    outline: 0;
}

.select2-dropdown {
    border-radius: 12px;
    border-color: var(--nm-border);
    box-shadow: 0 10px 28px rgba(17, 24, 39, .1);
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    font-size: .88rem;
    padding: .5rem .75rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--nm-accent);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--nm-accent-tint);
    color: var(--nm-accent);
}

.select2-search--dropdown .select2-search__field {
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--nm-border);
    padding: 0 .6rem;
}

/* inside a modal Select2 must sit above the backdrop */
.select2-container--open {
    z-index: 9999;
}

/* ------------------------------------------------------------
   4. FILTER BARS — every field the same width, wraps cleanly
   ------------------------------------------------------------ */
.jdx-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
}

.jdx-filter .f-field {
    flex: 1 1 220px;
    min-width: 180px;
}

.jdx-filter .f-actions {
    display: flex;
    gap: .5rem;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .jdx-filter .f-field {
        flex: 1 1 100%;
    }

    .jdx-filter .f-actions {
        width: 100%;
    }

    .jdx-filter .f-actions .btn {
        flex: 1 1 0;
    }
}

/* ------------------------------------------------------------
   5. RESPONSIVE TABLE → CARDS
      A `table-responsive` scrolls horizontally, which pushes the
      action column off-screen on a phone. Below 767px these tables
      restack as cards so every button stays reachable.

      Usage: <table class="table jdx-stack"> and give each <td>
      a data-label matching its column header.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .jdx-stack, .jdx-stack thead, .jdx-stack tbody,
    .jdx-stack th, .jdx-stack td, .jdx-stack tr {
        display: block;
        width: 100%;
    }

    .jdx-stack thead {
        position: absolute;
        left: -9999px;
    }

    .jdx-stack tbody tr {
        border: 1px solid var(--nm-border);
        border-radius: 12px;
        margin-bottom: .75rem;
        padding: .5rem .8rem;
        background: #fff;
    }

    .jdx-stack tbody td {
        border: 0 !important;
        padding: .35rem 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right !important;
    }

    .jdx-stack tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--nm-muted);
        text-align: left;
        flex: 0 0 auto;
    }

    /* the action cell gets its own full-width row */
    .jdx-stack tbody td.act {
        flex-direction: column;
        align-items: stretch;
        border-top: 1px dashed var(--nm-border) !important;
        margin-top: .35rem;
        padding-top: .6rem !important;
    }

    .jdx-stack tbody td.act::before {
        margin-bottom: .4rem;
    }

    .jdx-stack tbody td.act form {
        width: 100%;
    }

    .jdx-stack tbody td.act .btn {
        flex: 1 1 0;
    }

    /* an empty-state row shouldn't render as a card */
    .jdx-stack tbody tr.is-empty {
        border: 0;
        background: transparent;
    }

    .jdx-stack tbody tr.is-empty td {
        justify-content: center;
    }

    .jdx-stack tbody tr.is-empty td::before {
        content: none;
    }
}

/* ------------------------------------------------------------
   6. ACTION GROUP — buttons stay side by side and equal
   ------------------------------------------------------------ */
.jdx-actions {
    display: inline-flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .jdx-actions {
        display: flex;
        width: 100%;
    }

    .jdx-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Native <select> fallback — Chrome tints the highlighted option
   from accent-color, so at least it won't be system blue. */
select.form-control,
select.form-select {
    accent-color: var(--nm-accent);
}

select.form-control option:checked,
select.form-select option:checked {
    background: var(--nm-accent-tint);
    color: var(--nm-accent);
}