/* ===========================================================================
 * NEXUS ADMIN PANEL · OVERRIDE LAYER
 * ---------------------------------------------------------------------------
 * Loads AFTER AdminLTE 3.0.1 / Bootstrap 4.3.1 stylesheets.
 * Overrides their tokens and key component styles to apply the
 * Nexus visual language to the existing admin shell.
 *
 * Author: Claude (handoff bundle, April 2026)
 * Companion files: nexus-panel-components.css, nexus-panel.js
 * Spec: docs/nexus-panel-spec.md
 *
 * Load order in your Blade layout:
 *   <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
 *   <link rel="stylesheet" href="{{ asset('css/nexus-panel.css') }}">
 *   <link rel="stylesheet" href="{{ asset('css/nexus-panel-components.css') }}">
 * =========================================================================== */


/* ===========================================================================
 * 1 · WEB FONTS
 * =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');


/* ===========================================================================
 * 2 · DESIGN TOKENS
 * Use these CSS custom properties anywhere in your app.
 * Changing a value here cascades to every component that uses it.
 * =========================================================================== */
:root {
  /* ---------- Surfaces ---------- */
  --np-sidebar-bg: #0a0814;
  --np-topbar-bg: #ffffff;
  --np-canvas-bg: #f6f5f2;
  --np-content-bg: #ffffff;
  --np-surface-tint: #f7f5f2;
  --np-surface-tint-2: #efece6;

  /* ---------- Ink (text on light) ---------- */
  --np-ink: #14111f;
  --np-ink-2: rgba(20,17,31,0.66);
  --np-ink-3: rgba(20,17,31,0.44);
  --np-ink-4: rgba(20,17,31,0.26);
  --np-ink-5: rgba(20,17,31,0.13);

  /* ---------- Sidebar Ink (text on dark) ---------- */
  --np-sink: rgba(255,255,255,0.78);
  --np-sink-2: rgba(255,255,255,0.54);
  --np-sink-3: rgba(255,255,255,0.32);
  --np-sink-4: rgba(255,255,255,0.16);

  /* ---------- Borders ---------- */
  --np-border: rgba(20,17,31,0.07);
  --np-border-2: rgba(20,17,31,0.13);
  --np-border-dark: rgba(255,255,255,0.06);
  --np-border-dark-2: rgba(255,255,255,0.10);

  /* ---------- Brand accent (violet) ---------- */
  --np-violet: #9944ff;
  --np-violet-2: #7a2bdb;
  --np-violet-tint: rgba(153,68,255,0.07);
  --np-violet-tint-2: rgba(153,68,255,0.14);
  --np-violet-edge: rgba(153,68,255,0.22);

  /* ---------- Semantic colors ---------- */
  --np-good: #16a34a;
  --np-good-tint: rgba(22,163,74,0.10);
  --np-warn: #d97706;
  --np-warn-tint: rgba(217,119,6,0.12);
  --np-bad: #dc2626;
  --np-bad-tint: rgba(220,38,38,0.10);
  --np-info: #0284c7;
  --np-info-tint: rgba(2,132,199,0.10);

  /* Status pills (tables) */
  --np-status-active-bg: #e9f7ef;
  --np-status-active-fg: #15803d;
  --np-status-muted-bg: #f0ebe3;
  --np-status-muted-fg: #6b7280;

  /* ---------- Shape ---------- */
  --np-radius-sm: 4px;
  --np-radius-md: 6px;
  --np-radius-lg: 8px;
  --np-radius-xl: 12px;

  /* ---------- Type ---------- */
  --np-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --np-font-mono: 'IBM Plex Mono', monospace;
}


/* ===========================================================================
 * 3 · BASE / RESET
 * =========================================================================== */
