/* fastpluggy.css — Consolidated design system
   Auto-generated by scripts/build-css.sh — do not edit directly.
   Edit the individual source files (01-tokens through 08-json-modal),
   then run: make css  (or ./scripts/build-css.sh)
   =========================================================== */

/* === 01-tokens.css === */

/* 01-tokens.css — FastPluggy Design Token System
   Proxy-inspired SIGNAL design system
   =========================================================== */

/* -----------------------------------------------------------
   1. Design Token System — Dark-first baseline
   ----------------------------------------------------------- */
:root {
    /* Surface layers — Tabler neutral palette (no blue tint) */
    --c-bg:             #0a0a0a;   /* neutral-950 */
    --c-surface:        #171717;   /* neutral-900 */
    --c-elevated:       #262626;   /* neutral-800 */
    --c-overlay:        #404040;   /* neutral-700 */

    /* Borders — RGBA for depth */
    --c-border:         rgba(255, 255, 255, 0.072);
    --c-border-subtle:  rgba(255, 255, 255, 0.042);
    --c-border-str:     rgba(255, 255, 255, 0.14);

    /* Text — 3-level hierarchy (no blue tint) */
    --c-text:           #e5e5e5;   /* neutral-200 */
    --c-text-muted:     #a3a3a3;   /* neutral-400 */
    --c-text-subtle:    #737373;   /* neutral-500 — was 600, too low contrast on dark bg */

    /* Accent — bright blue */
    --c-accent:         #3d8ff8;
    --c-accent-dim:     rgba(61, 143, 248, 0.10);
    --c-accent-light:   #6aabff;
    --c-accent-glow:    rgba(61, 143, 248, 0.10);
    --c-accent-bdr:     rgba(61, 143, 248, 0.28);
    --c-accent-rgb:     61, 143, 248;

    /* Semantic colors */
    --c-success:        #27c97a;
    --c-success-dim:    rgba(39, 201, 122, 0.10);
    --c-success-bdr:    rgba(39, 201, 122, 0.25);

    --c-warning:        #f5a623;
    --c-warning-dim:    rgba(245, 166, 35, 0.10);
    --c-warning-bdr:    rgba(245, 166, 35, 0.25);

    --c-danger:         #f04055;
    --c-danger-dim:     rgba(240, 64, 85, 0.10);
    --c-danger-bdr:     rgba(240, 64, 85, 0.25);

    --c-info:           #38bdf8;
    --c-info-dim:       rgba(56, 189, 248, 0.10);

    --c-purple:         #a78bfa;
    --c-purple-dim:     rgba(167, 139, 250, 0.10);

    /* Typography */
    --c-font-ui:        'Outfit', system-ui, -apple-system, sans-serif;
    --c-font-mono:      'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Geometry */
    --sidebar-w:            220px;
    --sidebar-collapsed-w:  52px;
    --topbar-h:             52px;
    --radius:               6px;
    --radius-sm:            4px;

    /* Bridge to Tabler */
    --tblr-primary:          var(--c-accent);
    --tblr-primary-rgb:      61, 143, 248;
    --tblr-font-sans-serif:  var(--c-font-ui);
    --tblr-font-monospace:   var(--c-font-mono);
}

/* -----------------------------------------------------------
   2. Light Mode Token Overrides
   ----------------------------------------------------------- */
[data-bs-theme="light"],
[data-theme="light"] {
    --c-bg:             #eef1f7;
    --c-surface:        #ffffff;
    --c-elevated:       #f5f7fb;
    --c-overlay:        #eaeff8;

    --c-border:         rgba(0, 0, 0, 0.08);
    --c-border-subtle:  rgba(0, 0, 0, 0.05);
    --c-border-str:     rgba(0, 0, 0, 0.16);

    --c-text:           #1a2535;
    --c-text-muted:     #586880;
    --c-text-subtle:    #6b7f94;

    --c-accent:         #2878f0;
    --c-accent-dim:     rgba(40, 120, 240, 0.08);
    --c-accent-light:   #4a96ff;
    --c-accent-glow:    rgba(40, 120, 240, 0.08);
    --c-accent-bdr:     rgba(40, 120, 240, 0.22);
    --c-accent-rgb:     40, 120, 240;

    --c-success:        #16a359;
    --c-success-dim:    rgba(22, 163, 89, 0.08);
    --c-success-bdr:    rgba(22, 163, 89, 0.22);

    --c-warning:        #d97706;
    --c-warning-dim:    rgba(217, 119, 6, 0.08);
    --c-warning-bdr:    rgba(217, 119, 6, 0.22);

    --c-danger:         #dc2626;
    --c-danger-dim:     rgba(220, 38, 38, 0.08);
    --c-danger-bdr:     rgba(220, 38, 38, 0.22);

    --c-info:           #0284c7;
    --c-info-dim:       rgba(2, 132, 199, 0.08);

    --c-purple:         #7c3aed;
    --c-purple-dim:     rgba(124, 58, 237, 0.08);

    --tblr-primary-rgb: 40, 120, 240;
}

