/*
 * Hub UI — stile condiviso di tutte le pagine di inm35.it (pubbliche, app, admin).
 * Caricato per ultimo da layouts/partials/ui.blade.php: uniforma card, foto e navigazione
 * senza dipendere dagli stili inline di ogni singola pagina.
 *
 * Regole:
 *  1. Ogni foto dentro una card ha SEMPRE lo stesso formato (4:3), ritagliata al centro (cover).
 *  2. Tutto è sotto occhio: barra laterale con tutte le sezioni su computer, barra in basso su telefono.
 *  3. Card compatte su computer, comode al tocco su telefono.
 */

:root {
    --ui-brand: #6366f1;
    --ui-brand-dark: #4f46e5;
    --ui-ink: #12122b;
    --ui-muted: #667085;
    --ui-line: rgba(18, 18, 43, .09);
    --ui-soft: #eef0fb;
    --ui-card: #fff;
    --ui-radius: 16px;
    --ui-shadow: 0 1px 2px rgba(18, 18, 43, .05), 0 6px 18px rgba(18, 18, 43, .06);
    --ui-ratio: 4 / 3;
    --ui-side-w: 244px;
}

/* ───────── 1. FOTO NELLE CARD: tutte uguali, ritagliate bene ───────── */

/* Contenitori foto delle card (pubbliche e admin) */
body .promo-card__media,
body .mcard__media,
body .svc-card__media,
body .service-scroll-cover,
body .ui-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--ui-ratio);
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #eef0fb, #f7f0fb);
}

