/* TECSIAL Workspace UI — design system entry (tokens, page shell, layout) */
@import url('tecsial-buttons.css');
@import url('tecsial-panels.css');
@import url('tecsial-forms.css');
@import url('tecsial-tables.css');
@import url('tecsial-tabs.css');
@import url('tecsial-cards.css');
@import url('tecsial-modals.css');
@import url('tecsial-responsive.css');
@import url('tecsial-azienda-bar.css');

:root {
    --tec-primary: #1FA3B3;
    --tec-primary-dark: #147988;
    --tec-blue: #2563EB;
    --tec-green: #22C55E;
    --tec-orange: #F59E0B;
    --tec-red: #DC3545;
    --tec-dark: #2F3437;
    --tec-bg: #F4F7F9;
    --tec-panel: #FFFFFF;
    --tec-border: #D7E1E5;
    --tec-border-soft: #E8EEF2;
    --tec-muted: #6B7280;
    --tec-soft: #E8F7FA;
    --tec-text: #111827;
    --tec-radius: 12px;
    --tec-radius-lg: 14px;
    --shadow: 0 6px 18px rgba(15, 23, 42, .06);
    --tec-sidebar-width: 220px;
    --tec-sidebar-collapsed-width: 64px;
    --tec-z-content: 1;
    --tec-z-sticky-page: 20;
    --tec-z-headbar: 1100;
    --tec-z-drawer-backdrop: 1200;
    --tec-z-drawer: 1300;
    --tec-z-modal: 1400;
}

/* Tablet: shell più compatta (dopo i token base) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --tec-sidebar-width: 200px;
        --tec-headbar-height: 50px;
        --tec-headbar-toolbar-height: 44px;
    }
}

/* Area contenuto: niente padding sopra — la headbar fissa è già compensata dal wrapper */
.tec-main-content {
    padding-top: 0;
}

/* Shell full-bleed: hero attaccata subito sotto headbar */
.tec-main-content > .fs-hub-page,
.tec-main-content-stack > .fs-hub-page,
.tec-main-content > .tec-dettaglio-preview,
.tec-main-content-stack > .tec-dettaglio-preview,
.tec-main-content-stack > .tec-workspace-auto-hero-wrap {
    margin: 0 -1.5rem 0;
    padding: 0 1.5rem 1.75rem;
    width: calc(100% + 3rem);
    max-width: none;
    border-radius: 0;
}

.fs-hub-page {
    margin: 0 0 28px;
    padding: 0 0 8px;
    color: var(--tec-text);
    font-size: 14px;
    line-height: 1.45;
    background: linear-gradient(180deg, #eef6f8 0%, var(--tec-bg) 280px, #f7f9fb 100%);
    overflow-x: clip;
}

.fs-hub-page * {
    box-sizing: border-box;
}

.fs-hub-page a:not(.btn):not(.tab-main):not(.sub-tab):not(.nav-link) {
    text-decoration: none;
    color: inherit;
}

.fs-hub-page .content-header {
    display: none;
}

/* Hero */
.fs-hub-page .hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 20px;
    padding: 22px 24px;
    margin-bottom: 16px;
    border: 1px solid var(--tec-border);
    border-radius: var(--tec-radius-lg);
    background: var(--tec-panel);
    box-shadow: var(--shadow);
}

.fs-hub-page .hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(31, 163, 179, .11);
    pointer-events: none;
}

.fs-hub-page .hero-title,
.fs-hub-page .hero-actions {
    position: relative;
    z-index: 1;
}

.fs-hub-page .hero-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tec-primary-dark);
    margin-bottom: 6px;
}

.fs-hub-page .hero-title h1,
.fs-hub-page .hero h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 900;
    color: var(--tec-text);
}

.fs-hub-page .hero-title p,
.fs-hub-page .hero p {
    max-width: 820px;
    margin: 8px 0 0;
    color: var(--tec-muted);
    line-height: 1.5;
}

