/* Portale delle richieste: i colori di Coryla (WORKS/STILE_CORYLA, coryla.sty)
   e le classi della dashboard che i template del ticketing danno per scontate. */
:root {
    --cy-teal: #008080;
    --cy-teal-dark: #006666;
    --cy-teal-light: #e0f2f1;
    --cy-dark: #1a1a1a;
    --cy-grey: #6b6b6b;
    --cy-red: #ff0000;
    --cy-bg: #f6f8f8;

    /* Nomi usati dai template del ticketing (base.html della dashboard). */
    --pm-blue: var(--cy-teal);
    --pm-dark: var(--cy-dark);
    --pm-cyan: #0891b2;
    --pm-amber: #f59e0b;
    --pm-green: #059669;
    --pm-red: #dc2626;
    --pm-card-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --pm-card-hover: 0 4px 12px rgba(0, 0, 0, .12);

    --bs-link-color: var(--cy-teal-dark);
    --bs-link-color-rgb: 0, 102, 102;
    --bs-link-hover-color: var(--cy-dark);
    --bs-link-hover-color-rgb: 26, 26, 26;
}

body {
    background: var(--cy-bg);
    color: var(--cy-dark);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.btn-primary {
    --bs-btn-bg: var(--cy-teal);
    --bs-btn-border-color: var(--cy-teal);
    --bs-btn-hover-bg: var(--cy-teal-dark);
    --bs-btn-hover-border-color: var(--cy-teal-dark);
    --bs-btn-active-bg: var(--cy-teal-dark);
    --bs-btn-active-border-color: var(--cy-teal-dark);
    --bs-btn-disabled-bg: var(--cy-teal);
    --bs-btn-disabled-border-color: var(--cy-teal);
}
.btn-outline-primary {
    --bs-btn-color: var(--cy-teal-dark);
    --bs-btn-border-color: var(--cy-teal);
    --bs-btn-hover-bg: var(--cy-teal);
    --bs-btn-hover-border-color: var(--cy-teal);
    --bs-btn-active-bg: var(--cy-teal-dark);
    --bs-btn-active-border-color: var(--cy-teal-dark);
}
.form-control:focus, .form-select:focus {
    border-color: var(--cy-teal);
    box-shadow: 0 0 0 .2rem rgba(0, 128, 128, .2);
}
.text-bg-primary { background-color: var(--cy-teal) !important; }

/* Barra in alto */
.cy-topbar { background: #fff; border-bottom: 3px solid var(--cy-teal); }
.cy-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--cy-dark); }
.cy-brand:hover { color: var(--cy-teal-dark); }
.cy-brand-sub { font-weight: 400; color: var(--cy-grey); margin-left: .15rem; }
.cy-topbar .nav-link { color: var(--cy-grey); font-weight: 500; }
.cy-topbar .nav-link.active, .cy-topbar .nav-link:hover { color: var(--cy-teal-dark); }
.cy-topbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--cy-teal); }
.cy-badge { background: var(--cy-teal-light); color: var(--cy-teal-dark); }
.cy-user { color: var(--cy-dark); text-decoration: none; }

.cy-main { flex: 1; padding-top: 1.5rem; padding-bottom: 2rem; }
.page-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 1rem;
}
.cy-title { font-size: 1.3rem; font-weight: 700; margin: 0; }
.cy-messages { margin-bottom: 1rem; }
.cy-footer { font-size: .8rem; color: var(--cy-grey); padding-bottom: 1.5rem; }

/* I template del ticketing hanno un container-fluid p-4 dentro il contenuto:
   qui il margine c'e' gia'. */
.cy-main > .container-fluid.p-4 { padding: 0 !important; }

/* Classi della dashboard usate dal ticketing */
.pm-kpi {
    position: relative; background: #fff; border-radius: 12px; box-shadow: var(--pm-card-shadow);
    padding: 1.05rem 1.2rem; overflow: hidden; height: 100%;
}
.pm-kpi::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--pm-kpi-accent, var(--pm-blue));
}
.pm-kpi-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--cy-grey); font-weight: 600; margin-bottom: .15rem;
}
.pm-kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: var(--pm-dark); margin: 0; }
.pm-kpi-sub { font-size: .76rem; color: var(--cy-grey); margin-top: .25rem; }
.pm-kpi-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--pm-kpi-accent-bg, var(--cy-teal-light));
    color: var(--pm-kpi-accent, var(--pm-blue));
}
.pm-kpi-blue  { --pm-kpi-accent: var(--cy-teal); --pm-kpi-accent-bg: var(--cy-teal-light); }
.pm-kpi-green { --pm-kpi-accent: var(--pm-green); --pm-kpi-accent-bg: rgba(5, 150, 105, .10); }
.pm-kpi-amber { --pm-kpi-accent: var(--pm-amber); --pm-kpi-accent-bg: rgba(245, 158, 11, .13); }
.pm-kpi-red   { --pm-kpi-accent: var(--pm-red); --pm-kpi-accent-bg: rgba(220, 38, 38, .10); }
.pm-kpi-cyan  { --pm-kpi-accent: var(--pm-cyan); --pm-kpi-accent-bg: rgba(8, 145, 178, .10); }
.pm-card-hover { transition: box-shadow .18s ease; }
.pm-card-hover:hover { box-shadow: var(--pm-card-hover); }
.pm-empty { text-align: center; padding: 2.5rem 1rem; color: var(--cy-grey); }
.pm-empty .bi { font-size: 2.1rem; display: block; margin-bottom: .5rem; opacity: .55; }
.pm-empty-title { font-weight: 600; margin-bottom: .15rem; }
.pm-empty-sub { font-size: .82rem; }

/* Pagine di accesso */
.cy-auth { max-width: 420px; margin: 3rem auto; }
.cy-auth .card { border: 0; border-top: 4px solid var(--cy-teal); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.cy-auth-brand { text-align: center; margin-bottom: 1.25rem; }
.cy-auth-brand h1 { font-size: 1.25rem; font-weight: 700; margin: .6rem 0 .1rem; }
.cy-auth-brand p { color: var(--cy-grey); font-size: .9rem; margin: 0; }
.cy-auth ul { padding-left: 1.1rem; }

@media (max-width: 767.98px) {
    .cy-main { padding-top: 1rem; }
    .cy-auth { margin: 1.5rem auto; }
}

/* Campi dei form di Django resi senza classi (pagine di accesso) */
.cy-field input:not([type=checkbox]):not([type=hidden]), .cy-field select {
    display: block; width: 100%; padding: .45rem .75rem; font-size: 1rem;
    border: 1px solid #ced4da; border-radius: .375rem; background: #fff;
}
.cy-field input:focus { outline: 0; border-color: var(--cy-teal); box-shadow: 0 0 0 .2rem rgba(0, 128, 128, .2); }