/* === 02-tabler-bridge.css === */

/* 02-tabler-bridge.css — Tabler Variable Bridge
   Maps --tblr-* vars to our --c-* design tokens (both themes).
   See MEMORY.md: "Tabler Variable Bridge Strategy"
   =========================================================== */

/* -----------------------------------------------------------
   3. Tabler Variable Bridge (both themes)
   ----------------------------------------------------------- */
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --tblr-bg-surface:           var(--c-surface);
    --tblr-bg-surface-secondary: var(--c-elevated);
    --tblr-body-bg:              var(--c-bg);
    --tblr-body-color:           var(--c-text);
    --tblr-border-color:         var(--c-border);
    --tblr-secondary-color:      var(--c-text-muted);
    --tblr-muted-color:          var(--c-text-subtle);
    --tblr-navbar-bg:            var(--c-surface);
    --tblr-border-radius:        var(--radius);
    --tblr-border-radius-sm:     var(--radius-sm);

    /* Card */
    --tblr-card-bg:              var(--c-surface);
    --tblr-card-border-color:    var(--c-border);
    --tblr-card-border-radius:   var(--radius);
    --tblr-card-cap-bg:          transparent;
    --tblr-card-cap-padding-x:   1rem;
    --tblr-card-cap-padding-y:   0.6875rem;
    --tblr-card-spacer-x:        1rem;
    --tblr-card-spacer-y:        1rem;

    /* Dropdown */
    --tblr-dropdown-bg:                  var(--c-elevated);
    --tblr-dropdown-border-color:        var(--c-border-str);
    --tblr-dropdown-color:               var(--c-text-muted);
    --tblr-dropdown-link-color:          var(--c-text-muted);
    --tblr-dropdown-link-hover-bg:       var(--c-overlay);
    --tblr-dropdown-link-hover-color:    var(--c-text);
    --tblr-dropdown-link-active-bg:      var(--c-accent);
    --tblr-dropdown-link-active-color:   #fff;
    --tblr-dropdown-border-radius:       var(--radius);
    --tblr-dropdown-box-shadow:          0 8px 24px rgba(0, 0, 0, 0.35);

    /* Pagination */
    --tblr-pagination-bg:                var(--c-elevated);
    --tblr-pagination-border-color:      var(--c-border);
    --tblr-pagination-color:             var(--c-text-muted);
    --tblr-pagination-hover-bg:          var(--c-overlay);
    --tblr-pagination-hover-color:       var(--c-text);
    --tblr-pagination-hover-border-color: var(--c-border);
    --tblr-pagination-active-bg:         var(--c-accent);
    --tblr-pagination-active-border-color: var(--c-accent);
    --tblr-pagination-active-color:      #fff;
    --tblr-pagination-disabled-bg:       var(--c-elevated);
    --tblr-pagination-disabled-border-color: var(--c-border);
    --tblr-pagination-disabled-color:    var(--c-text-subtle);
}

/* === 03-layout.css === */

/* 03-layout.css — Page layout, sidebar, topbar, content area
   =========================================================== */

/* -----------------------------------------------------------
   4. Base Typography & Layout
   ----------------------------------------------------------- */
html, body {
    height: 100%;
}

code, pre, kbd, samp, .font-monospace {
    font-family: var(--c-font-mono) !important;
}

/* Force sidebar + content to sit side by side (row layout).
   Tabler 1.4.0 uses flex-direction:column for .page, which stacks
   the navbar-vertical on top of the page-wrapper. Override it. */
.page {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
    align-items: stretch;
}

/* Reset any Tabler margin-left (used when sidebar is position:fixed) */
.page-wrapper {
    flex: 1 !important;
    min-width: 0;
    width: auto !important;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------------------
   5. Sidebar (#sidebar / .navbar-vertical)
   ----------------------------------------------------------- */
#sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: #070810 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: visible;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

/* Inner container fills sidebar height */
#sidebar > .container-fluid {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* Collapse section grows to fill available space */
#sidebar .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
}

#sidebar .navbar-nav {
    flex: 1;
    overflow: visible;
}

/* -----------------------------------------------------------
   5a. fp-logo — Sidebar brand block
   ----------------------------------------------------------- */
.fp-logo {
    padding: 0.875rem 0.875rem 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
    flex-shrink: 0;
}

.fp-logo-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
}

.fp-logo-link:hover {
    color: inherit;
    text-decoration: none;
}

.fp-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-accent-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--c-accent);
    font-size: 0.9375rem;
    transition: background 0.15s ease;
}

.fp-logo-link:hover .fp-logo-icon {
    background: rgba(var(--c-accent-rgb), 0.18);
}

.fp-logo-text {
    overflow: hidden;
    transition: opacity 0.15s ease;
    min-width: 0;
}

.fp-logo-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.fp-logo-sub {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    margin-top: 1px;
}

/* -----------------------------------------------------------
   5b. Sidebar Nav Items
   ----------------------------------------------------------- */
#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 6px;
    margin: 1px 0.5rem;
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--c-text-muted);
    border-left: 2px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

