/*==============================================================================
 * public/css/app.css
 * Version 1.05
 *
 * Authored by:
 *   Jenna Matthews <jrm@darktide.net>
 *
 * Copyright:
 *   Copyright(c) 2026
 *   Darktide & BSDgirl
 *   All rights reserved
 *
 * Synopsis:
 *   Main stylesheet for jSTASH. Dark theme, mobile-first.
 *   No framework dependency -- custom properties throughout.
 *   Component classes match those used in Blade/Livewire views.
 *
 *   THIS IS THE STYLESHEET. There is no build step -- no package.json,
 *   no vite.config.js, no @vite directive anywhere in the layouts. The
 *   layout loads asset('css/app.css'), which resolves here. A second,
 *   diverged copy lived at resources/css/app.css until 2026-09-23 and
 *   was deleted; see KI-099 for what that cost.
 *
 * Revision History:
 *   2026-09-02, jrm  - Initial version
 *   2026-09-23, claude - .breadcrumb-current drops the mono face: it
 *                      renders a name now, not a jstash_id (KI-085
 *                      item 3). Header named resources/css/app.css,
 *                      which is not this file and is now deleted
 *                      (KI-099). (v1.01)
 *   2026-09-23, claude - .breadcrumb-fold: a deep trail folds its
 *                      earlier crumbs rather than running the page
 *                      width (KI-066). (v1.02)
 *   2026-09-23, claude - Comment only: the fold keeps the nearest few,
 *                      not the nearest two -- the count changed with
 *                      KI-066's $keep. No rule changed.
 *   2026-10-16, claude - The light theme's media query is a rule of its
 *                      own: inside a selector list it was invalid,
 *                      the rule was dropped, and 'system' was always
 *                      dark (KI-133). (v1.04)
 *   2026-10-28, claude - The upload form's rows stack, so the kind
 *                      select is the sidebar's width; the main-picture
 *                      badge and button carry words (KI-126). (v1.05)
 *============================================================================*/

/*------------------------------------------------------------------------------
 * CUSTOM PROPERTIES (design tokens)
 *----------------------------------------------------------------------------*/

:root {
    /* Background scale */
    --bg-base:        #0f1117;
    --bg-surface:     #1a1d27;
    --bg-elevated:    #1e2330;
    --bg-hover:       #252a3a;
    --bg-active:      #2a3045;

    /* Border */
    --border:         #2d3748;
    --border-focus:   #4a5568;

    /* Text */
    --text-primary:   #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-disabled:  #475569;

    /* Accent / brand */
    --accent:         #2563eb;
    --accent-hover:   #1d4ed8;
    --accent-light:   #60a5fa;

    /* Status colours */
    --color-success:  #22c55e;
    --color-warning:  #f59e0b;
    --color-error:    #ef4444;
    --color-info:     #38bdf8;

    --bg-success:     #14532d;
    --bg-warning:     #451a03;
    --bg-error:       #3b1f1f;

    --border-success: #166534;
    --border-warning: #78350f;
    --border-error:   #7f1d1d;

    /* Typography */
    --font-sans:      system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace,
                      'Cascadia Code', monospace;
    --font-size-base: 16px;
    --line-height:    1.5;

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Transitions */
    --transition: 150ms ease;

    /* Nav */
    --nav-height: 56px;
}

/*------------------------------------------------------------------------------
 * RESET AND BASE
 *----------------------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    font-family:      var(--font-sans);
    line-height:      var(--line-height);
    background-color: var(--bg-base);
    color:            var(--text-primary);
    min-height:       100%;
    -webkit-font-smoothing: antialiased;
}

/* Utility classes referenced from layout */
.h-full        { height: 100%; }
.antialiased   { -webkit-font-smoothing: antialiased; }
.bg-gray-950   { background-color: var(--bg-base); }
.text-gray-100 { color: var(--text-primary); }
.text-gray-500 { color: var(--text-muted); }

a {
    color:           var(--accent-light);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    font-size:   inherit;
    cursor:      pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size:   inherit;
}

/*------------------------------------------------------------------------------
 * NAVIGATION
 *----------------------------------------------------------------------------*/

.nav-bar {
    position:         sticky;
    top:              0;
    z-index:          100;
    height:           var(--nav-height);
    background-color: var(--bg-elevated);
    border-bottom:    1px solid var(--border);
}

.nav-inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    height:      100%;
    padding:     0 var(--space-6);
    max-width:   1400px;
    margin:      0 auto;
}

.nav-brand {
    font-size:      1.125rem;
    font-weight:    700;
    color:          var(--accent-light);
    letter-spacing: 0.06em;
    text-decoration: none;
    flex-shrink:    0;
}

.nav-brand:hover {
    text-decoration: none;
    color:           var(--text-primary);
}

.nav-links {
    display:  flex;
    gap:      var(--space-1);
    flex:     1;
    overflow: hidden;
}

.nav-link {
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size:     0.875rem;
    color:         var(--text-secondary);
    white-space:   nowrap;
    transition:    color var(--transition),
                   background-color var(--transition);
    text-decoration: none;
}

.nav-link:hover {
    color:           var(--text-primary);
    background-color: var(--bg-hover);
    text-decoration: none;
}

.nav-link--active {
    color:           var(--text-primary);
    background-color: var(--bg-active);
}

.nav-controls {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-shrink: 0;
}

.nav-icon-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    var(--radius-md);
    background-color: transparent;
    border:           none;
    color:            var(--text-secondary);
    font-size:        1.125rem;
    transition:       color var(--transition),
                      background-color var(--transition);
    text-decoration:  none;
}

.nav-icon-btn:hover {
    color:            var(--text-primary);
    background-color: var(--bg-hover);
    text-decoration:  none;
}

/* User menu */
.nav-user {
    position: relative;
}

.nav-user-btn {
    padding:          var(--space-2) var(--space-3);
    background-color: transparent;
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-secondary);
    font-size:        0.875rem;
    transition:       color var(--transition),
                      border-color var(--transition);
}

.nav-user-btn:hover {
    color:        var(--text-primary);
    border-color: var(--border-focus);
}

.nav-user-dropdown {
    position:         absolute;
    top:              calc(100% + var(--space-2));
    right:            0;
    min-width:        160px;
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.4);
    overflow:         hidden;
    z-index:          200;
}

[x-cloak] {
    display: none !important;
}

/*------------------------------------------------------------------------------
 * DROPDOWN
 *----------------------------------------------------------------------------*/

.dropdown-item {
    display:          block;
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    background-color: transparent;
    border:           none;
    text-align:       left;
    color:            var(--text-secondary);
    font-size:        0.875rem;
    transition:       color var(--transition),
                      background-color var(--transition);
    text-decoration:  none;
    cursor:           pointer;
}

.dropdown-item:hover {
    color:            var(--text-primary);
    background-color: var(--bg-hover);
    text-decoration:  none;
}