body,
.wrapper {
  font-family: var(--np-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--np-ink);
  background: var(--np-content-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
.wrapper,
.content-wrapper,
.content,
.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

.content-wrapper {
  background: var(--np-content-bg);
  margin-top: 0 !important;
}

@media (min-width: 768px) {
  body:not(.sidebar-collapse) .content-wrapper,
  body:not(.sidebar-collapse) .main-header,
  body:not(.sidebar-collapse) .main-footer {
    margin-left: 232px;
  }
}

@media (max-width: 767.98px) {
  .content-wrapper,
  .main-header,
  .main-footer {
    margin-left: 0;
  }
}

a { color: var(--np-violet); }
a:hover { color: var(--np-violet-2); }


/* ===========================================================================
 * 4 · SIDEBAR — Override AdminLTE's .main-sidebar
 * ---------------------------------------------------------------------------
 * AdminLTE markup expected:
 *   <aside class="main-sidebar sidebar-dark-primary">
 *     <a class="brand-link">...</a>
 *     <div class="sidebar">
 *       <nav class="mt-2">
 *         <ul class="nav nav-pills nav-sidebar flex-column">
 *           <li class="nav-item"><a class="nav-link">...</a></li>
 *         </ul>
 *       </nav>
 *     </div>
 *   </aside>
 *
 * To get section labels (Dashboard / Customers / Vouchers / etc.) add this
 * pattern between groups — see blade-partials/_sidebar.blade.php for full markup:
 *   <li class="nav-header">DASHBOARD</li>
 * =========================================================================== */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background-color: var(--np-sidebar-bg);
  border-right: 1px solid var(--np-border-dark);
  position: fixed !important;
  top: 0 !important;
  bottom: 0;
  left: 0;
  width: 232px;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 1040;
  display: flex;
  flex-direction: column;
}

/* Hairline violet accent at top of sidebar — the signature element */
.main-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(153,68,255,0.55) 35%,
    rgba(153,68,255,0.55) 65%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Brand link / app switcher at top of sidebar */
.main-sidebar .brand-link {
  background: transparent;
  border-bottom: 1px solid var(--np-border-dark);
  color: white;
  font-family: var(--np-font-body);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.05px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: background .12s;
  height: auto;
  line-height: 1.2;
  flex-shrink: 0;
}
.main-sidebar .brand-link:hover {
  background: rgba(255,255,255,0.025);
  color: white;
}
.main-sidebar .brand-link .brand-image {
  width: 22px;
  height: 22px;
  margin: 0;
  float: none;
  opacity: 1;
}
.main-sidebar .brand-link .brand-text {
  flex: 1;
  font-weight: 500;
  font-size: 13.5px;
  margin: 0;
}

.main-sidebar .sidebar {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 28px;
}

/* Section headers — use <li class="nav-header">CUSTOMERS</li> in markup */
.main-sidebar .nav-sidebar .nav-header {
  padding: 10px 16px 5px;
  color: var(--np-sink-3);
  font-family: var(--np-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  background: transparent;
  margin-top: 6px;
}
.main-sidebar .nav-sidebar .nav-header:first-child { margin-top: 0; }

/* Nav items */
.main-sidebar .nav-sidebar .nav-link {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--np-sink);
  border-radius: 0;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s;
  letter-spacing: -0.05px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-sidebar .nav-sidebar .nav-link:hover {
  color: white;
  background: rgba(255,255,255,0.03);
  border-left-color: transparent;
}
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .nav-item > .nav-link.active {
  background: var(--np-violet-tint-2);
  color: white;
  border-left-color: var(--np-violet);
  font-weight: 500;
  box-shadow: none;
}

/* Sidebar icons (if used) */
.main-sidebar .nav-sidebar .nav-link .nav-icon {
  font-size: 14px;
  margin-right: 0;
  width: 16px;
  text-align: center;
  color: inherit;
  opacity: 0.75;
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon { opacity: 1; }

/* Treeview chevron for nested items */
.main-sidebar .nav-sidebar .nav-link .right {
  color: var(--np-sink-3);
  font-size: 11px;
}


/* ===========================================================================
 * 5 · TOPBAR — Override AdminLTE's .main-header
 * =========================================================================== */
.main-header {
  background: var(--np-topbar-bg) !important;
  border-bottom: 1px solid var(--np-border) !important;
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  z-index: 1030;
}
.np-sidebar-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--np-border-2);
  border-radius: var(--np-radius-sm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  margin-right: 10px;
  color: var(--np-ink);
  background: #fff;
}
.np-sidebar-toggle span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.np-sidebar-toggle:hover,
.np-sidebar-toggle:focus {
  color: var(--np-ink);
  text-decoration: none;
}
.main-header.navbar-white { background: var(--np-topbar-bg) !important; }

.main-header .navbar-nav .nav-link {
  color: var(--np-ink-2);
  font-size: 13px;
  font-weight: 500;
  height: 56px;
  display: flex;
  align-items: center;
}
.main-header .navbar-nav .nav-link:hover { color: var(--np-ink); }

/* Topbar search field — use a custom .np-topbar-search wrapper, NOT a Bootstrap form. */


/* ===========================================================================
 * 6 · CONTENT AREA
 * =========================================================================== */
.content-header {
  padding: 28px 32px 16px;
  background: var(--np-content-bg);
}
.content-header h1,
.content-header .h1 {
  font-family: var(--np-font-body);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: var(--np-ink);
  margin: 0;
}
.content {
  padding: 0 32px 32px;
  background: var(--np-content-bg);
}

@media (min-width: 768px) {
  body:not(.sidebar-collapse) .main-header {
    left: 232px;
    right: 0;
    width: calc(100% - 232px);
  }

  body:not(.sidebar-collapse) .content-wrapper {
    /* padding-top: 56px; */
  }
}

/* Breadcrumb override */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--np-font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
}
.breadcrumb-item,
.breadcrumb-item.active { color: var(--np-ink-3); }
.breadcrumb-item a { color: var(--np-ink-2); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--np-violet); }
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--np-ink-4);
  padding: 0 4px;
}


