/* The palette lives in tokens.css; the names below are the vocabulary the application
   stylesheets already speak, kept so nothing downstream had to change. Do not put a hex
   value in here - put it in tokens.css and alias it. */
@import url("tokens.css");

:root
{
    --primary: var(--hv-brand);
    --primary-light: var(--hv-brand-light);
    --primary-dark: var(--hv-brand-dark);
    --secondary: var(--hv-brand-secondary);
    --accent: var(--hv-brand-accent);
    --bg: var(--hv-bg);
    --bg-card: var(--hv-surface);
    --text: var(--hv-text);
    --text-light: var(--hv-text-muted);
    --border: var(--hv-border);
    --danger: var(--hv-danger);
    --success: var(--hv-success);
    --warning: var(--hv-warning);
    /* Back-nav dock (R4-01): keep the three values in sync.
       reserve = dock width + 24px left margin + 16px gap. */
    --backnav-dock-w: 208px;
    --backnav-reserve: 248px;
    --backnav-bar-h: 54px;
}

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

html
{
    overflow: auto !important;
}

body
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg) url('../RESOURCES/bg_hive.svg') no-repeat center center / cover;
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 72px;
}

/* Safari ignores padding-bottom on body - use a real block element instead */
body::after
{
    content: '';
    display: block;
    height: 72px;
}

#header
{
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 8px 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 1rem;
    z-index: 100;
    margin: 1rem 1rem 0;
    border-radius: 12px;
}

#header #title
{
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#header #headerUser
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#header #userInfo
{
    font-size: 0.9em;
    opacity: 0.9;
}

#header #userRoles
{
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 3px;
}

#header .role-badge
{
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}

.title-content
{
    display: flex;
    align-items: center;
    gap: 5px;
}

.version-badge
{
    display: none;
}

#logo_hive
{
    display: block;
    margin: 0px auto;
    max-width: 180px;
    height: auto;
}

#header .header-logo
{
    height: 44px;
    width: 44px;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.content
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px 24px;
}

/* CARDS */

.card
{
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
}

.card .card-title
{
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary-dark);
}

/* STAT CARDS */