#sidebar .nav-link:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, 0.04);
}

#sidebar .nav-link.active {
    color: var(--c-accent-light);
    background: var(--c-accent-glow);
    border-left-color: var(--c-accent);
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(0.75rem + 2px);
}

#sidebar .nav-link-icon {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9375rem;
    line-height: 1;
}

#sidebar .nav-link-title {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

/* Nav section dividers */
.fp-nav-divider {
    border: none;
    border-top: 1px solid var(--c-border-subtle);
    margin: 0.375rem 0.875rem;
}

/* Sidebar dropdown menus — always dark */
#sidebar .dropdown-menu {
    background: #0e1118;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#sidebar .dropdown-item {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.3125rem 0.75rem;
}

#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

#sidebar .dropdown-item.active {
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
}

/* -----------------------------------------------------------
   5c. fp-sidebar-footer — Theme toggle & version
   ----------------------------------------------------------- */
.fp-sidebar-footer {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

.fp-theme-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 0.3125rem 0.5rem;
    color: var(--c-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    font-family: var(--c-font-ui);
}

.fp-theme-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-light);
    background: var(--c-accent-glow);
}

.fp-theme-btn i {
    font-size: 0.875rem;
}

.fp-btn-text {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    overflow: hidden;
    transition: opacity 0.15s ease, max-width 0.25s ease;
    max-width: 4rem;
}

.fp-sidebar-version {
    font-size: 0.625rem;
    color: var(--c-text-subtle);
    font-family: var(--c-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

/* -----------------------------------------------------------
   6. Sidebar Collapse — html.sidebar-collapsed
   ----------------------------------------------------------- */
html.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-w);
    min-width: var(--sidebar-collapsed-w);
}

/* Hide text elements */
html.sidebar-collapsed .fp-logo-text,
html.sidebar-collapsed .fp-btn-text,
html.sidebar-collapsed .fp-sidebar-version,
html.sidebar-collapsed #sidebar .nav-link-title,
html.sidebar-collapsed #sidebar .dropdown-toggle::after {
    display: none;
}

/* Logo centering */
html.sidebar-collapsed .fp-logo {
    padding: 0.875rem 0 0.75rem;
    display: flex;
    justify-content: center;
}

html.sidebar-collapsed .fp-logo-link {
    justify-content: center;
}

/* Footer centering */
html.sidebar-collapsed .fp-sidebar-footer {
    justify-content: center;
    padding: 0.625rem 0.25rem;
}

html.sidebar-collapsed .fp-theme-btn {
    padding: 0.375rem;
    justify-content: center;
}

/* Nav link centering */
html.sidebar-collapsed #sidebar .nav-link {
    justify-content: center;
    padding: 0.375rem 0;
    margin: 1px 0.25rem;
}

html.sidebar-collapsed #sidebar .nav-link-icon {
    margin: 0;
    width: auto;
}

/* Nav divider in collapsed state */
html.sidebar-collapsed .fp-nav-divider {
    margin: 0.375rem 0.375rem;
}

/* Popout menus in collapsed state */
/* Allow dropdowns to escape the clipping containers */
html.sidebar-collapsed #sidebar > .container-fluid,
html.sidebar-collapsed #sidebar .navbar-collapse {
    overflow: visible;
}

html.sidebar-collapsed #sidebar .nav-item.dropdown {
    position: relative;
}

html.sidebar-collapsed #sidebar .nav-item.dropdown > .dropdown-menu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin: 0 0 0 4px !important;
    transform: none !important;
}

html.sidebar-collapsed #sidebar .dropdown-menu.show {
    display: block;
}

/* Tooltips on hover for collapsed sidebar links */
html.sidebar-collapsed #sidebar .nav-link[data-menu-label],
html.sidebar-collapsed #sidebar [data-bs-toggle="dropdown"][data-menu-label] {
    position: relative;
}

html.sidebar-collapsed #sidebar .nav-link[data-menu-label]::after,
html.sidebar-collapsed #sidebar [data-bs-toggle="dropdown"][data-menu-label]::after {
    content: attr(data-menu-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-elevated);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    padding: 0.25rem 0.625rem;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1060;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.sidebar-collapsed #sidebar .nav-link[data-menu-label]:hover::after,
html.sidebar-collapsed #sidebar [data-bs-toggle="dropdown"][data-menu-label]:hover::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.25s;
}

/* -----------------------------------------------------------
   7. fp-topbar — Sticky top bar
   ----------------------------------------------------------- */
.fp-topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1rem;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.fp-sidebar-toggle {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    padding: 0;
    flex-shrink: 0;
}

.fp-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text);
}

.fp-topbar-sep {
    width: 1px;
    height: 14px;
    background: var(--c-border);
    flex-shrink: 0;
}

.fp-topbar-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.fp-topbar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-icon-btn {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    padding: 0;
}

.fp-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text);
}

/* Anchor tag variant — reset link styles */
a.fp-icon-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Container for topbar plugin actions — scrollable on narrow viewports */
.fp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    max-width: 40vw;
    scrollbar-width: none;
}
.fp-topbar-actions::-webkit-scrollbar { display: none; }

