/* ==========================================================================
   NIMOS components ("cn-") on the NEBAWASCO design system
   --------------------------------------------------------------------------
   The component classes every page shares, styled to docs/NEBAWASCO_DESIGN.md.
   Colours, radii, shadows and fonts come from the --neb-* tokens in
   nebawasco.css (loaded after this file); the --cn-* tokens below map onto
   them. Status colours (green/red/amber/...) are not in the design doc yet
   and keep their own values until it defines them.
   Loaded globally by layouts/app-master.blade.php AFTER the theme CSS
   (material-dashboard.css, app.css, DataTables), so these rules win ties.

   Rules for using it
   - Build pages from the cn-* classes below; don't restyle Bootstrap/theme
     classes. Every selector here starts with a cn- class, so pages that
     don't use them are untouched.
   - Icons: Bootstrap Icons (bi bi-*). FontAwesome glyphs don't render on
     every page.
   - Form fields: use .cn-input / .cn-select (or .cn-filter-input/-select in
     filter bars), not .form-control: material-dashboard.css strips the
     border and horizontal padding off every .form-control.
   - Page-only tweaks go in a <style> inside the page's main_content
     section (which lands after this file), never in @push('styles'):
     that stack renders BEFORE the theme CSS and loses to it.
   - Colours come from the tokens below; add a token rather than a new hex.
     New colours, radii or sizes go into the design doc first (it says ask).

   Contents
     1. Tokens                     9. Tables (.cn-table)
     2. Page header               10. Pills, badges, zone pills
     3. Stat tiles                11. KPI tiles, empty states, callouts
     4. Buttons                   12. Key/value lists, modal info
     5. Action bar                13. Data bar, numbers
     6. Card                      14. Loading overlay, info popover
     7. Tabs                      15. Small controls
     8. Form fields & filters     16. Responsive
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --cn-primary: var(--neb-ocean);         /* primary buttons, active states, links */
    --cn-primary-dark: var(--neb-ocean-hover);
    --cn-primary-light: var(--neb-ocean);
    --cn-primary-tint: var(--neb-surface);
    --cn-accent: var(--neb-cyan);           /* accent on dark surfaces (card-head icon) */
    --cn-heading: var(--neb-navy);          /* page and section titles */

    --cn-ink: var(--neb-text);              /* figures, table values */
    --cn-text: var(--neb-text);             /* body text */
    --cn-text-2: color-mix(in srgb, var(--neb-text) 80%, white);
    --cn-muted: var(--neb-text-70);
    --cn-subtle: var(--neb-text-50);

    --cn-border: var(--neb-line-soft);      /* card / tile outline */
    --cn-line: color-mix(in srgb, var(--neb-text) 15%, white); /* dividers, cell borders */
    --cn-line-strong: var(--neb-line);      /* field borders */
    --cn-divider: color-mix(in srgb, var(--neb-text) 6%, white);
    --cn-surface: white;
    --cn-surface-alt: var(--neb-surface);
    --cn-surface-soft: var(--neb-surface);

    --cn-green: #16a34a;   --cn-green-dark: #15803d;   --cn-green-tint: #dcfce7;   --cn-green-line: #bbf7d0;
    --cn-blue: #2563eb;    --cn-blue-dark: #1d4ed8;    --cn-blue-tint: #dbeafe;    --cn-blue-line: #bfdbfe;
    --cn-red: #dc2626;     --cn-red-dark: #991b1b;     --cn-red-tint: #fee2e2;     --cn-red-line: #fca5a5;
    --cn-amber: #d97706;   --cn-amber-dark: #92400e;   --cn-amber-tint: #fef3c7;   --cn-amber-line: #fcd34d;
    --cn-crimson: #7f1d1d; --cn-crimson-tint: #fce7e7;
    --cn-teal: #0f766e;    --cn-teal-tint: #ccfbf1;
    --cn-slate: #475569;   --cn-slate-tint: #e2e8f0;

    --cn-radius-card: var(--neb-radius-card);
    --cn-radius-tile: var(--neb-radius-card);
    --cn-radius: var(--neb-radius-card);    /* inputs */
    --cn-radius-sm: var(--neb-radius-card);
    --cn-radius-pill: var(--neb-radius-pill); /* buttons, pills, tags */
    --cn-shadow: var(--neb-shadow);
    --cn-shadow-hover: var(--neb-shadow);   /* the doc allows no heavier shadow */
    /* fields set outline:none on focus, so draw the doc's 2px cyan ring (2px offset) */
    --cn-focus-ring: 0 0 0 2px white, 0 0 0 4px var(--neb-cyan);
}