.stats-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card
{
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover
{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.stat-card .stat-value
{
    font-size: 2em;
    font-weight: 700;
    color: var(--primary);
}

.stat-card .stat-label
{
    font-size: 0.85em;
    color: var(--text-light);
    margin-top: 4px;
}

.stat-card .stat-icon
{
    font-size: 1.5em;
    color: var(--primary-light);
    margin-bottom: 8px;
}

/* TABLES */

table.data-table
{
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

table.data-table thead
{
    background: var(--primary);
    color: white;
}

table.data-table th
{
    padding: 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table.data-table td
{
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

table.data-table td.num
{
    text-align: right;
    white-space: nowrap;
}

table.data-table tbody tr:hover
{
    background: #FFF8E1;
}

table.data-table th .th-btn
{
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1em;
    padding: 4px 0 !important;
}

/* FORMS */

.form-group
{
    margin-bottom: 16px;
}

.form-group label
{
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea
{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95em;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus
{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,143,0,0.15);
}

/* BUTTON DEFAULTS */

button
{
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85em;
}

table button
{
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.82em;
}

/* NAV BUTTONS */

.nav-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.nav-grid button
{
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
}

.nav-grid button i
{
    font-size: 1.5em;
    color: var(--primary);
}

.nav-grid button:hover
{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* VISIBILITY */

body:not(.LOGGED_IN) .requires-login {display:none;}
body.LOGGED_IN .requires-logout {display:none;}

/* BACK-NAV DOCK (R4-01)
   All floating pills (back-nav buttons, back-nav groups and the dashboard
   logout button) live in a fixed dock in the bottom-left corner.
   - Desktop: vertical stack inside a reserved left rail. The body:has() rule
     below adds matching left padding, so page content can never sit under the
     pills at any scroll position. Pages whose fixed layout already keeps the
     corner free (cafeteria POS, assembly chairman) opt out by setting
     --backnav-reserve: 0px on body in their page CSS.
   - Up to 1024px (phones and tablets, C12): the dock becomes a full-width opaque bottom bar (see the
     mobile media block) and the body reserves its height instead. */

button.back-nav
{
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 200;
    width: var(--backnav-dock-w);
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    border-radius: 12px;
    min-height: 48px;
    padding: 6px 12px;
    font-size: 0.8em;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.03em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

button.back-nav:hover
{
    background: white;
    color: var(--primary);
    transform: translateY(-1px);
}

button.back-nav i
{
    font-size: 1.15em;
}

.back-nav-group
{
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: var(--backnav-dock-w);
}

.back-nav-group button.back-nav
{
    position: static;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Non back-nav actions docked in a group (e.g. NUOVA PRENOTAZIONE) */
.back-nav-group > button
{
    width: 100%;
    min-height: 44px;
    white-space: normal;
}

button.back-nav.back-nav-orange
{
    background: #E65100;
    border-color: #E65100;
}

button.back-nav.back-nav-orange:hover
{
    background: white;
    color: #E65100;
}

/* Reserve the dock rail: any page containing dock markup gets matching left
   padding, so the fixed pills never overlap content. */
@media (min-width: 1025px)
{
    body:has(button.back-nav),
    body:has(.back-nav-group),
    body:has(.logout-btn)
    {
        padding-left: var(--backnav-reserve);
    }
}

/* PAGINATION */

.pagination-bar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 0.85em;
    color: var(--text-light);
}

.pagination-controls
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-page
{
    min-width: 60px;
    text-align: center;
    font-weight: 600;
    color: var(--text);
}

.pagination-btn
{
    padding: 4px 10px !important;
    font-size: 0.9em !important;
}

.pagination-btn:disabled
{
    opacity: 0.35;
    cursor: default;
}

.pagination-size
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-size select
{
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.95em;
    font-family: inherit;
}

/* BADGES */

.badge
{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-success {background: #E8F5E9; color: var(--success);}
.badge-warning {background: #FFF3E0; color: var(--warning);}
.badge-danger {background: #FFEBEE; color: var(--danger);}
.badge-info {background: #E3F2FD; color: #1976D2;}
/* Status glyphs via FontAwesome 7 (served at fa7/css/all.css, family "Font Awesome 7 Pro"),
   so status is not conveyed by color alone */
.badge-success::before,
.badge-danger::before,
.badge-warning::before
{
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    margin-right: 4px;
}

.badge-success::before { content: "\f00c"; } /* fa-check */
.badge-danger::before { content: "\f00d"; } /* fa-xmark */
.badge-warning::before { content: "\f071"; } /* fa-triangle-exclamation */

/* TOOLBAR */

.toolbar
{
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-card
{
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.toolbar-card .toolbar
{
    margin-bottom: 0;
}

/* FILTER BOX */

.filter-box
{
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.filter-box .form-group
{
    flex: 1;
    margin-bottom: 0;
}

.filter-box .form-group label
{
    font-size: 0.75em;
    margin-bottom: 2px;
}

.filter-box .form-group input,
.filter-box .form-group select
{
    padding: 6px 10px;
    font-size: 0.85em;
}

/* RESPONSIVE FILTER TOGGLE (C12): hidden on desktop. Up to 1024px it replaces the filter bar
   itself, which collapses behind it - see GUI._wireFilterToggles in common.js, the one shared
   mechanism that inserts this button in front of any .filter-box / .hv-filters element it finds,
   no per-page markup required beyond that class name. */
.filter-toggle-btn
{
    display: none;
}

/* TOOLBAR SPACER */

.toolbar-spacer
{
    flex: 1;
}

/* DETAIL GRID */

.detail-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.detail-item
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item label
{
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span
{
    font-size: 0.95em;
    color: var(--text);
    word-break: break-word;
}

/* FORM ROWS */

.form-row
{
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}

.form-row .form-group
{
    flex: 1;
}

/* DIALOG OVERLAY */

.dialog-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dialog
{
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.dialog .dialog-title
{
    font-size: 1.2em;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
}

.dialog .dialog-buttons
{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* TABLE ACTIONS - minimum width */

th:last-child,
td.actions,
th.col-actions
{
    width: 1%;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}

td.actions button
{
    margin-right: 4px;
}

/* TABLE ID COLUMNS - minimum width, right-aligned */

td.col-id,
th.col-id
{
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* TABLE BADGE CELLS - minimum width */

td.col-status,
th.col-status
{
    width: 1%;
    white-space: nowrap;
}

td.col-date,
th.col-date
{
    width: 1%;
    white-space: nowrap;
}

td.col-email,
th.col-email,
td.col-phone,
th.col-phone
{
    width: 1%;
    white-space: nowrap;
}

/* OVERRIDE KATANA BUTTON COLORS */

ki-button.ACCEPT,
button.ACCEPT
{
    --bg-color: var(--success) !important;
}

/* hover gestito dal base Katana (swap fg/bg) */

/* TOGGLE BUTTON (two-state active/inactive) */

.toggle-btn
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s, transform 0.1s;
    font-family: inherit;
    color: white;
}

.toggle-btn:hover
{
    transform: translateY(-1px);
}

.toggle-btn.active
{
    background: var(--success);
    border-color: var(--success);
}

.toggle-btn.active:hover
{
    background: white;
    color: var(--success);
}

.toggle-btn.inactive
{
    background: var(--danger);
    border-color: var(--danger);
}

.toggle-btn.inactive:hover
{
    background: white;
    color: var(--danger);
}

/* RESPONSIVE */

@media (max-width: 1024px)
{
    #header {padding: 10px 13px; margin: 0.5rem 0.5rem 0; border-radius: 10px;}
    #header #title {font-size: 0.76em;}
    #header .header-logo {height: 27px; width: 27px;}
    .content {padding: 12px 16px 80px;}
    .stats-grid {grid-template-columns: repeat(2, 1fr);}
    .nav-grid {grid-template-columns: repeat(2, 1fr); font-size: 0.88em;}
    .nav-grid button {padding: 12px;}
    .nav-grid button i {font-size: 1.3em;}

    /* RESPONSIVE TABLE CARDS (C12): rows become cards instead of a sideways-scrolling table.
       table.data-table keeps its DESKTOP rules above untouched (>=1025px; the phone and tablet shell starts at 1024px because at 820px the desktop tables measured up to 1250px wide) - everything below is
       additive, only reached under this media query. The label beside each value comes from
       data-label, set by UTIL.labelTableCells (common.js) right after a page renders its rows. */
    /* The column titles move into each cell's data-label, so the header row itself goes - but
       NOT a header cell that carries a button: several lists keep their only "Nuovo/Aggiungi"
       action in the actions header (members, transactions, users, goods, preferences, the
       event and course cards). That cell survives as a full-width bar above the cards.
       A header cell that carries a checkbox (tokens_list "select all") survives the same way -
       otherwise the page-level bulk select/print/delete control has no mobile replacement. */
    table.data-table thead { display: block; width: 100%; background: none; color: inherit; }
    table.data-table thead tr { display: flex; justify-content: flex-end; background: none; }
    table.data-table thead th { display: none; }
    table.data-table thead th:has(button, a, ki-button, ki-button2, input[type="checkbox"])
    {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        width: 100%;
        padding: 0 0 12px;
        background: none;
        border: none;
    }
    table.data-table thead th button,
    table.data-table thead th ki-button,
    table.data-table thead th ki-button2 { min-height: 44px; }
    table.data-table thead th input[type="checkbox"] { width: 20px; height: 20px; }
    table.data-table, table.data-table tbody, table.data-table tr { display: block; width: 100%; }
    table.data-table { overflow: visible; box-shadow: none; background: none; }

    table.data-table tbody tr
    {
        margin-bottom: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

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

    /* width/white-space with !important: the desktop column rules (td.actions and th:last-child
       at width:1% + nowrap) and the inline widths some renderers write (members_list thumbnail
       cell) would otherwise size each block cell as a sliver of the card - measured at 390px
       before this rule: half-width cells, action buttons stacked one per line, and an email
       address running 14px past the screen edge. */
    table.data-table td
    {
        display: block;
        position: relative;
        box-sizing: border-box;
        width: auto !important;
        min-height: 44px;
        padding: 8px 12px 8px calc(40% + 10px);
        border-bottom: 1px solid var(--border);
        text-align: right;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.data-table td[data-label]::before
    {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 8px;
        width: calc(40% - 10px);
        text-align: left;
        font-weight: 600;
        font-size: 0.72em;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-light);
    }

    /* No column label (the thumbnail cell, the actions cell): no left gutter to reserve. */
    table.data-table td:not([data-label])
    {
        padding-left: 12px;
        text-align: left;
    }

    /* The actions column is always the last one (QW/ME sweeps rely on the same convention, see
       "TABLE ACTIONS" above): a wrapping button row at the bottom of the card, each target
       >=44px, never squeezed into a label/value pair. */
    table.data-table td:last-child
    {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
        padding: 10px 12px;
        border-bottom: none;
        white-space: normal;
    }

    table.data-table td:last-child::before { content: none; }

    table.data-table td:last-child button,
    table.data-table td:last-child a,
    table.data-table td:last-child ki-button,
    table.data-table td:last-child ki-button2
    {
        min-height: 44px;
        min-width: 44px;
    }

    /* MOVEMENTS TABLES opt-out: the "actions column is always last" convention above does not
       hold for member-accounts admin movements and my-account movements, both of which end in a
       plain text "Descrizione" column. Without this the description loses its data-label and
       renders like a button row. Scoped via an explicit class on the <table>, same opt-out
       pattern as .attendance-table in COURSES/course_card.css. */
    table.data-table.movements-table td:last-child
    {
        display: block;
        padding: 8px 12px 8px calc(40% + 10px);
        border-bottom: 1px solid var(--border);
    }

    table.data-table.movements-table td[data-label]:last-child::before { content: attr(data-label); }

    /* Empty-state / loading / error rows (a single <td colspan>): centered text, no card chrome. */
    table.data-table td[colspan]
    {
        display: block;
        text-align: center;
        padding: 20px 12px;
        border-bottom: none;
    }

    table.data-table td[colspan]::before { content: none; }

    /* RESPONSIVE FILTER TOGGLE (C12): the bar collapses behind the "Filtri" button that
       GUI._wireFilterToggles (common.js) inserted in front of it; .filter-box-open is added by
       that same button's click handler. */
    .filter-toggle-btn
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 16px;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
        color: var(--text);
        font-family: inherit;
        font-weight: 600;
        font-size: 0.9em;
    }

    .filter-box, .hv-filters { display: none; }
    .filter-box.filter-box-open, .hv-filters.filter-box-open { display: flex; flex-direction: column; }
    .detail-grid {grid-template-columns: repeat(2, 1fr);}
    .toolbar {flex-direction: column; align-items: stretch;}
    .form-row {flex-direction: column; gap: 0;}
    .dialog {max-width: 100%; margin: 8px;}
    .pagination-bar {flex-direction: column; gap: 8px; align-items: center;}
    /* Dock becomes a full-width opaque bottom bar; body reserves its height */
    button.back-nav
    {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: var(--backnav-bar-h);
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        font-size: 0.78em;
        padding: 4px 16px;
        gap: 6px;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
    }

    button.back-nav:hover
    {
        transform: none;
    }

    .back-nav-group
    {
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        flex-direction: row;
        gap: 6px;
        padding: 6px 8px;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
        overflow-x: auto;
    }

    .back-nav-group button.back-nav
    {
        width: auto;
        flex: 1 0 auto;
        min-height: 40px;
        border: 2px solid var(--primary);
        border-radius: 8px;
        font-size: 0.72em;
        padding: 4px 10px;
        box-shadow: none;
    }

    .back-nav-group button.back-nav.back-nav-orange
    {
        border-color: #E65100;
    }

    .back-nav-group > button
    {
        width: auto;
        flex: 1 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    /* TOUCH TARGETS (C12): every control a finger has to hit is at least 44px in both
       directions. Measured before this rule at 390px: default buttons 33px high, .btn-sm 25px,
       .btn-xs 30x20, pagination 37x24, selects 27-36px. One shared rule rather than a fix per
       page; the compact desktop sizes above 1024px are untouched. */
    button,
    select,
    a.btn,
    ki-button,
    ki-button2,
    input[type="button"],
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="search"]
    {
        min-height: 44px;
    }

    button,
    a.btn,
    ki-button,
    ki-button2
    {
        min-width: 44px;
    }

    input[type="checkbox"],
    input[type="radio"]
    {
        width: 22px;
        height: 22px;
        margin: 11px;
    }

    body {padding-bottom: var(--backnav-bar-h);}
    body::after {height: var(--backnav-bar-h);}
}

@media (max-width: 480px)
{
    #header {padding: 10px 14px; margin: 0.5rem 0.5rem 0;}
    #header #title {font-size: 0.65em;}
    .content {padding: 12px 12px 80px;}
    .stats-grid {grid-template-columns: 1fr;}
    .nav-grid {grid-template-columns: 1fr;}
    .detail-grid {grid-template-columns: 1fr;}

    /* C12: the legacy per-page dialog (.dialog-overlay / .dialog, e.g. the "Nuovo Socio" form)
       goes edge-to-edge on a phone - no backdrop margin left to tap through accidentally, and
       the full viewport height is available to a form that would otherwise need its own scroll
       inside a small card. GUI.openDialog/closeDialog are untouched: this is CSS only. */
    .dialog-overlay { padding: 0; align-items: stretch; }
    .dialog
    {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    table.data-table td
    {
        padding: 8px 10px 8px calc(44% + 8px);
        font-size: 0.85em;
    }

    table.data-table td[data-label]::before { width: calc(44% - 8px); left: 10px; }
    table.data-table td:not([data-label]) { padding-left: 10px; }
    table.data-table td:last-child { padding: 10px; }
}

/* ========== HIVE DIALOG SYSTEM ========== */

.hive-dialog-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: hive-dialog-fadein 0.2s ease-out;
}

.hive-dialog
{
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: hive-dialog-slidein 0.2s ease-out;
}

.hive-dialog-title
{
    font-size: 1.15em;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary-light);
}

.hive-dialog-title i
{
    margin-right: 6px;
}

.hive-debug-icon
{
    cursor: pointer;
    color: var(--warning, #FF8F00);
    transition: transform 0.15s ease;
}

.hive-debug-icon:hover
{
    transform: scale(1.3);
}

/* ========== API DEBUG INFO PANEL ========== */

.hive-debug-info
{
    background: var(--bg-light, #f5f5f5);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 0.82em;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--text, #333);
    max-height: 300px;
    overflow-y: auto;
}

.hive-debug-row
{
    padding: 3px 0;
    word-break: break-all;
}

.hive-debug-label
{
    font-weight: 700;
    color: var(--primary-dark, #E65100);
    margin-right: 4px;
}

.hive-debug-pre
{
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    padding: 8px;
    margin: 4px 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.95em;
}

.hive-dialog-message
{
    padding: 4px 0 16px;
    color: var(--text);
    line-height: 1.5;
    word-break: break-word;
}

.hive-dialog-input
{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95em;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.hive-dialog-input:focus
{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,143,0,0.15);
}

.hive-dialog-buttons
{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.hive-dialog-btn
{
    padding: 8px 18px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s, transform 0.1s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hive-dialog-btn:hover
{
    transform: translateY(-1px);
}

.hive-dialog-btn:active
{
    transform: translateY(0);
}

.hive-dialog-btn-accept
{
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.hive-dialog-btn-accept:hover
{
    background: white;
    color: var(--success);
}

.hive-dialog-btn-cancel
{
    background: #757575;
    color: white;
    border-color: #757575;
}

.hive-dialog-btn-cancel:hover
{
    background: white;
    color: #757575;
}

.hive-dialog-btn-success
{
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.hive-dialog-btn-success:hover
{
    background: white;
    color: var(--success);
}

.hive-dialog-btn-danger
{
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.hive-dialog-btn-danger:hover
{
    background: white;
    color: var(--danger);
}

@keyframes hive-dialog-fadein
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hive-dialog-slidein
{
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px)
{
    /* C12: full-screen on a phone, same reasoning as .dialog-overlay/.dialog above - this is the
       shared GUI.showAlert/showConfirm/showPrompt/openDialog chrome, so every dialog in the app
       gets it for free. */
    .hive-dialog-overlay { padding: 0; align-items: stretch; }
    .hive-dialog
    {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 16px;
    }
}

@media print
{
    .hive-dialog-overlay { display: none !important; }
}

/* ========== QR SCANNER VIDEO + FRAME ========== */

.qr-video-wrapper
{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--primary);
}

.qr-video-wrapper video
{
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.qr-scan-frame
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.qr-scan-frame::after
{
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    opacity: 0.9;
    animation: qr-scan-sweep 2s ease-in-out infinite;
}

@keyframes qr-scan-sweep
{
    0%, 100% { top: 8%; }
    50%      { top: 92%; }
}

/* ========== CREDITS DIALOG ========== */

.hive-credits-dialog
{
    background: white;
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: hive-dialog-slidein 0.2s ease-out;
    max-width: 340px;
    width: 100%;
}

.hive-credits-logo
{
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.hive-credits-name
{
    font-size: 1.6em;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.hive-credits-version
{
    font-size: 0.85em;
    color: var(--text-light);
    font-family: monospace;
    margin-bottom: 20px;
}

.hive-credits-dev
{
    font-size: 0.9em;
    color: #555;
    margin-bottom: 16px;
}

.hive-credits-dps-logo
{
    height: 56px;
    opacity: 0.7;
}

:focus-visible
{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.balance-positive { color: var(--success); }
.balance-negative { color: var(--danger); }

/* ========== CURSOR AFFORDANCE (C1) ========== */

button,
a[href],
label[for],
select,
[onclick],
[role="button"],
summary,
tr[onclick]
{
    cursor: pointer;
}

:disabled,
[disabled]
{
    cursor: not-allowed;
}

/* ========== FORM HINTS + INLINE VALIDATION ========== */

.form-hint
{
    font-size: 0.78em;
    color: var(--text-light);
    margin-top: 4px;
    line-height: 1.4;
}

.field-error
{
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12) !important;
}

.field-error-msg
{
    font-size: 0.78em;
    color: var(--danger);
    margin-top: 4px;
}

/* ========== TOAST NOTIFICATIONS (GUI.showToast) ========== */

.hive-toast
{
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 1300;
    transition: transform 0.3s ease;
    /* Wrap instead of truncating: actionable error toasts are longer than one line
       and used to be clipped by the old white-space:nowrap + ellipsis combination. */
    max-width: min(90vw, 480px);
    text-align: center;
    line-height: 1.35;
}

.hive-toast-show
{
    transform: translateX(-50%) translateY(0);
}

.hive-toast-success { background: var(--success); }
.hive-toast-error { background: var(--danger); }
.hive-toast-info { background: var(--primary-dark); }

/* Keep toasts above the bottom nav bar on small viewports */
@media (max-width: 1024px)
{
    .hive-toast
    {
        bottom: calc(var(--backnav-bar-h) + 12px);
    }
}

@media (max-width: 480px)
{
    .hive-toast
    {
        font-size: 0.85em;
        padding: 10px 18px;
        bottom: calc(var(--backnav-bar-h) + 12px);
    }
}

@media print
{
    .hive-toast { display: none !important; }
}

/* ========== TABLE LOADING ROW (GUI.showTableLoading) ========== */

tr.table-loading-row td,
tr.table-empty-row td
{
    text-align: center;
    color: var(--text-light);
    padding: 24px 8px;
    font-style: italic;
}

/* Loading placeholder for containers that are not table bodies (card grids, side panels),
   and the failed state GUI.clearLoadingIndicators turns it into. */
.block-loading,
.block-empty
{
    text-align: center;
    color: var(--text-light);
    padding: 24px 8px;
    font-style: italic;
}

/* ========== TAB BAR COMPONENT (.hive-tab) ==========
   One shared tab style (R4-14e). The legacy class names .cc-tab / .ac-tab /
   .comm-tab / .folder-tab are aliases kept for the existing markup; new pages
   use .hive-tabs / .hive-tab directly. */

.hive-tabs
{
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hive-tab,
.cc-tab,
.ac-tab,
.comm-tab,
.folder-tab
{
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: var(--bg);
    color: var(--text-light);
    font-size: 0.88em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hive-tab:hover,
.cc-tab:hover,
.ac-tab:hover,
.comm-tab:hover,
.folder-tab:hover
{
    background: var(--bg-card);
    color: var(--text);
}

.hive-tab.active,
.cc-tab.active,
.ac-tab.active,
.comm-tab.active,
.folder-tab.active
{
    background: var(--bg-card);
    color: var(--primary);
    border-bottom-color: var(--bg-card);
}

@media (max-width: 1024px)
{
    .hive-tabs,
    .cc-tabs,
    .ac-tabs,
    .comm-tabs
    {
        gap: 2px;
    }

    .hive-tab,
    .cc-tab,
    .ac-tab,
    .comm-tab,
    .folder-tab
    {
        padding: 8px 14px;
        font-size: 0.82em;
    }
}