.dropdown-label {
    padding:          var(--space-2) var(--space-4) var(--space-1);
    color:            var(--text-muted);
    font-size:        0.75rem;
    font-weight:      600;
}

.dropdown-divider {
    height:           1px;
    background-color: var(--border);
    margin:           var(--space-1) 0;
}

/*------------------------------------------------------------------------------
 * PAGE LAYOUT
 *----------------------------------------------------------------------------*/

.main-content {
    max-width: 1400px;
    margin:    0 auto;
    padding:   var(--space-6);
}

.page-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom:  1px solid var(--border);
}

.page-title {
    font-size:   1.5rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.page-body {
    /* Container for page content */
}

/*------------------------------------------------------------------------------
 * BUTTONS
 *----------------------------------------------------------------------------*/

.btn-primary {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-2);
    padding:          var(--space-2) var(--space-4);
    background-color: var(--accent);
    border:           none;
    border-radius:    var(--radius-md);
    color:            #fff;
    font-size:        0.9375rem;
    font-weight:      500;
    transition:       background-color var(--transition);
    cursor:           pointer;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-hover);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.btn-secondary {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-2);
    padding:          var(--space-2) var(--space-4);
    background-color: transparent;
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-secondary);
    font-size:        0.9375rem;
    transition:       color var(--transition),
                      border-color var(--transition);
    cursor:           pointer;
}

.btn-secondary:hover {
    color:        var(--text-primary);
    border-color: var(--border-focus);
}

.btn-close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    background-color: transparent;
    border:           none;
    border-radius:    var(--radius-sm);
    color:            var(--text-muted);
    font-size:        1.25rem;
    line-height:      1;
    transition:       color var(--transition),
                      background-color var(--transition);
}

.btn-close:hover {
    color:            var(--text-primary);
    background-color: var(--bg-hover);
}

.btn-link {
    background:      none;
    border:          none;
    color:           var(--accent-light);
    font-size:       inherit;
    padding:         0;
    text-decoration: underline;
    cursor:          pointer;
}

.btn-link:hover {
    color: var(--text-primary);
}

.btn-xs {
    padding:       var(--space-1) var(--space-3);
    font-size:     0.75rem;
    border-radius: var(--radius-sm);
}

/*------------------------------------------------------------------------------
 * FORMS
 *----------------------------------------------------------------------------*/

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display:       block;
    font-size:     0.875rem;
    color:         var(--text-secondary);
    margin-bottom: var(--space-2);
}

.form-group--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-3);
}

.form-control {
    width:            100%;
    padding:          var(--space-2) var(--space-3);
    background-color: var(--bg-base);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-primary);
    font-size:        1rem;
    transition:       border-color var(--transition);
    appearance:       none;
}

.form-control:focus {
    outline:      none;
    border-color: var(--accent-light);
}

.form-control::placeholder {
    color: var(--text-disabled);
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-3) center;
    background-size:     1rem;
    padding-right:       var(--space-8);
}

.field-error {
    display:    block;
    margin-top: var(--space-1);
    font-size:  0.8125rem;
    color:      var(--color-error);
}

.hint {
    font-size:  0.8125rem;
    color:      var(--text-muted);
    margin-top: var(--space-2);
}

/* Inline, non-error feedback under a field (upload progress, "file
   received"). Same metrics as .field-error, muted colour. */
.field-hint {
    display:    block;
    margin-top: var(--space-1);
    font-size:  0.8125rem;
    color:      var(--text-muted);
}

/*------------------------------------------------------------------------------
 * ALERTS
 *----------------------------------------------------------------------------*/

.alert-success {
    padding:       var(--space-3) var(--space-4);
    background-color: var(--bg-success);
    border:        1px solid var(--border-success);
    border-radius: var(--radius-md);
    color:         var(--color-success);
    font-size:     0.9375rem;
    margin-bottom: var(--space-4);
}

.alert-error {
    padding:       var(--space-3) var(--space-4);
    background-color: var(--bg-error);
    border:        1px solid var(--border-error);
    border-radius: var(--radius-md);
    color:         var(--color-error);
    font-size:     0.9375rem;
    margin-bottom: var(--space-4);
}

/*------------------------------------------------------------------------------
 * SCAN RESOLVER
 *----------------------------------------------------------------------------*/

.scan-resolver {
    width:     100%;
    max-width: 600px;
    margin:    0 auto;
    padding:   var(--space-8) var(--space-4);
}

.scan-label {
    display:       block;
    font-size:     1rem;
    color:         var(--text-secondary);
    margin-bottom: var(--space-3);
    text-align:    center;
}

.scan-input-row {
    display: flex;
    gap:     var(--space-2);
}

.scan-input {
    flex:             1;
    padding:          var(--space-4) var(--space-4);
    background-color: var(--bg-elevated);
    border:           2px solid var(--border);
    border-radius:    var(--radius-lg);
    color:            var(--text-primary);
    font-size:        1.25rem;
    transition:       border-color var(--transition);
}

.scan-input:focus {
    outline:      none;
    border-color: var(--accent-light);
}

.scan-input::placeholder {
    color:     var(--text-disabled);
    font-size: 1rem;
}

.scan-btn {
    padding:          var(--space-4) var(--space-6);
    background-color: var(--accent);
    border:           none;
    border-radius:    var(--radius-lg);
    color:            #fff;
    font-size:        1.125rem;
    font-weight:      600;
    transition:       background-color var(--transition);
}

.scan-btn:hover {
    background-color: var(--accent-hover);
}

.scan-error {
    margin-top:    var(--space-4);
    padding:       var(--space-3) var(--space-4);
    background-color: var(--bg-error);
    border:        1px solid var(--border-error);
    border-radius: var(--radius-md);
    color:         var(--color-error);
    font-size:     0.9375rem;
}

.scan-not-found-actions {
    margin-top: var(--space-3);
}

.scan-loading {
    margin-top: var(--space-4);
    text-align: center;
    color:      var(--text-muted);
    font-size:  0.9375rem;
}

/*------------------------------------------------------------------------------
 * QUICK ADD PANEL
 *----------------------------------------------------------------------------*/

.quick-add-panel {
    position:         fixed;
    top:              var(--nav-height);
    right:            0;
    bottom:           0;
    width:            min(420px, 100vw);
    background-color: var(--bg-surface);
    border-left:      1px solid var(--border);
    padding:          var(--space-6);
    overflow-y:       auto;
    z-index:          150;
    box-shadow:       -4px 0 24px rgba(0, 0, 0, 0.4);
}

.quick-add-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  var(--space-6);
}

.quick-add-title {
    font-size:   1.125rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.quick-add-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             var(--space-3);
    margin-top:      var(--space-6);
}

.quick-add-hint {
    margin-top: var(--space-4);
    font-size:  0.8125rem;
    color:      var(--text-muted);
    text-align: center;
}