/* Non-interactive preview variant used in admin overview tables */
.fp-icon-btn--preview {
    display: inline-flex;
    cursor: default;
    background: var(--c-accent-dim);
    color: var(--c-accent);
    border: 1px solid var(--c-accent-bdr);
}

/* -----------------------------------------------------------
   8. fp-content — Main content area
   ----------------------------------------------------------- */
.fp-content {
    flex: 1;
    padding: 1.25rem;
    background: var(--c-bg);
    animation: fp-fade-in 0.15s ease;
}

@keyframes fp-fade-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Layout toggle — html.layout-fluid makes container full-width */
html.layout-fluid .fp-content .container-xl {
    max-width: none;
    width: 100%;
}

/* === 04-components.css === */

/* 04-components.css — Cards, tables, forms, badges, buttons,
   datagrid, dropdowns, toasts, alerts
   =========================================================== */

/* -----------------------------------------------------------
   9. Cards
   ----------------------------------------------------------- */
.card {
    margin-bottom: 1.25rem;
}


/* Use subtle border variant (dimmer than --tblr-card-border-color) */
.card-header {
    border-bottom: 1px solid var(--c-border-subtle);
}

.card-title {
    font-size: 0.65625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--c-text);
    margin: 0;
}

.card-footer {
    border-top: 1px solid var(--c-border-subtle);
}

.card-full {
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------------------------------------
   10. Tables
   ----------------------------------------------------------- */
.table {
    font-size: 0.8125rem;
}

.table th {
    font-size: 0.59375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-subtle);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}

.table td {
    font-size: 0.8125rem;
    padding: 0.46875rem 0.75rem;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border-subtle);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.022);
    --bs-table-accent-bg: rgba(255, 255, 255, 0.022);
}

[data-bs-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.025);
    --bs-table-accent-bg: rgba(0, 0, 0, 0.025);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--c-overlay);
    --bs-table-accent-bg: var(--c-overlay);
}

/* -----------------------------------------------------------
   11. Forms
   ----------------------------------------------------------- */
.form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-subtle);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    background-color: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text);
    border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--c-elevated);
    border-color: var(--c-accent-bdr);
    box-shadow: 0 0 0 3px var(--c-accent-dim);
    color: var(--c-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--c-text-subtle);
}

/* -----------------------------------------------------------
   12. Badges & Status — uses Tabler defaults, no overrides
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   13. Buttons — Beautiful system

/* -----------------------------------------------------------
   14. Datagrid
   ----------------------------------------------------------- */
.datagrid-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-subtle);
    margin-bottom: 0.25rem;
}

.datagrid-content {
    font-size: 0.8125rem;
    color: var(--c-text);
}

/* -----------------------------------------------------------
   15. Dropdowns (outside sidebar)
   — colors/shadow/radius handled by --tblr-dropdown-* bridge vars
   ----------------------------------------------------------- */
.dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}


/* -----------------------------------------------------------
   17. Toast Notifications
   ----------------------------------------------------------- */
.toast {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}


/* -----------------------------------------------------------
   18. Sidebar Badges — inline indicators on nav links
   ----------------------------------------------------------- */
.fp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

.fp-badge-success { background: rgba(39, 201, 122, 0.18); color: #27c97a; }
.fp-badge-danger  { background: rgba(214, 57, 57, 0.18);  color: #d63939; }
.fp-badge-warning { background: rgba(247, 183, 49, 0.18); color: #f7b731; }
.fp-badge-info    { background: rgba(61, 143, 248, 0.18);  color: #3d8ff8; }

@keyframes fp-badge-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.fp-badge-animate {
    animation: fp-badge-blink 1.8s ease-in-out infinite;
}

/* Hide badges when sidebar is collapsed */
html.sidebar-collapsed .fp-badge {
    display: none;
}


/* === 05-admin.css === */

/* 05-admin.css — Admin Plugin Overview — SIGNAL aesthetic
   fp-plugin-hero, fp-plugin-icon-wrap, fp-meta-chip, fp-status-strip,
   fp-update-badge, fp-open-btn, and related components
   =========================================================== */

/* -----------------------------------------------------------
   20. Admin Plugin Overview — SIGNAL aesthetic
   ----------------------------------------------------------- */

/* Plugin Hero Header */
.fp-plugin-hero {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 2px solid var(--c-accent);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.fp-plugin-hero-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.fp-plugin-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-accent-bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.375rem;
    color: var(--c-accent);
}

.fp-plugin-hero-body {
    flex: 1;
    min-width: 0;
}

.fp-plugin-hero-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

.fp-plugin-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
}

.fp-plugin-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.fp-meta-sep {
    color: var(--c-text-subtle);
    font-size: 0.75rem;
}

/* Meta chips */
.fp-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

.fp-meta-chip--mono {
    font-family: var(--c-font-mono);
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

.fp-meta-chip--blue {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
}

.fp-meta-chip--dim {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-subtle);
    font-family: var(--c-font-mono);
}

.fp-meta-chip--optional {
    background: var(--c-purple-dim);
    border-color: rgba(167, 139, 250, 0.28);
    color: var(--c-purple);
}

.fp-meta-chip--green {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.28);
    color: #4ade80;
}

/* Update badge */
.fp-update-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(250, 176, 5, 0.12);
    border: 1px solid rgba(250, 176, 5, 0.3);
    color: #f59e0b;
}

/* Open module button */
.fp-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.fp-open-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-light);
    background: var(--c-accent-glow);
    text-decoration: none;
}

