/* ============================================================================
   KIBO v2 — global base/misc (reset, Blazor errors, toasts, connectivity banner)
   Extracted from app.css (monolith split). Token-based, see _tokens.css.
   ============================================================================ */

/* ── Theme variables ──────────────────────────────────────────────────────
   Moved to css/_tokens.css (single source of truth). The v1 token names used
   throughout this file survive there as aliases of the v2 tokens during the
   restyle (see Kibo-Docs/2026_v2/regole_sviluppo_ui.md §1). */


/* ── Reset / Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-ui);
    background: var(--bg-page);
    color: var(--text-primary);
    transition: background .2s, color .2s;
    /* Kill mobile overscroll gestures on both axes — pull-to-refresh and the horizontal
       swipe-nav rubber-band (KBW-0052). iOS Safari's edge swipe-back is a browser gesture
       CSS can't reach; this covers the rest. */
    overscroll-behavior: none;
}

#app { height: 100%; }

/* Reboot — replaces Bootstrap's reboot now that bootstrap.min.css is removed. */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }
button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--human); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; }
img, svg { vertical-align: middle; }
:focus-visible { outline: 2px solid var(--human); outline-offset: 1px; }


/* ── Blazor error UI ─────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.admin-container { overflow: auto; }


/* ── End Knowledge Graph ──────────────────────────────────────────────────── */


/* ── Reusable toasts ───────────────────────────────────────────────────────── */
.toast-stack {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 1200;
    display: flex; flex-direction: column; gap: .5rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}
.kibo-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: .6rem;
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px; padding: .7rem .85rem;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25));
    animation: kibo-toast-in .22s ease-out;
}
@keyframes kibo-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kibo-toast-icon { font-size: 1rem; line-height: 1.3; flex: 0 0 auto; }
.kibo-toast-content { flex: 1 1 auto; min-width: 0; }
.kibo-toast-title { font-weight: 600; font-size: .85rem; margin-bottom: .15rem; }
.kibo-toast-msg {
    font-size: .82rem; line-height: 1.4; color: var(--text-secondary);
    white-space: pre-wrap; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kibo-toast-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .15rem; flex: 0 0 auto;
}
.kibo-toast-close:hover { color: var(--text-primary); }

/* Variant accents (left border + icon colour) */
.kibo-toast-info    { border-left-color: #3b82f6; }
.kibo-toast-info    .kibo-toast-icon { color: #3b82f6; }
.kibo-toast-success { border-left-color: #22c55e; }
.kibo-toast-success .kibo-toast-icon { color: #22c55e; }
.kibo-toast-warning { border-left-color: #f59e0b; }
.kibo-toast-warning .kibo-toast-icon { color: #f59e0b; }
.kibo-toast-error   { border-left-color: #ef4444; }
.kibo-toast-error   .kibo-toast-icon { color: #ef4444; }
.kibo-toast-plain   { border-left-color: var(--border); }



/* ── Connectivity banner (server unreachable / update ready) ─────────────────── */
/* Shown by ConnectivityBanner.razor while the API heartbeat fails — chiefly the
   short downtime of a VPS deploy — and when the server returns with a new build. */
.conn-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.conn-banner-down   { background: #b45309; }   /* amber — temporary, reconnecting */
.conn-banner-update { background: #15803d; }   /* green — back online, action available */

.conn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: conn-spin 0.7s linear infinite;
    flex: 0 0 auto;
}
@keyframes conn-spin { to { transform: rotate(360deg); } }

.conn-reload-btn {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.2rem 0.7rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.conn-reload-btn:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Trash (KBW-0134) ─────────────────────────────────────────────────────────
   Two rules only: the page is a plain .k-table and reuses the shared chips row,
   the buttons and the utility spacing. What it needs of its own is the item cell,
   where a long file name must not push the actions column off the row. */
/* The title wraps instead of being cut with an ellipsis. In a list of things you are trying to
   recognise, the end of the name is often the part that identifies it (a date, a version, "(2)"),
   and a row that is one line taller costs far less than a name you cannot tell apart from another.
   align-items:flex-start keeps the id chip on the first line of a wrapped title. */
.trash-item { display: flex; align-items: flex-start; gap: .4rem; min-width: 0; }
.trash-item-title { min-width: 0; overflow-wrap: anywhere; }

/* Actions: a single kebab, so the column is only as wide as the button. Unlike the task rows, it is
   never hidden until hover — here it is the only way to act on the row, and on a touch screen there
   is no hover to reveal it with. */
.trash-col-actions { width: 1%; white-space: nowrap; }
/* Two classes on purpose: .tasks-kebab carries the base look AND its opacity:0, and a single-class
   rule here would win or lose on stylesheet order alone. */
.trash-col-actions .trash-kebab { opacity: 1; }
.trash-menu { max-width: min(320px, calc(100vw - 1rem)); }
/* Catches the click that dismisses the menu. Below .kctx-menu (1041) and above the page. */
.trash-menu-backdrop { position: fixed; inset: 0; z-index: 1040; }

/* Origin and deletion date live under the title on a phone, in their own columns above it. Four
   columns did not fit: the row ran off the right edge and took the actions with it. */
.trash-meta { display: none; }
@media (max-width: 640px) {
    .trash-col-origin, .trash-col-when { display: none; }
    .trash-meta { display: block; margin-top: .15rem; }
}