/* ===========================================================================
 * 7 · CARDS — Override AdminLTE's .card
 * =========================================================================== */
.card {
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-lg);
  box-shadow: none;
  background: white;
  margin-bottom: 16px;
  overflow: hidden;
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--np-border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
}
.card-header::after { content: none; } /* AdminLTE adds a clearfix that we don't need */
.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--np-ink);
  margin: 0;
  letter-spacing: -0.05px;
  float: none;
}
.card-body { padding: 18px; background: white; }
.card-body.flush { padding: 0; }
.card-tools { float: none; margin: 0; }


/* ===========================================================================
 * 8 · BUTTONS — Override Bootstrap's .btn
 * =========================================================================== */
.btn {
  font-family: var(--np-font-body);
  font-size: 12px;
  font-weight: 500;
  height: 32px;
  padding: 7px 13px;
  border-radius: var(--np-radius-sm);
  border-width: 1px;
  letter-spacing: 0.1px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.3;
}
.btn:focus,
.btn.focus { box-shadow: 0 0 0 3px var(--np-violet-tint); }
.btn-sm {
  height: 26px;
  padding: 4px 10px;
  font-size: 11px;
}
.btn-lg {
  height: 38px;
  padding: 8px 16px;
  font-size: 13.5px;
}

/* Default (white) button — override Bootstrap's .btn-default and .btn-light */
.btn-default,
.btn-light,
.btn-outline-secondary {
  background: white;
  color: var(--np-ink);
  border-color: var(--np-border-2);
}
.btn-default:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
  background: var(--np-surface-tint);
  border-color: var(--np-ink-3);
  color: var(--np-ink);
}

/* Primary — violet */
.btn-primary {
  background: var(--np-violet);
  border-color: var(--np-violet);
  color: white;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--np-violet-2);
  border-color: var(--np-violet-2);
  color: white;
}

/* Danger — keep Bootstrap red but with our edge */
.btn-danger,
.btn-outline-danger {
  background: white;
  color: var(--np-bad);
  border-color: rgba(220,38,38,0.30);
}
.btn-danger:hover,
.btn-outline-danger:hover {
  background: var(--np-bad-tint);
  border-color: var(--np-bad);
  color: var(--np-bad);
}