/* ── 2. Page header ────────────────────────────────────────────────────────
   <div class="cn-page-header mb-4">
     <div><div class="cn-breadcrumb">…</div><h1 class="cn-page-title"><i class="bi …"></i> Title</h1></div>
     <a class="cn-back-btn" href="…"><i class="bi bi-arrow-left"></i> Go Back</a>
   </div> */
.cn-page-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.cn-breadcrumb {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; color: var(--cn-subtle); margin-bottom: .25rem;
}
.cn-breadcrumb a { color: var(--cn-subtle); text-decoration: none; }
.cn-breadcrumb a:hover { color: var(--cn-primary); }
.cn-breadcrumb .bi-chevron-right { font-size: .65rem; }
.cn-page-title {
    font-size: 1.45rem; font-weight: 700; color: var(--cn-ink);
    margin: 0; display: flex; align-items: center; gap: .5rem;
    font-family: var(--neb-font-display); color: var(--cn-heading);
}
.cn-page-title i { color: var(--cn-primary); }
.cn-page-subtitle { font-size: .8rem; color: var(--cn-muted); margin: .2rem 0 0; }
.cn-back-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem; border-radius: var(--cn-radius-pill); background: var(--cn-surface);
    border: 1px solid var(--cn-primary); color: var(--cn-primary); font-size: .82rem;
    font-weight: 600; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.cn-back-btn:hover { background: var(--cn-surface-alt); color: var(--cn-primary); }
.cn-header-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ── 3. Stat tiles ─────────────────────────────────────────────────────────
   <div class="cn-stats-row"><div class="cn-stat-tile cn-stat-green">
     <div class="cn-stat-icon"><i class="bi …"></i></div>
     <div><p class="cn-stat-label">…</p><h4 class="cn-stat-value">…</h4><p class="cn-stat-footer">…</p></div>
   </div></div> */
.cn-stats-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.cn-stat-tile {
    display: flex; align-items: center; gap: .875rem; background: var(--cn-surface);
    border: 1px solid var(--cn-border); border-left-width: 4px; border-radius: var(--cn-radius-tile);
    padding: .875rem 1.25rem; flex: 1; min-width: 160px;
    box-shadow: var(--cn-shadow); transition: transform .2s, box-shadow .2s;
}
.cn-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--cn-shadow-hover); }
.cn-stat-green  { border-left-color: var(--cn-green); }
.cn-stat-blue   { border-left-color: var(--cn-blue); }
.cn-stat-red    { border-left-color: var(--cn-red); }
.cn-stat-amber  { border-left-color: var(--cn-amber); }
.cn-stat-crimson{ border-left-color: var(--cn-crimson); }
.cn-stat-teal   { border-left-color: var(--cn-teal); }
.cn-stat-slate  { border-left-color: var(--cn-slate); }
.cn-stat-icon {
    width: 40px; height: 40px; border-radius: var(--cn-radius-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.cn-stat-green  .cn-stat-icon { background: var(--cn-green-tint); color: var(--cn-green); }
.cn-stat-blue   .cn-stat-icon { background: var(--cn-blue-tint); color: var(--cn-blue); }
.cn-stat-red    .cn-stat-icon { background: var(--cn-red-tint); color: var(--cn-red); }
.cn-stat-amber  .cn-stat-icon { background: var(--cn-amber-tint); color: var(--cn-amber); }
.cn-stat-crimson .cn-stat-icon { background: var(--cn-crimson-tint); color: var(--cn-crimson); }
.cn-stat-teal   .cn-stat-icon { background: var(--cn-teal-tint); color: var(--cn-teal); }
.cn-stat-slate  .cn-stat-icon { background: var(--cn-slate-tint); color: var(--cn-slate); }
.cn-stat-label  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cn-subtle); margin: 0 0 .1rem; }
.cn-stat-value  { font-size: 1.45rem; font-weight: 700; color: var(--cn-ink); margin: 0; letter-spacing: -.02em; line-height: 1; }
.cn-stat-value small { font-size: .75rem; font-weight: 600; color: var(--cn-muted); letter-spacing: 0; }
.cn-stat-footer { font-size: .68rem; color: var(--cn-subtle); margin: .15rem 0 0; }

