/* =====================================================================
   ATAI THEME — Dark Glass App Theme (PROFESSIONAL / STABLE)
   ---------------------------------------------------------------------
   Goals:
   - Keep your design + keep everything working
   - Fix navbar dropdown stacking, clipping, and collapse behavior
   - Avoid global CSS conflicts (select, overflow, z-index)
   - Keep sections labeled and predictable
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) DESIGN TOKENS / ROOT VARIABLES
   --------------------------------------------------------------------- */
:root {
    /* Brand greens */
    --atai-green-50:#f4fbe8;
    --atai-green-100:#e7f4d1;
    --atai-green-300:#c9e6a0;

    /* CTA */
    --cta:#ff6a2a;
    --cta-700:#e45717;

    /* Panels */
    --panel-top:#0b1020;
    --panel-bottom:#1b2134;
    --panel-line:rgba(255,255,255,.10);
    --panel-shadow:0 14px 34px rgba(0,0,0,.45);

    /* KPI cards */
    --kpi-top:#0e1323;
    --kpi-bottom:#1a2236;
    --kpi-line:rgba(255,255,255,.08);
    --kpi-shadow:0 12px 30px rgba(0,0,0,.48);
    --kpi-shadow-hover:0 18px 38px rgba(0,0,0,.58);
    --kpi-label:#9cc4ff;
    --kpi-ink:#e6f0ff;

    /* Focus ring */
    --ring:0 0 0 .25rem rgba(149,197,61,.28);

    /* Badges */
    --badge-height:38px;
    --badge-radius:12px;

    /* App background */
    --app-grad:
        radial-gradient(950px 520px at 12% 8%, rgba(149,197,61,.14), transparent 45%),
        radial-gradient(1100px 600px at 88% 10%, rgba(255,106,42,.10), transparent 45%),
        linear-gradient(180deg,#0c1020 0%, #0a0f1d 40%, #0b1120 100%);
}

/* ---------------------------------------------------------------------
   2) GLOBAL PAGE BACKGROUND + BASE
   --------------------------------------------------------------------- */
html, body { height: 100%; }
body {
    color: var(--kpi-ink);
    background: var(--app-grad);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: auto;
    overflow-y: auto;
}
body.modal-open{
    overflow: hidden !important;
    padding-right: 0 !important;
}
/* Make media always shrink to container */
img, svg, canvas { max-width: 100%; height: auto; }
body::before {
    content:"";
    position:fixed;
    inset:0 0 auto 0;
    height:110px;
    z-index:0;
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%);
    pointer-events:none;
}
.container, .container-fluid { position: relative; z-index: 1; }
/* Prevent hidden overflow due to min-width on children */
.row > * { min-width: 0; }
.card { min-width: 0; }

/* ---------------------------------------------------------------------
   3) NAVBAR (sticky glass) + LAYOUT (FIXED)
   --------------------------------------------------------------------- */
.navbar-atai{
    background:
        radial-gradient(1200px 400px at 20% -80px, rgba(149,197,61,.15), transparent 55%),
        radial-gradient(1200px 400px at 85% -60px, rgba(255,106,42,.12), transparent 55%),
        linear-gradient(180deg, rgba(14,19,35,.96) 0%, rgba(26,34,54,.96) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);

    /* ✅ critical for dropdown + sticky behavior */
    position: sticky;
    top: 0;
    z-index: 1035 !important; /* above .filters-bar (1029) */
}