/* Secondary as ghost — used for "More ⌄" type buttons */
.btn-secondary {
  background: white;
  color: var(--np-ink);
  border-color: var(--np-border-2);
}
.btn-secondary:hover {
  background: var(--np-surface-tint);
  border-color: var(--np-ink-3);
  color: var(--np-ink);
}


/* ===========================================================================
 * 9 · FORMS — Override Bootstrap's .form-control
 * =========================================================================== */
.form-control {
  height: 36px;
  border: 1px solid var(--np-border-2);
  border-radius: var(--np-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--np-font-body);
  color: var(--np-ink);
  background: white;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus {
  border-color: var(--np-violet);
  box-shadow: 0 0 0 3px var(--np-violet-tint);
}
textarea.form-control {
  height: auto;
  min-height: 72px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}
select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2314111f' opacity='0.44' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  appearance: none;
}
.form-group label,
label {
  font-family: var(--np-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--np-ink-3);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}
.form-group { margin-bottom: 18px; }
.form-text { font-size: 11.5px; color: var(--np-ink-3); margin-top: 4px; }

/* Required field asterisk — style the small red asterisk consistently */
label .required,
label::after { color: var(--np-bad); }

/* Override Bootstrap's checkbox */
.form-check-input { margin-top: 0.2rem; }
.form-check-label { font-size: 12.5px; color: var(--np-ink); text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--np-font-body); }


/* ===========================================================================
 * 10 · TABLES — Override Bootstrap and DataTables
 * =========================================================================== */
.table {
  margin-bottom: 0;
  font-size: 12.5px;
  color: var(--np-ink);
}
.table thead th {
  font-family: var(--np-font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--np-ink-3);
  font-weight: 500;
  background: var(--np-surface-tint);
  border-bottom: 1px solid var(--np-border-2);
  border-top: none;
  padding: 12px 18px;
  vertical-align: middle;
}
.table tbody td {
  padding: 12px 18px;
  border-top: 1px solid var(--np-border);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.table tbody tr:hover { background: var(--np-surface-tint); cursor: pointer; }
.table-bordered {
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-md);
}
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }

/* DataTables — single scroll container only when scrollX is enabled */
.dataTables_wrapper {
  width: 100%;
  clear: both;
  overflow-x: visible;
}
.dataTables_wrapper .dataTables_scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper .dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-top: none !important;
  margin-top: 0 !important;
}
.dataTables_wrapper .dataTables_scrollHead {
  overflow: hidden !important;
  border-bottom: none !important;
}
.dataTables_wrapper .dataTables_scrollHead table.dataTable,
.dataTables_wrapper .dataTables_scrollBody table.dataTable {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: none !important;
}
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead,
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead tr {
  height: 0 !important;
  max-height: 0 !important;
}
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead th,
.dataTables_wrapper .dataTables_scrollBody table.dataTable thead td {
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  visibility: collapse;
}
.dataTables_wrapper table.dataTable {
  width: 100%;
  table-layout: auto;
}