/* Status strip */
.fp-status-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--c-border-subtle);
    background: var(--c-elevated);
}

.fp-status-sep {
    width: 1px;
    height: 14px;
    background: var(--c-border);
    margin: 0 0.875rem;
    flex-shrink: 0;
}

.fp-status-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-text-subtle);
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.fp-status-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    transition: color 0.2s ease;
}

.fp-status-item--on .fp-status-dot {
    background: var(--c-success);
    box-shadow: 0 0 5px rgba(39, 201, 122, 0.55);
    animation: fp-pulse 1.8s ease-in-out infinite;
}

.fp-status-item--on .fp-status-label {
    color: var(--c-success);
}

.fp-status-item--off .fp-status-dot {
    background: var(--c-text-subtle);
}

@keyframes fp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Meta table (replaces datagrid) */
.fp-meta-table {
    width: 100%;
    border-collapse: collapse;
}

.fp-meta-table tr {
    border-bottom: 1px solid var(--c-border-subtle);
}

.fp-meta-table tr:last-child {
    border-bottom: none;
}

.fp-meta-key {
    padding: 0.5625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    white-space: nowrap;
    width: 38%;
    vertical-align: middle;
}

.fp-meta-val {
    padding: 0.5625rem 1rem 0.5625rem 0;
    font-size: 0.8125rem;
    color: var(--c-text);
    vertical-align: middle;
}

.fp-meta-val code {
    font-family: var(--c-font-mono);
    font-size: 0.75rem;
    background: var(--c-elevated);
    border: 1px solid var(--c-border);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--c-accent-light);
}

/* Long path code — wraps cleanly */
.fp-path-code {
    font-size: 0.6875rem !important;
    word-break: break-all;
    display: block;
    line-height: 1.5;
}

/* File existence chips */
.fp-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.fp-file-chip--found {
    background: var(--c-success-dim);
    border: 1px solid var(--c-success-bdr);
    color: var(--c-success);
}

.fp-file-chip--missing {
    background: var(--c-elevated);
    border: 1px solid var(--c-border);
    color: var(--c-text-subtle);
}

.fp-meta-none {
    color: var(--c-text-subtle);
    font-family: var(--c-font-mono);
    font-size: 0.875rem;
}

/* Dependency sections */
.fp-dep-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border-subtle);
}

.fp-dep-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.fp-dep-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-text-subtle);
    margin-bottom: 0.5rem;
}