/* logo */
.navbar-atai img { max-height: 40px !important; width: auto !important; }
.navbar-atai .brand-word{
    font-weight: 900;
    letter-spacing:.02em;
    background: linear-gradient(90deg,#b7ffc2 0%, #61ff87 60%, #e2ffe8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent !important;
}

/* container alignment */
.navbar-atai .container-fluid{
    display:flex;
    align-items:center;
}

/* ✅ DO NOT force collapse display:flex globally (breaks bootstrap).
   Use desktop-only flex rules. */
@media (min-width: 992px){
    .navbar-atai .navbar-collapse{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        width:100%;
    }
}

/* nav list: scroll-x but allow dropdown overflow-y */
.navbar-atai .navbar-nav{
    flex: 0 1 auto !important;
    justify-content: center;
    margin: 0 auto;
    overflow: visible !important;
    white-space: nowrap;
    gap:.35rem;
    padding:.35rem 0;
    position: relative;
    max-width: calc(100% - 420px); /* reserve space for right block */
}

/* nav-pills layout inside navbar (minimal, active only) */
.navbar-atai .nav-pills{
    gap: .35rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.navbar-atai .nav-pills::-webkit-scrollbar{
    display: none;
}
.navbar-atai .nav-pills .nav-link{
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #dbe3f5 !important;
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: .24rem .6rem;
}
.navbar-atai .nav-pills .nav-link:hover{
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff !important;
}
.navbar-atai .nav-pills .nav-link.active{
    background: #4c63ff !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(76,99,255,.35);
}
/* dropdown menu inside nav-tabs */
.navbar-atai .nav-tabs .dropdown-menu{
    margin-top: 6px;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.navbar-atai .nav-tabs .dropdown-item{
    color: #e5e7eb;
    font-weight: 600;
}
.navbar-atai .nav-tabs .dropdown-item:hover{
    background: rgba(255,255,255,.08);
    color: #fff;
}


/* nav pills */
.navbar-atai .nav-pills{
    gap: .35rem;
    flex-wrap: wrap;
}
.navbar-atai .nav-link{
    height:38px;
    display:inline-flex;
    align-items:center;
    padding:.35rem .9rem;
    border-radius:3px;
    color:#e7eefc !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.navbar-atai .nav-link:hover{
    background:rgba(255,255,255,.16) !important;
    border-color:rgba(255,255,255,.24) !important;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.navbar-atai .nav-link.active{
    background:linear-gradient(180deg, rgba(149,197,61,.28), rgba(149,197,61,.22)) !important;
    border-color:rgba(149,197,61,.45) !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(149,197,61,.25);
}

.navbar-atai .navbar-text{ color:rgba(231,238,252,.85) !important;white-space: nowrap; }

/* right block pinned right */
.navbar-atai .navbar-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    white-space: nowrap;
}



/* your logout button class */
.atai-logout-btn {
    background: rgba(255, 0, 0, 0.18);
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: 0.25s;
}
.atai-logout-btn:hover {
    background: rgba(255, 0, 0, 0.32);
    color: white !important;
    border-color: rgba(255, 0, 0, 0.7);
    transform: scale(1.03);
}
/* Safety: ensure logout text is visible even if Bootstrap styles differ */
.navbar-atai .atai-logout-btn,
.navbar-atai .atai-logout-btn * {
    color: #ff6b6b !important;
}


/* ✅ Fix dropdown overlay issue in glass navbar */

.navbar-atai .navbar-collapse {
    overflow: visible !important;
}

/* Anchor dropdown correctly */
.navbar-atai .dropdown,
.navbar-atai .dropend,
.navbar-atai .dropstart,
.navbar-atai .dropup{
    position: relative;
}

/* Desktop dropdown */
@media (min-width: 992px) {
.navbar-atai .dropdown-menu {
        min-width: 220px;
        padding: 8px 0;
        margin-top: 8px;
        border-radius: 10px;
        background: rgba(17, 24, 39, 0.96);
        border: 1px solid rgba(148, 163, 184, 0.25);
        box-shadow: 0 18px 40px rgba(0,0,0,.35);
        z-index: 99999 !important; /* ✅ strongest */
    }
    /* Fallback: allow hover to open dropdown if JS is blocked */
    .navbar-atai .dropdown:hover > .dropdown-menu {
        display: block;
    }
    /* Click/focus fallback (keyboard or JS blocked) */
    .navbar-atai .dropdown:focus-within > .dropdown-menu {
        display: block;
    }
    /* Ensure .show also works even if Bootstrap JS/CSS is blocked */
    .navbar-atai .dropdown-menu.show {
        display: block;
    }
    .navbar-atai .dropdown-item {
        color: #e5e7eb;
        font-weight: 600;
        padding: 10px 14px;
        background: transparent;
    }
    .navbar-atai .dropdown-item:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }
}

/* ---------------------------------------------------------------------
   3B) NAVBAR MOBILE RESPONSIVE FIXES
   --------------------------------------------------------------------- */
  @media (max-width: 991.98px){
      .navbar-atai .container-fluid{
          flex-wrap: wrap;
      }

    .navbar-atai .navbar-toggler{
        margin-left: auto;
        border-color: rgba(255,255,255,.25);
    }
    .navbar-atai .navbar-toggler-icon{
        filter: invert(1) grayscale(1) brightness(1.2);
    }

    .navbar-atai .navbar-collapse{
        width: 100%;
        margin-top: .6rem;
        padding: .6rem .6rem .8rem;
        border-radius: 12px;
        background: rgba(10,14,26,.92);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }

    .navbar-atai .navbar-nav{
        max-width: 100% !important;
        overflow-x: visible;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .4rem .6rem;
        padding: .4rem 0;
    }

      .navbar-atai .navbar-right{
          width: 100%;
          margin-left: 0 !important;
          margin-top: .5rem;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: .5rem;
          white-space: normal;
      }
  }

  /* ---------------------------------------------------------------------
     3C) NAVBAR MOBILE HARD OVERRIDE (server cache safe)
     - Ensures collapse works even if older CSS leaked with display:flex
     --------------------------------------------------------------------- */
  @media (max-width: 991.98px){
      .navbar-atai .navbar-collapse{
          display: none !important;
      }
      .navbar-atai .navbar-collapse.show{
          display: block !important;
      }
      .navbar-atai .navbar-nav{
          flex-direction: column;
          align-items: flex-start;
      }
  }

/* ---------------------------------------------------------------------
   3C) CARD + KPI MOBILE TWEAKS (general)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px){
    .kpi-card, .coordinator-kpi-card{
        border-radius: 14px;
    }
    .kpi-card .kpi-value, .coordinator-kpi-value{
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px){
    .kpi-card, .coordinator-kpi-card{
        padding: .9rem !important;
    }
    .kpi-card .kpi-label{
        font-size: .75rem;
    }
}

/* ---------------------------------------------------------------------
   3D) GLOBAL RESPONSIVE LAYOUT HELPERS
   --------------------------------------------------------------------- */
main.container-fluid{
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
}
.card .card-body{
    min-width: 0;
}

/* Tables: always scroll instead of breaking layout */
.table-responsive,
.table-wrap,
.dataTables_wrapper,
.matrix-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Charts: keep within card on small screens */
.chart-panel,
#coordinatorRegionStacked,
#chartSalesman{
    width: 100% !important;
}
@media (max-width: 991.98px){
    #coordinatorRegionStacked,
    #chartSalesman{
        height: 280px !important;
    }
}

/* KPI shell / filter rows on small screens */
@media (max-width: 991.98px){
    .kpi-shell .row,
    .filters-bar .row,
    .filters-bar .d-flex{
        flex-wrap: wrap;
        gap: .6rem;
    }
}

/* Prevent cards from overflowing on mobile */
@media (max-width: 991.98px){
    .card, .kpi-card, .coordinator-kpi-card{
        width: 100%;
    }
}

/* KPI / filter rows: stack cleanly on tablets/phones */
@media (max-width: 1199.98px){
    .kpi-shell .row > [class*="col-"]{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .kpi-shell .justify-content-md-end{
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px){
    .kpi-shell .form-select,
    .kpi-shell .form-control,
    .filters-bar .form-select,
    .filters-bar .form-control{
        width: 100%;
    }
    .kpi-shell .btn,
    .filters-bar .btn{
        width: auto;
    }
}

@media (max-width: 575.98px){
    .navbar-atai .nav-link{
        font-size: .8rem;
        padding: .3rem .6rem;
    }
    .navbar-atai .navbar-text{
        font-size: .85rem;
    }
}

/* Mobile dropdown = inline submenu */
@media (max-width: 991.98px) {
    .navbar-atai .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 6px 0 10px 0 !important;
        padding: 6px 0 !important;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(148, 163, 184, 0.20);
        border-radius: 10px;
        box-shadow: none;
        z-index: auto !important;
    }
    .navbar-atai .dropdown-item {
        padding: 10px 18px;
        color: #e5e7eb;
        font-weight: 700;
    }
    .navbar-atai .dropdown-item:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
    }
}

/* ---------------------------------------------------------------------
   4) PANELS / CARDS / CHART BACKGROUNDS
   --------------------------------------------------------------------- */
.card, .kpi-card, .hc-panel, .panel, .table-wrap{
    background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%) !important;
    color: var(--kpi-ink) !important;
    border: 1px solid var(--panel-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--panel-shadow) !important;
}
.card-header, .card-body, .card > .list-group{ background:transparent !important; border:0 !important; }
.card .card-body{ padding:1.25rem; }
.hc-panel .highcharts-background{ fill:transparent !important; }
.highcharts-credits{ display:none !important; }

/* ---------------------------------------------------------------------
   5) FILTER BAR + FORM CONTROLS (GLOBAL LOOK)
   --------------------------------------------------------------------- */
.form-control, .form-select{
    background:rgb(255 255 255 / 74%);
    color:var(--kpi-ink);
    border:1px solid var(--panel-line);
}
.form-control::placeholder{ color:rgba(230,238,252,.55); }
.form-control:focus, .form-select:focus{ box-shadow:var(--ring); }