.identifier-pill {
    display:          inline-block;
    padding:          var(--space-1) var(--space-3);
    background-color: var(--bg-active);
    border:           1px solid var(--border);
    border-radius:    var(--radius-sm);
    font-family:      var(--font-mono);
    font-size:        0.9375rem;
    color:            var(--accent-light);
    letter-spacing:   0.05em;
}

/*------------------------------------------------------------------------------
 * PRINT NOTIFICATIONS
 *----------------------------------------------------------------------------*/

.print-notif-wrapper {
    position: relative;
}

.print-notif-badge {
    display:          flex;
    align-items:      center;
    gap:              var(--space-1);
    padding:          var(--space-1) var(--space-2);
    background-color: var(--bg-error);
    border:           1px solid var(--border-error);
    border-radius:    var(--radius-md);
    color:            var(--color-error);
    font-size:        0.875rem;
    transition:       background-color var(--transition);
}

.print-notif-badge:hover {
    background-color: #4a2020;
}

.print-notif-icon {
    font-size: 1rem;
}

.print-notif-count {
    font-weight: 700;
    min-width:   1ch;
}

.print-notif-dropdown {
    position:         absolute;
    top:              calc(100% + var(--space-2));
    right:            0;
    width:            340px;
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    box-shadow:       0 4px 16px rgba(0, 0, 0, 0.4);
    overflow:         hidden;
    z-index:          200;
    /* Hidden by default -- toggled via JS onclick */
    display:          none;
}

.print-notif-dropdown.is-open {
    display: block;
}

.print-notif-section {
    padding: var(--space-3);
}

.print-notif-section + .print-notif-section {
    border-top: 1px solid var(--border);
}

.print-notif-section-title {
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}

.print-notif-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.print-notif-item--failed {
    background-color: rgba(239, 68, 68, 0.08);
}

.print-notif-item--stuck {
    background-color: rgba(245, 158, 11, 0.08);
}

.print-notif-item-info {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         var(--space-1);
}

.print-notif-item-actions {
    flex-shrink: 0;
}

.print-notif-entity {
    font-family: var(--font-mono);
    font-size:   0.9375rem;
    color:       var(--text-primary);
    font-weight: 600;
}

.print-notif-printer {
    font-size: 0.8125rem;
    color:     var(--text-secondary);
}

.print-notif-error {
    font-size: 0.8125rem;
    color:     var(--color-error);
}

.print-notif-age {
    font-size: 0.8125rem;
    color:     var(--color-warning);
}

/*------------------------------------------------------------------------------
 * RESPONSIVE -- MOBILE
 *----------------------------------------------------------------------------*/

@media (max-width: 768px) {

    .nav-links {
        display: none; /* Collapsed on mobile -- hamburger menu Phase 2 */
    }

    .main-content {
        padding: var(--space-4);
    }

    .scan-resolver {
        padding: var(--space-6) var(--space-4);
    }

    .scan-input {
        font-size: 1.125rem;
    }

    .quick-add-panel {
        width:  100vw;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .print-notif-dropdown {
        right:  auto;
        left:   50%;
        transform: translateX(-50%);
        width:  calc(100vw - var(--space-8));
    }

    .form-group--inline {
        grid-template-columns: 1fr;
    }
}

/*==============================================================================
 * END OF STYLESHEET
 *============================================================================*/

/*------------------------------------------------------------------------------
 * LIGHT THEME
 * Applied via data-theme="light" on <html>, and under a light
 * prefers-color-scheme to any page not set to "dark" -- which is how
 * 'system' follows the device. The palette is written twice, once per
 * rule; ThemeStylesheetTest holds the two copies equal.
 *
 * Until 2026-10-16 the media query sat in a selector list after
 * [data-theme="light"]. A selector list cannot hold an at-rule, so
 * the browser dropped the whole rule and 'system' was always dark
 * (KI-133).
 *----------------------------------------------------------------------------*/

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-base:        #f8fafc;
        --bg-surface:     #f1f5f9;
        --bg-elevated:    #ffffff;
        --bg-hover:       #e2e8f0;
        --bg-active:      #dde3ed;

        --border:         #cbd5e1;
        --border-focus:   #94a3b8;

        --text-primary:   #0f172a;
        --text-secondary: #475569;
        --text-muted:     #94a3b8;
        --text-disabled:  #cbd5e1;

        --accent:         #2563eb;
        --accent-hover:   #1d4ed8;
        --accent-light:   #1d4ed8;

        --bg-success:     #f0fdf4;
        --bg-warning:     #fffbeb;
        --bg-error:       #fef2f2;

        --border-success: #bbf7d0;
        --border-warning: #fde68a;
        --border-error:   #fecaca;
    }
}

[data-theme="light"] {
    --bg-base:        #f8fafc;
    --bg-surface:     #f1f5f9;
    --bg-elevated:    #ffffff;
    --bg-hover:       #e2e8f0;
    --bg-active:      #dde3ed;

    --border:         #cbd5e1;
    --border-focus:   #94a3b8;

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-disabled:  #cbd5e1;

    --accent:         #2563eb;
    --accent-hover:   #1d4ed8;
    --accent-light:   #1d4ed8;

    --bg-success:     #f0fdf4;
    --bg-warning:     #fffbeb;
    --bg-error:       #fef2f2;

    --border-success: #bbf7d0;
    --border-warning: #fde68a;
    --border-error:   #fecaca;
}

/*------------------------------------------------------------------------------
 * SETTINGS PAGE
 *----------------------------------------------------------------------------*/

.settings-layout {
    display:   grid;
    grid-template-columns: 200px 1fr;
    gap:       var(--space-8);
    max-width: 900px;
}

.settings-nav {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    position:       sticky;
    top:            calc(var(--nav-height) + var(--space-6));
    align-self:     start;
}

.settings-nav-link {
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size:     0.9375rem;
    color:         var(--text-secondary);
    transition:    color var(--transition),
                   background-color var(--transition);
    text-decoration: none;
}

.settings-nav-link:hover {
    color:            var(--text-primary);
    background-color: var(--bg-hover);
    text-decoration:  none;
}