.fp-dep-count {
    color: var(--c-text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.fp-dep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fp-dep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-family: var(--c-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.fp-dep-chip--module {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
}

.fp-dep-chip--req {
    background: rgba(var(--c-accent-rgb), 0.06);
    border-color: rgba(var(--c-accent-rgb), 0.15);
    color: var(--c-text-muted);
}

.fp-dep-chip--pyproject {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

.fp-dep-chip--optional {
    background: var(--c-purple-dim);
    border-color: rgba(167, 139, 250, 0.28);
    color: var(--c-purple);
}

.fp-dep-ver {
    opacity: 0.6;
    margin-left: 0.125rem;
}

.fp-dep-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.5rem;
    color: var(--c-text-subtle);
    font-size: 0.8125rem;
}

.fp-dep-empty i {
    font-size: 2rem;
    opacity: 0.4;
}

/* Errors card — red top border */
.fp-errors-card {
    border-top: 2px solid var(--tblr-danger, #d63939);
}

/* Light mode adjustments for admin components */
[data-bs-theme="light"] .fp-meta-val code {
    background: var(--c-elevated);
    border-color: var(--c-border);
    color: var(--c-accent);
}

[data-bs-theme="light"] .fp-status-strip {
    background: var(--c-elevated);
}

/* === 06-widgets.css === */

/* 06-widgets.css — V5 color system, fp-toolbar, fp-badge,
   sort-link, table action buttons, stat tiles
   =========================================================== */

/* -----------------------------------------------------------
   21. V5 — More Color, Better Widgets
   ----------------------------------------------------------- */

/* Semantic aliases — mapped to proxy design token system */
:root {
    /* Green = success */
    --c-green:          var(--c-success);
    --c-green-bg:       var(--c-success-dim);
    --c-green-border:   var(--c-success-bdr);

    /* Amber = warning */
    --c-amber:          var(--c-warning);
    --c-amber-bg:       var(--c-warning-dim);
    --c-amber-border:   var(--c-warning-bdr);

    /* Red = danger */
    --c-red:            var(--c-danger);
    --c-red-bg:         var(--c-danger-dim);
    --c-red-border:     var(--c-danger-bdr);

    /* Teal */
    --c-teal:           #14b8a6;
    --c-teal-bg:        rgba(20, 184, 166, 0.08);
    --c-teal-border:    rgba(20, 184, 166, 0.22);

    /* Violet = purple */
    --c-violet:         var(--c-purple);
    --c-violet-bg:      var(--c-purple-dim);
    --c-violet-border:  rgba(167, 139, 250, 0.25);

    /* Rose */
    --c-rose:           #f43f5e;
    --c-rose-bg:        rgba(244, 63, 94, 0.08);
    --c-rose-border:    rgba(244, 63, 94, 0.22);
}

/* Card top-border accent modifiers */
.fp-card-accent-blue   { border-top: 2px solid var(--c-accent) !important; }
.fp-card-accent-green  { border-top: 2px solid var(--c-green) !important; }
.fp-card-accent-amber  { border-top: 2px solid var(--c-amber) !important; }
.fp-card-accent-red    { border-top: 2px solid var(--c-red) !important; }
.fp-card-accent-teal   { border-top: 2px solid var(--c-teal) !important; }
.fp-card-accent-violet { border-top: 2px solid var(--c-violet) !important; }

/* Card header icon tints */
.card-title .text-blue   { color: var(--c-accent-light) !important; }
.card-title .text-green  { color: #4ade80 !important; }
.card-title .text-amber  { color: #fbbf24 !important; }
.card-title .text-teal   { color: #2dd4bf !important; }
.card-title .text-violet { color: #a78bfa !important; }

/* === fp-toolbar — Pill button strip === */
.fp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.4rem;
    padding: 0.25rem 0;
}

.fp-toolbar .btn {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3125rem 0.875rem;
    border-radius: 20px !important;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.fp-toolbar .btn i {
    font-size: 0.875rem;
}

/* Toolbar separator */
.fp-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--c-border);
    flex-shrink: 0;
    align-self: center;
    margin: 0 0.125rem;
}

/* Toolbar pill overrides — larger shadow radius to show on pill shape */
.fp-toolbar .btn-primary {
    box-shadow: 0 2px 10px rgba(var(--c-accent-rgb), 0.4),
                inset 0 1px 0 rgba(255,255,255,0.12);
}
.fp-toolbar .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(var(--c-accent-rgb), 0.5);
}
.fp-toolbar .btn-danger {
    box-shadow: 0 2px 10px rgba(240, 64, 85, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.1);
}
.fp-toolbar .btn-success {
    box-shadow: 0 2px 10px rgba(39, 201, 122, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.1);
}
.fp-toolbar .btn-warning {
    box-shadow: 0 2px 10px rgba(245, 166, 35, 0.35),
                inset 0 1px 0 rgba(255,255,255,0.1);
}
/* Ghost toolbar pills */
.fp-toolbar .btn-secondary,
.fp-toolbar .btn-outline-secondary {
    background: transparent;
    border-color: var(--c-border-str);
    color: var(--c-text-muted);
}
.fp-toolbar .btn-secondary:hover,
.fp-toolbar .btn-outline-secondary:hover {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
    box-shadow: none;
}

/* Card-body toolbar wrapper */
.card-body.fp-toolbar-body {
    padding: 0.625rem 1rem;
    background: var(--c-elevated);
    border-bottom: 1px solid var(--c-border-subtle);
}
@media (max-width: 576px) {
    .card-body.fp-toolbar-body {
        padding: 0.5rem 0.75rem;
    }
    .fp-toolbar .btn {
        font-size: 0.6875rem;
        padding: 0.25rem 0.625rem;
    }
}

/* === Card header collapse button === */
.btn-icon-collapse {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-subtle);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    padding: 0;
    font-size: 0.8125rem;
    flex-shrink: 0;
    line-height: 1;
}

.btn-icon-collapse:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--c-accent);
    color: var(--c-accent-light);
}

/* === Table row improvements === */
.table-row.selected td {
    background-color: rgba(6, 111, 209, 0.08) !important;
}

.table-row.selected td:first-child {
    border-left: 2px solid var(--c-accent);
}

.table tbody tr.table-row:hover td:first-child {
    border-left: 2px solid rgba(6, 111, 209, 0.35);
}

/* Sort links */
.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    width: 100%;
}

.sort-link:hover {
    color: var(--c-accent-light);
    text-decoration: none;
}

.sort-indicator {
    color: var(--c-text-subtle);
    font-size: 0.6875rem;
    margin-left: auto;
}

.table-header-cell.sorted .sort-link {
    color: var(--c-accent-light);
}

.table-header-cell.sorted .sort-indicator {
    color: var(--c-accent-light);
}

/* Table action buttons */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.actions-cell .btn {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5625rem;
    letter-spacing: 0.02em;
    /* Override: no lift on tiny table buttons */
    transform: none !important;
    transition: background 0.12s ease, border-color 0.12s ease,
                box-shadow 0.12s ease, color 0.12s ease;
}

/* Ghost-by-default table action buttons */
.actions-cell .btn-warning {
    background: var(--c-warning-dim);
    border-color: var(--c-warning-bdr);
    color: var(--c-warning);
    box-shadow: none;
}
.actions-cell .btn-warning:hover {
    background: linear-gradient(180deg, #f9b84a 0%, var(--c-warning) 100%);
    border-color: var(--c-warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.4);
}

.actions-cell .btn-primary {
    background: var(--c-accent-dim);
    border-color: var(--c-accent-bdr);
    color: var(--c-accent-light);
    box-shadow: none;
}
.actions-cell .btn-primary:hover {
    background: linear-gradient(180deg, #4a9bff 0%, var(--c-accent) 100%);
    border-color: var(--c-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--c-accent-rgb), 0.4);
}

.actions-cell .btn-secondary,
.actions-cell .btn-outline-secondary {
    background: transparent;
    border-color: var(--c-border-str);
    color: var(--c-text-muted);
    box-shadow: none;
}
.actions-cell .btn-secondary:hover,
.actions-cell .btn-outline-secondary:hover {
    background: var(--c-overlay);
    border-color: var(--c-border-str);
    color: var(--c-text);
}

.actions-cell .btn-danger {
    background: var(--c-danger-dim);
    border-color: var(--c-danger-bdr);
    color: var(--c-danger);
    box-shadow: none;
}
.actions-cell .btn-danger:hover {
    background: linear-gradient(180deg, #f55468 0%, var(--c-danger) 100%);
    border-color: var(--c-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(240, 64, 85, 0.4);
}

.actions-cell .btn-success {
    background: var(--c-success-dim);
    border-color: var(--c-success-bdr);
    color: var(--c-success);
    box-shadow: none;
}
.actions-cell .btn-success:hover {
    background: linear-gradient(180deg, #32d985 0%, var(--c-success) 100%);
    border-color: var(--c-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39, 201, 122, 0.4);
}

.actions-cell .btn-info {
    background: var(--c-info-dim);
    border-color: rgba(56, 189, 248, 0.28);
    color: var(--c-info);
    box-shadow: none;
}
.actions-cell .btn-info:hover {
    background: linear-gradient(180deg, #52ccff 0%, var(--c-info) 100%);
    border-color: var(--c-info);
    color: #fff;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

.actions-cell .btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
}

/* Empty state */
.empty-state {
    padding: 3rem 2rem;
}

.empty-state-icon {
    color: var(--c-text-subtle);
    opacity: 0.35;
}

.empty-state-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-text-muted);
    margin-bottom: 0.375rem;
}

.empty-state-description {
    font-size: 0.8125rem;
    color: var(--c-text-subtle);
    margin: 0;
}

/* Table footer */
.table-footer {
    font-size: 0.75rem;
    color: var(--c-text-subtle);
}

/* === Stat tiles === */
.fp-stat-tile {
    border-radius: 10px;
    padding: 1.125rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}

.fp-stat-tile:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.fp-stat-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.fp-stat-tile--blue::before   { background: var(--c-accent); }
.fp-stat-tile--green::before  { background: var(--c-green); }
.fp-stat-tile--amber::before  { background: var(--c-amber); }
.fp-stat-tile--teal::before   { background: var(--c-teal); }
.fp-stat-tile--violet::before { background: var(--c-violet); }
.fp-stat-tile--rose::before   { background: var(--c-rose); }

.fp-stat-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-subtle);
    margin-bottom: 0.375rem;
}

.fp-stat-value {
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--s-color, var(--c-text));
    line-height: 1;
    font-family: var(--c-font-mono);
}

.fp-stat-sub {
    font-size: 0.6875rem;
    color: var(--c-text-muted);
    margin-top: 0.375rem;
}

.fp-stat-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    opacity: 0.07;
    pointer-events: none;
}