.dataTables_wrapper table.dataTable thead th {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.dataTables_wrapper table.dataTable:not(.np-table-fit) {
  min-width: 100%;
  width: 100% !important;
}

.dataTables_wrapper .dataTables_scrollHeadInner table.dataTable,
.dataTables_wrapper .dataTables_scrollBody table.dataTable {
  min-width: 720px !important;
  /* Keep scrollX tables content-sized so wide columns can still scroll */
  width: auto !important;
}

.table tbody td.np-col-status,
.table tbody td.np-col-action,
.table tbody td.text-right,
.table tbody td .wrap-td-content,
.table tbody td.np-col-words {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.dataTables_wrapper table.dataTable.np-table-fit {
  min-width: 0;
  table-layout: fixed;
}
.dataTables_wrapper table.dataTable.np-table-wide {
  min-width: 1100px;
  table-layout: auto;
}
.card > .card-body.p-0,
.card > .card-body:only-child {
  overflow-x: visible;
}
.card.np-table-scroll-x > .card-body.p-0,
.card.np-table-scroll-x > .card-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* DataTables overrides — AdminLTE includes DataTables CSS */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-family: var(--np-font-body);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--np-ink-2);
  font-weight: 400;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--np-border-2);
  border-radius: var(--np-radius-sm);
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  background: white;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--np-violet);
  box-shadow: 0 0 0 3px var(--np-violet-tint);
  outline: none;
}
.dataTables_wrapper .dataTables_info {
  font-family: var(--np-font-mono);
  font-size: 11px;
  color: var(--np-ink-3);
  letter-spacing: 0.2px;
  padding-top: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  background: white !important;
  color: #007bff !important;
  margin: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #0056b3 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #007bff !important;
  border-color: #007bff !important;
  color: white !important;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right !important;
}

div.dataTables_wrapper div.dataTables_length {
  text-align: left !important;
}

/* Dual listbox — hide "show all" filter clear controls (reference design) */
.bootstrap-duallistbox-container .clear1,
.bootstrap-duallistbox-container .clear2,
.bootstrap-duallistbox-container.box1.filtered .clear1,
.bootstrap-duallistbox-container.box2.filtered .clear2,
.bootstrap-duallistbox-container .box1.filtered .clear1,
.bootstrap-duallistbox-container .box2.filtered .clear2 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Pagination footer — allow horizontal scroll when many pages */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.dataTables_wrapper .dataTables_paginate {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  min-width: min-content;
  padding-bottom: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  flex-shrink: 0;
}

/* Row action menus — avoid clipping inside table scroll areas */
table.dataTable tbody td .dropdown,
.np-page table.dataTable tbody td .dropdown,
.card .table tbody td .dropdown {
  position: static;
}

table.dataTable tbody td:has(.dropdown),
table.dataTable tbody td.np-col-action,
.np-page table.dataTable tbody td:last-child {
  overflow: visible !important;
  position: relative;
}

.dropdown-menu.np-dropdown-menu-portal {
  position: fixed !important;
  z-index: 1065;
  display: block;
  margin: 0;
}

/* Custom row menus (Ready-to-Go Prompts, Preset Variables) when portaled to body */
.rtg-actions-dropdown.np-custom-action-portal,
.pv-actions-dropdown.np-custom-action-portal {
  position: fixed !important;
  z-index: 1065;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  display: block !important;
}

table.dataTable tbody td .rtg-action-wrap,
table.dataTable tbody td .rtg-actions-menu,
table.dataTable tbody td .pv-action-wrap,
table.dataTable tbody td .pv-actions-menu,
table.dataTable tbody td.rtg-col-action {
  overflow: visible !important;
  position: relative;
}


/* ===========================================================================
 * 11 · BADGES — Override Bootstrap's .badge
 * =========================================================================== */