.settings-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.settings-section {
    padding-bottom: var(--space-8);
    border-bottom:  1px solid var(--border);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section-title {
    font-size:     1.125rem;
    font-weight:   600;
    color:         var(--text-primary);
    margin-bottom: var(--space-5);
}

.settings-section-desc {
    font-size:     0.9375rem;
    color:         var(--text-secondary);
    margin-bottom: var(--space-4);
}

.form-actions {
    margin-top: var(--space-5);
}

.form-control--narrow {
    max-width: 120px;
}

.form-group-action {
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Sessions */
.sessions-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.session-item {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    padding:          var(--space-3) var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
}

.session-item--current {
    border-color: var(--accent);
}

.session-info {
    flex:        1;
    display:     flex;
    flex-direction: column;
    gap:         var(--space-1);
    min-width:   0;
}

.session-ip {
    font-family: var(--font-mono);
    font-size:   0.9375rem;
    color:       var(--text-primary);
}

.session-agent {
    font-size: 0.8125rem;
    color:     var(--text-secondary);
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.session-activity {
    font-size: 0.8125rem;
    color:     var(--text-muted);
}

.session-current-badge {
    display:          inline-block;
    padding:          2px var(--space-2);
    background-color: var(--accent);
    border-radius:    var(--radius-sm);
    font-size:        0.75rem;
    color:            #fff;
    font-weight:      500;
}

/* Tokens */
.token-create-form {
    margin-bottom: var(--space-5);
}

.tokens-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.token-item {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    padding:          var(--space-3) var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
}

.token-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.token-name {
    font-size:   0.9375rem;
    font-weight: 500;
    color:       var(--text-primary);
}

.token-meta {
    font-size: 0.8125rem;
    color:     var(--text-muted);
}

/* Token reveal (shown once after creation) */
.token-reveal {
    margin-bottom: var(--space-6);
}

.token-value {
    display:          block;
    margin-top:       var(--space-3);
    padding:          var(--space-3);
    background-color: var(--bg-base);
    border:           1px solid var(--border-success);
    border-radius:    var(--radius-sm);
    font-family:      var(--font-mono);
    font-size:        0.875rem;
    word-break:       break-all;
    color:            var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        position:    static;
        flex-direction: row;
        flex-wrap:   wrap;
        padding-bottom: var(--space-4);
        border-bottom:  1px solid var(--border);
    }
}

/*------------------------------------------------------------------------------
 * ENTITY DETAIL PAGE
 *----------------------------------------------------------------------------*/

.entity-detail {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

/* Header */
.entity-header {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom:  1px solid var(--border);
}

.entity-title-row {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    flex-wrap:   wrap;
}

.entity-title-block {
    flex: 1;
    min-width: 0;
}

.entity-title {
    font-size:   1.5rem;
    font-weight: 600;
    color:       var(--text-primary);
    line-height: 1.3;
}

.entity-subtitle {
    font-size:  0.9375rem;
    color:      var(--text-secondary);
    margin-top: var(--space-1);
}

.entity-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-shrink: 0;
}

/* ID badge */
.id-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border:        1px solid var(--border);
    flex-shrink:   0;
}

.id-badge--asset_instance { border-color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.id-badge--stock_item     { border-color: #22c55e; background-color: rgba(34, 197, 94, 0.1); }
.id-badge--container      { border-color: #f59e0b; background-color: rgba(245, 158, 11, 0.1); }
.id-badge--location       { border-color: #a78bfa; background-color: rgba(167, 139, 250, 0.1); }
.id-badge--project        { border-color: #fb7185; background-color: rgba(251, 113, 133, 0.1); }
.id-badge--asset_type     { border-color: #94a3b8; background-color: rgba(148, 163, 184, 0.1); }

.id-badge-id {
    font-family: var(--font-mono);
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text-primary);
    letter-spacing: 0.04em;
}

.id-badge-type {
    font-size:  0.75rem;
    color:      var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.id-badge-retired {
    font-size:        0.75rem;
    padding:          1px var(--space-2);
    background-color: var(--bg-error);
    border-radius:    var(--radius-sm);
    color:            var(--color-error);
}

/* Breadcrumb */
.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   wrap;
    font-size:   0.875rem;
}

.breadcrumb-item {
    color:           var(--text-secondary);
    text-decoration: none;
}

.breadcrumb-item:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.breadcrumb-sep {
    color: var(--text-muted);
}

/* The fold standing in for the ancestors above the nearest few
   (KI-066). cursor: help is the affordance -- it is not a link, and
   nothing about an ellipsis otherwise says the names are recoverable.
   The hidden names are on the element's title and in an .sr-only span,
   so a pointer and a screen reader both reach them. */
.breadcrumb-fold {
    color:  var(--text-muted);
    cursor: help;
}

/* The crumb you are standing on names the entity (KI-085 item 3), so
   it takes the same face as every other crumb. The mono face here was
   chosen when this span rendered a jstash_id; x-entity.id-badge still
   renders that id in mono, immediately below. */
.breadcrumb-current {
    color: var(--text-primary);
}

/* Tags */
.entity-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.tag {
    padding:          2px var(--space-2);
    background-color: var(--bg-active);
    border:           1px solid var(--border);
    border-radius:    var(--radius-sm);
    font-size:        0.8125rem;
    color:            var(--text-secondary);
}

/* Body layout */
.entity-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap:     var(--space-8);
    align-items: start;
}

.entity-main {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

/* Field grid (type-specific fields) */
.field-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.field-row {
    display:     grid;
    grid-template-columns: 160px 1fr;
    gap:         var(--space-3);
    align-items: baseline;
    padding:     var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.field-row:last-child {
    border-bottom: none;
}

.field-row--full {
    grid-template-columns: 1fr;
}

.field-label {
    font-size:   0.875rem;
    color:       var(--text-muted);
    font-weight: 500;
}

.field-value {
    font-size: 0.9375rem;
    color:     var(--text-primary);
}

.field-link {
    color:           var(--accent-light);
    text-decoration: none;
    font-family:     var(--font-mono);
}

.field-link:hover {
    text-decoration: underline;
}

/* Sidebar */
.entity-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    position:       sticky;
    top:            calc(var(--nav-height) + var(--space-6));
}

.sidebar-block {
    padding:          var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
}

.sidebar-block-title {
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
}

.sidebar-count {
    font-size:        0.75rem;
    padding:          1px var(--space-2);
    background-color: var(--bg-active);
    border-radius:    var(--radius-sm);
    color:            var(--text-secondary);
}

.sidebar-value {
    font-size: 0.9375rem;
    color:     var(--text-primary);
}

.sidebar-link {
    font-size:       0.9375rem;
    color:           var(--accent-light);
    text-decoration: none;
}

.sidebar-link:hover {
    text-decoration: underline;
}

.sidebar-empty {
    font-size: 0.875rem;
    color:     var(--text-muted);
}

/* Identifiers */
.identifier-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.identifier-row {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.identifier-kind {
    font-size:      0.75rem;
    color:          var(--text-muted);
    text-transform: capitalize;
}

.identifier-value {
    font-family: var(--font-mono);
    font-size:   0.875rem;
    color:       var(--text-primary);
    word-break:  break-all;
}

/* Attachments */
.attachment-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.attachment-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.attachment-thumb-placeholder {
    width:            40px;
    height:           40px;
    background-color: var(--bg-active);
    border-radius:    var(--radius-sm);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        0.625rem;
    color:            var(--text-muted);
    flex-shrink:      0;
}

.attachment-name {
    flex:      1;
    font-size: 0.875rem;
    color:     var(--text-primary);
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.attachment-size {
    font-size:   0.75rem;
    color:       var(--text-muted);
    flex-shrink: 0;
}

/* Links */
.link-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.link-item {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.link-kind {
    font-size:      0.75rem;
    color:          var(--text-muted);
    text-transform: capitalize;
}

.link-url {
    font-size:       0.875rem;
    color:           var(--accent-light);
    text-decoration: none;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
}

.link-url:hover {
    text-decoration: underline;
}

/* Journal */
.journal-section,
.events-section {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.section-title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text-primary);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.section-count {
    font-size:        0.75rem;
    padding:          1px var(--space-2);
    background-color: var(--bg-active);
    border-radius:    var(--radius-sm);
    color:            var(--text-secondary);
    font-weight:      400;
}

.section-empty {
    font-size: 0.9375rem;
    color:     var(--text-muted);
}

.journal-entry {
    padding:          var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
}

.journal-entry-meta {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    margin-bottom: var(--space-3);
    font-size:     0.8125rem;
    color:         var(--text-muted);
}

.journal-author {
    color:       var(--text-secondary);
    font-weight: 500;
}

.journal-edited {
    font-style: italic;
}

.journal-public-badge {
    padding:          1px var(--space-2);
    background-color: rgba(34, 197, 94, 0.15);
    border:           1px solid rgba(34, 197, 94, 0.3);
    border-radius:    var(--radius-sm);
    font-size:        0.75rem;
    color:            var(--color-success);
}

.journal-body {
    font-size:   0.9375rem;
    color:       var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Events */
.events-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border:         1px solid var(--border);
    border-radius:  var(--radius-md);
    overflow:       hidden;
}

.event-item {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    padding:          var(--space-3) var(--space-4);
    border-bottom:    1px solid var(--border);
    background-color: var(--bg-surface);
}

.event-item:last-child {
    border-bottom: none;
}

.event-icon {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background-color: var(--text-muted);
    flex-shrink:      0;
}

.event-icon--created       { background-color: var(--color-success); }
.event-icon--moved         { background-color: var(--accent-light); }
.event-icon--retired       { background-color: var(--color-error); }
.event-icon--status_changed { background-color: var(--color-warning); }

.event-body {
    flex:      1;
    display:   flex;
    gap:       var(--space-2);
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.event-type {
    color:          var(--text-primary);
    text-transform: capitalize;
}

.event-actor {
    color: var(--text-secondary);
}

.event-date {
    color:      var(--text-muted);
    margin-left: auto;
}

/* Children / contents */
.children-section {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.children-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.child-item {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    padding:          var(--space-2) var(--space-3);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    text-decoration:  none;
    transition:       background-color var(--transition),
                      border-color var(--transition);
}

.child-item:hover {
    background-color: var(--bg-hover);
    border-color:     var(--border-focus);
    text-decoration:  none;
}

.child-name {
    font-size: 0.9375rem;
    color:     var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .entity-body {
        grid-template-columns: 1fr;
    }

    .entity-sidebar {
        position: static;
        order:    -1;
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .entity-actions {
        width:     100%;
        flex-wrap: wrap;
    }
}

/*------------------------------------------------------------------------------
 * STATUS PILLS
 *----------------------------------------------------------------------------*/

.status-pill {
    display:       inline-block;
    padding:       2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size:     0.8125rem;
    font-weight:   500;
    text-transform: capitalize;
}

.status-pill--available, .status-pill--complete {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--color-success);
}
.status-pill--in_use, .status-pill--active, .status-pill--allocated {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
.status-pill--stored, .status-pill--reserved, .status-pill--planning {
    background-color: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
}
.status-pill--missing, .status-pill--damaged, .status-pill--stuck {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--color-error);
}
.status-pill--repair, .status-pill--waiting {
    background-color: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
}
.status-pill--retired, .status-pill--abandoned, .status-pill--disposed,
.status-pill--depleted {
    background-color: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}
.status-pill--salvage, .status-pill--parts_donor, .status-pill--for_sale,
.status-pill--for_scrap {
    background-color: rgba(251, 113, 133, 0.15);
    color: #fb7185;
}

/* Overdue badge */
.overdue-badge {
    display:          inline-block;
    padding:          1px var(--space-2);
    background-color: var(--bg-error);
    border-radius:    var(--radius-sm);
    font-size:        0.75rem;
    color:            var(--color-error);
    margin-left:      var(--space-2);
}

/* Quantity display */
.quantity-display {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text-primary);
}

/* Child status */
.child-status {
    font-size:      0.8125rem;
    color:          var(--text-muted);
    text-transform: capitalize;
    margin-left:    var(--space-2);
}

/* Metadata grid (asset type) */
.metadata-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    width:          100%;
}

.metadata-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap:     var(--space-2);
    font-size: 0.875rem;
}

.metadata-key {
    color:      var(--text-muted);
    font-weight: 500;
}

.metadata-value {
    color: var(--text-primary);
}

/* Metadata editor (KI-086). Mirrors .metadata-row's two-column read-only
 * shape, plus a remove button. Narrow viewports collapse to one column so
 * the key and value inputs stay usable. */
.metadata-editor {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    width:          100%;
}

.metadata-edit-row {
    display:               grid;
    grid-template-columns: 180px 1fr auto;
    gap:                   var(--space-2);
    align-items:           center;
}

@media (max-width: 640px) {
    .metadata-edit-row {
        grid-template-columns: 1fr auto;
    }
}

/*------------------------------------------------------------------------------
 * DASHBOARD
 *----------------------------------------------------------------------------*/

.dashboard {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

/* Nudge banner */
.nudge-banner {
    padding:          var(--space-3) var(--space-5);
    background-color: rgba(245, 158, 11, 0.1);
    border:           1px solid rgba(245, 158, 11, 0.3);
    border-radius:    var(--radius-md);
    font-size:        0.9375rem;
    color:            var(--color-warning);
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
}

.nudge-link {
    color:           var(--color-warning);
    text-decoration: underline;
    white-space:     nowrap;
    margin-left:     auto;
}

/* Scan shortcut */
.dashboard-top {
    display: flex;
    gap:     var(--space-4);
}

.scan-shortcut {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    padding:          var(--space-4) var(--space-6);
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-lg);
    text-decoration:  none;
    transition:       background-color var(--transition),
                      border-color var(--transition);
    flex:             1;
    max-width:        400px;
}

.scan-shortcut:hover {
    background-color: var(--bg-hover);
    border-color:     var(--border-focus);
    text-decoration:  none;
}

.scan-shortcut-icon {
    font-size:   2rem;
    flex-shrink: 0;
}

.scan-shortcut-label {
    display:     block;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.scan-shortcut-hint {
    display:   block;
    font-size: 0.875rem;
    color:     var(--text-muted);
}

/* Main grid */
.dashboard-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    align-items:           start;
}

.dashboard-section {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.dashboard-section-title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text-primary);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom:  1px solid var(--border);
}

.dashboard-section-link {
    font-size:       0.875rem;
    color:           var(--text-muted);
    text-decoration: none;
    margin-top:      var(--space-1);
}

.dashboard-section-link:hover {
    color:           var(--text-secondary);
    text-decoration: underline;
}

.dashboard-empty {
    padding:          var(--space-6);
    text-align:       center;
    background-color: var(--bg-surface);
    border:           1px dashed var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-muted);
    font-size:        0.9375rem;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              var(--space-3);
}

/* Project cards */
.project-card {
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
    padding:          var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    text-decoration:  none;
    transition:       background-color var(--transition),
                      border-color var(--transition);
}

.project-card:hover {
    background-color: var(--bg-hover);
    border-color:     var(--border-focus);
    text-decoration:  none;
}

.project-card-header {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.project-card-name {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.project-card-desc {
    font-size: 0.875rem;
    color:     var(--text-secondary);
    line-height: 1.4;
}

.project-card-date {
    font-size: 0.8125rem;
    color:     var(--text-muted);
}

.project-card-date--overdue {
    color: var(--color-error);
}

/* Activity feed */
.activity-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-body {
    flex:      1;
    display:   flex;
    gap:       var(--space-2);
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.activity-entity {
    font-family:     var(--font-mono);
    font-size:       0.875rem;
    color:           var(--accent-light);
    text-decoration: none;
    font-weight:     600;
}

.activity-entity:hover {
    text-decoration: underline;
}

/* Name is the primary label; the jSTASH ID rides alongside it in mono
   so a row is readable without clicking through. */
.activity-name {
    font-family: var(--font-sans);
}

.activity-id {
    color:       var(--text-muted);
    font-weight: 400;
    margin-left: var(--space-1);
}

.activity-target {
    color: var(--text-secondary);
}

/* Quick nav */
.dashboard-nav {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   var(--space-3);
}

.quick-nav-item {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              var(--space-2);
    padding:          var(--space-4) var(--space-3);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    text-decoration:  none;
    transition:       background-color var(--transition),
                      border-color var(--transition);
}

.quick-nav-item:hover {
    background-color: var(--bg-hover);
    border-color:     var(--border-focus);
    text-decoration:  none;
}

.quick-nav-icon {
    font-size: 1.5rem;
}

.quick-nav-label {
    font-size:  0.8125rem;
    color:      var(--text-secondary);
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .nudge-banner {
        flex-direction: column;
        align-items:    flex-start;
    }

    .nudge-link {
        margin-left: 0;
    }
}

/*------------------------------------------------------------------------------
 * LOGIN PAGE
 *----------------------------------------------------------------------------*/

.login-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         var(--space-6);
}

.login-card {
    width:            100%;
    max-width:        400px;
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-lg);
    padding:          var(--space-8);
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-6);
}

.login-brand {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.login-brand-name {
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--accent-light);
    letter-spacing: 0.06em;
}

.login-brand-sub {
    font-size: 0.8125rem;
    color:     var(--text-muted);
}

.login-remember {
    margin-bottom: 0;
}

.checkbox-label {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   0.9375rem;
    color:       var(--text-secondary);
    cursor:      pointer;
}

.checkbox-input {
    width:  16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.login-submit {
    width:      100%;
    padding:    var(--space-3);
    font-size:  1rem;
    margin-top: var(--space-2);
}

/* hCaptcha dark theme alignment */
.h-captcha {
    display: flex;
}

/*------------------------------------------------------------------------------
 * AUTH -- PASSKEY AND TOTP
 *----------------------------------------------------------------------------*/

.passkey-section {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.btn-passkey {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--space-3);
    width:            100%;
    padding:          var(--space-3);
    background-color: var(--bg-hover);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-primary);
    font-size:        1rem;
    font-weight:      500;
    transition:       background-color var(--transition),
                      border-color var(--transition);
    cursor:           pointer;
}

.btn-passkey:hover {
    background-color: var(--bg-active);
    border-color:     var(--border-focus);
}

.passkey-icon {
    font-size: 1.25rem;
}

.login-divider {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    color:       var(--text-muted);
    font-size:   0.8125rem;
}

.login-divider::before,
.login-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border);
}

/* TOTP */
.totp-instruction {
    font-size: 0.9375rem;
    color:     var(--text-secondary);
    margin:    0;
}

.totp-input {
    font-size:      1.5rem;
    letter-spacing: 0.3em;
    text-align:     center;
    font-family:    var(--font-mono);
}

.totp-back-link {
    display:         block;
    text-align:      center;
    font-size:       0.875rem;
    color:           var(--text-muted);
    text-decoration: none;
    margin-top:      var(--space-2);
}

.totp-back-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/*------------------------------------------------------------------------------
 * SETTINGS -- TOTP STATUS
 *----------------------------------------------------------------------------*/

.totp-status {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size:     0.9375rem;
}

.totp-status--active {
    background-color: rgba(34, 197, 94, 0.1);
    border:           1px solid rgba(34, 197, 94, 0.3);
    color:            var(--color-success);
}

.totp-status--inactive {
    background-color: rgba(245, 158, 11, 0.1);
    border:           1px solid rgba(245, 158, 11, 0.3);
    color:            var(--color-warning);
}

.totp-status-icon {
    font-size: 1.125rem;
}

.totp-setup {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.totp-qr {
    padding:          var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    display:          inline-block;
}

/* KI-059. The QR is an inline SVG now. It carries its own white
   background rect, which is what keeps it scannable in dark mode -- do
   not "fix" that by making it inherit the surface colour. */
.totp-qr svg {
    display:   block;
    height:    auto;
    max-width: 100%;
}

.passkey-register {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

/*------------------------------------------------------------------------------
 * SCAN PAGE
 *----------------------------------------------------------------------------*/

.scan-page {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
    max-width:      600px;
    margin:         0 auto;
}

.scan-page-header {
    text-align: center;
}

.scan-page-title {
    font-size:   1.5rem;
    font-weight: 600;
    color:       var(--text-primary);
    margin-bottom: var(--space-2);
}

.scan-page-hint {
    font-size: 0.9375rem;
    color:     var(--text-secondary);
}

.recent-scans {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

/*------------------------------------------------------------------------------
 * LIST PAGES
 *----------------------------------------------------------------------------*/

.list-page {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.list-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-bottom:  var(--space-4);
    border-bottom:   1px solid var(--border);
}

.list-header-left {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.list-header-right {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.list-placeholder {
    padding:          var(--space-10);
    text-align:       center;
    background-color: var(--bg-surface);
    border:           1px dashed var(--border);
    border-radius:    var(--radius-md);
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
}

/* ============================================================
   Attachment panel (upload + list, Decision #36)
   ============================================================ */

.attachment-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--border);
    display: block;
}

.attachment-icon {
    flex-shrink: 0;
}

.attachment-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.attachment-kind {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.attachment-rep-badge {
    color: var(--accent);
    font-size: 0.75rem;
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}

.attachment-set-rep {
    flex-shrink: 0;
    align-self: center;
    color: var(--text-muted);
    padding: 0;
    font-size: 0.75rem;
    white-space: nowrap;
}

.attachment-set-rep:hover {
    color: var(--accent);
}

.upload-toggle {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-top: 0.25rem;
}

/* KI-126: the sidebar is narrow, and .field-row's 160px label column
   left the kind select too narrow to read when closed. */
.upload-form .field-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.input-file {
    font-size: 0.8rem;
    color: var(--text);
    width: 100%;
}

.input-select {
    width: 100%;
    padding: 0.25rem 0.5rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.85rem;
}

.upload-success {
    font-size: 0.8rem;
    color: var(--color-success, #4caf50);
}

/*==============================================================================
 * GLOBAL SEARCH
 * Nav search box + /search results page.
 *============================================================================*/

/* --- Nav search box ------------------------------------------------------ */

.nav-search {
    position:         relative;
    display:          flex;
    align-items:      center;
}

.nav-search .ti {
    position:         absolute;
    left:             var(--space-2);
    color:            var(--text-muted);
    pointer-events:   none;
    font-size:        0.9rem;
}

.nav-search-input {
    width:            180px;
    padding:          var(--space-2) var(--space-2) var(--space-2) var(--space-8);
    background-color: var(--bg-base);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-primary);
    font-family:      var(--font-sans);
    font-size:        0.85rem;
    transition:       width 0.15s ease, border-color 0.15s ease;
}

.nav-search-input:focus {
    width:            260px;
    border-color:     var(--border-focus);
    outline:          none;
}

.nav-search-input::placeholder {
    color:            var(--text-muted);
}

/* Below the nav's breakpoint the box would crowd out the icons. */
@media (max-width: 720px) {
    .nav-search-input {
        width:        120px;
    }
    .nav-search-input:focus {
        width:        160px;
    }
}

/* --- Search page --------------------------------------------------------- */

.search-page {
    max-width:        900px;
    margin:           0 auto;
    padding:          var(--space-6);
}

.search-toolbar {
    margin-bottom:    var(--space-4);
}

.search-input-wrap {
    position:         relative;
    display:          flex;
    align-items:      center;
}

.search-input-wrap > .ti-search {
    position:         absolute;
    left:             var(--space-3);
    color:            var(--text-muted);
    pointer-events:   none;
}

.search-input {
    width:            100%;
    padding:          var(--space-3) var(--space-10) var(--space-3) var(--space-10);
    font-size:        1.05rem;
}

.search-clear {
    position:         absolute;
    right:            var(--space-3);
    background:       none;
    border:           none;
    color:            var(--text-muted);
    cursor:           pointer;
    padding:          var(--space-1);
    line-height:      1;
}

.search-clear:hover {
    color:            var(--text-primary);
}

/* --- Type filter chips --------------------------------------------------- */

.search-filters {
    display:          flex;
    flex-wrap:        wrap;
    gap:              var(--space-2);
    margin-bottom:    var(--space-5);
}

.filter-chip {
    padding:          var(--space-1) var(--space-3);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    999px;
    color:            var(--text-secondary);
    font-size:        0.8rem;
    cursor:           pointer;
    transition:       background-color 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
    background-color: var(--bg-hover);
    color:            var(--text-primary);
}

.filter-chip--active {
    background-color: var(--accent);
    border-color:     var(--accent);
    color:            #fff;
}

/* --- Results ------------------------------------------------------------- */

.search-results {
    list-style:       none;
    margin:           0;
    padding:          0;
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
}

.search-result-link {
    display:          block;
    padding:          var(--space-3) var(--space-4);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    text-decoration:  none;
    color:            inherit;
    transition:       background-color 0.15s ease, border-color 0.15s ease;
}

.search-result-link:hover {
    background-color: var(--bg-hover);
    border-color:     var(--border-focus);
}

.search-result-main {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    margin-bottom:    var(--space-1);
}

.search-result-name {
    font-weight:      600;
    color:            var(--text-primary);
}

.search-result-meta {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);
    font-size:        0.82rem;
    color:            var(--text-secondary);
}

.search-result-id {
    font-family:      var(--font-mono);
    color:            var(--text-muted);
}

.search-result-where {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--space-1);
}

.search-empty {
    padding:          var(--space-10) var(--space-4);
    text-align:       center;
    color:            var(--text-secondary);
}

/* --- Type badges --------------------------------------------------------- */

.type-badge {
    padding:          2px var(--space-2);
    border-radius:    var(--radius-sm);
    font-size:        0.7rem;
    text-transform:   uppercase;
    letter-spacing:   0.03em;
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    color:            var(--text-secondary);
}

.type-badge--container      { color: #f59e0b; border-color: #78350f; }
.type-badge--location       { color: #38bdf8; border-color: #075985; }
.type-badge--asset_instance { color: #22c55e; border-color: #166534; }
.type-badge--stock_item     { color: #a78bfa; border-color: #5b21b6; }
.type-badge--project        { color: #f472b6; border-color: #9d174d; }
.type-badge--asset_type     { color: #94a3b8; border-color: #475569; }

/*------------------------------------------------------------------------------
 * LIST PAGES AND DATA TABLES
 *
 * Added session 19 (2026-09-13) against KI-027. These classes were used by
 * all six list views, the collection manager and the asset-type list, and no
 * rule had ever been written for any of them.
 *
 * Choices worth knowing before editing:
 *   - Row separators only, no vertical rules and no zebra striping. The eye
 *     follows a row; a full grid fights it.
 *   - Comfortable row height, not compact. This gets read on a phone in a
 *     workshop, sometimes with gloves on.
 *   - The table scrolls horizontally below 640px rather than reflowing. A
 *     reflowed table loses column alignment, which is the thing that makes a
 *     table worth having.
 *   - .badge follows the existing .type-badge idiom rather than starting a
 *     second badge family.
 *----------------------------------------------------------------------------*/

.list-live {
    position:   relative;
    width:      100%;
    overflow-x: auto;
}

.list-live[wire\:loading] {
    opacity: 0.6;
}

.list-toolbar {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    flex-wrap:     wrap;
    margin-bottom: var(--space-4);
}

.list-search {
    flex:             1 1 16rem;
    min-width:        0;
    padding:          var(--space-2) var(--space-3);
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-primary);
    font-family:      var(--font-sans);
    font-size:        0.875rem;
}

.list-search:focus {
    outline:      none;
    border-color: var(--border-focus);
}

.list-search::placeholder {
    color: var(--text-muted);
}

.data-table {
    width:           100%;
    min-width:       36rem;
    border-collapse: collapse;
    font-size:       0.875rem;
}

.data-table th {
    padding:       var(--space-2) var(--space-4);
    text-align:    left;
    font-weight:   600;
    font-size:     0.8125rem;
    color:         var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space:   nowrap;
}

.data-table td {
    padding:       var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color:         var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

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

.data-table a {
    color:           var(--text-primary);
    text-decoration: none;
}

.data-table a:hover {
    color:           var(--accent-light);
    text-decoration: underline;
}

.list-empty {
    padding:    var(--space-10) var(--space-4);
    text-align: center;
    color:      var(--text-muted);
    font-size:  0.9375rem;
}

.list-pagination {
    display:         flex;
    justify-content: center;
    margin-top:      var(--space-6);
}

/* Column widths. Everything unclaimed goes to col-name. */
.col-id         { width: 8rem;  white-space: nowrap; }
.col-name       { width: auto; }
.col-kind,
.col-type,
.col-status     { width: 9rem;  white-space: nowrap; }
.col-qty,
.col-count      { width: 6rem;  white-space: nowrap; text-align: right; }
.col-serial,
.col-mfr,
.col-model,
.col-category,
.col-parent,
.col-collection { width: 11rem; }
.col-created,
.col-date       { width: 9rem;  white-space: nowrap; color: var(--text-secondary); }

.mono-id {
    font-family: var(--font-mono);
    font-size:   0.8125rem;
    color:       var(--text-secondary);
    white-space: nowrap;
}

/* Badges follow .type-badge's shape so the two families read as one. */
.badge {
    display:          inline-block;
    padding:          2px var(--space-2);
    border-radius:    var(--radius-sm);
    font-size:        0.7rem;
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    color:            var(--text-secondary);
    white-space:      nowrap;
}

.badge--kind {
    color:        var(--text-secondary);
    border-color: var(--border);
}

.badge--status {
    color:        var(--color-info);
    border-color: #075985;
}

.badge--unclassified {
    color:        var(--text-muted);
    border-style: dashed;
}

.retired-badge {
    display:          inline-block;
    padding:          2px var(--space-2);
    border-radius:    var(--radius-sm);
    font-size:        0.7rem;
    background-color: var(--bg-error);
    border:           1px solid var(--border-error);
    color:            var(--color-error);
    white-space:      nowrap;
}

/* Destructive actions must not look like the benign ones beside them.
 * Probe 5 (session 19): Share was read as delete in a row of identical
 * buttons, and avoided. See KI-061. */
.btn-danger {
    color:        var(--color-error);
    border-color: var(--border-error);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--bg-error);
    color:            var(--color-error);
}

.text-muted  { color: var(--text-muted); }
.text-danger { color: var(--color-error); }
.text-xs     { font-size: 0.75rem; }

@media (max-width: 640px) {
    .data-table th,
    .data-table td {
        padding: var(--space-3);
    }
}

/*==========================================================================
  Parent type indicators (KI-066)

  A bare name cannot tell a container called "Shelf 3" from a location
  called "Shelf 3", and both exist in a real lab. The icon is the quick
  cue; the word next to it in the sidebar and the visually-hidden word in
  the breadcrumb are what carry the meaning, so nothing here depends on
  colour or on an icon font having loaded.
  ==========================================================================*/

.sr-only {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: nowrap;
    border:      0;
}

.sidebar-parent {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
}

.sidebar-parent-meta {
    margin-top:     var(--space-1);
    font-size:      0.75rem;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* The breadcrumb items now carry an icon, so they need to lay out as a
   row rather than as inline text. */
.breadcrumb-item {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
}

/*------------------------------------------------------------------------------
 * CATEGORY PICKER
 *
 * Added 2026-09-20 against KI-084, with the category admin. These classes
 * are new in this change, so unlike the rest of KI-027 they have never
 * rendered unstyled.
 *
 * Choices worth knowing before editing:
 *   - The panel is IN FLOW, not absolutely positioned. An overlay would
 *     need a stacking context inside a <table> cell on the admin page and
 *     inside the quick-add drawer, which are two different problems; a
 *     panel that pushes the form down is duller and works in both.
 *   - Options are <button>s in a <ul>, not <option>s. That is what makes
 *     the full path, the "restricted" badge and the truncation notice
 *     possible at all -- a <select> can render none of them, which is why
 *     the control being replaced could not say more than a leaf name.
 *   - The list is capped in the component and the cap is stated on screen.
 *     max-height here is a second, independent bound so a future raise of
 *     CATEGORY_PICKER_LIMIT cannot silently produce a panel taller than
 *     the viewport.
 *   - Monospace is deliberately NOT used for the path. It is prose with
 *     separators, not an identifier.
 *
 * KI-027 group 2 note: .edit-field, .edit-label, .inline-panel and
 * .col-actions are used by this change's markup and still have no rules,
 * because they are pre-existing group 2 classes and defining a few of them
 * here would leave that group half done in a way nobody could see. When
 * group 2 reaches the move picker, fold it onto THESE rules rather than
 * writing a second picker idiom.
 *----------------------------------------------------------------------------*/

.cat-picker {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    width:          100%;
}

.cat-picker-current {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-wrap:   wrap;
}

.cat-picker-trigger {
    flex:             1 1 14rem;
    min-width:        0;
    text-align:       left;
    padding:          var(--space-2) var(--space-3);
    background-color: var(--bg-elevated);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
    color:            var(--text-primary);
    font-family:      var(--font-sans);
    font-size:        0.875rem;
    cursor:           pointer;
}

.cat-picker-trigger:hover {
    background-color: var(--bg-hover);
}

.cat-picker-trigger:focus-visible {
    outline:      none;
    border-color: var(--border-focus);
}

.cat-picker-none {
    color: var(--text-muted);
}

.cat-picker-panel {
    display:          flex;
    flex-direction:   column;
    gap:              var(--space-2);
    padding:          var(--space-3);
    background-color: var(--bg-surface);
    border:           1px solid var(--border);
    border-radius:    var(--radius-md);
}

.cat-picker-list {
    list-style: none;
    margin:     0;
    padding:    0;
    max-height: 18rem;
    overflow-y: auto;
}

.cat-picker-option {
    display:          flex;
    align-items:      center;
    gap:              var(--space-2);
    width:            100%;
    text-align:       left;
    padding:          var(--space-2) var(--space-3);
    background-color: transparent;
    border:           none;
    border-radius:    var(--radius-sm);
    color:            var(--text-primary);
    font-family:      var(--font-sans);
    font-size:        0.875rem;
    cursor:           pointer;
}

.cat-picker-option:hover {
    background-color: var(--bg-hover);
}

.cat-picker-path {
    flex:      1 1 auto;
    min-width: 0;
}

.cat-picker-empty,
.cat-picker-more {
    padding:   var(--space-2) var(--space-1);
    font-size: 0.8125rem;
    color:     var(--text-muted);
}

.cat-picker-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             var(--space-2);
}

/* Depth indent on the admin list. Inline padding-left carries the actual
   depth; this only makes the span a block so the padding takes effect. */
.cat-indent {
    display: inline-block;
}