/* =========================================================
   THEME: Luxe Aurora (Distinct + Premium)
   Load AFTER global-basic.css or global-advance.css
   Intent:
   - Visibly different from classic/modern/minimal
   - Premium sidebar + softer surfaces + modern shadows
   - Keeps brand safety: primary color is the accent, not overridden
========================================================= */

:root{
  /* Radii */
  --r-ctrl: 12px;
  --r-btn: 12px;
  --r-card: 16px;
  --r-pill: 9999px;

  /* Borders */
  --b-ctrl: 1px;
  --ctrl-border: rgba(16,24,40,.12);
  --ctrl-border-hover: rgba(16,24,40,.18);
  --grid-border: rgba(16,24,40,.14);

  /* Surfaces */
  --surface: rgba(255,255,255,.94);
  --surface-2: rgba(255,255,255,.88);
  --surface-brd: rgba(16,24,40,.10);

  /* Shared "primary-inspired" header background (used by table headers + card headers) */
  --luxe-header-bg:
    radial-gradient(900px 260px at 10% 0%, rgba(var(--primary-rgb, 13,110,253), .16), transparent 65%),
    linear-gradient(180deg,
      color-mix(in srgb, #ffffff 88%, rgba(var(--primary-rgb, 13,110,253), 1) 12%),
      color-mix(in srgb, #ffffff 94%, rgba(var(--primary-rgb, 13,110,253), 1) 6%));

  /* Elevation */
  --elev-1: 0 1px 2px rgba(16,24,40,.06), 0 12px 30px rgba(16,24,40,.08);
  --elev-2: 0 2px 8px rgba(16,24,40,.12), 0 24px 56px rgba(16,24,40,.14);

  /* Focus halo */
  --focus-halo: .22rem;

  /* DataTables pager */
  --dt-page-brd-w: 1px;
  --dt-page-brd: rgba(16,24,40,.12);
  --dt-page-brd-hover: rgba(16,24,40,.18);
}

/* =========================================================
   APP BACKDROP (distinct look)
========================================================= */
body{
  background:
    radial-gradient(1200px 640px at 12% 0%, rgba(var(--primary-rgb, 13,110,253), .18), transparent 62%),
    radial-gradient(980px 560px at 100% 12%, rgba(255,145,242,.14), transparent 58%),
    linear-gradient(180deg, #f7f8ff 0%, #f2f6ff 100%);
}
.content-wrapper{
  background: transparent !important;
}

/* =========================================================
   CONTROLS (fresh look baseline for ALL inputs/selects)
========================================================= */
.form-control,
.form-select,
.input-group-text{
  border: var(--b-ctrl) solid rgba(16,24,40,.14) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(16,24,40,.06);
}
.form-control:hover,
.form-select:hover{
  border-color: rgba(16,24,40,.20) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(var(--primary-rgb, 13,110,253), .65) !important;
  box-shadow:
    0 0 0 var(--focus-halo) rgba(var(--primary-rgb, 13,110,253), .18),
    0 14px 34px rgba(16,24,40,.10) !important;
}

/* =========================================================
   GLOBAL SHAPES (no global color changes)
========================================================= */
.btn,
.btn-group .btn,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.pagination .page-link,
.badge,
.alert,
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.toast,
.progress,
.form-select,
.form-control,
.input-group-text,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.small-box, .info-box{
  border-radius: var(--r-ctrl) !important;
}

/* =========================================================
   NAVBAR / TOP BAR (glass surface)
========================================================= */
.main-header.navbar{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,24,40,.08) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
}

/* =========================================================
   NATIVE SELECT MENU (Chrome/Edge limited styling)
   Helps avoid default "system blue" highlight where supported.
========================================================= */
select option:checked,
select option:hover{
  background: rgba(var(--primary-rgb, 13,110,253), .18) !important;
  color: rgba(16,24,40,.92) !important;
}

/* =========================================================
   SIDEBAR (big visual differentiator)
========================================================= */
.main-sidebar{
  background:
    radial-gradient(1200px 720px at 12% 0%, rgba(var(--primary-rgb, 13,110,253), .30), transparent 68%),
    linear-gradient(180deg, rgba(11,19,43,1) 0%, rgba(8,16,36,1) 100%) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link{
  border-radius: 14px !important;
  margin: .25rem .6rem;
  padding: .65rem .8rem;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover i,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover p,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover span{
  color: rgba(255,255,255,.92) !important;
}

/* Keep sidebar hover neutral even if primary is dark (avoid "blue-on-dark" weirdness). */
.main-sidebar a:hover{
  color: rgba(255,255,255,.92) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active{
  background: rgba(var(--primary-rgb, 13,110,253), .22) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .35) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.sidebar-dark-primary .nav-treeview{
  padding-bottom: .35rem;
}
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link{
  border-radius: 12px !important;
  margin: .18rem .9rem;
  padding: .55rem .75rem;
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}

/* =========================================================
   CARDS / OVERLAYS
========================================================= */
.card,
.modal-content,
.dropdown-menu,
.toast{
  border: var(--b-ctrl) solid var(--ctrl-border) !important;
  /* Very subtle primary-tinted solid surface (no gradient) */
  background: color-mix(in srgb, #ffffff 99%, rgba(var(--primary-rgb, 13,110,253), 1) 1%);
  background: #ffffff;
  box-shadow: var(--elev-1) !important;
}

.card:hover,
.dropdown-menu.show,
.toast:hover,
.modal-content:focus-within{
  box-shadow: var(--elev-2) !important;
}

/* Subtle header sheen (keeps text readable) */
.card-header{
  background: var(--luxe-header-bg);
  border-bottom: 1px solid rgba(16,24,40,.10) !important;
  color: rgba(16,24,40,.92);
}

/* AdminLTE "card-{color}" variants force white header text; override in Luxe so ALL dashboard cards match. */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header{
  background: var(--luxe-header-bg) !important;
  border-bottom: 1px solid rgba(16,24,40,.10) !important;
  color: rgba(16,24,40,.92) !important;
}
.card.card-primary:not(.card-outline) > .card-header h1,
.card.card-primary:not(.card-outline) > .card-header h2,
.card.card-primary:not(.card-outline) > .card-header h3,
.card.card-primary:not(.card-outline) > .card-header h4,
.card.card-primary:not(.card-outline) > .card-header h5,
.card.card-primary:not(.card-outline) > .card-header h6,
.card.card-info:not(.card-outline) > .card-header h1,
.card.card-info:not(.card-outline) > .card-header h2,
.card.card-info:not(.card-outline) > .card-header h3,
.card.card-info:not(.card-outline) > .card-header h4,
.card.card-info:not(.card-outline) > .card-header h5,
.card.card-info:not(.card-outline) > .card-header h6,
.card.card-success:not(.card-outline) > .card-header h1,
.card.card-success:not(.card-outline) > .card-header h2,
.card.card-success:not(.card-outline) > .card-header h3,
.card.card-success:not(.card-outline) > .card-header h4,
.card.card-success:not(.card-outline) > .card-header h5,
.card.card-success:not(.card-outline) > .card-header h6,
.card.card-warning:not(.card-outline) > .card-header h1,
.card.card-warning:not(.card-outline) > .card-header h2,
.card.card-warning:not(.card-outline) > .card-header h3,
.card.card-warning:not(.card-outline) > .card-header h4,
.card.card-warning:not(.card-outline) > .card-header h5,
.card.card-warning:not(.card-outline) > .card-header h6,
.card.card-danger:not(.card-outline) > .card-header h1,
.card.card-danger:not(.card-outline) > .card-header h2,
.card.card-danger:not(.card-outline) > .card-header h3,
.card.card-danger:not(.card-outline) > .card-header h4,
.card.card-danger:not(.card-outline) > .card-header h5,
.card.card-danger:not(.card-outline) > .card-header h6,
.card.card-secondary:not(.card-outline) > .card-header h1,
.card.card-secondary:not(.card-outline) > .card-header h2,
.card.card-secondary:not(.card-outline) > .card-header h3,
.card.card-secondary:not(.card-outline) > .card-header h4,
.card.card-secondary:not(.card-outline) > .card-header h5,
.card.card-secondary:not(.card-outline) > .card-header h6{
  color: rgba(16,24,40,.92) !important;
}

/* Ensure card header typography is readable across all widgets (many templates use light text). */
.card-header,
.card-header .card-title,
.card-header > .card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6{
  color: rgba(16,24,40,.92) !important;
}
.card-header a{
  color: rgba(16,24,40,.86) !important;
}
.card-header a:hover{
  color: rgba(16,24,40,.96) !important;
}
.card-header .card-tools,
.card-header .card-tools *{
  color: rgba(16,24,40,.78) !important;
}

/* Dashboard chart filters (Team/Mine + Day ranges)
   Default JS uses btn-outline-light for "header" theme, which becomes invisible on Luxe's light headers.
   Make them readable while preserving the JS-driven active/inactive class toggles. */
.card-header .chart-scope .btn,
.card-header .chart-range .btn{
  border-radius: var(--r-pill) !important;
  padding: .30rem .60rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 22px rgba(16,24,40,.06);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* Theme-specific behavior WITHOUT touching dashboard code:
   Normalize pills based on aria-pressed (set by existing JS) so both dashboards look consistent. */
.card-header .chart-scope .btn[aria-pressed="true"],
.card-header .chart-range .btn[aria-pressed="true"]{
  color: #fff !important;
  background: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .70) !important;
  box-shadow:
    0 0 0 .18rem rgba(var(--primary-rgb, 13,110,253), .14),
    0 14px 30px rgba(16,24,40,.14) !important;
}
.card-header .chart-scope .btn[aria-pressed="false"],
.card-header .chart-range .btn[aria-pressed="false"]{
  color: rgba(16,24,40,.86) !important;
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(16,24,40,.18) !important;
}
.card-header .chart-scope .btn[aria-pressed="false"]:hover,
.card-header .chart-range .btn[aria-pressed="false"]:hover{
  color: rgba(var(--primary-rgb, 13,110,253), 1) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .45) !important;
  background: rgba(var(--primary-rgb, 13,110,253), .10) !important;
}

/* Extra-hard override: some dashboard markup uses Bootstrap utilities like `text-dark` on the active pill.
   If any later stylesheet wins, this keeps pills readable in Luxe. */
.card .card-header .chart-scope > .btn[aria-pressed="true"],
.card .card-header .chart-range > .btn[aria-pressed="true"]{
  color: #fff !important;
  background-color: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .70) !important;
}
.card .card-header .chart-scope > .btn.text-dark[aria-pressed="true"],
.card .card-header .chart-range > .btn.text-dark[aria-pressed="true"]{
  color: #fff !important;
}
.card .card-header .chart-scope > .btn.bg-white.text-dark[aria-pressed="true"],
.card .card-header .chart-range > .btn.bg-white.text-dark[aria-pressed="true"]{
  color: #fff !important;
  background-color: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .70) !important;
}
.chart-scope > .btn.text-dark[aria-pressed="true"],
.chart-range > .btn.text-dark[aria-pressed="true"]{
  color: #fff !important;
}

/* Last-resort: if some places mark active pills via `.active` or `:focus` with `text-dark !important`, keep text readable. */
.card-header .btn-group.chart-scope .btn.btn-primary,
.card-header .btn-group.chart-range .btn.btn-primary,
.card-header .btn-group.chart-scope .btn.active,
.card-header .btn-group.chart-range .btn.active{
  color: #fff !important;
}
.card-header .btn-group.chart-scope .btn.btn-primary *,
.card-header .btn-group.chart-range .btn.btn-primary *{
  color: #fff !important;
}
.card .card-header .chart-scope > .btn[aria-pressed="false"],
.card .card-header .chart-range > .btn[aria-pressed="false"]{
  color: rgba(16,24,40,.86) !important;
  background-color: rgba(255,255,255,.70) !important;
}
.card-header .btn.btn-outline-light{
  color: rgba(16,24,40,.82) !important;
  border-color: rgba(16,24,40,.18) !important;
  background: rgba(255,255,255,.65) !important;
}
.card-header .btn.btn-outline-light:hover{
  color: rgba(16,24,40,.92) !important;
  border-color: rgba(16,24,40,.24) !important;
  background: rgba(255,255,255,.82) !important;
}
.card-header .btn.btn-outline-primary{
  color: rgba(var(--primary-rgb, 13,110,253), .96) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .40) !important;
  background: rgba(255,255,255,.62) !important;
}
.card-header .btn.btn-outline-primary:hover{
  color: rgba(var(--primary-rgb, 13,110,253), 1) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .55) !important;
  background: rgba(var(--primary-rgb, 13,110,253), .12) !important;
}
.card-header .btn.btn-primary{
  color: #fff !important;
  background: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .65) !important;
}
.card-header .btn.btn-outline-secondary{
  border-color: rgba(16,24,40,.18) !important;
}
.card-header .btn.btn-primary{
  box-shadow:
    0 0 0 .18rem rgba(var(--primary-rgb, 13,110,253), .16),
    0 12px 26px rgba(16,24,40,.10) !important;
}

/* Nav pills (Settings left categories etc): avoid bootstrap default blue hover. */
.nav-pills .nav-link{
  color: rgba(16,24,40,.86);
}
.nav-pills .nav-link:hover{
  color: rgba(var(--primary-rgb, 13,110,253), 1) !important;
  background: rgba(var(--primary-rgb, 13,110,253), .10) !important;
}
.nav-pills .nav-link.active{
  color: #fff !important;
  background: var(--primary, #0d6efd) !important;
  box-shadow: 0 12px 24px rgba(16,24,40,.12);
}

/* Links: use primary instead of default bootstrap blue (scoped to app content). */
.content-wrapper a{
  color: rgba(var(--primary-rgb, 13,110,253), .98);
}
.content-wrapper a:hover{
  color: rgba(var(--primary-rgb, 13,110,253), 1);
  text-decoration: none;
}

/* Some pages use text-white utilities inside light card headers; override ONLY for header text,
   not for buttons (e.g. chart filters use `text-white`). */
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h1.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h2.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h3.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h4.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h5.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) h6.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) .card-title.text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) .card-title .text-white,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) .text-white-50,
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark) .text-white-75{
  color: rgba(16,24,40,.92) !important;
}