.filters-bar{
    position:sticky;
    top:64px;
    z-index:1029;
    margin:.35rem 0 .75rem;
    padding:.6rem .8rem;
    background:linear-gradient(180deg, rgba(20,26,42,.72), rgba(18,23,38,.62));
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.filters-bar .row, .filters-bar .d-flex{ gap:.55rem; }
.filters-bar .form-control, .filters-bar .form-select{
    height:38px;
    padding:.45rem .7rem;
    background:rgb(255 255 255 / 54%) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#eaf0ff;
    font-weight:500;
    box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
.filters-bar .form-control::placeholder{ color:rgba(234,240,255,.55); }
.filters-bar .form-select option{ background:#121629 !important; color:#e6eefc !important; }
.filters-bar .form-control:focus, .filters-bar .form-select:focus{
    border-color:rgba(149,197,61,.55) !important;
    box-shadow:0 0 0 .2rem rgba(149,197,61,.25) !important;
}
.filters-bar .btn, .btn-filter-apply{
    height:38px;
    padding:.45rem .9rem;
    font-weight:700;
    background:#4666ff;
    border-color:#3d57d9;
    color:#fff;
    box-shadow:0 8px 16px rgba(70,102,255,.25);
}
.filters-bar .btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Family / Region chips */
#familyChips, #regionChips{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    padding:.4rem .1rem .1rem;
}
#familyChips .btn, #regionChips .btn{
    height:34px;
    padding:.25rem .75rem;
    font-weight:600;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.10) !important;
    color:#e7eefc !important;
    box-shadow:0 3px 10px rgba(0,0,0,.25);
}
#familyChips .btn:hover, #regionChips .btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.16) !important;
    border-color:rgba(255,255,255,.24) !important;
}
#familyChips .btn.active, #regionChips .btn.active{
    background:linear-gradient(180deg, rgba(149,197,61,.30), rgba(149,197,61,.22)) !important;
    border-color:rgba(149,197,61,.45) !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(149,197,61,.28);
}

/* ---------------------------------------------------------------------
   6) GENERIC TABS
   --------------------------------------------------------------------- */
.nav-tabs{ border:none; gap:.6rem; }
.nav-tabs .nav-link{
    border:1px solid var(--panel-line);
    background:rgba(255,255,255,.10);
    color:var(--kpi-ink);
    padding:.5rem 1rem;
    border-radius:10px;
    font-weight:700;
    transition: background .2s, border-color .2s, transform .15s;
}
.nav-tabs .nav-link:hover{ transform:translateY(-1px); }
.nav-tabs .nav-link.active{
    background:rgba(255,255,255,.16);
    border-color:rgba(149,197,61,.35);
}

/* ---------------------------------------------------------------------
   7) KPI CARDS
   --------------------------------------------------------------------- */