/* ── 4. Buttons ────────────────────────────────────────────────────────────
   <a class="cn-btn cn-btn-primary"><i class="bi …"></i> Label</a>  (+ .cn-btn-sm) */
.cn-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .9rem; font-size: .8rem; font-weight: 600;
    border-radius: var(--cn-radius-pill); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; transition: all .15s;
    white-space: nowrap; line-height: 1.4;
}
.cn-btn:disabled, .cn-btn.disabled { opacity: .5; cursor: not-allowed; }
.cn-btn-sm { padding: .28rem .65rem; font-size: .75rem; border-radius: var(--cn-radius-pill); }
.cn-btn-primary    { background:var(--cn-primary); color:#fff; box-shadow:var(--cn-shadow); }
.cn-btn-primary:hover { background:var(--cn-primary-dark); color:#fff; }
.cn-btn-secondary  { background:var(--cn-surface); color:var(--cn-primary); border-color:var(--cn-primary); }
.cn-btn-secondary:hover { background:var(--cn-surface-alt); color:var(--cn-primary); }
.cn-btn-success    { background:var(--cn-green-dark); color:#fff; }
.cn-btn-success:hover { background:#166534; color:#fff; }
.cn-btn-danger     { background:#b91c1c; color:#fff; }
.cn-btn-danger:hover { background:var(--cn-red-dark); color:#fff; }
.cn-btn-warning    { background:#b45309; color:#fff; }
.cn-btn-warning:hover { background:var(--cn-amber-dark); color:#fff; }
.cn-btn-teal       { background:var(--cn-teal); color:#fff; }
.cn-btn-teal:hover { background:#134e4a; color:#fff; }
.cn-btn-ghost      { background:var(--cn-surface-alt); color:var(--cn-muted); border-color:var(--cn-line); }
.cn-btn-ghost:hover { background:var(--cn-line); color:var(--cn-text); }
.cn-btn-outline-secondary { background:transparent; color:var(--cn-text-2); border-color:var(--cn-line-strong); }
.cn-btn-outline-secondary:hover { background:var(--cn-divider); color:var(--cn-ink); }
.cn-btn-outline-danger { background:transparent; color:var(--cn-red); border-color:var(--cn-red-line); }
.cn-btn-outline-danger:hover { background:var(--cn-red-tint); color:var(--cn-red-dark); }
.cn-btn-outline-success { background:transparent; color:var(--cn-green); border-color:var(--cn-green-line); }
.cn-btn-outline-success:hover { background:var(--cn-green-tint); color:var(--cn-green-dark); }
/* on a navy .cn-card-head */
.cn-btn-light      { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); }
.cn-btn-light:hover { background:rgba(255,255,255,.22); color:#fff; }
/* icon-only row action */
.cn-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: var(--cn-radius-pill);
    border: 1px solid var(--cn-line); background: var(--cn-surface); color: var(--cn-muted);
    font-size: .8rem; cursor: pointer; transition: all .15s;
}
.cn-icon-btn:hover { background: var(--cn-primary-tint); color: var(--cn-primary); border-color: var(--cn-primary); }
.cn-icon-btn.cn-danger:hover { background: var(--cn-red-tint); color: var(--cn-red-dark); border-color: var(--cn-red-line); }
.cn-icon-btn:disabled { opacity: .5; cursor: not-allowed; background: var(--cn-surface-alt); }

/* ── 5. Action bar ─────────────────────────────────────────────────────── */
.cn-action-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cn-action-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.cn-action-jumps { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }

/* ── 6. Card ───────────────────────────────────────────────────────────────
   <div class="cn-card">
     <div class="cn-card-head"><div class="cn-card-icon"><i class="bi …"></i></div>
       <div><h6 class="cn-card-title">…</h6><p class="cn-card-subtitle">…</p></div>
       <div class="cn-card-head-actions">…</div></div>
     <div class="cn-card-body">…</div>
   </div> */
.cn-card {
    background: var(--cn-surface); border: 1px solid var(--cn-border); border-radius: var(--cn-radius-card);
    box-shadow: var(--cn-shadow);
}
.cn-card-head {
    display: flex; align-items: center; gap: .875rem;
    padding: 1rem 1.375rem; border-bottom: 1px solid rgba(255,255,255,.12);
    background: var(--neb-navy);
    border-radius: var(--cn-radius-card) var(--cn-radius-card) 0 0;
}
.cn-card-icon {
    width: 38px; height: 38px; border-radius: var(--cn-radius-pill);
    background: rgba(255,255,255,.1); color: var(--cn-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
}
.cn-card-title    { font-size: .9rem; font-weight: 700; color: #fff; margin: 0; }
.cn-card-subtitle { font-size: .72rem; color: rgba(255,255,255,.7); margin: 0; }
.cn-card-head-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cn-card-body { padding: 1rem 1.375rem; }
.cn-card-foot {
    padding: .7rem 1.375rem; border-top: 1px solid var(--cn-divider);
    background: var(--cn-surface-soft); border-radius: 0 0 var(--cn-radius-card) var(--cn-radius-card);
}

/* ── 7. Tabs ───────────────────────────────────────────────────────────────
   Folder tabs; the active one opens into .cn-tab-content. */
.cn-tabs-bar {
    display: flex; list-style: none; margin: 0;
    padding: .45rem .5rem 0; gap: .2rem;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
    /* Bottom rule is painted as background so the active tab's white fill can cover it
       (a real border would sit outside the scroll clip and couldn't be covered) */
    border-bottom: none;
    background: linear-gradient(to top, var(--cn-subtle) 1px, var(--cn-divider) 1px);
}
.cn-tab {
    display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
    gap: .3rem; padding: .38rem .6rem; font-size: .77rem; font-weight: 600;
    color: var(--cn-text); background: var(--cn-surface-alt);
    border: 1px solid var(--cn-line-strong); border-bottom: none; margin-bottom: 0;
    cursor: pointer; transition: all .15s; border-radius: var(--cn-radius-card) var(--cn-radius-card) 0 0;
    box-shadow: inset 0 -1px 0 var(--cn-subtle);
}
.cn-tab:hover { color: var(--cn-ink); background: var(--cn-surface); }
.cn-tab.active {
    color: var(--cn-heading); font-weight: 700; background: var(--cn-surface);
    border-color: var(--cn-subtle); border-top: 3px solid var(--neb-cyan);
    padding-top: calc(.38rem - 2px);
    box-shadow: none;
}
.cn-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px;
    padding: 0 .3rem; border-radius: var(--cn-radius-pill);
}
.cn-tab-danger  { background:var(--cn-red-tint); color:var(--cn-red-dark); }
.cn-tab-warning { background:var(--cn-amber-tint); color:var(--cn-amber-dark); }
.cn-tab-success { background:var(--cn-green-tint); color:var(--cn-green-dark); }
.cn-tab-crimson { background:var(--cn-crimson-tint); color:var(--cn-crimson); }
.cn-tab-slate   { background:var(--cn-slate-tint); color:var(--cn-text); }
.cn-tab-content { padding: .75rem .9rem; background: var(--cn-surface); }

/* Section nav: the doc's "Active tab" (§6) as a row of links across the top of
   a section's pages. One row at every width; it scrolls sideways when it
   doesn't fit. The bottom rule is painted as background (a real border would
   sit outside the scroll clip and hide under the active underline).
   <nav class="cn-subnav"><a class="cn-subnav-item active" aria-current="page">
     <i class="bi …"></i> Label <span class="cn-subnav-count">12</span></a>…</nav>
   .cn-subnav-end pushes an item (e.g. Settings) to the far right. */
.cn-subnav {
    display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; margin: 0 0 .75rem; padding: 0;
    background: linear-gradient(to top, var(--cn-line) 1px, transparent 1px);
}
.cn-subnav-item {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; white-space: nowrap;
    padding: .45rem .5rem .4rem; font-size: .8rem; font-weight: 500; line-height: 1.25;
    color: var(--cn-muted); text-decoration: none;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.cn-subnav-item i { font-size: .85rem; }
.cn-subnav-item:hover { color: var(--cn-heading); border-bottom-color: var(--cn-line-strong); }
.cn-subnav-item.active { color: var(--cn-heading); font-weight: 600; border-bottom-color: var(--neb-cyan); }
.cn-subnav-item.active i { color: var(--cn-primary); }
.cn-subnav-end { margin-left: auto; }
.cn-subnav-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 17px; padding: 0 .35rem;
    font-size: .64rem; font-weight: 700; font-variant-numeric: tabular-nums;
    border-radius: var(--cn-radius-pill); background: var(--cn-divider); color: var(--cn-text-2);
}
.cn-subnav-item.active .cn-subnav-count { background: var(--neb-cyan); color: var(--neb-navy); }

/* ── 8. Form fields & filters ──────────────────────────────────────────────
   Filter bars: .cn-filter-label + .cn-filter-input/.cn-filter-select (compact).
   Forms:       .cn-label + .cn-input/.cn-select (roomier), .cn-help, .cn-field-error. */
.cn-filter-label,
.cn-label {
    display: block; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--cn-text); margin-bottom: .15rem;
}
.cn-filter-label i,
.cn-label i { color: var(--cn-primary); margin-right: .2rem; }
.cn-label .cn-required { color: var(--cn-red); margin-left: 1px; }
.cn-filter-select,
.cn-filter-input,
.cn-input,
.cn-select {
    width: 100%; padding: .28rem .55rem;
    border: 1.5px solid var(--cn-line-strong); border-radius: var(--cn-radius-sm);
    font-size: .8rem; color: var(--cn-ink); background: var(--cn-surface);
    transition: border-color .2s, box-shadow .2s;
}
.cn-input,
.cn-select { padding: .42rem .65rem; font-size: .875rem; border-radius: var(--cn-radius); }
.cn-input-lg { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: .5rem .75rem; }
textarea.cn-input { resize: vertical; min-height: 60px; }
.cn-filter-select:focus,
.cn-filter-input:focus,
.cn-input:focus,
.cn-select:focus {
    outline: none; border-color: var(--cn-primary); background: var(--cn-surface);
    box-shadow: var(--cn-focus-ring);
}
.cn-filter-select:disabled,
.cn-filter-input:disabled,
.cn-input:disabled,
.cn-select:disabled {
    background: var(--cn-divider); color: var(--cn-subtle); cursor: not-allowed;
}
.cn-input[readonly] { background: var(--cn-surface-alt); }
.cn-input.is-invalid, .cn-select.is-invalid { border-color: var(--cn-red); }
.cn-help { font-size: .7rem; color: var(--cn-muted); margin-top: .2rem; }
.cn-field-error { font-size: .72rem; color: #b91c1c; font-weight: 600; margin-top: .2rem; }
.cn-filter-hint { font-size: .72rem; color: var(--cn-text); }
.cn-filter-hint i { color: var(--cn-primary); }
.cn-filter-hint strong { color: var(--cn-primary); }
.cn-filter-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; color: var(--cn-primary);
    background: var(--cn-primary-tint); border: 1px solid var(--cn-primary);
    padding: .2rem .6rem; border-radius: var(--cn-radius-pill);
}

/* ── 9. Tables ─────────────────────────────────────────────────────────────
   <table class="cn-table w-100">. Inside .cn-tab-content or .cn-card-body it is
   framed, ruled and striped. Row states: .cn-row-reconnected/-danger/-warning. */
.cn-table { border-collapse: collapse; }
.cn-table thead th {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cn-muted); padding: .65rem 1rem;
    white-space: nowrap; background: var(--cn-surface-alt); border-bottom: 2px solid var(--cn-divider);
}
.cn-table tbody tr { border-bottom: 1px solid var(--cn-surface-alt); transition: background .12s; }
.cn-table tbody tr:hover { background: var(--cn-surface-alt); }
.cn-table td { padding: .6rem 1rem; color: var(--cn-text); vertical-align: middle; }
/* Row-state highlights (replace Bootstrap .table-* which require a .table parent) */
.cn-table tbody tr.cn-row-reconnected { background: #f0fdf4; }
.cn-table tbody tr.cn-row-reconnected:hover { background: var(--cn-green-tint); }
.cn-table tbody tr.cn-row-danger { background: #fef2f2; }
.cn-table tbody tr.cn-row-danger:hover { background: var(--cn-red-tint); }
.cn-table tbody tr.cn-row-warning { background: #fffbeb; }
.cn-table tbody tr.cn-row-warning:hover { background: var(--cn-amber-tint); }

:is(.cn-tab-content, .cn-card-body) table.cn-table,
:is(.cn-tab-content, .cn-card-body) table.dataTable.cn-table {
    border-collapse: collapse !important; border-spacing: 0; margin: 0 !important;
    border: 1px solid var(--cn-subtle); background: var(--cn-surface);
}
:is(.cn-tab-content, .cn-card-body) table.cn-table thead th,
:is(.cn-tab-content, .cn-card-body) table.dataTable.cn-table thead th {
    background: var(--cn-surface-alt); color: var(--cn-heading);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    padding: .4rem .55rem;
    border: 1px solid var(--cn-line-strong); border-bottom: 2px solid var(--cn-subtle);
}
:is(.cn-tab-content, .cn-card-body) table.cn-table tbody td,
:is(.cn-tab-content, .cn-card-body) table.dataTable.cn-table tbody td {
    color: var(--cn-ink); padding: .3rem .55rem;
    border: 1px solid var(--cn-line); vertical-align: middle;
}
:is(.cn-tab-content, .cn-card-body) table.cn-table tbody tr:nth-child(even):not([class*="cn-row-"]) { background: color-mix(in srgb, var(--neb-surface) 60%, white); }
:is(.cn-tab-content, .cn-card-body) table.cn-table tbody tr:hover,
:is(.cn-tab-content, .cn-card-body) table.cn-table tbody tr:nth-child(even):hover { background: color-mix(in srgb, var(--neb-ocean) 8%, white); }
:is(.cn-tab-content, .cn-card-body) table.cn-table .text-muted { color: var(--cn-text-2) !important; }
:is(.cn-tab-content, .cn-card-body) table.dataTable.no-footer { border-bottom: 0; }
:is(.cn-tab-content, .cn-card-body) table.cn-table .badge { font-weight: 600; }
.cn-table-wrap { overflow-x: auto; }

/* ── 10. Pills, badges, zone pills ─────────────────────────────────────── */
.cn-zone-pill {
    display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600;
    background: #f0fdf4; color: var(--cn-green-dark); border: 1px solid var(--cn-green-line);
    padding: .15rem .5rem; border-radius: var(--cn-radius-pill);
}
:is(.cn-tab-content, .cn-card-body) .cn-zone-pill { color: #166534; border-color: #86efac; padding: .08rem .45rem; }
.cn-zone-order-badge {
    font-size: .65rem; font-weight: 700;
    background: #e0f2fe; color: #0369a1;
    border: 1px solid #bae6fd;
    padding: .13rem .42rem; border-radius: var(--cn-radius-pill);
    letter-spacing: .02em;
}
/* Status pill: <span class="cn-pill cn-pill-green"><i class="bi …"></i> Paid</span> */
.cn-pill {
    display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
    font-size: .68rem; font-weight: 700; line-height: 1.3;
    padding: .12rem .5rem; border-radius: var(--cn-radius-pill); border: 1px solid transparent;
}
.cn-pill-green   { background: #f0fdf4; color: var(--cn-green-dark); border-color: var(--cn-green-line); }
.cn-pill-blue    { background: #eff6ff; color: var(--cn-blue-dark); border-color: var(--cn-blue-line); }
.cn-pill-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.cn-pill-red     { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cn-pill-crimson { background: var(--cn-crimson-tint); color: var(--cn-crimson); border-color: #f5c2c2; }
.cn-pill-slate   { background: var(--cn-divider); color: var(--cn-text-2); border-color: var(--cn-line); }
.cn-pill-navy    { background: var(--cn-primary-tint); color: var(--cn-primary); border-color: var(--cn-primary); }

/* ── 11. KPI tiles, empty states, callouts ─────────────────────────────── */
.cn-kpi-tile { border-radius: var(--cn-radius); padding: .4rem .7rem; text-align: center; }
.cn-kpi-red  { background: var(--cn-red-tint); }
.cn-kpi-blue { background: var(--cn-blue-tint); }
.cn-kpi-amber{ background: var(--cn-amber-tint); }
.cn-kpi-slate{ background: var(--cn-divider); }
.cn-kpi-green{ background: var(--cn-green-tint); }
.cn-kpi-value{ font-size: 1rem; font-weight: 700; color: var(--cn-ink); margin: 0; }
.cn-kpi-label{ font-size: .66rem; color: var(--cn-text); font-weight: 600; margin: 0; }

.cn-empty-state {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .85rem; background: #f0f9ff; border: 1px solid #bae6fd;
    border-radius: var(--cn-radius-card); font-size: .85rem; color: #0369a1;
}
.cn-empty-success { background: #f0fdf4; border-color: var(--cn-green-line); color: var(--cn-green-dark); }
.cn-empty-state.cn-empty-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Callout: <div class="cn-callout cn-callout-warn"><i class="bi …"></i><div>…</div></div> */
.cn-callout {
    display: flex; gap: .5rem; align-items: flex-start;
    border-left: 3px solid var(--cn-primary); background: var(--cn-primary-tint);
    border-radius: var(--cn-radius-sm); padding: .5rem .75rem;
    font-size: .8rem; color: var(--cn-text); line-height: 1.4;
}
.cn-callout > i { margin-top: .1rem; color: var(--cn-primary); }
.cn-callout-success { border-left-color: var(--cn-green); background: #f0fdf4; color: #14532d; }
.cn-callout-success > i { color: var(--cn-green); }
.cn-callout-warn { border-left-color: var(--cn-amber); background: #fffbeb; color: #78350f; }
.cn-callout-warn > i { color: var(--cn-amber); }
.cn-callout-danger { border-left-color: var(--cn-red); background: #fef2f2; color: var(--cn-crimson); }
.cn-callout-danger > i { color: var(--cn-red); }

/* ── 12. Key/value lists, modal info ───────────────────────────────────────
   <dl class="cn-dl"><dt>Meter #</dt><dd>109655</dd>…</dl> */
.cn-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .82rem; }
.cn-dl dt {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cn-subtle); align-self: center; margin: 0;
}
.cn-dl dd { margin: 0; color: var(--cn-ink); font-weight: 600; min-width: 0; }

.cn-modal-info { background: var(--cn-surface-alt); border-radius: 9px; padding: .75rem 1rem; }
.cn-modal-info-row { display: flex; gap: .75rem; align-items: baseline; padding: .2rem 0; }
.cn-modal-info-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-subtle); width: 70px; flex-shrink: 0; }
.cn-modal-info-value { font-size: .875rem; font-weight: 600; color: var(--cn-ink); }

/* ── 13. Data bar, numbers ─────────────────────────────────────────────────
   <span class="cn-databar"><span style="width:40%"></span></span> */
.cn-databar {
    display: inline-block; width: 64px; height: 6px; border-radius: var(--cn-radius-pill);
    background: var(--cn-divider); overflow: hidden; vertical-align: middle;
}
.cn-databar > span { display: block; height: 100%; border-radius: var(--cn-radius-pill); background: var(--cn-primary-light); }
.cn-databar.is-high > span { background: var(--cn-amber); }
.cn-num  { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-mono { font-family: var(--neb-font-mono); letter-spacing: .01em; }
.cn-muted { color: var(--cn-muted); }

/* ── 14. Loading overlay, info popover ─────────────────────────────────── */
.cn-ajax-container { position: relative; min-height: 90px; }
.cn-ajax-container.cn-loading { pointer-events: none; }
.cn-ajax-container.cn-loading::after {
    content: ''; position: absolute; inset: 0; z-index: 5;
    background: rgba(255,255,255,.65); border-radius: var(--cn-radius-card);
}
.cn-ajax-container.cn-loading::before {
    content: ''; position: absolute; top: 50%; left: 50%; z-index: 6;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border: 3px solid var(--cn-line); border-top-color: var(--cn-primary);
    border-radius: 50%; animation: cn-spin .7s linear infinite;
}
@keyframes cn-spin { to { transform: rotate(360deg); } }

/* Click-to-show info popover */
.cn-info-wrap { position: relative; display: inline-flex; }
.cn-info-btn {
    border: none; background: none; padding: 0 .15rem; line-height: 1;
    color: var(--cn-primary); font-size: .8rem; cursor: pointer; border-radius: 50%;
}
.cn-info-btn:hover, .cn-info-btn[aria-expanded="true"] { color: var(--cn-primary-dark); background: var(--cn-primary-tint); }
.cn-info-pop {
    position: absolute; top: calc(100% + 6px); left: -.4rem; z-index: 30;
    width: 250px; padding: .5rem .65rem;
    background: var(--cn-ink); color: var(--cn-surface-alt); border-radius: 7px;
    font-size: .74rem; font-weight: 500; line-height: 1.4;
    text-transform: none; letter-spacing: normal;
    box-shadow: 0 6px 18px rgba(15,23,42,.25);
}
.cn-info-pop::before {
    content: ''; position: absolute; top: -5px; left: .65rem;
    border: 5px solid transparent; border-top: 0; border-bottom-color: var(--cn-ink);
}

/* ── 15. Small controls ────────────────────────────────────────────────── */
/* DataTable row-actions dropdown toggle */
.cn-dt-action-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .65rem; font-size: .75rem; font-weight: 600;
    background: var(--cn-primary); color: #fff !important;
    border: none; border-radius: var(--cn-radius-pill); cursor: pointer; transition: background .15s;
    box-shadow: var(--cn-shadow);
}
.cn-dt-action-btn:hover { background: var(--cn-primary-dark); }
.cn-dt-action-btn::after { display: none; }
/* Row actions: a visible primary button plus a ⋮ menu.
   <div class="cn-row-actions"><a class="cn-btn cn-btn-primary cn-btn-sm">Pay</a>
     <button class="cn-icon-btn" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>⋮</button>
     <ul class="dropdown-menu dropdown-menu-end cn-row-menu">…</ul></div>
   Don't use a .dropdown wrapper: material-dashboard forces transform/margin on
   `.dropdown .dropdown-menu`. The fixed strategy escapes .cn-table-wrap's clip. */
.cn-row-actions { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.cn-row-menu {
    min-width: 200px; padding: .3rem; font-size: .8rem;
    border: 1px solid var(--cn-line); border-radius: var(--cn-radius);
    box-shadow: var(--cn-shadow);
}
.cn-row-menu .dropdown-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .4rem .6rem; border-radius: var(--cn-radius-sm); color: var(--cn-text);
}
.cn-row-menu .dropdown-item:hover,
.cn-row-menu .dropdown-item:focus { background: var(--cn-primary-tint); color: var(--cn-primary); }
.cn-row-menu .dropdown-item i { width: 16px; text-align: center; }
.cn-row-menu .dropdown-divider { margin: .25rem 0; border-color: var(--cn-divider); }
.cn-link-btn { border: none; background: none; padding: 0; color: var(--cn-primary); font-weight: 700; text-decoration: underline; cursor: pointer; }
.cn-link-btn:hover { color: var(--cn-primary-dark); }
/* Native tick boxes: the theme's .form-check-input paints a checked box solid pink */
.cn-tick { width: 1rem; height: 1rem; margin: 0; vertical-align: middle; accent-color: var(--cn-primary); cursor: pointer; }

/* ── 16. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cn-stats-row { flex-direction: column; }
    .cn-stat-tile { min-width: 100%; }
    .cn-action-bar { flex-direction: column; align-items: flex-start; }
    .cn-action-jumps { margin-left: 0; }
}