/* Ensure buttons that intentionally carry `text-white` stay white in headers. */
.card-header .btn.text-white,
.card-header .btn .text-white{
  color: #fff !important;
}

/* =========================================================
   FORMS
========================================================= */
/* Slightly softer placeholder */
input::placeholder,
textarea::placeholder{
  color: rgba(16,24,40,.42);
}

/* =========================================================
   SELECT2 (match controls)
========================================================= */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  border: var(--b-ctrl) solid rgba(16,24,40,.14) !important;
  border-radius: var(--r-ctrl) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(16,24,40,.06);
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus{
  border-color: rgba(var(--primary-rgb, 13,110,253), .65) !important;
  box-shadow:
    0 0 0 var(--focus-halo) rgba(var(--primary-rgb, 13,110,253), .18),
    0 14px 34px rgba(16,24,40,.10) !important;
}

/* Single select alignment */
.select2-container .select2-selection--single{
  height: calc(2.25rem + 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: calc(2.25rem + 2px) !important;
  padding-left: .75rem !important;
  color: rgba(16,24,40,.88) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: calc(2.25rem + 2px) !important;
  right: .35rem;
}

/* Dropdown panel */
.select2-dropdown{
  border: 1px solid rgba(16,24,40,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 60px rgba(16,24,40,.18);
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(var(--primary-rgb, 13,110,253), .14) !important;
  color: rgba(16,24,40,.92) !important;
}

/* =========================================================
   BUTTONS (brand-safe)
========================================================= */
.btn{
  border-radius: var(--r-btn) !important;
}

.btn-primary{
  color: #fff !important;
  border: 1px solid rgba(var(--primary-rgb, 13,110,253), .40) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary, #0d6efd) 92%, #ffffff 8%),
      color-mix(in srgb, var(--primary, #0d6efd) 88%, #000000 12%)) !important;
  box-shadow: 0 10px 26px rgba(var(--primary-rgb, 13,110,253), .18);
}
.btn-primary:hover{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary, #0d6efd) 96%, #ffffff 4%),
      color-mix(in srgb, var(--primary, #0d6efd) 82%, #000000 18%)) !important;
}

/* =========================================================
   NAV / PILLS
========================================================= */
.nav-pills .nav-link{
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.72);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .55) !important;
  color: var(--primary-text, #fff) !important;
  box-shadow: 0 12px 26px rgba(var(--primary-rgb, 13,110,253), .18);
}

/* =========================================================
   DATATABLES (pager + active button)
========================================================= */
.dataTables_length select,
.dataTables_filter input{
  /* Match form controls exactly (same border/background/shadow) */
  border: var(--b-ctrl) solid rgba(16,24,40,.14) !important;
  border-radius: var(--r-ctrl) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(16,24,40,.06);
  padding: .4rem .6rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  color: rgba(16,24,40,.88) !important;
}
.dataTables_filter input{
  min-width: 220px;
}
.dataTables_length select{
  min-width: 84px;
}
.dataTables_filter label,
.dataTables_length label,
.dataTables_info{
  color: rgba(16,24,40,.72) !important;
  font-weight: 700;
}
.dataTables_filter input::placeholder{
  color: rgba(16,24,40,.45) !important;
}
.dataTables_length select:hover,
.dataTables_filter input:hover{
  border-color: rgba(16,24,40,.20) !important;
}
.dataTables_length select:focus,
.dataTables_filter input:focus{
  border-color: rgba(var(--primary-rgb, 13,110,253), .65) !important;
  box-shadow:
    0 0 0 var(--focus-halo) rgba(var(--primary-rgb, 13,110,253), .18),
    0 14px 34px rgba(16,24,40,.10) !important;
  outline: none !important;
  background: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  border: var(--dt-page-brd-w) solid var(--dt-page-brd) !important;
  background: rgba(255,255,255,.70) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border-color: var(--dt-page-brd-hover) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--primary, #0d6efd) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .55) !important;
  color: var(--primary-text, #fff) !important;
}

/* Table header (subtle elevation) */
.table thead th{
  background: var(--luxe-header-bg);
  border-bottom: 1px solid var(--grid-border) !important;
  font-weight: 700;
  letter-spacing: .08px;
  color: rgba(16,24,40,.88);
}

/* Rounded header corners (match control radius) */
.table thead th:first-child{
  border-top-left-radius: var(--r-ctrl) !important;
}
.table thead th:last-child{
  border-top-right-radius: var(--r-ctrl) !important;
}
table.dataTable{
  border-radius: var(--r-ctrl) !important;
  overflow: hidden;
}

/* Empty table state (DataTables) */
table.dataTable tbody td.dataTables_empty{
  color: rgba(16,24,40,.62) !important;
  font-weight: 700;
  padding: 1.25rem .75rem !important;
  background:
    radial-gradient(900px 300px at 12% 0%, rgba(var(--primary-rgb, 13,110,253), .06), transparent 70%),
    rgba(255,255,255,.55);
  border-radius: 14px;
}

/* DataTables header borders: avoid thick 2px bottom + weird side borders */
table.dataTable{
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
table.dataTable thead th,
table.dataTable thead td{
  /* Use single-side dividers to avoid "double-thick" borders on active/sorted columns */
  border: 0 !important;
  border-bottom: 1px solid var(--grid-border) !important;
  border-right: 1px solid var(--grid-border) !important;
  box-shadow: none !important;
}
table.dataTable thead th:first-child,
table.dataTable thead td:first-child{ border-left: 0 !important; }
table.dataTable thead th:last-child,
table.dataTable thead td:last-child{ border-right: 0 !important; }

/* Sorting header states: keep borders consistent (avoid thicker "two-side" look) */
table.dataTable > thead .sorting,
table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc,
table.dataTable > thead .sorting_asc_disabled,
table.dataTable > thead .sorting_desc_disabled{
  border: 0 !important;
  border-bottom: 1px solid var(--grid-border) !important;
  border-right: 1px solid var(--grid-border) !important;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(var(--primary-rgb, 13,110,253), .10), transparent 65%),
    linear-gradient(180deg,
      color-mix(in srgb, #ffffff 92%, rgba(var(--primary-rgb, 13,110,253), 1) 8%),
      color-mix(in srgb, #ffffff 96%, rgba(var(--primary-rgb, 13,110,253), 1) 4%));
}
table.dataTable > thead tr > th:last-child.sorting,
table.dataTable > thead tr > th:last-child.sorting_asc,
table.dataTable > thead tr > th:last-child.sorting_desc,
table.dataTable > thead tr > th:last-child.sorting_asc_disabled,
table.dataTable > thead tr > th:last-child.sorting_desc_disabled{
  border-right: 0 !important;
}

/* If tables use Bootstrap's .table-bordered, it draws borders on both sides.
   Force single-divider behavior so sorted columns don't look "double-thick". */
.table-bordered thead th,
.table-bordered thead td,
.table-bordered td,
.table-bordered th{
  border: 0 !important;
  border-bottom: 1px solid var(--grid-border) !important;
  border-right: 1px solid var(--grid-border) !important;
  box-shadow: none !important;
}
.table-bordered tr > *:last-child{
  border-right: 0 !important;
}
.table-bordered{
  border: 1px solid var(--grid-border) !important;
}

/* Body gridlines (match header + controls) */
.table td,
.table th{
  border-top: 1px solid var(--grid-border) !important;
}
table.dataTable tbody th,
table.dataTable tbody td{
  border-top: 1px solid var(--grid-border) !important;
  border-right: 1px solid var(--grid-border) !important;
}
table.dataTable tbody tr > *:last-child{
  border-right: 0 !important;
}

/* =========================================================
   LUXE SIDEBAR FINAL OVERRIDE
   Applies to both sidebar-dark-primary and sidebar-light-primary modes because
   Luxe paints the rail dark regardless of the configured AdminLTE mode.
========================================================= */
.main-sidebar .nav-sidebar > .nav-item > .nav-link{
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: rgba(255,255,255,.78) !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon,
.main-sidebar .nav-sidebar > .nav-item > .nav-link .right,
.main-sidebar .nav-sidebar > .nav-item > .nav-link i,
.main-sidebar .nav-sidebar > .nav-item > .nav-link p,
.main-sidebar .nav-sidebar > .nav-item > .nav-link span{
  color: inherit !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover{
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.main-sidebar .nav-treeview > .nav-item > .nav-link{
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.72) !important;
}
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-treeview > .nav-item > .nav-link.active{
  background: rgba(var(--primary-rgb, 13,110,253), .22) !important;
  border-color: rgba(var(--primary-rgb, 13,110,253), .35) !important;
  color: #fff !important;
}