/* Stat tile — proxy data-a system */
.fp-stat-tile { --s-accent: var(--c-accent); --s-color: var(--c-text); }

.fp-stat-tile[data-a="blue"],
.fp-stat-tile--blue   { --s-accent: var(--c-accent); }
.fp-stat-tile[data-a="green"],
.fp-stat-tile--green  { --s-accent: var(--c-success); --s-color: var(--c-success); }
.fp-stat-tile[data-a="amber"],
.fp-stat-tile--amber  { --s-accent: var(--c-warning); --s-color: var(--c-warning); }
.fp-stat-tile[data-a="red"],
.fp-stat-tile--red    { --s-accent: var(--c-danger); --s-color: var(--c-danger); }
.fp-stat-tile[data-a="cyan"],
.fp-stat-tile--teal   { --s-accent: var(--c-info); }
.fp-stat-tile[data-a="purple"],
.fp-stat-tile--violet { --s-accent: var(--c-purple); }
.fp-stat-tile--rose   { --s-accent: var(--c-rose); }

.fp-stat-tile::before { background: var(--s-accent); }
.fp-stat-icon { color: var(--s-accent); }

/* === Colored badge variants === */
.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.125rem 0.4375rem;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.fp-badge--blue   { background: rgba(6, 111, 209, 0.12); border-color: rgba(6, 111, 209, 0.25); color: var(--c-accent-light); }
.fp-badge--green  { background: var(--c-green-bg); border-color: var(--c-green-border); color: #4ade80; }
.fp-badge--amber  { background: var(--c-amber-bg); border-color: var(--c-amber-border); color: #fbbf24; }
.fp-badge--teal   { background: var(--c-teal-bg); border-color: var(--c-teal-border); color: #2dd4bf; }
.fp-badge--violet { background: var(--c-violet-bg); border-color: var(--c-violet-border); color: #a78bfa; }
.fp-badge--red    { background: var(--c-red-bg); border-color: var(--c-red-border); color: #f87171; }

/* === More sidebar color === */
/* Sidebar section label */
#sidebar .nav-category {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-subtle);
    padding: 0.75rem 0.875rem 0.25rem;
    margin-top: 0.125rem;
}

/* Active link: subtle gradient background (light mode) */
#sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--c-accent-glow) 0%, transparent 100%);
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(0.75rem + 2px);
}

/* Topbar breadcrumb pill (optional enhancement) */
.fp-topbar-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--c-elevated);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 0.1875rem 0.625rem 0.1875rem 0.4375rem;
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

.fp-topbar-crumb i {
    font-size: 0.75rem;
    color: var(--c-accent);
}

/* === 07-responsive.css === */

/* 07-responsive.css — All @media breakpoint rules
   =========================================================== */

/* -----------------------------------------------------------
   19. Responsive
   ----------------------------------------------------------- */

/* Body scroll lock when mobile sidebar is open */
body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* Prevents iOS Safari rubber-band scroll behind overlay */
    touch-action: none;
    -webkit-overflow-scrolling: none;
}

@media (max-width: 991.98px) {
    /* Larger touch target for sidebar toggle on mobile */
    .fp-sidebar-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    /* Topbar: hide separator and reduce padding */
    .fp-topbar-sep { display: none; }
    .fp-topbar-label { display: none; }
    .fp-topbar { padding: 0.4rem 0.75rem; gap: 0.25rem; }
    .fp-topbar-title { font-size: 0.95rem; }

    /* On mobile, sidebar overlays instead of pushing content */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* Use dvh for iOS Safari dynamic viewport; fallback to 100% */
        height: 100%;
        height: 100dvh;
        width: var(--sidebar-w);
        min-width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar.show {
        transform: translateX(0);
    }

    /* Backdrop overlay when sidebar is open */
    .fp-sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1039;
        display: none;
        -webkit-tap-highlight-color: transparent;
    }

    .fp-sidebar-backdrop.show {
        display: block;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    /* On mobile, collapsed state doesn't apply */
    html.sidebar-collapsed #sidebar {
        width: var(--sidebar-w);
        min-width: var(--sidebar-w);
    }

    /* Restore hidden text inside sidebar on mobile (even if collapsed on desktop) */
    html.sidebar-collapsed #sidebar .fp-logo-text,
    html.sidebar-collapsed #sidebar .nav-link-title,
    html.sidebar-collapsed #sidebar .fp-btn-text,
    html.sidebar-collapsed #sidebar .fp-sidebar-version {
        display: revert;
    }

    html.sidebar-collapsed #sidebar .nav-link {
        justify-content: flex-start;
        padding: 0.3125rem 0.75rem;
        margin: 1px 0.5rem;
    }

    .fp-content {
        padding: 1rem;
    }

    /* Hide the in-sidebar mobile toggler — topbar button handles it now */
    #mobile-menu-toggle {
        display: none;
    }

}