.badge {
  font-family: var(--np-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-success,
.badge-good { background: var(--np-good-tint); color: var(--np-good); }
.badge-warning,
.badge-warn { background: var(--np-warn-tint); color: var(--np-warn); }
.badge-danger,
.badge-bad { background: var(--np-bad-tint); color: var(--np-bad); }
.badge-secondary,
.badge-muted { background: var(--np-surface-tint-2); color: var(--np-ink-3); }
.badge-info { background: var(--np-info-tint); color: var(--np-info); }

/* Status pills in lists (Active / Inactive toggle links) */
a.active-status,
a.inactive-status,
.rtg-status {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--np-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.12s ease, background 0.12s ease;
}

a.active-status,
.rtg-status.rtg-status-active,
.rtg-status-active {
  background: var(--np-status-active-bg) !important;
  color: var(--np-status-active-fg) !important;
}

a.inactive-status,
.rtg-status.rtg-status-inactive,
.rtg-status-inactive {
  background: var(--np-status-muted-bg) !important;
  color: var(--np-status-muted-fg) !important;
}

a.active-status:hover,
a.inactive-status:hover,
.rtg-status:hover {
  opacity: 0.9;
  text-decoration: none !important;
}

a.active-status:hover {
  color: var(--np-status-active-fg) !important;
}

a.inactive-status:hover {
  color: var(--np-status-muted-fg) !important;
}

/* Center status column in DataTables */
table.dataTable thead th.np-col-status,
table.dataTable tbody td.np-col-status,
table.dataTable tbody td:has(> a.active-status),
table.dataTable tbody td:has(> a.inactive-status),
table.dataTable tbody td:has(> a.rtg-status) {
  text-align: center !important;
  vertical-align: middle !important;
}


/* ===========================================================================
 * 12 · ALERTS / DROPDOWNS / MISC AdminLTE COMPONENTS
 * =========================================================================== */
.dropdown-menu {
  border: 1px solid var(--np-border-2);
  border-radius: var(--np-radius-md);
  box-shadow: 0 8px 24px -8px rgba(20,17,31,0.15);
  padding: 6px 0;
}
.dropdown-item {
  font-family: var(--np-font-body);
  font-size: 12.5px;
  padding: 7px 14px;
  color: var(--np-ink);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--np-surface-tint); color: var(--np-ink); }
.dropdown-divider { border-top: 1px solid var(--np-border); margin: 4px 0; }

/* Modals */
.modal-content {
  border: 1px solid var(--np-border-2);
  border-radius: var(--np-radius-lg);
  box-shadow: 0 32px 80px -32px rgba(20,17,31,0.40);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--np-border);
}
.modal-title { font-size: 15px; font-weight: 500; color: var(--np-ink); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--np-border); gap: 8px; }

.modal-dialog {
  max-width: calc(100vw - 2rem);
  margin: 1rem auto;
}


/* ===========================================================================
 * 13 · UTILITY CLASSES
 * Project-scoped — prefixed with .np- to avoid colliding with Bootstrap's utilities.
 * =========================================================================== */
.np-mono { font-family: var(--np-font-mono); font-size: 11.5px; color: var(--np-ink-2); letter-spacing: 0.2px; }
.np-num { text-align: right; font-family: var(--np-font-mono); font-feature-settings: 'tnum' 1; color: var(--np-ink); }
.np-text-dim { color: var(--np-ink-3); }
.np-text-quiet { color: var(--np-ink-4); }
.np-em-uppercase {
  font-family: var(--np-font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--np-ink-3);
  font-weight: 500;
}


/* ===========================================================================
 * 14 · RESPONSIVE — Tablet & Phone
 * AdminLTE has its own mobile sidebar collapse; we tune it to match the design.
 * =========================================================================== */

/* Tablet: 768–1023px */
@media (max-width: 1023.98px) {
  .content-header,
  .content { padding-left: 20px; padding-right: 20px; }
  .main-header { padding: 0 16px; }
}

/* Tablet / phone: sidebar overlay — show toggle (matches AdminLTE mobile breakpoint) */
@media (max-width: 991.98px) {
  .np-sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }
}