body .promo-card__media img,
body .mcard__media img,
body .svc-card__media img,
body .service-scroll-cover img,
body .ui-media img,
body .rc .im {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Riga di schede scorrevoli (home attività, admin): stesso formato, più larghe delle vecchie quadrate */
body .service-scroll-card { flex: 0 0 172px; }
body .service-scroll-cover { border-radius: 14px; margin-bottom: 8px; }
body .rc { flex: 0 0 172px; }
body .rc .im { position: static; aspect-ratio: var(--ui-ratio); height: auto; }
body .rc .ph { aspect-ratio: var(--ui-ratio); }

/* Copertine degli annunci (sfondo): già 4:3, centrate */
body .cover { aspect-ratio: var(--ui-ratio); background-size: cover; background-position: center; }

/* Segnaposto quando manca la foto */
body .mcard__ph,
body .ui-media__ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; color: #8b93b8; }

/* Titoli delle card: sempre massimo 2 righe, così le card della stessa riga hanno la stessa altezza */
body .promo-card h3,
body .mcard__body h3,
body .card .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body .promo-card h3 { min-height: 2.6em; }

/* Griglie: card della stessa riga alla stessa altezza */
body .grid,
body .mgrid { align-items: stretch; }
body .promo-card { display: flex; flex-direction: column; }
body .promo-card__body { display: flex; flex-direction: column; flex: 1; }
body .promo-card__cta { margin-top: auto; align-self: flex-start; }

/* ───────── 2. CARD PIÙ COMPATTE SU COMPUTER ───────── */
@media (min-width: 901px) {
    body .mgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
    body .grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
    body .cgrid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
    body .tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
    body .tile { min-height: 56px; padding: 9px 12px; border-radius: 14px; }
    body .tile .ti { width: 38px; height: 38px; font-size: 1.3rem; border-radius: 12px; }
    body .module-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
    body .module-tile { padding: 14px 10px 12px; border-radius: 18px; }
    body .module-icon { width: 54px; height: 54px; font-size: 1.55rem; border-radius: 16px; }
    body .kpis { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
    body .promo-card__body { padding: 12px 14px 14px; }
    body .mcard__body { padding: 10px 12px 12px; }
}

/* ───────── 3. NAVIGAZIONE SEMPRE VISIBILE ───────── */

.ui-side, .ui-tabbar { display: none; }

.ui-side__item, .ui-tab {
    position: relative;
    display: flex;
    text-decoration: none;
    color: var(--ui-ink);
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 901px) {
    body.has-shell { padding-left: var(--ui-side-w); }

    .ui-side {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: var(--ui-side-w);
        background: var(--ui-card);
        border-right: 1px solid var(--ui-line);
        padding: 14px 10px 12px;
        overflow-y: auto;
        z-index: 50;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    .ui-side__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--ui-ink); text-decoration: none; }
    .ui-side__logo { width: 38px; height: 38px; border-radius: 12px; background: var(--ui-brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: none; overflow: hidden; }
    .ui-side__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ui-side__brand b { display: block; font-size: .98rem; line-height: 1.2; }
    .ui-side__brand small { display: block; color: var(--ui-muted); font-size: .74rem; }
    .ui-side__item { align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; font-weight: 600; font-size: .93rem; }
    .ui-side__item:hover { background: var(--ui-soft); }
    .ui-side__item.is-active { background: color-mix(in srgb, var(--ui-brand) 12%, #fff); color: var(--ui-brand-dark); }
    .ui-side__ico { width: 26px; text-align: center; font-size: 1.15rem; flex: none; }
    .ui-side__badge { margin-left: auto; background: #dc2626; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 1px 8px; }
    .ui-side__sep { height: 1px; background: var(--ui-line); margin: 10px 6px; }
    .ui-side__label { padding: 8px 12px 4px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); }
    .ui-side__foot { margin-top: auto; padding-top: 10px; }
    .ui-side__foot form { margin: 0; }
    .ui-side__foot button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
}

@media (max-width: 900px) {
    .ui-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: var(--ui-card);
        border-top: 1px solid var(--ui-line);
        box-shadow: 0 -4px 20px rgba(18, 18, 43, .06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        z-index: 40;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    .ui-tab { flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--ui-muted); min-width: 0; }
    .ui-tab.is-active { color: var(--ui-brand-dark); background: color-mix(in srgb, var(--ui-brand) 11%, transparent); }
    .ui-tab__ico { font-size: 1.35rem; line-height: 1; }
    .ui-tab__label { font-size: .66rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-tab__badge { position: absolute; top: 2px; left: calc(50% + 6px); background: #dc2626; color: #fff; border-radius: 999px; font-size: .62rem; font-weight: 800; padding: 0 5px; line-height: 1.5; }
    body.has-shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ───────── 5. HOME DELL'APP (attività): da fare adesso, indicatori, tessere, righe di card ───────── */
.ui-icon { display: block; flex: none; }
.ui-side__ico, .ui-tab__ico, .ui-pub__ico { display: grid; place-items: center; }
.ah-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.ah-av { width: 56px; height: 56px; border-radius: 18px; background: var(--av, #6366f1); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; overflow: hidden; flex: none; box-shadow: 0 8px 20px color-mix(in srgb, var(--av, #6366f1) 35%, transparent); }
.ah-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-top__t { min-width: 0; flex: 1; }
.ah-top h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.ah-top p { margin: 3px 0 0; color: var(--ui-muted); font-size: .95rem; }
.ah-pill { background: #e65100; color: #fff; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.ah-sec { margin-top: 26px; }
.ah-h { margin: 0 0 12px; font-size: 1.1rem; letter-spacing: -.01em; }
.ah-sub { margin: 18px 0 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); }
.ah-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ah-row .ah-h { margin: 0; }
.ah-links { display: flex; gap: 14px; font-size: .88rem; font-weight: 700; }
.ah-links a { color: var(--ui-brand-dark); text-decoration: none; }

.ah-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #fff; background: var(--c, var(--ui-brand)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c, var(--ui-brand)) 32%, transparent); }

.ah-todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ah-todo__i { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); text-decoration: none; color: var(--ui-ink); }
.ah-todo__i b { display: block; font-size: 1rem; }
.ah-todo__i small { color: var(--ui-muted); }
.ah-todo__i .ah-go { margin-left: auto; color: var(--ui-muted); }

/* indicatori */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); text-decoration: none; color: var(--ui-ink); }
.kpi .i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-brand-dark); margin-bottom: 6px; }
.kpi .n { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.kpi .l { font-size: .78rem; color: var(--ui-muted); font-weight: 600; line-height: 1.3; }
.kpi.good .i { background: #e6f7ee; color: #15803d; }
.kpi.alert { background: #fff7ed; border-color: #fed7aa; }
.kpi.alert .i { background: #ffedd5; color: #c2410c; }
.kpi.alert .n { color: #c2410c; }

/* tessere azione */
.ah-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ah-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); text-decoration: none; color: var(--ui-ink); transition: transform .15s, box-shadow .15s; }
.ah-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18,18,43,.12); }
.ah-tile .ah-ic { margin-bottom: 10px; width: 50px; height: 50px; border-radius: 17px; }
.ah-tile b { font-size: 1.05rem; }
.ah-tile small { color: var(--ui-muted); font-size: .82rem; line-height: 1.35; }
.ah-soon { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-soon__i { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px dashed rgba(18,18,43,.18); color: var(--ui-muted); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.ah-soon__i .ah-ic { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; }
.ah-soon__i em { font-style: normal; font-weight: 800; font-size: .72rem; opacity: .9; color: #b45309; }
.ah-other { margin-top: 16px; }
.ah-other summary { cursor: pointer; font-weight: 800; color: var(--ui-brand-dark); }
.ah-other p { color: var(--ui-muted); font-size: .88rem; margin: 8px 0; }

/* righe di card con foto uguali */
.ah-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ah-card { flex: 0 0 188px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ui-ink); }
.ah-card .ui-media { border-radius: 18px; margin-bottom: 8px; box-shadow: var(--ui-shadow); }
.ah-card b { font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ah-card small { color: var(--ui-muted); font-size: .8rem; }
.ah-card--off .ui-media img { filter: grayscale(.6); opacity: .8; }
.ah-badge { position: absolute; left: 8px; top: 8px; background: rgba(18,18,43,.75); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; z-index: 1; }
body .ui-media__ph { color: #8b93b8; }

@media (max-width: 640px) {
    .ah-top { margin-bottom: 14px; }
    .ah-av { width: 48px; height: 48px; border-radius: 16px; font-size: 1.3rem; }
    .ah-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ah-tile { padding: 14px; border-radius: 22px; }
    .ah-tile small { display: none; }
    .ah-card { flex-basis: 150px; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── Footer unico (corto, da app) ───────── */
body footer.ui-foot { max-width: 1120px; margin: 36px auto 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); background: none; color: var(--ui-muted); text-align: left; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .88rem; line-height: 1.5; }
.ui-foot__top { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ui-line); border-radius: 22px; padding: 14px 16px; box-shadow: var(--ui-shadow); }
.ui-foot__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ui-ink); margin-right: auto; }
.ui-foot__brand b { display: block; font-size: .98rem; line-height: 1.15; }
.ui-foot__brand small { display: block; color: var(--ui-muted); font-size: .72rem; }
.ui-foot__links { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 340px; min-width: 0; justify-content: center; }
.ui-foot__links a { padding: 7px 12px; border-radius: 999px; color: var(--ui-ink); text-decoration: none; font-weight: 700; font-size: .85rem; background: var(--ui-soft); }
.ui-foot__links a:hover { background: color-mix(in srgb, var(--ui-brand) 16%, #fff); color: var(--ui-brand-dark); }
.ui-foot__cta { background: var(--ui-brand); color: #fff; text-decoration: none; font-weight: 800; padding: 10px 20px; border-radius: 14px; }
.ui-foot__legal { margin-top: 12px; text-align: center; font-size: .76rem; }
.co-foot { display: block; }
.co-foot a { color: inherit; font-weight: 700; }
.co-foot__more { display: inline-block; margin-top: 4px; }
.co-foot__more summary { cursor: pointer; font-weight: 800; color: var(--ui-brand-dark); list-style: none; display: inline; }
.co-foot__more summary::-webkit-details-marker { display: none; }
.co-foot__more[open] { display: block; }
.co-foot__more > span { display: block; margin-top: 6px; line-height: 1.7; }
@media (max-width: 700px) {
    .ui-foot__top { flex-direction: column; align-items: stretch; text-align: center; padding: 14px; }
    .ui-foot__brand { margin: 0 auto; }
    .ui-foot__links { justify-content: center; }
    .ui-foot__cta { text-align: center; }
    .ui-foot__legal { padding-bottom: 72px; }
}

/* ───────── Barra in alto delle pagine pubbliche ───────── */
.ui-pub {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px calc(7px);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ui-line);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ui-pub__brand { display: flex; align-items: center; gap: 8px; color: var(--ui-ink); text-decoration: none; font-weight: 800; flex: none; margin-right: 6px; }
.ui-pub__logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.ui-pub__links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ui-pub__links::-webkit-scrollbar { display: none; }
.ui-pub__links a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; color: var(--ui-ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; flex: none; }
.ui-pub__links a:hover { background: var(--ui-soft); }
.ui-pub__links a.is-active { background: color-mix(in srgb, var(--ui-brand) 12%, #fff); color: var(--ui-brand-dark); }
.ui-pub__cta { flex: none; background: var(--ui-brand); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; padding: 9px 16px; border-radius: 12px; }
.ui-pub__cta:hover { background: var(--ui-brand-dark); }
@media (max-width: 700px) {
    .ui-pub { padding: 6px 8px; gap: 4px; }
    .ui-pub__name, .ui-pub__opt { display: none !important; }
    .ui-pub__brand { margin-right: 2px; }
    .ui-pub__links { justify-content: space-between; }
    .ui-pub__links a { flex-direction: column; gap: 1px; padding: 4px 7px; font-size: .64rem; font-weight: 700; }
    .ui-pub__ico { font-size: 1.2rem; line-height: 1.1; }
    .ui-pub__cta { padding: 8px 11px; font-size: .8rem; }
}

/* Intestazioni proprie delle pagine che restano sotto la barra pubblica quando si scorre */
.ui-pub ~ header.top { top: 49px; }
@media (max-width: 700px) { .ui-pub ~ header.top { top: 58px; } }

/* Il vecchio menu in basso è sostituito da .ui-tabbar */
.bottom-nav { display: none !important; }

/* ───────── 4. ADMIN E APP: un solo colore di marca, niente doppioni col menu ───────── */
@media (min-width: 901px) {
    /* Barra scura in alto e pulsanti che ripetono il menu: su computer c'è già la barra laterale */
    body.has-shell header.hdr,
    body.has-shell .only-mobile { display: none !important; }
    body.has-shell main { margin-top: 28px; }
}

body.has-shell { background: #f4f5fb; }
body.has-shell .btn:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-accent) { background: var(--ui-brand); }
body.has-shell .btn:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-accent):hover { background: var(--ui-brand-dark); }
body.has-shell .mcard__open { color: var(--ui-brand-dark); }
body.has-shell .mcard--new { border-color: var(--ui-brand); background: color-mix(in srgb, var(--ui-brand) 6%, #fff); }
body.has-shell .mcard--new a { color: var(--ui-brand-dark); }
body.has-shell .card { border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); border-radius: var(--ui-radius); }

/* Righe di pulsanti scorrevoli (data-ui-scroll): sfumatura sul lato con altro contenuto, frecce su desktop, trascinabili col mouse */
.ui-scroll-wrap { position: relative; min-width: 0; }
.ui-scroll-wrap > [data-ui-scroll] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ui-scroll-wrap > [data-ui-scroll]::-webkit-scrollbar { display: none; }
.ui-scroll-wrap > [data-ui-scroll].is-dragging { cursor: grabbing; user-select: none; }
.ui-scroll-wrap > [data-ui-scroll].is-dragging a { pointer-events: none; }
.ui-scroll-wrap.can-right > [data-ui-scroll] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ui-scroll-wrap.can-left > [data-ui-scroll] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.ui-scroll-wrap.can-left.can-right > [data-ui-scroll] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ui-scroll__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ui-line); background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow); display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; font: 700 1.1rem/1 inherit; }
.ui-scroll__btn--prev { left: 2px; }
.ui-scroll__btn--next { right: 2px; }
.ui-scroll__btn:hover { background: var(--ui-soft); }
@media (hover: hover) and (pointer: fine) {
    .ui-scroll-wrap > [data-ui-scroll] { cursor: grab; }
    .ui-scroll-wrap.can-left .ui-scroll__btn--prev, .ui-scroll-wrap.can-right .ui-scroll__btn--next { display: flex; }
}