/* Dropdown inline-flow rules: only when sidebar is in mobile overlay mode.
   Scoped to #sidebar.show so they don't affect desktop layout on touch devices ≥992px. */
#sidebar.show .nav-item.dropdown {
    position: static;
}

#sidebar.show .dropdown-menu {
    position: static !important;
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 1rem;
}

#sidebar.show .nav-item.dropdown.show > .dropdown-menu {
    display: block;
}

#sidebar.show .dropend {
    position: static;
}

#sidebar.show .dropend .dropdown-menu {
    position: static !important;
    padding-left: 1rem;
}

@media (min-width: 992px) {
    /* Ensure sidebar is always visible on large screens */
    #sidebar {
        transform: none !important;
    }
}

/* === 08-json-modal.css === */

/* 08-json-modal.css — JSON preview modal and cell utilities
   (moved from ui-tools plugin)
   =========================================================== */

.json-modal-pre-container {
  position: relative;
  display: inline-block;
}

.json-modal-copy-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 1rem;
  padding: 0.2em 0.4em;
  border: none;
  background: rgba(0,0,0,0.1);
  border-radius: 0.25rem;
  cursor: pointer;
  user-select: none;
  color: white;
}

.json-modal-copy-btn:active {
  background: rgba(0,0,0,0.2);
}