/* Phone: ≤ 767px */
@media (max-width: 767.98px) {

  .main-header {
    height: auto;
    min-height: 56px;
    padding: 10px 12px;
    gap: 8px;
  }

  .np-topbar-search {
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }

  .np-topbar-search__placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .np-user-menu__name,
  .np-kbd {
    display: none;
  }

  .content-header { padding: 20px 16px 12px; }
  .content-header h1 { font-size: 20px; }
  .content { padding: 0 16px 24px; }
  .card { margin-bottom: 12px; }
  .card-header { padding: 12px 14px; }
  .card-body { padding: 14px; }

  /* Touch target sizes */
  .btn { height: 36px; font-size: 12.5px; }
  .btn-sm { height: 30px; font-size: 11px; }

  .table thead th,
  .table tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_paginate {
    margin-top: 8px;
    width: 100%;
    justify-content: flex-start;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
    width: 100%;
  }

  /* Legacy Bootstrap form grids */
  .content .row > [class*="col-"],
  .content form .row > [class*="col-"],
  .content-header .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .content .form-control,
  .content select.form-control,
  .content textarea.form-control,
  .content .custom-file,
  .content .input-group,
  .content .bootstrap-duallistbox-container {
    max-width: 100%;
    width: 100%;
  }

  .content .input-group {
    flex-wrap: wrap;
  }

  .content .input-group > .form-control,
  .content .input-group-prepend,
  .content .input-group-append {
    width: 100%;
    max-width: 100%;
  }

  .content .form-inline {
    display: block;
  }

  .content .form-inline .form-control,
  .content .form-inline .form-group {
    width: 100%;
    margin-bottom: 8px;
  }

  .modal-dialog {
    max-width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }

  /* AdminLTE's mobile sidebar opens via .sidebar-open on body — we leave that alone
     and just tune the open-state widths/animation in nexus-panel-components.css */
}

/* ===========================================================================
 * 15 · DATATABLES & LIST PAGES — global responsive containment
 * Applies to legacy AdminLTE pages and Nexus np-page modules alike.
 * =========================================================================== */

.content-wrapper {
  overflow-x: hidden;
  max-width: 100%;
}

.content .breadcrumb {
  flex-wrap: wrap;
}

.content .box-header .row,
.content .card-header .row {
  row-gap: 12px;
}

.content .card,
.content .box {
  max-width: 100%;
}

.np-datatable-scroll,
.table-responsive.np-datatable-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content .dataTables_wrapper {
  max-width: 100%;
}

.content .dataTables_wrapper:not(.np-table-fit-wrapper) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content .dataTables_wrapper .dataTables_scroll,
.content .dataTables_wrapper .dataTables_scrollHead,
.content .dataTables_wrapper .dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.content .dataTables_wrapper table.dataTable:not(.np-table-fit) {
  min-width: 100%;
  width: 100% !important;
}

.content .dataTables_wrapper .dataTables_scrollHeadInner table.dataTable,
.content .dataTables_wrapper .dataTables_scrollBody table.dataTable {
  min-width: 720px !important;
  width: auto !important;
}

.content .dataTables_wrapper table.dataTable thead th {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  vertical-align: middle;
}

.content .dataTables_wrapper table.dataTable tbody td {
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.content table.dataTable th.np-col-action,
.content table.dataTable td.np-col-action,
.content table.dataTable td.np-col-checkbox,
.content table.dataTable th.np-col-checkbox {
  white-space: nowrap;
}

.content table.dataTable td.np-col-action,
.content table.dataTable th.np-col-action {
  min-width: 72px;
}

.content table.dataTable tbody td:last-child .btn-action-icon,
.content table.dataTable tbody td:last-child .dropdown {
  white-space: nowrap;
}

.np-page .card.np-table-card.np-table-fit .dataTables_wrapper,
.np-page .card.np-table-card.np-table-fit .card-body {
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  .np-toolbar {
    flex-wrap: wrap;
  }

  .np-toolbar-search {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .np-toolbar .np-filter-pill,
  .np-toolbar select.form-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .content .dataTables_wrapper .dataTables_length label,
  .content .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    margin-bottom: 0;
  }

  .content .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-top: 6px;
  }
}

@media (max-width: 767.98px) {
  .content [style*="justify-content: space-between"] {
    gap: 12px;
  }

  .content [style*="justify-content: space-between"] > div:last-child:not(:only-child) {
    width: 100%;
  }

  .content [style*="justify-content: space-between"] .btn {
    min-height: 38px;
  }

  .content .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .content .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .content .modal-footer .btn {
    flex: 1 1 auto;
    min-height: 38px;
  }

  .content .box-header .btn.float-right,
  .content .box-header .float-right .btn {
    float: none !important;
    width: 100%;
  }
}