.kpi-card{
    background:linear-gradient(180deg, var(--kpi-top) 0%, var(--kpi-bottom) 100%) !important;
    border:1px solid var(--kpi-line) !important;
    box-shadow:var(--kpi-shadow) !important;
}
.kpi-card:hover{ transform:translateY(-2px); box-shadow:var(--kpi-shadow-hover) !important; }
.kpi-label{
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--kpi-label);
    opacity:.95;
}
.kpi-value{ font-size:1.6rem; font-weight:800; color:#95c53d; }
.kpi-card .kpi-foot,
.kpi-card > .card-body > .text-center:last-child{
    color:#dff4ff !important;
    font-weight:800 !important;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-shadow:0 0 10px rgba(64,211,255,.45);
}
.kpi-card .highcharts-data-label text{
    fill:#eaf6ff !important;
    font-weight:700 !important;
    text-shadow:0 0 8px rgba(64,211,255,.35);
}

/* ---------------------------------------------------------------------
   8) DATATABLES (Dark theme)
   --------------------------------------------------------------------- */
.dataTables_wrapper{
    background:rgba(0,0,0,.25);
    border-radius:16px;
    padding:1rem;
    box-shadow:inset 0 0 10px rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.45);
}
.table, table.dataTable{
    --bs-table-bg: transparent !important;
    background:transparent !important;
    color:#e9eefb !important;
}
.dt-container .table>:not(caption)>*>*,
table.dataTable>thead>tr>th,
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>th{
    background-color: transparent !important;
    color:#e9eefb !important;
    border-color: rgba(255,255,255,.08) !important;
}
/* Enhanced header */
table.dataTable thead{
    background: linear-gradient(180deg, #626262 0%, #000 100%) !important;
    color: #cfe6ff !important;
    border-bottom: 2px solid rgba(149,197,61,0.35) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
table.dataTable thead th{
    padding:.75rem 1rem;
    font-size:.85rem;
    font-weight:800 !important;
    text-transform:uppercase;
    letter-spacing:.05em;
    background:transparent !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{
    color:#95c53d !important;
    opacity:.8;
}
table.dataTable tbody tr{
    background-color: rgba(0,0,0,0.2) !important;
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .2s, transform .2s;
}
table.dataTable tbody tr:nth-child(odd){ background-color:rgba(255,255,255,.02) !important; }
table.dataTable tbody tr:nth-child(even){ background-color:rgba(255,255,255,.05) !important; }
table.dataTable tbody tr:hover{
    background:linear-gradient(90deg, rgba(149,197,61,.12), rgba(149,197,61,.05)) !important;
    box-shadow:0 0 8px rgba(149,197,61,.25);
    transform:scale(1.002);
    cursor:pointer;
}
table.dataTable tbody td:nth-child(1){ color:#a4e869 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius:6px;
    background:rgba(255,255,255,.08) !important;
    color:#e6eefc !important;
    margin:0 2px;
    padding:0 4px;
    border:none;
    transition:all .2s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background:rgba(149,197,61,.4) !important;
    color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background:#95c53d !important;
    color:#0b220b !important;
    font-weight:700;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: #e6eefc !important;
    border-radius:6px;
    padding:4px 8px;
}
.dataTables_info{ color:#cdd6f4 !important; font-weight:500; }

/* ---------------------------------------------------------------------
   9) BUTTONS
   --------------------------------------------------------------------- */
.btn-atai, .btn-cta{
    --bs-btn-bg: var(--cta);
    --bs-btn-border-color: var(--cta-700);
    --bs-btn-hover-bg:#ff6a2a;
    --bs-btn-hover-border-color:#e45717;
    --bs-btn-focus-shadow-rgb:255,106,42;
    --bs-btn-active-bg:#e45717;
    --bs-btn-active-border-color:#d64f14;
    color:#fff;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 10px 22px rgba(255,106,42,.25);
}
.btn-outline-light{ color:var(--kpi-ink); border-color:var(--panel-line); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }

/* ---------------------------------------------------------------------
   10) MODALS (dark glass look + unified backdrop)
   --------------------------------------------------------------------- */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
    background-color: #000000 !important;
    opacity: 0.18 !important;
    transition: none !important;
}
.modal { z-index: 1065 !important; }
.modal-backdrop { z-index: 1060 !important; }
.modal.modal-stack { z-index: 1075 !important; }
.modal-backdrop.modal-stack { z-index: 1070 !important; }

  .modal-atai .modal-dialog{
      /* Keep modal header visible under sticky navbar */
      margin-top: calc(0.5rem + var(--atai-navbar-offset, 56px));
      filter:drop-shadow(0 18px 50px rgba(0,0,0,.55));
  }
  @media (min-width: 576px){
      .modal-atai .modal-dialog{
          margin-top: calc(1.75rem + var(--atai-navbar-offset, 56px));
      }
  }
.modal-atai .modal-content{
    background:linear-gradient(180deg, rgba(18,23,38,.96), rgba(13,18,30,.94)) !important;
    color:#eaf0ff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:16px !important;
    box-shadow:0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
    overflow:hidden;
}
.modal-atai .modal-header,
.modal-atai .modal-footer{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-color:rgba(255,255,255,.10);
}
.modal-atai .btn-close{
    filter:invert(1) grayscale(1) brightness(1.2);
    opacity:.85;
}
.modal-atai .btn-close:hover{ opacity:1; }
.modal-atai .card{
    background:linear-gradient(180deg, #0f1526 0%, #151c2e 100%) !important;
    color:#eaf0ff !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:14px !important;
    box-shadow:0 10px 26px rgba(0,0,0,.45) !important;
}
.modal-atai dl.row{ --pad:.25rem; }
.modal-atai dt{ color:#9fb1d6 !important; font-weight:700; opacity:.95; margin-bottom:var(--pad); }
.modal-atai dd{ color:#eaf0ff; margin-bottom:.6rem; border-bottom:1px dashed rgba(255,255,255,.06); padding-bottom:.35rem; }
.modal-atai .form-label{ color:#dbe6ff; font-weight:600; }
.modal-atai .form-control,
.modal-atai .form-select,
.modal-atai textarea{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#eaf0ff !important;
    box-shadow:inset 0 0 6px rgba(0,0,0,.30);
}
.modal-atai .form-control::placeholder,
.modal-atai textarea::placeholder{ color:rgba(234,240,255,.60) !important; }
.modal-atai .form-control:focus,
.modal-atai .form-select:focus,
.modal-atai textarea:focus{
    border-color:rgba(149,197,61,.55) !important;
    box-shadow:0 0 0 .2rem rgba(149,197,61,.22) !important;
}
.modal-atai input[type="checkbox"]{ accent-color:#95c53d; }
.modal-atai .progress{
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
}
.modal-atai .progress-bar{
    background:linear-gradient(90deg, #7fcf43, #95c53d);
    box-shadow:inset 0 6px 16px rgba(149,197,61,.35);
    border-radius:999px;
}
.modal-atai .modal-footer .btn{ border-radius:10px; font-weight:700; }
.modal-atai .modal-footer .btn-secondary{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#eaf0ff; }
.modal-atai .modal-footer .btn-primary{ background:#4666ff; border-color:#3d57d9; box-shadow:0 8px 16px rgba(70,102,255,.25); }
.modal-atai .modal-footer .btn-success{ background:#31c16a; border-color:#29a959; }
.modal-atai .modal-footer .btn-danger{ background:#ff5b5b; border-color:#e24b4b; }
.modal-atai .modal-footer .modal-action{ margin-right:auto; display:inline-flex; gap:.5rem; align-items:center; }
.modal-atai .modal-body::-webkit-scrollbar{ height:10px; width:10px; }
.modal-atai .modal-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

/* ---------------------------------------------------------------------
   11) ESTIMATOR / TOOLBARS
   --------------------------------------------------------------------- */
.glass-row{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:.8rem .9rem;
    background:
        radial-gradient(1000px 400px at 10% -80px, rgba(149,197,61,.12), transparent 55%),
        radial-gradient(1100px 420px at 90% -70px, rgba(70,102,255,.10), transparent 55%),
        linear-gradient(180deg, rgba(22,27,44,.78), rgba(20,25,40,.66));
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.glass-row h4{ color:#eaf0ff; font-weight:800; }
.et-left{ display:flex; align-items:center; gap:.8rem; min-width:260px; }
.et-right{ display:flex; align-items:end; gap:.6rem; flex-wrap:wrap; margin-left:auto; }
.et-field{ display:flex; flex-direction:column; min-width:150px; }
.et-field .form-label{ color:#cfe0ff; font-weight:600; margin:0 0 .15rem; }
.et-right .form-control, .et-right .form-select{
    height:36px;
    padding:.4rem .6rem;
    font-weight:600;
    color:#eaf0ff;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 0 6px rgba(0,0,0,.30);
}
.et-right .form-control::placeholder{ color:rgba(234,240,255,.60); }
.et-right .form-control:focus, .et-right .form-select:focus{
    border-color:rgba(149,197,61,.55) !important;
    box-shadow:0 0 0 .2rem rgba(149,197,61,.22) !important;
}
.estimator-toolbar.glass-row{
    display:flex;
    align-items:center;
    gap:1rem;
    background:#faf8f869;
    backdrop-filter:saturate(180%) blur(8px);
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:.75rem 1rem;
}
.et-left{ display:flex; align-items:center; gap:.75rem; flex:1 1 0; min-width:260px; }
.et-right{ display:flex; align-items:end; gap:.75rem; flex:1 1 0; justify-content:flex-end; flex-wrap:wrap; }
.et-center{ flex:0 0 auto; margin:0 auto; }
@media (max-width:992px){
    .glass-row{ flex-direction:column; align-items:stretch; gap:.75rem; }
    .et-left{ justify-content:space-between; }
    .et-right{ justify-content:flex-start; }
}
@media (max-width:576px){ .et-field{ min-width:130px; } }

/* ---------------------------------------------------------------------
   12) WORD-BREAK / TABLE RESPONSIVENESS HELPERS
   --------------------------------------------------------------------- */
.panel, .hc-panel, .table-wrap{ border-radius:14px !important; }
.fw-semibold{ color:#61ff87; }
table, td, th{ word-break: normal !important; white-space: nowrap; hyphens: auto; }
.table-wrap, .dataTables_wrapper{ overflow-x:auto !important; -webkit-overflow-scrolling: touch; }
td.wrap, th.wrap{ white-space: normal !important; overflow-wrap:anywhere; word-break:break-word; }
@media (max-width: 576px){ table.dataTable { font-size: 12px; } }

/* ---------------------------------------------------------------------
   13) SPECIAL: Region Pie warn icon
   --------------------------------------------------------------------- */
#projectsRegionPie{ position: relative; }
.warn-pulse{
    position:absolute;
    right:10px;
    top:10px;
    width:48px;
    height:48px;
    display:none;
    z-index:20;
    cursor:pointer;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 15px rgba(255, 60, 60, 0.8));
    animation: pulseGlow 1s ease-in-out infinite;
    transition: transform .2s ease-in-out;
}
.warn-pulse:hover{
    transform: scale(1.2);
    filter: drop-shadow(0 0 14px rgba(255, 40, 40, 1)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.8));
}
@keyframes pulseGlow{
    0%,100%{ transform:scale(1); opacity:.85; }
    50%{ transform:scale(1.15); opacity:1; }
}

/* ---------------------------------------------------------------------
   14) SUBMITTAL PREVIEW (PDF frame in modals)
   --------------------------------------------------------------------- */
.submittal-preview{ position:relative; max-height:420px; overflow:auto; }
.submittal-preview iframe,
.submittal-preview object,
.submittal-preview embed{ width:100%; height:420px; display:block; border:0; }
.modal-footer{ position:sticky; bottom:0; z-index:3; background: var(--bs-body-bg); }

/* ---------------------------------------------------------------------
   15) KPI SWITCHER PANELS
   --------------------------------------------------------------------- */
.kpi-switcher{ position: relative; min-height:440px; }
.kpi-panel{
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateX(16px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
}
.kpi-panel--active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.kpi-cards-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
.cards-title{ font-weight:800; font-size:1.25rem; }
.muted{ color:#9aa7bd; font-size:.85rem; }
.kpi-cards-grid{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:.75rem; }
@media (max-width:1200px){ .kpi-cards-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width:768px){ .kpi-cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kpi-mini{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.75rem .9rem; }
.kpi-mini .kpi-label{ font-size:.75rem; letter-spacing:.02em; color:#b8c4da; text-transform:uppercase; }
.kpi-mini .kpi-value{ font-weight:800; font-size:1.05rem; margin-top:.15rem; color:#eaf2ff; }
.kpi-mini .kpi-sub{ font-size:.75rem; color:#9aa7bd; margin-top:.2rem; }
.kpi-mini.ok{ box-shadow: 0 0 0 1px rgba(16,185,129,.25) inset; }
.kpi-mini.warn{ box-shadow: 0 0 0 1px rgba(250,204,21,.25) inset; }
.kpi-mini.dang{ box-shadow: 0 0 0 1px rgba(244,63,94,.25) inset; }

/* ---------------------------------------------------------------------
   16) FINAL FORECAST PAGE — INPUTS/SELECTS + ROW STRIPES
   --------------------------------------------------------------------- */
.forecast-page .table tfoot th,
.forecast-page .table tfoot td {
    background-color: #181d2c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.forecast-page .table tfoot th:first-child { color: #b8ff8a !important; }
.forecast-page table.table tfoot tr th:first-child { color: #caff9c !important; }
.forecast-page table.table tfoot tr { background: transparent !important; }
.forecast-page table.table tfoot tr:hover { background: transparent !important; }

.forecast-page table.table td select.form-select {
    background:#ffffff !important;
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    border:1px solid #e7e6e6 !important;
    border-radius:.5rem !important;
    text-align-last:center;
    min-height:calc(1.5em + .5rem + 2px);
    padding-right:2rem;
}
.forecast-page table.table td input.form-control:focus,
.forecast-page table.table td textarea.form-control:focus,
.forecast-page table.table td select.form-select:focus {
    border-color:#ffffff !important;
    box-shadow:0 0 0 2px rgba(0,120,255,.25) !important;
}

/* ---------------------------------------------------------------------
   17) ACTIVE STATE CHIPS / SMALL UTILITIES
   --------------------------------------------------------------------- */
.btn-chip.btn-outline-primary.active{ background:#198754; border-color:#198754; color:#fff; }
#familyChips .btn.active,
#statusTabs .nav-link.active,
#regionChips .btn.active{ background:#198754; border-color:#198754; color:#fff; }
#familyChips, #statusChips{ margin-bottom:.5rem; }
.text-muted { color:#9aa7bd !important; }

/* ---------------------------------------------------------------------
   18) SELECT DARK THEME (GLOBAL) — keep, but safe overrides below
   --------------------------------------------------------------------- */
select.form-select,
select {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 0.5rem;
    box-shadow: none;
}
select.form-select:focus {
    border-color: #00c27f !important;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 194, 127, 0.6);
}
select option {
    background-color: #1e1e1e;
    color: #f1f1f1;
}
@-moz-document url-prefix() {
    select { background-color: #1e1e1e !important; color: #f1f1f1 !important; }
    option { background-color: #1e1e1e !important; color: #f1f1f1 !important; }
}

/* ---------------------------------------------------------------------
   19) AI INSIGHT BUTTON + MODAL DECORATION
   --------------------------------------------------------------------- */
.btn-ai-insight {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #6f42c1, #198754);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(105, 255, 140, 0.4);
    transition: all 0.25s ease-in-out;
}
.btn-ai-insight:hover {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(105, 255, 140, 0.6);
}
.btn-ai-insight.thinking {
    background: linear-gradient(270deg, #198754, #6f42c1, #20c997);
    background-size: 600% 600%;
    animation: aiGradientShift 3s ease infinite;
}
@keyframes aiGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.ai-dots span {
    display: inline-block;
    opacity: 0.3;
    animation: bounce 1.4s infinite;
    font-weight: bold;
    font-size: 1.2em;
}
.ai-dots span:nth-child(1) { animation-delay: 0s; }
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1.1); opacity: 1; }
}
.btn-ai-insight i { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------
   20) METRIC TOGGLE CHIPS
   --------------------------------------------------------------------- */
.metric-toggle { display:flex; gap:.5rem; align-items:center; }
.metric-toggle .chip-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.35rem .8rem;
    border-radius:12px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#7aa2ff;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, color .2s, border-color .2s, transform .05s;
}
.metric-toggle .chip-btn:hover{ background: rgba(255,255,255,.10); }
.metric-toggle .btn-check:focus + .chip-btn{ outline:2px solid rgba(98,132,255,.35); outline-offset:2px; }
.metric-toggle .btn-check:active + .chip-btn,
.metric-toggle .chip-btn:active{ transform:scale(0.98); }
.metric-toggle .btn-check:checked + .chip-btn{
    background:#4c6ef5;
    color:#fff;
    border-color:transparent;
    box-shadow: 0 0 0 0.2rem rgba(76,110,245,.25);
}

/* ---------------------------------------------------------------------
   21) STALE BIDDING BADGE + GAUGE SIZES
   --------------------------------------------------------------------- */
#badgeStaleBidding.badge-pulse {
    animation: badgePulse 1.2s infinite;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
}
@keyframes badgePulse {
    0% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { transform: translateY(-1px) scale(1.08); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
#gaugeGauge,
#gaugeGauge > div { min-height: 100px !important; }
.gauge-wrap { display:flex; align-items:center; justify-content:center; }
.btnDeleteCoordinator { font-weight: 600; }
.btnDeleteCoordinator i.bi-trash { margin-right: 2px; }

/* ======================================================================
 * Estimator Inquiries – 1366 x 768 tuning
 * ====================================================================*/
@media (max-width: 1400px) and (max-height: 800px) {
    .estimator-inquiries-page { padding-top: 0.75rem !important; }
    .estimator-inquiries-page #projFilters { gap: 0.35rem !important; }
    .estimator-inquiries-page #projFilters .form-select-sm,
    .estimator-inquiries-page #projFilters .form-control-sm {
        max-width: 150px;
        font-size: 0.8rem;
    }
    .estimator-inquiries-page #projFilters #salesmanWrap .form-select-sm { max-width: 180px; }
    .estimator-inquiries-page #projFilters .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .estimator-inquiries-page .kpi-card { padding: 0.5rem 0.75rem !important; }
    .estimator-inquiries-page .kpi-value { font-size: 1.45rem; }
    .estimator-inquiries-page .kpi-label { font-size: 0.7rem; }

    .estimator-inquiries-page .nav-tabs .nav-link {
        padding: 0.25rem 0.6rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .estimator-inquiries-page #familyChips .btn-sm {
        padding: 0.15rem 0.4rem;
        font-size: 0.75rem;
    }

    .estimator-inquiries-page table.table { font-size: 0.78rem; }
    .estimator-inquiries-page table.table thead th { padding: 0.3rem 0.4rem; }
    .estimator-inquiries-page table.table tbody td { padding: 0.28rem 0.4rem; }

    .estimator-inquiries-page .input-group.w-auto .form-control {
        font-size: 0.8rem;
        padding: 0.25rem 0.4rem;
    }
    .estimator-inquiries-page .input-group-text {
        font-size: 0.8rem;
        padding: 0.25rem 0.4rem;
    }
    .navbar-atai .navbar-nav {
        max-width: calc(100% - 360px);
    }
}

/* =============================================================
 * Estimator Inquiries – modal scroll on small screens
 * =========================================================== */
.estimator-inquiries-page #modalAddInquiry .modal-dialog {
    max-width: 900px;
    width: 100%;
}
@media (max-height: 800px) {
    .estimator-inquiries-page #modalAddInquiry .modal-dialog {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .estimator-inquiries-page #modalAddInquiry.modal .modal-dialog-scrollable .modal-content,
    .estimator-inquiries-page #modalAddInquiry .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 1rem);
    }
    .estimator-inquiries-page #modalAddInquiry .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

/* =====================================================================
   FINAL SAFETY OVERRIDES (navbar dropdown + select conflicts)
   ---------------------------------------------------------------------
   - Protect navbar dropdown and menus from global select styling
   - Ensure dropdown always renders above everything
   ===================================================================== */

/* Dropdown always above page content */
.navbar-atai .dropdown-menu{ z-index: 99999 !important; }

/* Inside navbar dropdown menus: keep readable and consistent */
.navbar-atai .dropdown-menu .dropdown-item,
.navbar-atai .dropdown-menu .dropdown-item *{
    color: #e5e7eb !important;
}

/* If a <select> appears inside navbar area, don't force it to pure black */
.navbar-atai select,
.navbar-atai select.form-select{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    color: #eaf0ff !important;
}
.navbar-atai select option{
    background: rgba(17,24,39,1) !important;
    color: #eaf0ff !important;
}
/* ======================================================================
   🔧 CRITICAL INTERACTION FIXES (DO NOT REMOVE)
   Purpose:
   - Restore clickability
   - Fix dropdowns, selects, filters
   - Resolve glass/z-index conflicts
   ====================================================================== */
/* ==============================
   FINAL FIXES (SAFE)
   ============================== */

/* Keep navbar on top */
.navbar-atai{
    position: sticky;
    top: 0;
    z-index: 1035 !important;
}

/* Dropdown above all */
.navbar-atai .dropdown-menu{
    z-index: 99999 !important;
}
.navbar-atai .dropdown.show > .dropdown-menu,
.navbar-atai .dropdown-menu.show{
    display: block !important;
}

/* Select2 above modals/filters */
.select2-container{
    z-index: 1066 !important;
}
.select2-container--open{
    z-index: 1070 !important;
}

/* Do NOT let overlays block clicks */
body::before{
    pointer-events: none !important;
}


/* ============================================================
   FINAL FIX PACK (put at the VERY END of atai-theme.css)
   - fixes “nothing clickable”
   - fixes dropdown behind panels
   - fixes navbar right section wrapping
   ============================================================ */

/* ✅ Make sure overlays never block clicks */
body::before { pointer-events: none !important; }

/* ✅ Navbar must be above filters/panels */
.navbar-atai{
    position: sticky;
    top: 0;
    z-index: 1050 !important;
}

/* ✅ Dropdown must always appear on top */
.navbar-atai .dropdown-menu{
    z-index: 2000 !important;
}


/* ✅ IMPORTANT: remove “absolute dropdown forcing”
   If you previously have: .dropdown-menu { position:absolute !important; }
   it can break bootstrap in mobile.
*/

/* ✅ Select2 z-index (dropdown appears above modals/panels) */
.select2-container { z-index: 2050 !important; }
.select2-container--open { z-index: 2060 !important; }

/* ============================================================
   NAVBAR DROPDOWN: ensure menus are not clipped on desktop
   ============================================================ */
@media (min-width: 992px){
    .navbar-atai .navbar-nav{
        overflow: visible !important;
    }
}

/* =====================================================================
   NAVBAR DROPDOWN: force visible overflow on desktop (GoDaddy fix)
   ===================================================================== */
@media (min-width: 992px){
    .navbar-atai,
    .navbar-atai .container-fluid,
    .navbar-atai .navbar-collapse,
    .navbar-atai .navbar-nav{
        overflow: visible !important;
    }
}

@media (min-width: 992px){
    .navbar-atai .nav-pills{
        overflow: visible !important;
    }
}

/* =====================================================================
   NAVBAR – TEXT ONLY (no boxes by default)
   - smaller text
   - highlight only on hover/active
   ===================================================================== */
.navbar-atai .nav-pills{
    gap: .35rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.navbar-atai .nav-pills::-webkit-scrollbar{ display: none; }

.navbar-atai .nav-pills .nav-link,
.navbar-atai .navbar-nav .nav-link{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #dbe3f5 !important;
    font-size: 0.82rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px !important;
    height: auto;
}
.navbar-atai .nav-pills .nav-link:hover,
.navbar-atai .navbar-nav .nav-link:hover{
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
}
.navbar-atai .nav-pills .nav-link.active,
.navbar-atai .navbar-nav .nav-link.active{
    background: #4c63ff !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(76,99,255,.35) !important;
}
.navbar-atai .nav-pills .nav-link i,
.navbar-atai .navbar-nav .nav-link i{
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   22) GLOBAL CONSISTENCY POLISH (all app pages using layouts.app)
   --------------------------------------------------------------------- */
:root{
    --atai-radius: 14px;
    --atai-radius-sm: 10px;
    --atai-border-soft: rgba(255,255,255,.11);
    --atai-surface-a: rgba(18,24,40,.90);
    --atai-surface-b: rgba(12,17,30,.92);
    --atai-text-soft: #b7c2db;
    --atai-text-strong: #eef4ff;
}

body.atai-app{
    font-family: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--atai-text-strong);
}
body.atai-app h1,
body.atai-app h2,
body.atai-app h3,
body.atai-app h4,
body.atai-app h5,
body.atai-app h6,
body.atai-app .brand-word{
    font-family: "Sora", "Manrope", "Segoe UI", sans-serif;
    letter-spacing: .01em;
}

.atai-page-shell{
    animation: ataiPageFade .26s ease-out both;
}
@keyframes ataiPageFade{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
}

body.atai-app .card,
body.atai-app .modal-content{
    border-radius: var(--atai-radius);
    border: 1px solid var(--atai-border-soft);
    background: linear-gradient(180deg, var(--atai-surface-a), var(--atai-surface-b));
    box-shadow: 0 14px 30px rgba(0,0,0,.34);
}
body.atai-app .card-header{
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}

body.atai-app .form-control,
body.atai-app .form-select,
body.atai-app .input-group-text{
    border-radius: var(--atai-radius-sm);
    border-color: rgba(148,163,184,.36);
    background: rgba(9,13,24,.80);
    color: #e8efff;
}
body.atai-app .form-control::placeholder{
    color: #93a2c1;
}
body.atai-app .form-control:focus,
body.atai-app .form-select:focus{
    border-color: rgba(149,197,61,.75);
    box-shadow: 0 0 0 .2rem rgba(149,197,61,.18);
}

body.atai-app .btn{
    border-radius: var(--atai-radius-sm);
    font-weight: 600;
}
body.atai-app .btn-primary{
    background: linear-gradient(135deg, #4c63ff, #6a5cff);
    border-color: rgba(106,92,255,.85);
    box-shadow: 0 10px 22px rgba(76,99,255,.28);
}
body.atai-app .btn-primary:hover{
    filter: brightness(1.06);
}

body.atai-app .table{
    --bs-table-color: #e6edff;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(148,163,184,.20);
}
body.atai-app .table thead th{
    border-bottom-color: rgba(148,163,184,.28);
    background: rgba(2,6,23,.75);
    color: #d8e5ff;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .74rem;
}
body.atai-app .table tbody tr:hover{
    background: rgba(76,99,255,.10);
}

body.atai-app .dataTables_wrapper .dataTables_info,
body.atai-app .dataTables_wrapper .dataTables_paginate,
body.atai-app .dataTables_wrapper .dataTables_length,
body.atai-app .dataTables_wrapper .dataTables_filter{
    color: var(--atai-text-soft) !important;
}
body.atai-app .dataTables_wrapper .page-link{
    background: rgba(2,6,23,.75);
    border-color: rgba(148,163,184,.35);
    color: #e6edff;
}
body.atai-app .dataTables_wrapper .page-item.active .page-link{
    background: #4c63ff;
    border-color: #4c63ff;
}

/* ---------------------------------------------------------------------
   23) FUTURISTIC RESKIN V2 (dramatic global override)
   --------------------------------------------------------------------- */
:root{
    --atai-fx-bg-a: #050813;
    --atai-fx-bg-b: #090f1d;
    --atai-fx-bg-c: #111b31;
    --atai-fx-ink: #e9f2ff;
    --atai-fx-soft: #9fb2d7;
    --atai-fx-neon: #63d5ff;
    --atai-fx-neon-2: #76ffb5;
    --atai-fx-primary-a: #3e74ff;
    --atai-fx-primary-b: #6a5cff;
    --atai-fx-border: rgba(131, 164, 221, .26);
}

body.atai-future{
    background:
        radial-gradient(1100px 520px at -10% -20%, rgba(99,213,255,.22), transparent 52%),
        radial-gradient(980px 520px at 110% -10%, rgba(118,255,181,.14), transparent 58%),
        linear-gradient(170deg, var(--atai-fx-bg-c) 0%, var(--atai-fx-bg-b) 38%, var(--atai-fx-bg-a) 100%) !important;
    color: var(--atai-fx-ink);
    min-height: 100vh;
}
body.atai-future::before{
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(106,138,200,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106,138,200,.08) 1px, transparent 1px);
    background-size: 36px 36px, 36px 36px;
    opacity: .34;
    z-index: 0;
    pointer-events: none !important;
}
body.atai-future::after{
    content: "";
    position: fixed;
    width: 45vw;
    height: 45vw;
    right: -14vw;
    top: -16vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,213,255,.24) 0%, rgba(99,213,255,0) 70%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
    animation: ataiOrbFloat 16s ease-in-out infinite alternate;
}
@keyframes ataiOrbFloat{
    from{ transform: translate3d(0,0,0) scale(1); }
    to{ transform: translate3d(-3vw,3vw,0) scale(1.08); }
}

body.atai-future .container,
body.atai-future .container-fluid{
    position: relative;
    z-index: 1;
}

body.atai-future .atai-page-shell{
    padding-top: 1rem !important;
    animation: ataiEnterV2 .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ataiEnterV2{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* Floating glass navbar */
body.atai-future .navbar-atai{
    margin: 12px 14px 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(116, 173, 255, .28) !important;
    background:
        linear-gradient(110deg, rgba(24,34,58,.90) 0%, rgba(12,19,34,.94) 45%, rgba(9,14,28,.95) 100%) !important;
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow:
        0 14px 38px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(118,255,181,.05);
    top: 10px !important;
}
body.atai-future .navbar-atai .brand-word{
    background: linear-gradient(90deg, #8feaff 0%, #7effbe 56%, #d8ffee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 22px rgba(118,255,181,.25);
}
body.atai-future .navbar-atai .nav-pills .nav-link,
body.atai-future .navbar-atai .navbar-nav .nav-link{
    padding: .32rem .74rem !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    color: #d9e8ff !important;
    transition: all .2s ease;
}
body.atai-future .navbar-atai .nav-pills .nav-link:hover,
body.atai-future .navbar-atai .navbar-nav .nav-link:hover{
    background: rgba(99,213,255,.16) !important;
    border-color: rgba(99,213,255,.34) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
body.atai-future .navbar-atai .nav-pills .nav-link.active,
body.atai-future .navbar-atai .navbar-nav .nav-link.active{
    background: linear-gradient(100deg, rgba(62,116,255,.95), rgba(106,92,255,.92)) !important;
    border-color: rgba(124,165,255,.70) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(88,107,255,.45);
}
body.atai-future .navbar-atai .dropdown-menu{
    border-radius: 12px !important;
    border: 1px solid rgba(124,165,255,.42) !important;
    background: linear-gradient(180deg, rgba(18,28,49,.98), rgba(10,16,30,.98)) !important;
    box-shadow: 0 22px 42px rgba(0,0,0,.45);
}
body.atai-future .navbar-atai .dropdown-item{
    color: #dce8ff !important;
}
body.atai-future .navbar-atai .dropdown-item:hover{
    background: rgba(99,213,255,.14) !important;
    color: #fff !important;
}

/* Cards / surfaces */
body.atai-future .card,
body.atai-future .modal-content{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--atai-fx-border) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(19,29,50,.92) 0%, rgba(10,16,31,.94) 100%) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.08);
}
body.atai-future .card::before,
body.atai-future .modal-content::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(99,213,255,0), rgba(99,213,255,.85), rgba(118,255,181,.78), rgba(118,255,181,0));
    opacity: .82;
    pointer-events: none;
}
body.atai-future .card:hover{
    transform: translateY(-2px);
    box-shadow:
        0 22px 44px rgba(0,0,0,.46),
        0 0 0 1px rgba(99,213,255,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}
body.atai-future .card-header{
    background: linear-gradient(180deg, rgba(110,148,220,.12), rgba(110,148,220,.03)) !important;
    border-bottom: 1px solid rgba(125,159,223,.22) !important;
}

/* KPI emphasis */
body.atai-future .kpi-card,
body.atai-future .perf-kpi-card{
    background:
        radial-gradient(620px 140px at -10% -40%, rgba(99,213,255,.22), transparent 46%),
        linear-gradient(180deg, rgba(19,30,53,.94), rgba(9,15,29,.95)) !important;
}
body.atai-future .kpi-value,
body.atai-future .perf-kpi-value{
    text-shadow: 0 0 18px rgba(99,213,255,.22);
}

/* Inputs */
body.atai-future .form-control,
body.atai-future .form-select,
body.atai-future .input-group-text,
body.atai-future .select2-selection{
    border-radius: 12px !important;
    border-color: rgba(126,156,219,.40) !important;
    background: rgba(6,12,24,.72) !important;
    color: #eaf2ff !important;
}
body.atai-future .form-control::placeholder{
    color: #91a5c8 !important;
}
body.atai-future .form-control:focus,
body.atai-future .form-select:focus{
    border-color: rgba(99,213,255,.75) !important;
    box-shadow: 0 0 0 .22rem rgba(99,213,255,.20) !important;
}

/* Buttons */
body.atai-future .btn{
    border-radius: 11px !important;
    font-weight: 650;
    letter-spacing: .01em;
}
body.atai-future .btn-primary{
    background: linear-gradient(135deg, var(--atai-fx-primary-a), var(--atai-fx-primary-b)) !important;
    border-color: rgba(116,145,255,.85) !important;
    box-shadow: 0 12px 24px rgba(70, 99, 255, .36);
}
body.atai-future .btn-primary:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
}
body.atai-future .btn-outline-light{
    border-color: rgba(99,213,255,.48) !important;
    color: #d9ecff !important;
    background: rgba(10,20,38,.34) !important;
}
body.atai-future .btn-outline-light:hover{
    background: rgba(99,213,255,.20) !important;
    border-color: rgba(126,243,255,.76) !important;
    color: #fff !important;
}

/* Chips used in coordinator/filters */
body.atai-future .coord-chip,
body.atai-future .region-chip,
body.atai-future .btn-group .btn{
    border-radius: 999px !important;
}
body.atai-future .coord-chip.active{
    background: linear-gradient(120deg, rgba(59,130,246,.94), rgba(14,165,233,.92)) !important;
    border-color: rgba(125,209,255,.78) !important;
    box-shadow: 0 0 0 1px rgba(99,213,255,.34);
}

/* Tables / DataTables */
body.atai-future .table{
    --bs-table-bg: transparent;
    --bs-table-color: #eaf2ff;
    --bs-table-border-color: rgba(114,143,201,.22);
}
body.atai-future .table thead th{
    background: linear-gradient(180deg, rgba(26,39,67,.96), rgba(14,24,44,.95)) !important;
    border-bottom-color: rgba(128,163,224,.38) !important;
    color: #dce8ff !important;
    letter-spacing: .07em;
    font-size: .71rem;
}
body.atai-future .table tbody tr{
    transition: background-color .16s ease, transform .16s ease;
}
body.atai-future .table tbody tr:nth-child(even){
    background: rgba(255,255,255,.01);
}
body.atai-future .table tbody tr:hover{
    background: rgba(99,213,255,.12) !important;
}
body.atai-future .dataTables_wrapper .page-link{
    border-radius: 9px !important;
    border: 1px solid rgba(126,156,219,.45) !important;
    background: rgba(8,14,28,.74) !important;
    color: #dce8ff !important;
}
body.atai-future .dataTables_wrapper .page-item.active .page-link{
    background: linear-gradient(135deg, rgba(64,123,255,.95), rgba(25,182,237,.92)) !important;
    border-color: rgba(126,204,255,.78) !important;
    box-shadow: 0 8px 20px rgba(32,120,255,.34);
}

/* Highcharts polish */
body.atai-future .highcharts-title,
body.atai-future .highcharts-subtitle{
    fill: #e9f2ff !important;
}
body.atai-future .highcharts-axis-labels text,
body.atai-future .highcharts-legend-item text{
    fill: #c5d5f2 !important;
}

/* Scrollbar */
body.atai-future ::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
body.atai-future ::-webkit-scrollbar-track{
    background: rgba(9,15,28,.8);
}
body.atai-future ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(87,124,210,.86), rgba(57,95,188,.86));
    border-radius: 999px;
    border: 2px solid rgba(9,15,28,.85);
}

@media (max-width: 991.98px){
    body.atai-future .navbar-atai{
        margin: 8px 8px 0 !important;
        top: 6px !important;
        border-radius: 14px !important;
    }
    body.atai-future .atai-page-shell{
        padding-top: .35rem !important;
    }
}