/* =====================================================
   ShowPilot — Design System
   Importa questo file in ogni pagina PHP dopo UIKit.
   ===================================================== */

/* ── Variabili ───────────────────────────────────────── */
:root {
    --sp-blue:     #1e87f0;
    --sp-dark:     #111;
    --sp-muted:    #999;
    --sp-bg:       #f8f8f8;
    --sp-radius:   6px;
    --sp-shadow:   0 2px 8px rgba(0,0,0,.08);
    --font-brand:  'Orbitron', sans-serif;
    --font-accent: 'Tourney', sans-serif;
}

/* ── Logo ─────────────────────────────────────────────── */
.sp-logo { text-decoration: none !important; border-bottom: none !important; display: inline-flex; align-items: baseline; gap: 0; }
.sp-logo:hover, .sp-logo:focus { text-decoration: none !important; border-bottom: none !important; }
.sp-logo-show  { font-family: var(--font-brand)  !important; font-size: 2.4rem; font-weight: 600; color: var(--sp-dark); line-height: 1; letter-spacing: .02em; }
.sp-logo-pilot { font-family: var(--font-accent) !important; font-size: 2.6rem; font-weight: 400; color: var(--sp-blue); line-height: 1; letter-spacing: -.01em; }
.sp-logo-cloud.uk-label { font-size: .58rem; background: #e0e0e0; color: #666; align-self: center; margin-left: 5px; text-transform: lowercase; letter-spacing: .3px; }
.sp-logo-show.lg  { font-size: 3.0rem; }
.sp-logo-pilot.lg { font-size: 3.2rem; }
.sp-logo-cloud.lg.uk-label { font-size: .7rem; }

/* ── Navbar condivisa ────────────────────────────────── */
.sp-navbar { border-bottom: 1px solid #e5e5e5; background: #fff; }

/* ── Username evidenziato ────────────────────────────── */
.sp-username {
    font-family: var(--font-brand);
    font-weight: 600;
    color: var(--sp-dark);
}

/* ── Breadcrumb ──────────────────────────────────────── */
.sp-breadcrumb { font-size: .85rem; color: var(--sp-muted); margin-bottom: 12px; }
.sp-breadcrumb a { color: var(--sp-blue); text-decoration: none; }
.sp-breadcrumb a:hover { text-decoration: underline; }
.sp-breadcrumb span { color: var(--sp-muted); margin: 0 6px; }

/* ── Segment title inline ────────────────────────────── */
.segment-title-editable {
    background-color: var(--sp-bg);
    padding: 2px 6px;
    border-radius: var(--sp-radius);
    cursor: pointer;
}
.segment-title-editable:hover { background-color: #ececec; }

/* ── Campi inline editabili — indicatore hover ────────── */
[data-field], .segment-title, .segment-description, .editable {
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s;
}
[data-field]:hover, .segment-title:hover, .segment-description:hover, .editable:hover {
    background: #f0f4ff !important;
    outline: 1px dashed #b0c4f0;
}
[data-field]:hover::after, .segment-title:hover::after,
.segment-description:hover::after, .editable:hover::after {
    content: ' ✏';
    font-size: .75em;
    opacity: .45;
    pointer-events: none;
}

/* ── Drag handle segmenti ────────────────────────────── */
.drag-handle {
    cursor: grab;
    color: #ccc;
    padding: 0 6px;
    flex-shrink: 0;
}
.drag-handle:hover { color: #999; }

/* ── Tabelle ─────────────────────────────────────────── */
.sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Greeting dashboard ──────────────────────────────── */
.sp-greeting { font-size: 1.25rem; margin-bottom: 24px; }

/* ── Pulsante back ───────────────────────────────────── */
.sp-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .9rem;
    color: var(--sp-muted);
    text-decoration: none;
    margin-bottom: 8px;
}
.sp-back:hover { color: var(--sp-dark); }

/* ── Spinner overlay su bottone ─────────────────────── */
.sp-btn-loading { position: relative; pointer-events: none; opacity: .75; }
.sp-btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sp-spin .6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ── Dashboard tiles ─────────────────────────────────── */
.sp-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    padding: 24px 16px;
}
.sp-tile-body { flex: 1; }
.sp-tile-action { margin-top: 16px; }

/* ── Show header ──────────────────────────────────────────────────────────── */
.sp-show-meta { font-size: .85rem; }
.sp-show-meta span[uk-icon] { vertical-align: middle; }

/* ── Badge opzioni show (header) ──────────────────────────────────────────── */
.sp-option-badge {
    display: inline-block;
    background: #eef2ff;
    color: var(--sp-blue);
    border: 1px solid #c7d7fa;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    padding: 1px 7px;
    letter-spacing: .2px;
}

/* ── Section labels (staff / note) ───────────────────────────────────────── */
.sp-section-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sp-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

/* ── Celle inline editabili nelle righe ──────────────────────────────────── */
.sp-cell {
    padding: 3px 5px;
    border-radius: 3px;
    cursor: pointer;
    min-height: 1.4em;
    transition: background .12s, outline .12s;
}
.sp-cell:hover {
    background: #f0f4ff !important;
    outline: 1px dashed #b0c4f0;
}
/* Rimuovi il pencil ::after dalle celle riga (troppo rumoroso in tabella) */
.sp-cell:hover::after { content: none !important; }

/* Placeholder cella vuota */
.sp-cell-empty { color: #bbb; font-style: italic; font-weight: 400; }

/* ── Drag handle righe ────────────────────────────────────────────────────── */
.row-drag-handle {
    cursor: grab;
    color: #d0d0d0;
    font-size: 1.1rem;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}
.row-drag-handle:hover { color: #999; }

/* ── Delete row button ───────────────────────────────────────────────────── */
.sp-delete-row-btn { color: #ccc !important; transition: color .15s; }
.sp-delete-row-btn:hover { color: #e74c3c !important; }

/* ── EasyMDE overrides (light theme) ─────────────────────────────────────── */
.EasyMDEContainer .CodeMirror {
    border-color: #e5e5e5;
    border-radius: 0 0 var(--sp-radius) var(--sp-radius);
    font-size: .92rem;
}
.EasyMDEContainer .editor-toolbar {
    border-color: #e5e5e5;
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}
.editor-toolbar button { color: #555 !important; }
.editor-toolbar button:hover,
.editor-toolbar button.active { background: #f0f4ff !important; }

/* ── Notifiche helper ────────────────────────────────── */
/* (UIKit notification gestisce il rendering, questo è solo
   documentazione dei status usati: success / warning / danger / primary) */