.fs-hub-page .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Hero sticky — tutte le pagine con intestazione workspace */
.tec-main-content .hero,
.tec-main-content section.hero,
.tec-main-content .tec-topbar,
.tec-main-content .notif-hero,
.tec-main-content .azienda-hero,
.tec-main-content .tpl-hero,
.tec-main-content .conv-sicurezza-page .conv-hero,
.tec-main-content .lav-scheda-page .hero.lav-hero-sticky {
    position: sticky;
    top: var(--tec-page-hero-top, var(--tec-headbar-height, 58px));
    z-index: var(--tec-z-sticky-page, 20);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content section.hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .tec-topbar,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .notif-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .azienda-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .tpl-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .conv-sicurezza-page .conv-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .lav-scheda-page .hero.lav-hero-sticky {
    top: var(--tec-page-hero-top, var(--tec-headbar-azienda-height, 96px));
}

/* Mobile webapp: solo la headbar resta sticky — niente hero sopra il drawer */
@media (max-width: 991.98px) {
    .tec-main-content .hero,
    .tec-main-content section.hero,
    .tec-main-content .tec-topbar,
    .tec-main-content .notif-hero,
    .tec-main-content .azienda-hero,
    .tec-main-content .tpl-hero,
    .tec-main-content .conv-sicurezza-page .conv-hero,
    .tec-main-content .lav-scheda-page .hero.lav-hero-sticky,
    .tec-main-content-stack .hero,
    .tec-main-content-stack section.hero,
    .tec-main-content .fs-hub-page > .hero,
    .tec-main-content .fs-hub-page > section.hero,
    .tec-main-content-stack .fs-hub-page > .hero,
    .tec-main-content-stack .fs-hub-page > section.hero,
    .tec-main-content .fs-hub-page > .hero.hero--sticky,
    .tec-main-content-stack .fs-hub-page > .hero.hero--sticky {
        position: relative !important;
        top: auto !important;
        z-index: var(--tec-z-content, 1) !important;
        backdrop-filter: none;
    }
}

/* Elenco/hub/dettaglio: hero non sticky salvo .hero--sticky esplicito */
.tec-main-content .fs-hub-page > .hero:not(.hero--sticky),
.tec-main-content .fs-hub-page > section.hero:not(.hero--sticky),
.tec-main-content-stack .fs-hub-page > .hero:not(.hero--sticky),
.tec-main-content-stack .fs-hub-page > section.hero:not(.hero--sticky),
.tec-main-content .tec-dettaglio-preview .azienda-hero,
.tec-main-content .tec-dettaglio-preview .azienda-summary,
.tec-main-content-stack .tec-dettaglio-preview .azienda-hero,
.tec-main-content-stack .tec-dettaglio-preview .azienda-summary {
    position: relative;
    top: auto;
    z-index: 1;
}

.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .fs-hub-page > .hero:not(.hero--sticky),
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .fs-hub-page > section.hero:not(.hero--sticky),
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content-stack .fs-hub-page > .hero:not(.hero--sticky),
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content-stack .fs-hub-page > section.hero:not(.hero--sticky),
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .tec-dettaglio-preview .azienda-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content .tec-dettaglio-preview .azienda-summary,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content-stack .tec-dettaglio-preview .azienda-hero,
.tec-wrapper.tec-wrapper-azienda-context .tec-main-content-stack .tec-dettaglio-preview .azienda-summary {
    position: relative;
    top: auto;
    z-index: 1;
}

.tec-main-content > .tec-dettaglio-preview .azienda-hero,
.tec-main-content > .tec-dettaglio-preview .azienda-summary {
    position: relative;
    top: auto;
}

.tec-workspace-auto-hero-wrap {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Auto-hero dopo RenderBody: ViewData SuppressAutoHero/Title già valorizzati dalla view */
.tec-main-content-stack {
    display: flex;
    flex-direction: column;
}

.tec-main-content-stack > .tec-workspace-auto-hero-wrap {
    order: -1;
}

.tec-workspace-auto-hero-wrap .hero {
    margin-bottom: 16px;
}

.fs-hub-page .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* Alerts */
.fs-hub-page .fs-hub-alerts,
.fs-hub-page .tec-ws-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.fs-hub-page .fs-hub-alerts .alert,
.fs-hub-page .tec-ws-alerts .alert {
    margin: 0;
    border-radius: 12px;
}

/* Workspace grid (main + sidebar) */
.fs-hub-page .workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 16px;
    align-items: start;
    width: 100%;
}

.fs-hub-page .workspace-grid > main,
.fs-hub-page .workspace-grid > aside {
    min-width: 0;
}

.fs-hub-page .workspace-grid .side-card .panel-body {
    font-size: 13px;
    color: var(--tec-muted);
    line-height: 1.55;
}

.fs-hub-page .workspace-grid .side-card ol,
.fs-hub-page .workspace-grid .side-card ul {
    margin: 0;
    padding-left: 1.15rem;
}

.fs-hub-page .workspace-grid .side-card li + li {
    margin-top: 8px;
}

.fs-hub-page .workspace-grid .side-card strong {
    color: var(--tec-text);
}

/* Sticky actions bar */
.fs-hub-page .sticky-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tec-border-soft);
}

.fs-hub-page .sticky-actions.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tec-z-sticky-page, 20);
    margin: 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--tec-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    backdrop-filter: blur(8px);
}

@media (min-width: 992px) {
    .fs-hub-page .sticky-actions.is-fixed {
        left: var(--tec-sidebar-width);
    }

    body.tec-sidebar-collapsed .fs-hub-page .sticky-actions.is-fixed,
    .tec-wrapper.tec-sidebar-collapsed .fs-hub-page .sticky-actions.is-fixed {
        left: var(--tec-sidebar-collapsed-width);
    }
}

.fs-hub-page.has-sticky-actions {
    padding-bottom: 72px;
}

/* Profile choice cards */
.fs-hub-page .profile-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fs-hub-page .profile-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--tec-border);
    border-radius: var(--tec-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.fs-hub-page .profile-choice:hover {
    border-color: rgba(31, 163, 179, .45);
    background: #fbfeff;
}

.fs-hub-page .profile-choice:has(input:checked) {
    border-color: var(--tec-primary);
    background: var(--tec-soft);
    box-shadow: 0 0 0 1px rgba(31, 163, 179, .25);
}

.fs-hub-page .profile-choice input[type="radio"],
.fs-hub-page .profile-choice input[type="checkbox"] {
    flex-shrink: 0;
    margin: 4px 0 0;
    accent-color: var(--tec-primary);
}

.fs-hub-page .profile-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--tec-soft);
    color: var(--tec-primary-dark);
    font-size: 18px;
    font-weight: 800;
}

.fs-hub-page .profile-choice:has(input:checked) .profile-icon {
    background: var(--tec-primary);
    color: #fff;
}

.fs-hub-page .profile-choice-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--tec-muted);
    line-height: 1.45;
}

.fs-hub-page .profile-choice-body strong {
    font-size: 14px;
    color: var(--tec-text);
    font-weight: 800;
}

.fs-hub-page .muted {
    color: var(--tec-muted);
}