/* === SirPix³ Desktop Skin === */ /* ric to { transform:translateY(-10px) scale(1.02); } */ :root { --bg:#0b0b12; --card: #22263a; --card_lighter:#34394e; --muted:#8f97a6; --text:#e9ecf1; --brand:#7c5cff; --brand-2:#00d1ff; --ok:#2ecc71; --warn:#f1c40f; --danger:#ff5e57; --line:rgba(255,255,255,.06); --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35); --container:min(1680px,96vw); --app-header-h:64px; --chip-brand-bg:rgba(124,92,255,.15); --chip-brand-border:rgba(124,92,255,.3); --chip-brand-color:#b8a4ff; --chip-brand-hover:rgba(124,92,255,.25); --chip-info-bg:rgba(0,209,255,.12); --chip-info-border:rgba(0,209,255,.28); --chip-info-color:#7ee2ff; --chip-info-hover:rgba(0,209,255,.22); --chip-danger-bg:rgba(255,94,87,.12); --chip-danger-border:rgba(255,94,87,.28); --chip-danger-color:#fecaca; --chip-danger-hover:rgba(255,94,87,.22); --chip-warning-bg:rgba(255,165,0,.12); --chip-warning-border:rgba(255,165,0,.28); --chip-warning-color:#fdba74; --chip-warning-hover:rgba(255,165,0,.22); --chip-success-bg:rgba(34,197,94,.12); --chip-success-border:rgba(34,197,94,.28); --chip-success-color:#86efac; --chip-success-hover:rgba(34,197,94,.22); --z-modal: 10000; } /* Reset e box-sizing */ * { box-sizing:border-box; } html,body { height:auto; } /* Background generali e gradienti */ body.page::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(closest-side at 85% -20%,rgba(124,92,255,.32),transparent 62%),radial-gradient(closest-side at -6% 0%,rgba(0,209,255,.24),transparent 60%); background-repeat:no-repeat,no-repeat; background-size:165vw 72vh,125vw 56vh; background-position:85% -20%,-6% 0%; } body.page::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 100% at 50% -10%,rgba(0,0,0,0) 60%,rgba(0,0,0,.10) 100%),radial-gradient(120% 100% at 50% 110%,rgba(0,0,0,0) 65%,rgba(0,0,0,.12) 100%); } /* Container e layout generale */ .container { max-width:var(--container); margin:0 auto; padding:0 24px; } .header__inner { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:14px 0; } /* Brand / Logo */ .brand { display:flex; align-items:center; gap:10px; } .brand__logo { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; text-decoration:none; box-shadow:var(--shadow); } .brand__tag { font-size:12px; color:var(--muted); letter-spacing:.4px; } /* Navigazione / Nav */ .nav { display:flex; gap:14px; } .nav__link { text-decoration:none; color:var(--muted); padding:8px 12px; border-radius:10px; transition:180ms; } .nav__link:hover { color:#fff; background:rgba(255,255,255,.06); } .nav__link.is-active { color:#fff; background:rgba(124,92,255,.18); } /* User / avatar / notifiche */ .user { display:flex; align-items:center; gap:8px; } .user__notif { border:none !important; background: none !important; padding:8px 10px; color:var(--text); cursor:pointer; } a.user__avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:#1a1b25; border:1px solid rgba(255,255,255,.08); text-decoration:none; color:inherit; } a.user__avatar:hover, a.user__avatar:focus { border-color:rgba(255,255,255,.25); background:#222330; outline:none; } /* Hero / Titoli */ .hero__inner { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; } .hero__title { font-size:clamp(28px,4vw,40px); margin:0 0 8px; letter-spacing:.2px; } .hero__subtitle { margin:0 0 22px; color:var(--muted); } /* Search / Quick access / Chip */ .search { display:flex; gap:10px; margin-bottom:14px; } .search__input { flex:1; background:#0e0f18; border:1px solid rgba(255,255,255,.1); color:var(--text); padding:14px 14px; border-radius:12px; outline:none; } .search__input::placeholder { color:#6f7687; } .search__btn { min-width:110px; } .quick { display:flex; gap:10px; flex-wrap:wrap; } .chip { display:inline-flex; align-items:center; gap:6px; padding:9px 12px; font-size:14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none; background:linear-gradient(180deg,rgba(124,92,255,.18),rgba(0,0,0,0)); } /* Glow card */ .glow-card__ring { position:absolute; width:160%; height:160%; background:radial-gradient(closest-side,rgba(124,92,255,.35),transparent 55%),radial-gradient(closest-side,rgba(0,209,255,.35),transparent 55%); filter:blur(30px); opacity:.7; animation:float 9s ease-in-out infinite alternate; } .glow-card__content { position:relative; z-index:1; display:grid; gap:6px; place-items:center; font-weight:700; letter-spacing:.3px; } /* KPI / Griglie */ .kpi { background:var(--card); border:1px solid rgba(255,255,255,.3); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .kpis__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .kpi__label { color:var(--muted); font-size:12px; letter-spacing:.4px; margin-bottom:8px; text-transform:uppercase; } .kpi__value { font-size:28px; font-weight:800; } /* Panel */ .panel { background:var(--card); border:1px solid rgba(255,255,255,.3); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .panels__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .panel__head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); } .panel__title { font-size:16px; margin:0; } /* liste */ .list--lines .list__row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); } .list__row:last-child { border-bottom:0; } .list__title { color:#fff; font-weight:600; text-decoration:none; } .list__title:hover { text-decoration:underline; } .list__meta { color:var(--muted); font-size:13px; } /* Pulsanti e link */ .btn--primary { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b0b12; } .btn--secondary { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15); } .btn--secondary:hover { background:rgba(255,255,255,.06); } .btn--ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); } .btn--block { width:100%; } .link { color:#cbd5ff; text-decoration:none; } .link:hover { text-decoration:underline; } /* Footer */ .footer__inner { display:flex; align-items:center; justify-content:space-between; } /* Page header */ .page-head__inner { display:flex; align-items:end; justify-content:space-between; gap:16px; } .page-title { font-size:22px; margin:0; } .page-subtitle { color:var(--muted); font-size:13px; margin-top:4px; } .page-actions { display:flex; gap:10px; } /* Toolbar */ .toolbar { padding:8px 0 8px; border-bottom:1px solid var(--line); } .toolbar__inner { /*display:flex;*/ align-items:center; justify-content:space-between; gap:12px; } .toolbar__search { display:flex; gap:10px; align-items:center; } /* Tabelle */ .table-wrap { padding:14px 0 28px; } .table { border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); overflow:visible; } .table__head { position:sticky; top:var(--app-header-h); z-index:60; background:var(--card_lighter); border-bottom:1px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,.25); } .table__row { display:grid; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); grid-template-columns:var(--cols,1fr); } .table__row--head { font-size:12px; text-transform:uppercase; /*color:var(--muted);*/ letter-spacing:.4px; } .table__body .table__row:hover { background-color:rgba(255,255,255,.04); } .th,.td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .th--check,.td--check { display:grid; place-items:center; } .td--main .td__title { font-weight:600; } .td__meta { color:var(--muted); font-size:12px; margin-top:2px; } .td--actions { text-align:right; } .row-actions .chip { padding:8px 10px; font-size:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); text-decoration:none !important; } .row-actions .mini {height: 30px !important;} /* Card vuote / messaggi */ .empty__card { text-align:center; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); } .empty__title { font-weight:800; font-size:18px; } .empty__subtitle { color:var(--muted); margin:6px 0 14px; } .badge-group { display:flex; gap:6px; flex-wrap:wrap; } /* Autenticazione */ .auth { position:relative; width:100%; max-width:440px; padding:24px; } .auth__card { position:relative; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow); padding:24px 22px; overflow:hidden; } .auth__glow { position:absolute; inset:-20% -30% auto -30%; height:320px; background:radial-gradient(closest-side,rgba(124,92,255,.25),transparent 60%),radial-gradient(closest-side,rgba(0,209,255,.18),transparent 60%); filter:blur(28px); opacity:.7; z-index:-1; animation:float 9s ease-in-out infinite alternate; } .auth__brand { text-align:center; margin-bottom:16px; } .auth__title { font-weight:800; font-size:22px; margin-top:10px; } .auth__subtitle { color:var(--muted); font-size:14px; margin-top:6px; } .auth__actions { margin:16px 0 6px; } .auth__misc { display:flex; justify-content:center; margin-top:8px; } .auth__footer { text-align:center; color:var(--muted); margin-top:12px; font-size:12px; } /* Form fields */ .field { display:grid; gap:6px; margin:12px 0; } .field__label { font-size:13px; color:var(--muted); letter-spacing:.2px; } .field__input { background:#0e0f18; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:12px 12px; border-radius:12px; outline:none; transition:140ms; } .field__input:focus { border-color:rgba(124,92,255,.6); box-shadow:0 0 0 3px rgba(124,92,255,.22); } /* Alert */ .alert { border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:10px; border:1px solid rgba(255,255,255,.12); } .alert--danger { background:rgba(255,94,87,.12); border-color:rgba(255,94,87,.28); color:#fecaca; } .alert--ok { background:rgba(46,204,113,.12); border-color:rgba(46,204,113,.3); color:#bbf7d0; } /* Personalizzazioni viste */ /* Table Customers - Inline e corretto */ .table--customers { width: 100%; } .table--customers .table__head { width: 100%; } .table--customers .th, .table--customers .td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table--customers .td a { color: inherit; text-decoration: none; } .table--customers .td a:hover { text-decoration: underline; } /* Header e body usano la stessa griglia */ .table--customers .table__head .table__row, .table--customers .table__row--head, .table--customers .table__body .table__row { display: grid; grid-template-columns: 1.6fr 1.2fr 70px 90px 330px; /* RS | Indirizzo | P.A. | Contratto | Azioni */ align-items: center; gap: 12px; min-width: 0; } /* Azioni allineate a destra anche nell'header */ .table--customers .th.th--actions, .table--customers .td.td--actions { justify-self: end; } @media (max-width: 1366px) { .table--customers .table__head .table__row, .table--customers .table__row--head, .table--customers .table__body .table__row { grid-template-columns: 1.5fr 1.1fr 60px 80px 280px; gap: 10px; } } /* Celle che devono andare a capo */ .table--customers .td--stack, .table--customers .td--contacts, .table--customers .td--address { white-space: normal; overflow: visible; text-overflow: initial; word-break: break-word; } .table--customers .td--stack .line { display: block; } .table--customers .td--stack .line--muted { color: var(--muted); font-size: 12px; } .table--customers .td--locations .loc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 22ch; vertical-align: middle; } /* Azioni a destra */ .table--customers .td--actions { justify-self: end; white-space: nowrap; } .table--customers .td--actions .row-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; } .table--customers .td--actions .chip { display: inline-flex; } /* Table Expirations */ .table--expirations { --cols: 2fr 1.2fr 1.2fr 1fr .8fr minmax(200px,1fr); } .table--expirations .table__row { grid-template-columns: 2fr 1.5fr 1fr .5fr .5fr 1.5fr; } .table--expirations .th--center { justify-content: center; text-align: center; } .table--expirations .td--center { text-align: center; } .table--expirations .td--nowrap { white-space: nowrap; } /* Table Expirations - Azioni */ .table--expirations .td--actions { white-space: nowrap; } .table--expirations .row-actions { display: flex; flex-wrap: nowrap; gap: 6px; } .table--expirations .row-actions .chip { padding: 4px 8px; font-size: 12px; line-height: 1; white-space: nowrap; } .table--expirations .row-actions .chip.chip--danger { padding: 4px 10px; } /* Table Expirations - Note estese */ .table--expirations .td--notes { grid-column: 1 / -1; background: rgba(255,255,255,.03); padding: 10px 12px; white-space: normal; overflow: visible; text-overflow: initial; } .table--expirations .table__row .td--notes:first-of-type { border-top-left-radius: 8px; border-top-right-radius: 8px; } .table--expirations .table__row .td--notes:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Table Reports */ .table--reports .table__row,.table--reports .table__row--head { display:grid; align-items:center; gap:12px; grid-template-columns:1.1fr 1.2fr 1.2fr 1fr .9fr .9fr .9fr 1.1fr .9fr 1fr 1fr .9fr .9fr 1fr minmax(118px,.7fr); } .table--reports .td--time { line-height:1.15; } .table--reports .th--wrap { white-space:nowrap; } .table--reports { font-size:14px; } @media (max-width:799px) { .table--reports .table__row,.table--reports .table__row--head { grid-template-columns:1.2fr 1fr 1fr 1fr minmax(118px,.7fr); } .table--reports .th,.table--reports .td { min-width:0; white-space:nowrap; } .table--reports .th:nth-child(n+5):not(:last-child),.table--reports .td:nth-child(n+5):not(:last-child) { display:none; } .table.table--list.table--reports .table__row--head,.table.table--list.table--reports .table__body .table__row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr minmax(118px,.7fr) !important; gap:10px; } } @media (max-width:1279px) { .table--reports .table__row,.table--reports .table__row--head { grid-template-columns:1.1fr 1.2fr 1.2fr 1fr .9fr .9fr .9fr 1.1fr 1fr minmax(118px,.7fr); } .table--reports .th,.table--reports .td { min-width:0; white-space:nowrap; } .table--reports .th:nth-child(n+9):not(:last-child),.table--reports .td:nth-child(n+9):not(:last-child) { display:none; } } @media (max-width:1279px) and (min-width:800px) { .table--reports .th,.table--reports .td { min-width:0; white-space:nowrap; } .table.table--list.table--reports .table__row--head,.table.table--list.table--reports .table__body .table__row { display:grid; grid-template-columns:1.1fr 1.2fr 1.2fr 1fr .9fr .9fr .9fr 1.1fr 1fr minmax(118px,.7fr) !important; gap:12px; } } @media (min-width:1280px) { .table--reports .th,.table--reports .td { min-width:0; white-space:nowrap; } .table--reports .td--time>div { white-space:nowrap; } .table.table--list.table--reports .table__head { overflow:hidden; } .table.table--list.table--reports .table__row--head,.table.table--list.table--reports .table__body .table__row { display:grid; grid-template-columns:1.1fr 1.2fr 1.2fr 1fr .9fr .9fr .9fr 1.1fr .9fr 1fr 1fr .9fr .9fr 1fr minmax(118px,.7fr) !important; align-items:center; gap:12px; } } .row--warn { background:rgba(241,196,15,.15); } .table__row--highlight { background:rgba(77,187,220,.15); } .tile { display:flex; align-items:center; gap:12px; padding:20px; border-radius:var(--radius); background:var(--card); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform .18s ease,box-shadow .18s ease; } .tile:hover { transform:translateY(-2px) rotate(-.5deg); box-shadow:0 14px 44px rgba(0,0,0,.45); } .tile__icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(124,92,255,.16); } .tile__title { font-weight:700; } .tile__sub { color:var(--muted); font-size:13px; } .sheet { border:1px solid rgba(255,255,255,.08); background:var(--card); border-radius:16px; padding:16px; } .sheet-tabs { display:flex; gap:8px; flex-wrap:wrap; } .sheet-tab { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--text); padding:8px 12px; border-radius:12px; font-size:13px; } .sheet-tab.is-active { background:rgba(124,92,255,.18); } .sheet__title { font-size:14px; color:var(--muted); margin-bottom:8px; } .table--list .td--actions .row-actions { display:flex; gap:8px; flex-wrap:wrap; } .td--actions .row-actions { display:flex; gap:8px; flex-wrap:wrap; } .table--list .table__row,.table--list .table__row--head { display:grid; grid-template-columns:var(--cols,1.4fr 1fr .9fr .6fr .6fr minmax(180px,.9fr)); align-items:center; gap:12px; } .table--list .td--main { min-width:0; } .table--list .td__title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .table--list .td__meta { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .table--list .td a,.table--list .th a { color:inherit; text-decoration:none; } .table--list .td a:hover { text-decoration:underline; } .table--list .th--actions,.table--list .td--actions { justify-self:end; min-width:200px; } .table--contracts .td__sedi { white-space:normal; overflow:visible; text-overflow:initial; } .table--contracts .td--protocol .td__title { white-space: normal; } .table--tasks .td:nth-child(2),.table--tasks .td:nth-child(3),.table--tasks .th:nth-child(2),.table--tasks .th:nth-child(3) { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .table--tasks .td--client-title { display:flex; flex-direction:column; gap:2px; } .table--tasks .td--client-title .td__client { font-weight:600; line-height:1.15; } .table--tasks .td--client-title .td__title { font-size:14px; opacity:.9; line-height:1.25; } .table--tasks .td--state { white-space:nowrap; } .table--tasks .td--approved { white-space:nowrap; text-align:center; } .table--tasks .row-actions { display:flex; flex-wrap:wrap; gap:6px; } .table--mikrotik-devices .table__row,.table--mikrotik-devices .table__row--head { grid-template-columns:1.5fr .9fr 1fr minmax(200px,1fr); } .table--mikrotik-commands .td__meta,.table--mikrotik-devices .td:nth-child(2) { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .items-actions .btn { padding:12px 20px; border-radius:12px; } .list--props .prop__label { font-weight:600; color:var(--muted); } .list--props .prop__value { color:var(--text); } .toolbar--actions .toolbar__actions-row { width:100%; } .toolbar__clock-buttons .toolbar__btn { width:100%; padding:18px 0; font-size:16px; font-weight:700; text-align:center; border-radius:14px; } .toolbar__clock-buttons .toolbar__btn:nth-child(1) { background:linear-gradient(135deg,#27d17d,#86efac); color:#0b0b12; } .toolbar__clock-buttons .toolbar__btn:nth-child(2) { background:linear-gradient(135deg,#0bb3d4,#7de3ff); color:#0b0b12; } .toolbar__clock-buttons .toolbar__btn:nth-child(3) { background:linear-gradient(135deg,#7c5cff,#9da2ff); color:#0b0b12; } .toolbar__clock-buttons .toolbar__btn:nth-child(4) { background:linear-gradient(135deg,#3b82f6,#67e8f9); color:#0b0b12; } .toolbar__clock-buttons .toolbar__btn:hover { filter:brightness(1.03); transform:translateY(-1px); transition:filter .15s ease,transform .15s ease; } .flag--open { background:rgba(56,189,248,.14); color:rgb(56,189,248); } .flag--in-progress { background:rgba(250,204,21,.14); color:rgb(250,204,21); } .flag--pending { background:rgba(163,163,163,.14); color:rgb(163,163,163); } .flag--closed,.flag--done,.flag--close { background:rgba(34,197,94,.14); color:rgb(34,197,94); } .flag--blocked { background:rgba(244,63,94,.14); color:rgb(244,63,94); } .flag--active { background:rgba(34,197,94,.14); color:rgb(34,197,94); } .flag--archived { background:rgba(163,163,163,.14); color:rgb(163,163,163); } .table--interventions .td--ivhead .td__ivnum { font-size:12px; opacity:.8; letter-spacing:.2px; } .table--interventions .td--ivhead .td__client { font-weight:600; line-height:1.2; } .table--interventions .td--nowrap { white-space:nowrap; } .table--interventions .row-actions { display:flex; flex-wrap:wrap; gap:6px; } .table--commands .cmd { display:block; max-height:3.6em; overflow:hidden; position:relative; } .table--commands .cmd--truncated::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:1.2em; background:linear-gradient(to bottom,rgba(24,24,27,0),rgba(24,24,27,1)); } .table--commands .cmd__hint { font-size:11px; color:var(--muted); margin-top:2px; } .table--mikrotik-devices .td--client-sede .td__client { font-weight:600; line-height:1.2; } .table--mikrotik-devices .td--client-sede .td__sede { font-size:12px; opacity:.85; } .table--mikrotik-devices .td--ip { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:nowrap; } .table--mikrotik-devices .row-actions { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; justify-content:flex-start; } .table--mikrotik-devices .td--actions { white-space:nowrap; } .table--interventions .td--notes + .td--notes { border-top:1px solid var(--line); padding-top:8px; } .table--interventions .table__row .td--notes:first-of-type { border-top-left-radius:8px; border-top-right-radius:8px; } .table--interventions .table__row .td--notes:last-child { border-bottom-left-radius:8px; border-bottom-right-radius:8px; } .table--interventions .td--notes .notes-label { font-weight:600; margin-right:8px; color:var(--muted); } .table--tasks .table__row .td--desc:first-of-type { border-top-left-radius: 8px; border-top-right-radius: 8px; } .table--tasks .table__row .td--desc:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Base */ body.page { margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; color:var(--text); isolation:isolate; min-height:100%; overflow-x:hidden; background-image:linear-gradient(180deg,#0a0a10 0%,#111323 38%,#0b0b12 100%); background-repeat:no-repeat; background-size:cover; background-position:center top; background-color:#0b0b12; } /* Header */ .site-header { position:sticky; top:0; z-index:2000; backdrop-filter:blur(10px); background:rgba(11,11,18,.5); border-bottom:1px solid var(--line); } /* Hero */ .hero { padding:44px 0 10px; } /* Glow visual */ .glow-card { position:relative; height:180px; border-radius:var(--radius); background:linear-gradient(145deg,rgba(124,92,255,.12),rgba(0,209,255,.12)); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); display:grid; place-items:center; overflow:hidden; } /* KPI */ .kpis { padding:14px 0 6px; } /* Panels */ .panels { padding:10px 0 42px; } /* Lists */ .list { margin:0; padding:0; list-style:none; } /* Badges */ .badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); font-size:12px; } /* Buttons & Links */ .btn { appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; } /* Footer */ .site-footer { border-top:1px solid var(--line); padding:16px 0 26px; color:var(--muted); } /* Lists & Tables (base) */ .page-head { padding:14px 0 8px; } /* Chips / row actions */ .row-actions { display:inline-flex; gap:8px; flex-wrap:wrap; align-items:center; } /* Empty state */ .empty { display:grid; place-items:center; padding:40px 0; } /* Users table extra */ .table--users .table__row { grid-template-columns:1.3fr 1.6fr 1.1fr .9fr 1.1fr 1fr; } /* Auth */ .auth-page { display:grid; min-height:100vh; place-items:center; } .badge.badge--brand, .chip.chip--brand { background:var(--chip-brand-bg) !important; border-color:var(--chip-brand-border) !important; color:var(--chip-brand-color) !important; } .badge.badge--brand:hover, .chip.chip--brand:hover { background:var(--chip-brand-hover) !important; } .badge.badge--info, .chip.chip--info { background:var(--chip-info-bg) !important; border-color:var(--chip-info-border) !important; color:var(--chip-info-color) !important; } .badge.badge--info:hover, .chip.chip--info:hover { background:var(--chip-info-hover) !important; } .badge.badge--danger, .chip.chip--danger { background:var(--chip-danger-bg) !important; border-color:var(--chip-danger-border) !important; color:var(--chip-danger-color) !important; } .badge.badge--danger:hover, .chip.chip--danger:hover { background:var(--chip-danger-hover) !important; } .badge.badge--warning, .chip.chip--warning { background:var(--chip-warning-bg) !important; border-color:var(--chip-warning-border) !important; color:var(--chip-warning-color) !important; } .badge.badge--warning:hover, .chip.chip--warning:hover { background:var(--chip-warning-hover) !important; } .badge.badge--success, .chip.chip--success { background:var(--chip-success-bg) !important; border-color:var(--chip-success-border) !important; color:var(--chip-success-color) !important; } .badge.badge--success:hover, .chip.chip--success:hover { background:var(--chip-success-hover) !important; } /* toglie il sottolineato dai badge */ a.badge, a.badge:hover, a.badge:focus { text-decoration: none; } /* Row highlights */ .row--ok { background:rgba(46,204,113,.15); } /* Toolbar utils */ .toolbar__actions-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; } /* Hub tiles */ .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; } /* Sheets (Assets) */ .sheets { display:grid; gap:16px; } /* Tables — list */ .table--list .th,.table--list .td { padding:12px 10px; } /* Contracts */ .table--contracts .table__row,.table--contracts .table__row--head { grid-template-columns:1.8fr 1.2fr .8fr .6fr .8fr .7fr minmax(200px,.9fr); } /* Contracts — Protocol column wrap */ .table--contracts .td--protocol { white-space: normal; overflow: visible; text-overflow: initial; word-break: break-word; } /* Tasks */ .table--tasks .table__row,.table--tasks .table__row--head { grid-template-columns:2.4fr 0.9fr 0.55fr 0.55fr 0.8fr minmax(260px,1fr); } /* Mikrotik */ .table--mikrotik-commands .table__row,.table--mikrotik-commands .table__row--head { grid-template-columns:1.2fr 1fr minmax(200px,1fr); } /* Items actions */ .items-actions { display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; } /* Props list */ .list--props .list__row { grid-template-columns:200px 1fr; } /* Clock buttons */ .toolbar--actions .toolbar__form { width:100%; } /* Toolbar clock buttons: unified layout */ .toolbar__clock-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; } /* Flags (unificato) */ .flag { display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:28px; padding:0 8px; border-radius:14px; font-size:12px; font-weight:700; letter-spacing:.3px; } /* Interventions index */ .table--interventions .td--ivhead { display:flex; flex-direction:column; gap:2px; } /* Commands code */ .table--commands .td--cmd { position:relative; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:13px; line-height:1.2; white-space:normal; } /* Mikrotik devices layout */ .table--mikrotik-devices .td--client-sede { display:flex; flex-direction:column; gap:2px; } /* Interventions notes */ .table--interventions .td--notes { grid-column:1 / -1; background:rgba(255,255,255,.03); padding:10px 12px; white-space:normal; overflow:visible; text-overflow:initial; } /* Tasks — riga descrizione estesa */ .table--tasks .td--desc { grid-column: 1 / -1; background: rgba(255,255,255,.03); padding: 10px 12px; white-space: normal; overflow: visible; text-overflow: initial; } /* Etichetta riutilizzabile (già usata negli interventions) */ .notes-label { font-weight: 600; margin-right: 8px; color: var(--muted); } @media (max-width:640px) { .header__inner { grid-template-columns:1fr auto; } .nav { display:none; } .table--users .table__row { grid-template-columns:1fr 1fr; } .kpis__grid,.panels__grid { grid-template-columns:1fr; } .table--users .th:nth-child(3),.table--users .td:nth-child(3),.table--users .th:nth-child(4),.table--users .td:nth-child(4),.table--users .th:nth-child(5),.table--users .td:nth-child(5),.table--users .th:nth-child(6),.table--users .td:nth-child(6) { display:none; } .table--expirations .table__row { grid-template-columns:1fr 1fr; } .table--expirations .th:nth-child(2),.table--expirations .td:nth-child(2),.table--expirations .th:nth-child(3),.table--expirations .td:nth-child(3),.table--expirations .th:nth-child(4),.table--expirations .td:nth-child(4),.table--expirations .th:nth-child(5),.table--expirations .td:nth-child(5),.table--expirations .th:nth-child(6),.table--expirations .td:nth-child(6) { display:none; } .table--locations .table__row,.table--locations .table__row--head { grid-template-columns:1fr .9fr; } .table--locations .th:nth-child(3),.table--locations .td:nth-child(3),.table--locations .th:nth-child(4),.table--locations .td:nth-child(4) { display:none; } .items-actions { flex-direction:column; align-items:flex-start; gap:10px; } .list--props .table__row,.list--props .list__row { grid-template-columns:1fr; } .toolbar__clock-buttons { display:flex; flex-wrap:wrap; gap:8px; } } @media (max-width:768px) { body.page::before { background-size:145vw 62vh,120vw 48vh; opacity:.95; } body.page::after { opacity:.9; } } @media (max-width:800px) { .toolbar__inner { flex-direction:column; align-items:stretch; } .toolbar__search { width:100%; } .td__meta { display:none; } .table--users .table__row { grid-template-columns:1fr 1.2fr .9fr .9fr; } .table--users .th:nth-child(5),.table--users .td:nth-child(5),.table--users .th:nth-child(6),.table--users .td:nth-child(6) { display:none; } .table--expirations .table__row { grid-template-columns:1.8fr 1.5fr 1fr .7fr; } .table--expirations .th:nth-child(4),.table--expirations .td:nth-child(4),.table--expirations .th:nth-child(5),.table--expirations .td:nth-child(5),.table--expirations .th:nth-child(6),.table--expirations .td:nth-child(6) { display:none; } .table--locations .table__row,.table--locations .table__row--head { grid-template-columns:1.6fr 1.4fr .8fr; } .table--locations .th:nth-child(4),.table--locations .td:nth-child(4) { display:none; } .toolbar__clock-buttons { grid-template-columns:repeat(2,1fr); } } @media (max-width:900px) { .table--tasks { --cols:2fr 1.3fr .8fr minmax(200px,1fr); } .table--tasks .th:nth-child(6),.table--tasks .td:nth-child(6) { display:none; } } @media (max-width:1000px) { .kpis__grid,.panels__grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:1100px) { .hero__inner { grid-template-columns:1fr; } .table--expirations .table__row { grid-template-columns:1.8fr 1.5fr 1fr .8fr .8fr .6fr; } .table--tasks { --cols:1.9fr 1.2fr .7fr .6fr minmax(200px,1fr); } .table--tasks .th:nth-child(3),.table--tasks .td:nth-child(3) { display:none; } .table--mikrotik-devices .table__row,.table--mikrotik-devices .table__row--head { grid-template-columns:1.6fr 1fr minmax(200px,1fr); } .table--mikrotik-devices .th:nth-child(3),.table--mikrotik-devices .td:nth-child(3) { display:none; } .table--locations .table__row,.table--locations .table__row--head { grid-template-columns:1.8fr 1.6fr .9fr .7fr; } } @media (max-width:1280px) { .table--customers .td--locations .loc-name { max-width:18ch; } .table--list .table__row,.table--list .table__row--head { grid-template-columns:var(--cols,1.6fr 1fr .9fr .6fr .5fr minmax(160px,.8fr)); } } @media (max-width:1500px) { .kpis__grid,.panels__grid { grid-template-columns:repeat(3,1fr); } } /* === Buttons (base) === */ .btn { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; line-height:1; font-weight:600; text-decoration:none; border:0; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; box-shadow:var(--shadow); } .btn:active { transform:translateY(1px) scale(.98); } .btn[disabled], .btn.is-disabled { opacity:.6; pointer-events:none; filter:grayscale(.2); } /* === Forms === */ .form { border:1px solid rgba(255,255,255,.08); background:var(--card); border-radius:16px; padding:16px; box-shadow:var(--shadow); margin:16px auto 28px; } .form__grid { display:grid; grid-template-columns:1fr; gap:12px; } .form__grid.form__grid--2 { grid-template-columns:1fr; } @media (min-width:900px){ .form__grid { grid-template-columns:repeat(2,1fr); } .form__grid.form__grid--2 { grid-template-columns:repeat(2,1fr); } } .form__row { display:flex; flex-direction:column; gap:6px; } .form__row--full { grid-column:1/-1; } .form__label { font-size:13px; color:var(--muted); } .form__control { width:100%; background:#0e0f18; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:12px 12px; border-radius:12px; outline:none; -webkit-appearance:none; appearance:none; } .form__control::placeholder { color:#6f7687; } .form__control:focus { border-color:rgba(124,92,255,.6); box-shadow:0 0 0 3px rgba(124,92,255,.15); } textarea.form__control { min-height:100px; resize:vertical; } select.form__control { padding-right:36px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; } .form__check { display:inline-flex; align-items:center; gap:8px; } .form__check-input { width:18px; height:18px; accent-color:var(--brand); } .form__check-label { font-size:14px; } .form-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line); } /* === Forms: errori === */ .form__errors { border:1px solid rgba(255,94,87,.25); background:rgba(255,94,87,.08); color:#fff; border-radius:12px; padding:12px; margin-bottom:10px; } .form__errors-title { margin:0 0 6px; font-size:14px; } .form__errors-list { margin:0; padding-left:18px; } .form__errors-item { margin:4px 0; } /* === Toolbar Filters (select, input allineati) === */ .toolbar__filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .search__select { height:42px; padding:0 36px 0 12px; border-radius:12px; background:#0e0f18; border:1px solid rgba(255,255,255,.12); color:var(--text); outline:none; -webkit-appearance:none; appearance:none; line-height:42px; } .search__select:focus { border-color:rgba(124,92,255,.6); box-shadow:0 0 0 3px rgba(124,92,255,.15); } .search__select::placeholder { color:#6f7687; } .search__select { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; } /*.search__input { height:42px; }*/ @media (max-width:800px){ .toolbar__filters { width:100%; } .search__select { flex:1 1 220px; } } /* === Forms: readonly appearance === */ .form__control.is-readonly { opacity:.75; pointer-events:none; } /* === Form Sections (layout full width) === */ .form__section { margin:16px 0; } .form__section--full { width:100%; } /* === Form Sections (disabled look) === */ .form__section--disabled { position:relative; border:1px dashed rgba(255,255,255,.18); background:linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03)); border-radius:12px; padding:12px; } .form__section--disabled .form__section-title { opacity:.7; } .form__section--disabled .form__control { opacity:.65; pointer-events:none; } .form__section--disabled .form__check-input { pointer-events:none; } /* === Form Sections: larghezza piena === */ .form__section--full { width:100%; max-width:100%; grid-column:1/-1; flex:0 0 100%; } /* === Form Grid: base === */ .form__grid { display:grid; gap:12px; grid-template-columns:1fr; } /* === Form Grid: varianti colonne === */ .form__grid.form__grid--2 { grid-template-columns:repeat(2,1fr); } .form__grid.form__grid--3 { grid-template-columns:repeat(3,1fr); } .form__grid.form__grid--4 { grid-template-columns:repeat(4,1fr); } /* === Form Grid: responsive collapse === */ @media (max-width:900px){ .form__grid.form__grid--2 { grid-template-columns:1fr; } .form__grid.form__grid--3 { grid-template-columns:1fr; } .form__grid.form__grid--4 { grid-template-columns:1fr; } } /* === Form: spazio verticale tra righe === */ .form__row + .form__grid { margin-top:12px; } .form__grid + .form__grid { margin-top:12px; } .form__grid + .form__row { margin-top:12px; } /* === Form: multiselect look === */ .form__control.form__control--multiselect { min-height:84px; padding-top:8px; padding-bottom:8px; background-image:none; } .form__control.form__control--multiselect option { padding:4px 6px; } /* === Forms: allinea altezza Cliente ↔ Sedi === */ .form__control--tall { height:110px; padding-top:8px; padding-bottom:8px; } /* select Cliente: mantiene la freccia */ .form__control--multiselect { height:110px; padding-top:8px; padding-bottom:8px; background-image:none; } .form__control--multiselect option { padding:4px 6px; } /* === Form: hint testuale sotto ai campi === */ .form__hint { margin-top:6px; font-size:12px; color:var(--muted); } /* === Date Inputs (UX: tutta la input cliccabile) === */ input[type="date"].form__control { cursor:pointer; } input[type="datetime-local"].form__control { cursor:pointer; } .table--items { --cols:2fr 1.2fr 1fr .8fr .8fr minmax(200px,1fr); } .table--interventions { --cols:2fr 1.2fr 1.2fr 1fr .8fr minmax(220px,1fr); } /* == Utility locali == */ .u-gap-6 { gap:6px; } .u-gap-8 { gap:8px; } .u-w-240 { width:240px; } .u-w-320 { width:320px; } .u-maxw-600 { max-width:600px; } /* === Finder / Pills === */ .finder{display:block;max-width:920px;margin:0 auto;} .finder__label{display:block;font-weight:600;margin:0 0 6px 0;} .finder__input{display:block;width:100%;padding:10px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;outline:none;} .pill-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:12px 0 0 0;} .pill{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:var(--card,#fff);cursor:pointer;user-select:none;} .pill:hover{box-shadow:0 1px 0 rgba(0,0,0,0.04),0 0 0 3px rgba(0,0,0,0.03) inset;} .pill--active{border-color:var(--brand,#7c3aed);box-shadow:0 0 0 2px rgba(124,58,237,0.25) inset;} .pill__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 8px 0 0;} .pill__meta{opacity:.7;font-size:.92em;} .pill-list__empty{padding:10px 0;color:#666;} .u-mt-24{margin-top:24px;} .u-ta-right{text-align:right;} /* === Tabella Items === */ .table-box{border:1px solid var(--line,#e5e7eb);border-radius:12px;overflow:hidden;background:var(--card,#fff);} .table{width:100%;border-collapse:separate;border-spacing:0;} .table__th{font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line,#e5e7eb);background:var(--bg-soft,#fafafa);} .table__td{padding:10px 12px;border-bottom:1px solid var(--line,#e5e7eb);} .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:var(--card,#fff);cursor:pointer;text-decoration:none;} .btn:hover{box-shadow:0 1px 0 rgba(0,0,0,0.05);} /* === Modal (dark, high-contrast, scoped) ================================ */ /* Dialog / backdrop */ /* Card */ /* ric border:1px solid #242938; border-radius:16px; background:#0f1220; color:#e5e7eb; box-shadow:0 20px 50px rgba(0,0,0,.45); */ /* ric padding:16px; } */ /* Header */ /* ric border:1px solid #2a3146; border-radius:9999px; background:#14182a; color:#cbd5e1; cursor:pointer; } */ /* Meta (badge) */ /* ric border:1px solid #2a3146; border-radius:9999px; background:rgba(124,58,237,.14); color:#d6bcff; } */ /* Body & grid proprietà */ /* Footer & buttons */ /* ric border:1px solid #2a3146; border-radius:10px; background:#161a2b; color:#e5e7eb; cursor:pointer; text-decoration:none; } */ /* Responsive */ /* Sezioni finder */ .finder { margin:20px 0; } .finder__label { font-weight:600; margin:0 0 6px; display:block; color:#e5e7eb; } .finder__input { width:100%; padding:10px 14px; border:1px solid #2a3146; border-radius:10px; background:#0f1220; color:#fff; } /* Tabella migliorata */ .table--clickable .table__td { cursor:pointer; } .table--clickable tbody tr:hover { background:#1a2036; } .table--clickable tbody tr { transition:background .15s; } .table thead { background:#161a2b; } .table__th { font-weight:600; color:#cbd5e1; } /* Pillole */ .pill { display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; background:#161a2b; border:1px solid #2a3146; border-radius:10px; padding:10px 14px; margin:4px 6px 0 0; cursor:pointer; min-width:140px; } .pill:hover { border-color:#7c3aed; box-shadow:0 0 0 1px rgba(124,58,237,.4); } .pill--active { border-color:#7c3aed; background:rgba(124,58,237,.12); } .pill__title { font-weight:600; margin-bottom:4px; color:#e5e7eb; } .pill__meta { font-size:13px; color:#9ca3af; } /* Toolbar compatta sopra tabella */ .assets-toolbar { display:flex; gap:24px; align-items:flex-start; margin:8px 0 6px; } .assets-toolbar .toolbar-col { flex:1; min-width:260px; } .toolbar-input { margin-bottom:8px; } /* Chips (pillole larghe, senza conteggi) */ .chips { display:flex; flex-wrap:wrap; gap:10px; } .chips__empty { color:#9ca3af; padding:4px 0; } .chip { display:inline-flex; align-items:center; max-width:100%; height:48px; padding:10px 14px; border:1px solid #2a3146; border-radius:14px; background:#161a2b; color:#e5e7eb; cursor:pointer; } .chip:hover { border-color:#7c3aed; box-shadow:0 0 0 1px rgba(124,58,237,.35); } .chip.is-active { border-color:#7c3aed; background:rgba(124,58,237,.12); } /* Label con clamp a 2 righe (nomi lunghi) */ .chip__label { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.1; font-size:14px; font-weight:600; max-width:420px; } /* Tabella – riga cliccabile + hover */ .table--clickable .table__td { cursor:pointer; } .table--clickable tbody tr:hover { background:#1a2036; transition:background .15s; } /* Responsive: stack toolbar su schermi stretti */ @media (max-width:980px){ .assets-toolbar { flex-direction:column; gap:12px; } } /* ==== Assets Management overrides (scoped) ================================= */ /* Box e tabella dark (override del blocco "Tabella Items" light) */ .container[data-controller="assets-picker"] .table-box{ border-color:#242938; background:#0f1220; } .container[data-controller="assets-picker"] .table{ color:#e5e7eb; } /* Header dark – serve battere l'impostazione light di .table__th */ .container[data-controller="assets-picker"] .table thead .table__th{ background:#161a2b !important; /* annulla var(--bg-soft,#fafafa) */ color:#cbd5e1; font-weight:600; padding:10px 12px; border-bottom:1px solid #242938; } /* Celle body/border */ .container[data-controller="assets-picker"] .table tbody .table__td{ border-bottom:1px solid #242938; color:#e5e7eb; } /* Zebra solo qui */ .container[data-controller="assets-picker"] .table tbody tr:nth-child(even){ background:#111627; } .container[data-controller="assets-picker"] .table tbody tr:nth-child(odd) { background:#0f1220; } /* Hover riga cliccabile */ .container[data-controller="assets-picker"] .table--clickable tbody tr:hover{ background:#1a2036; } /* ==== Modal: contenuti lunghi che uscivano ================================= */ /* consenti alla colonna dei valori di stringere e andare correttamente a capo */ /* ric grid-template-columns:260px minmax(0,1fr); */ /* ric } */ /* ric min-width:0; /* fondamentale in grid */ /* ric overflow-wrap:anywhere; /* spezza anche parole lunghe (email/URL/pass) */ /* ric word-break:break-word; /* fallback */ /* ric white-space:pre-wrap; /* rispetta \n */ /* ric } */ /* mobile */ @media (max-width:640px){ } /* === Bottoni primari (tema brand) === */ .btn--primary { border-color:#2563eb; background:#2563eb; color:#ffffff; } .btn--primary:hover { background:#1e4ed8; border-color:#1e4ed8; } /* ========== ASSETS MANAGEMENT (SCOPED, STANDARD) ========== */ .container[data-controller="assets-picker"] .u-mb-16 { margin-bottom:16px; } .container[data-controller="assets-picker"] .box { background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; } .container[data-controller="assets-picker"] .box--search { margin-bottom:16px; } .container[data-controller="assets-picker"] .box__title { display:flex; align-items:center; justify-content:space-between; font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); } .container[data-controller="assets-picker"] .box__content { padding:12px 14px; } .container[data-controller="assets-picker"] .search-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .container[data-controller="assets-picker"] .search-grid__field { display:flex; flex-direction:column; gap:8px; } .container[data-controller="assets-picker"] .results-grid { display:grid; grid-template-columns:1fr 2fr; gap:16px; align-items:start; } .container[data-controller="assets-picker"] .results-col { min-height:320px; } .container[data-controller="assets-picker"] table { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0; } .container[data-controller="assets-picker"] th { text-align:left; font-size:13px; opacity:.7; padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } .container[data-controller="assets-picker"] td { padding:10px; border-bottom:1px solid rgba(255,255,255,.04); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } .container[data-controller="assets-picker"] .table--nowrap th { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .container[data-controller="assets-picker"] .table--nowrap td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .container[data-controller="assets-picker"] .table__th--actions { width:160px; text-align:right !important; } .container[data-controller="assets-picker"] .table__td--actions { text-align:right !important; } .container[data-controller="assets-picker"] .table__td--truncate { max-width:0; } .container[data-controller="assets-picker"] .table__row { cursor:pointer; } .container[data-controller="assets-picker"] .table__row:hover { background:rgba(255,255,255,.03); } .container[data-controller="assets-picker"] .table__row.is-active { background:rgba(124,92,255,.14); } .container[data-controller="assets-picker"] .chips { display:flex; flex-wrap:wrap; gap:8px; min-height:36px; } .container[data-controller="assets-picker"] .chips__empty { opacity:.6; font-size:13px; padding:6px 0; } .container[data-controller="assets-picker"] .chip { padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:transparent; color:inherit; } .container[data-controller="assets-picker"] .chip.is-active { background:rgba(95,158,255,.18); border-color:rgba(95,158,255,.35); } .container[data-controller="assets-picker"] .inline-input { width:100%; height:36px; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:var(--card); color:var(--text); line-height:22px; } .container[data-controller="assets-picker"] .inline-name { display:inline; } .container[data-controller="assets-picker"] .inline-value { display:inline; } .container[data-controller="assets-picker"] .hidden { display:none; } .container[data-controller="assets-picker"] .row-actions { display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; } .container[data-controller="assets-picker"] .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); font-weight:700; } .container[data-controller="assets-picker"] .icon-btn:hover { background:rgba(255,255,255,.12); } .container[data-controller="assets-picker"] .icon-btn.danger { background:rgba(255,80,80,.12); border-color:rgba(255,80,80,.35); } .container[data-controller="assets-picker"] .icon-btn.success { background:rgba(80,200,120,.12); border-color:rgba(80,200,120,.35); } .container[data-controller="assets-picker"] .icon { width:16px; height:16px; fill:currentColor; } .container[data-controller="assets-picker"] .btn--sm { padding:4px 10px; border-radius:10px; } .container[data-controller="assets-picker"] .btn--primary-ghost { background:transparent; border:1px solid rgba(95,158,255,.5); } .container[data-controller="assets-picker"] .btn--primary-ghost:hover { background:rgba(95,158,255,.12); } .container[data-controller="assets-picker"] .is-hidden { display:none !important; } .container[data-controller="assets-picker"] .items-table col.col-actions { width:160px; } @media (max-width:1100px){ .container[data-controller="assets-picker"] .results-grid { grid-template-columns:1fr; } } /* === Assets Management ▸ fix tabelle solo qui ============================= */ /* 1) neutralizza il display:grid globale sulle righe tabella */ .container[data-controller="assets-picker"] .table__row { display:table-row !important; grid-template-columns:unset !important; gap:0 !important; } /* 2) Items: layout corretto e colonne */ .container[data-controller="assets-picker"] .items-table { table-layout:auto; } .container[data-controller="assets-picker"] .items-table col.col-name { width:auto; } .container[data-controller="assets-picker"] .items-table col.col-actions { width:160px; } /* 3) Celle: nome con ellissi, azioni a destra senza a capo */ .container[data-controller="assets-picker"] .items-table tbody td:first-child { max-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .container[data-controller="assets-picker"] .items-table thead th:last-child, .container[data-controller="assets-picker"] .items-table tbody td:last-child { width:auto; text-align:left; white-space:nowrap; } /* 4) Hover riga solo su tabelle cliccabili */ .container[data-controller="assets-picker"] .items-table.table--clickable tbody tr:hover { background:#1a2036; transition:background .15s; } /* 5) (opzionale) stessa neutralizzazione per la tabella Properties */ .container[data-controller="assets-picker"] .props-table .table__row { display:table-row !important; grid-template-columns:unset !important; gap:0 !important; } /* -- ASSETS MANAGEMENT: Items drag state -- */ .items-table .table__th--drag { width:28px; text-align:center; } .items-table .table__td--drag { width:28px; } .items-table .drag-handle { cursor:grab; user-select:none; display:inline-block; opacity:.85; -webkit-user-drag: element; pointer-events:auto; } .items-table .is-dragging { opacity:.5; } /* ===== Modal z-index fix (sempre sopra header, sidebar, sticky, ecc.) ===== */ .modal__dialog { position:relative; z-index:1; } .modal__backdrop { position:fixed; inset:0; z-index:0; } .is-modal-open, .is-modal-open body { overflow:hidden; } /* riga placeholder più “leggera” */ .contacts-table #contact_row_new .td { opacity: .6; } /* ===== Contacts in modal: ultra-compact, full-width ===== */ .contacts-table .table { width: 100%; } .contacts-table .th.th--actions, .contacts-table .td.td--actions { justify-self: end; /* azioni a destra */ } /* niente sticky/overlay sull'header della tabella */ .contacts-table .table__head { position: static !important; z-index: auto !important; } /* separatore leggero tra righe */ .table--compact .table__row + .table__row { border-top: 1px solid rgba(255,255,255,.06); } /* placeholder riga nuova più discreto */ #contact_row_new .td { opacity: .6; } /* ===== Inline row edit (contacts) ======================================= */ /* Il form non deve introdurre box/padding/ombre */ .form--inline { background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; width: 100%; } /* dove supportato, togliamo proprio il box del form e lasciamo solo le celle */ @supports (display: contents) { .form--inline { display: contents; } } /* Righe e celle super-compact (stessa altezza di visualizzazione) */ :root { --row-h: 34px; } /* alza/abbassa se vuoi */ .table--compact .table__row { min-height: var(--row-h); } .table--compact .th, .table--compact .td { padding: 4px 8px; font-size: 12.5px; line-height: 1.15; } /* Input che “stanno” dentro la cella senza aumentare altezza */ .form__control--inline { height: var(--row-h); padding: 0 8px; font-size: 12.5px; line-height: var(--row-h); width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; box-shadow: none; } /* Bottoni azione compatti come le chip */ .chip--inline { height: var(--row-h); line-height: calc(var(--row-h) - 2px); padding: 0 10px; font-size: 12.5px; border-radius: 10px; } /* Errori sottili sotto la riga, non influiscono sull’altezza della riga stessa */ .form__errors--inline { margin: 4px 8px 0; color: #ffb3b3; font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; } .form__errors--inline .form__error::before { content: "• "; opacity: .7; } /* == Assets picker ▸ mini dialog templates (SCOPE) == */ .container[data-controller="assets-picker"] .tmpl-pick{ position: fixed; inset: 0; z-index: var(--z-modal, 10000); display: grid; place-items: center; background: rgba(0,0,0,.5); } .container[data-controller="assets-picker"] .tmpl-pick.is-hidden{ display:none; } .container[data-controller="assets-picker"] .tmpl-pick__card{ width: min(520px, 92vw); border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); padding: 12px; } .container[data-controller="assets-picker"] .tmpl-pick__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:8px; } .container[data-controller="assets-picker"] .tmpl-pick__title{ margin:0; font-weight:800; } .container[data-controller="assets-picker"] .tmpl-pick__body{ display:grid; gap:8px; padding:8px 0; } .container[data-controller="assets-picker"] .tmpl-pick__foot{ display:flex; justify-content:flex-end; gap:8px; padding-top:8px; border-top:1px solid var(--line); } /* bottone accoppiato in header */ .container[data-controller="assets-picker"] .box__title .u-gap-8{ display:inline-flex; gap:8px; margin-left:8px; flex-wrap:wrap; } /* assets_management — evidenza riga item selezionata */ .container[data-controller="assets-picker"] tr.is-active td { background: color-mix(in oklab, var(--brand,#7c5cff) 14%, var(--card)); } .container[data-controller="assets-picker"] tr.is-active { box-shadow: inset 3px 0 0 color-mix(in oklab, var(--brand,#7c5cff) 55%, transparent); } /* === Contacts: colonne più bilanciate e no overflow in edit === */ /* Nome (flex ma un filo più stretta) | Telefono più largo | Azioni */ .contacts-table .table__head, .contacts-table .table__body .table__row { grid-template-columns: 0.82fr 220px 160px; /* ← regola qui se vuoi +/- spazio */ } /* evita che il contenuto delle celle “spinga” fuori griglia */ .contacts-table .td { min-width: 0; } /* gli input restano dentro la cella */ .form__control--inline { box-sizing: border-box; max-width: 100%; } /* le azioni non vanno a capo (così la colonna resta stretta ma stabile) */ .contacts-table .td--actions .row-actions { white-space: nowrap; gap: 6px; } /* =================================================================== CLEAN CONSOLIDATION — MODAL (generic) + CUSTOMERS TABLE (grid) These rules replace legacy scattered blocks and ensure compact layout. =================================================================== */ /* Modal (generic) */ .modal { position: fixed; inset: 0; display: none; z-index: var(--z-modal) !important; } .modal--open { display:flex; align-items:center; justify-content:center; } .modal__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:none; } .modal__dialog { position:relative; z-index:1; width:min(1100px,96vw); max-height:80vh; overflow:hidden; border-radius:16px; background:#0f1220; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 40px rgba(0,0,0,.4); padding:16px; } .modal__head { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:0 0 10px; } .modal__title { font-size:20px; font-weight:800; margin:0; color:var(--text,#eef2ff); } .modal__meta { margin-left:auto; font-size:12px; color:var(--muted,#8b8fa3); } .modal__body { max-height:calc(80vh - 56px); overflow:auto; } .is-modal-open { overflow:hidden; } /* === Locations form: griglia densa e logica (4 colonne) === */ .locations-grid { display:grid; grid-template-columns: 2.2fr .8fr 1.4fr 1fr; /* Street largo | CAP stretto | Comune | Prov/Nazione/Bottoni */ gap:12px; align-items:end; /* allinea i bottoni alla base degli input */ } /* utilità di span per occupare meno righe possibili */ .form__row--span-2 { grid-column: span 2; } .form__row--span-3 { grid-column: span 3; } .form__row--full { grid-column: 1 / -1; } /* già presente, la ribadisco se serve */ /* utility per allineare il bottone alla base della riga */ .form__row--align-end { align-self: end; } /* responsive: collassa in colonna singola sotto i 900px (coerente con la tua form grid) */ @media (max-width:900px){ .locations-grid { grid-template-columns:1fr; } .form__row--span-2, .form__row--span-3, .form__row--full { grid-column: 1 / -1; } } /* Locations: Sede | Indirizzo | Azioni */ .table--locations .table__head .table__row, .table--locations .table__row--head, .table--locations .table__body .table__row { display: grid; grid-template-columns: 1.6fr 2.2fr minmax(200px,.9fr); align-items: center; gap: 12px; } .table--locations .th,.table--locations .td { min-width: 0; } .table--locations .th.th--actions, .table--locations .td.td--actions { justify-self: end; } .table--locations .td--actions .row-actions { flex-wrap: nowrap; white-space: nowrap; } /* meta sotto il titolo in riga compatta */ .table--locations .td--main .td__meta { display:flex; gap:10px; flex-wrap:wrap; } .table--locations .td--main .td__meta .line { display:inline-flex; gap:6px; } @media (max-width:1100px) { .table--locations .table__head .table__row, .table--locations .table__row--head, .table--locations .table__body .table__row { grid-template-columns: 1.5fr 2fr minmax(180px,.9fr); gap: 10px; } } @media (max-width:640px) { .table--locations .table__head .table__row, .table--locations .table__row--head, .table--locations .table__body .table__row { grid-template-columns: 1fr minmax(150px,.8fr); } .table--locations .th:nth-child(2), .table--locations .td:nth-child(2) { display:none; } } /* ===== Interventi (index) — layout a 4 colonne, meta full-width, azioni in riga ===== */ .table--interventions .table__head .table__row, .table--interventions .table__row--head, .table--interventions .table__body .table__row { display:grid; grid-template-columns:2.6fr 0.9fr 0.8fr minmax(260px,1.2fr); align-items:center; gap:12px; } @media (max-width:1366px){ .table--interventions .table__head .table__row, .table--interventions .table__row--head, .table--interventions .table__body .table__row { grid-template-columns:2.4fr 0.9fr 0.8fr minmax(220px,1.2fr); gap:10px; } } .table--interventions .th, .table--interventions .td { min-width:0; } .table--interventions .td--ivhead { display:flex; flex-direction:column; gap:2px; } .table--interventions .iv-top { display:flex; gap:10px; align-items:center; font-size:12px; opacity:.9; } .table--interventions .iv-no { font-weight:600; letter-spacing:.2px; } .table--interventions .iv-date { padding:2px 6px; border-radius:6px; background:rgba(16,185,129,.20); border:1px solid rgba(16,185,129,.32); font-size:12px; color:var(--text,#eaeefa); } .table--interventions .td__client { font-weight:700; line-height:1.2; } .table--interventions .td__location { font-size:13px; color:var(--brand,#6c63ff); font-weight:600; } .table--interventions .td--actions { justify-self:end; white-space:nowrap; } .table--interventions .td--actions .row-actions { display:flex; gap:6px; flex-wrap:nowrap; } .table--interventions .td--actions .chip { padding:3px 10px; font-size:12px; border-radius:10px; } .table--interventions .td--meta { grid-column:1 / -1; padding:6px 12px; background:rgba(255,255,255,.045); display:flex; flex-wrap:wrap; gap:6px; } .pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; font-size:11.5px; line-height:1.2; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); color:var(--text,#eaeefa); user-select:none; } .pill--muted { background:rgba(139,143,163,.18); border-color:rgba(139,143,163,.28); } .pill--brand { background:rgba(108,99,255,.20); border-color:rgba(108,99,255,.32); } .pill--info { background:rgba(0,172,223,.20); border-color:rgba(0,172,223,.32); } .pill--success { background:rgba(16,185,129,.20); border-color:rgba(16,185,129,.32); } .pill--ghost { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); } .table--interventions .td--notes { grid-column:1 / -1; background:rgba(255,255,255,.04); padding:8px 12px; white-space:normal; overflow:visible; text-overflow:initial; } .table--interventions .td--notes .notes-label { font-weight:600; margin-right:8px; color:var(--muted); } .table--interventions .td--meta + .td--notes { margin-top:4px; } .table--interventions .td__meta { font-size:.85em; color:var(--muted,#8b8fa3); margin-top:2px; } /* ===== Form summary (info-card) — versione attuale (row + activity) ===== */ .info-card { border:1px solid rgba(255,255,255,.08); background:#0f1220; border-radius:12px; padding:12px; } .info-card__title { font-weight:700; font-size:14px; margin:0 0 8px; color:var(--muted); } .info-card__row { display:grid; grid-template-columns:1.4fr 1.2fr 0.9fr; gap:10px; align-items:end; } .info-kv { display:flex; flex-direction:column; gap:2px; } .info-label { font-size:12px; color:var(--muted); } .info-value { font-weight:600; } .info-activity { margin-top:8px; } .info-activity__label { font-size:12px; color:var(--muted); font-weight:700; margin-bottom:4px; } .info-activity__title { font-weight:700; line-height:1.25; } .info-activity__desc { margin-top:2px; } @media (max-width:900px){ .info-card__row { grid-template-columns:1fr; } } /* ===== Form grid a 5 colonne (checkbox in una riga) ===== */ .form__grid.form__grid--5 { grid-template-columns:repeat(5,1fr); } @media (max-width:900px){ .form__grid.form__grid--5 { grid-template-columns:1fr; } } /* ===== TASKS — griglia 4 colonne (più aria alle AZIONI) ===== */ .table--tasks .table__head .table__row, .table--tasks .table__row--head, .table--tasks .table__body .table__row { display:grid; grid-template-columns:3.05fr 0.95fr 0.65fr minmax(280px,1.25fr); align-items:center; gap:10px; } @media (max-width:1366px){ .table--tasks .table__head .table__row, .table--tasks .table__row--head, .table--tasks .table__body .table__row { display:grid; grid-template-columns:2.9fr 0.9fr 0.6fr minmax(240px,1.1fr); gap:8px; } } .table--tasks .th, .table--tasks .td { min-width:0; } /* ===== Bordo/gradiente priorità riga ===== */ .task-row { border-left:5px solid transparent; background-image:none; } .task-row--prio-urgent { border-left-color:rgba(239,68,68,.95); background-image:linear-gradient(90deg, rgba(239,68,68,.14), rgba(239,68,68,.08) 35%, transparent 65%); } .task-row--prio-normal { border-left-color:rgba(16,185,129,.95); background-image:linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.10) 35%, transparent 65%); } .task-row--prio-force { border-left-color:rgba(108,99,255,.90); background-image:linear-gradient(90deg, rgba(108,99,255,.12), rgba(108,99,255,.07) 35%, transparent 65%); } /* ===== Colonna 1: entity (cliente+sede) · meta (pill) · titolo · descrizione ===== */ .table--tasks .td--taskhead { display:flex; flex-direction:column; gap:4px; } .table--tasks .task-top { display:grid; grid-template-columns:1fr; row-gap:6px; } .table--tasks .task-entity { display:flex; flex-wrap:wrap; gap:6px; } .table--tasks .task-customer { padding:2px 8px; border-radius:6px; font-size:12px; border:1px solid rgba(234,238,250,.20); background:rgba(139,143,163,.24); color:#eaeefa; font-weight:600; letter-spacing:.2px; } .table--tasks .task-location { padding:2px 8px; border-radius:6px; font-size:12px; border:1px dashed rgba(234,238,250,.22); background:rgba(234,238,250,.08); color:#eaeefa; font-weight:600; letter-spacing:.2px; } .table--tasks .task-meta { display:flex; align-items:center; flex-wrap:wrap; column-gap:8px; row-gap:6px; } .table--tasks .priority-pill { margin:0; padding:2px 8px; font-size:11.5px; } .table--tasks .pill--mini { padding:2px 8px; font-size:11.5px; } .table--tasks .task-title { font-weight:700; line-height:1.25; white-space:normal; overflow:visible; text-overflow:initial; } .table--tasks .task-desc { font-size:13px; color:var(--muted,#8b8fa3); white-space:normal; overflow:visible; text-overflow:initial; word-break:break-word; } /* ===== Colonna 2: date ===== */ .table--tasks .td--dates { display:flex; flex-direction:column; gap:4px; } .table--tasks .date-line { display:flex; gap:8px; align-items:center; white-space:nowrap; } .table--tasks .date-badge { padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:12px; } .due-pill { padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; } .due-pill--ok { background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.28); } .due-pill--soon { background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.32); } .due-pill--overdue { background:rgba(239,68,68,.20); border-color:rgba(239,68,68,.34); } .due-pill--none { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); } /* ===== Colonna 3: stato/approved ===== */ .table--tasks .td--status { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } /* ===== Colonna 4: azioni (condensed, più aria) ===== */ .table--tasks .td--actions { justify-self:end; white-space:nowrap; } .table--tasks .td--actions .row-actions { display:flex; gap:8px; flex-wrap:nowrap; } .table--tasks .td--actions .chip { padding:2px 9px; font-size:11.5px; border-radius:9px; } /* ===== Pills extra (se usate nelle view) ===== */ .pill--danger { background:rgba(239,68,68,.20); border:1px solid rgba(239,68,68,.32); } .pill--warning { background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.32); } /* Tasks: centra le intestazioni di Date, Stato/Appro, Azioni */ .table--tasks .th--center { text-align:center; justify-self:center; } /* ===== EXPIRATIONS — edit: righe compatte (Cliente–Scadenza / Servizio–Q.tà–UM / Flag / Note) ===== */ .exp-edit { display:grid; gap:12px; } .exp-row { display:grid; gap:12px; align-items:end; } .exp-row-2 { grid-template-columns:1.6fr 1fr; } .exp-row-3 { grid-template-columns:1.6fr .8fr .6fr; } .exp-row-4 { grid-template-columns:1.6fr .8fr .6fr .6fr; } .exp-row-full { grid-template-columns:1fr; } @media (max-width:1100px){ .exp-row-2 { grid-template-columns:1fr; } .exp-row-3 { grid-template-columns:1fr; } } /* ===== SERVICES — 2 colonne: Nome | Azioni ===== */ .table--services .table__head .table__row, .table--services .table__row--head, .table--services .table__body .table__row { display:grid; grid-template-columns:1fr minmax(180px,0.6fr); align-items:center; gap:10px; } @media (max-width:1366px){ .table--services .table__head .table__row, .table--services .table__row--head, .table--services .table__body .table__row { grid-template-columns:1fr minmax(160px,0.6fr); gap:8px; } } .table--services .th, .table--services .td { min-width:0; } .table--services .td--actions { justify-self:end; white-space:nowrap; } .table--services .td--actions .row-actions { display:flex; gap:6px; flex-wrap:nowrap; } .table--services .td--actions .chip { padding:2px 8px; font-size:11.5px; border-radius:9px; } /* ===== Service form (compatta, coerente con il resto) ===== */ .service-form-grid { display:grid; grid-template-columns:1fr; gap:12px; } /* ===== Service form (allineata al resto) ===== */ .service-edit { display:grid; gap:12px; } /* ===== EXPIRATIONS — 6 colonne: Cliente | Servizio | Scadenza | Q.tà/UM | Stato | Azioni ===== */ .table--expirations .table__head .table__row, .table--expirations .table__row--head, .table--expirations .table__body .table__row { display:grid; grid-template-columns:1.9fr 1.2fr 1.1fr 0.9fr 0.9fr minmax(220px,0.9fr); align-items:center; gap:10px; } @media (max-width:1366px){ .table--expirations .table__head .table__row, .table--expirations .table__row--head, .table--expirations .table__body .table__row { grid-template-columns:1.8fr 1.1fr 1.05fr 0.85fr 0.85fr minmax(200px,0.9fr); gap:8px; } } .table--expirations .th, .table--expirations .td { min-width:0; } .table--expirations .th--center { text-align:center; } /* qty/status/actions (celle) coerenti con il resto */ .table--expirations .td--qty { white-space:nowrap; } .table--expirations .td--status { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .table--expirations .td--actions { justify-self:end; white-space:nowrap; } .table--expirations .td--actions .row-actions { display:flex; gap:6px; flex-wrap:nowrap; } .table--expirations .td--actions .chip { padding:2px 8px; font-size:11.5px; border-radius:9px; } /* note (full-width) */ .table--expirations .td--notes { grid-column:1 / -1; background:rgba(255,255,255,.04); padding:8px 12px; white-space:normal; overflow:visible; text-overflow:initial; } .table--expirations .td--notes .notes-label { font-weight:600; margin-right:8px; color:var(--muted); } .table--expirations .th--center { text-align:center; justify-self:center; } /* ===== HelpDesk — layout 2 colonne ===== */ :root{--helpdesk-side-w:520px;--helpdesk-sticky-top:80px;} @media (max-width:1366px){:root{--helpdesk-side-w:480px;}} .helpdesk-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--helpdesk-side-w);gap:16px;align-items:start;} @media (max-width:1100px){.helpdesk-grid{grid-template-columns:1fr;}} .hd-main{display:flex;flex-direction:column;gap:16px;min-width:0;} .hd-side{position:sticky;top:var(--helpdesk-sticky-top);align-self:start;display:grid;grid-template-rows:auto 1fr;row-gap:16px;} @media (max-width:1100px){.hd-side{position:static;}} .quick-actions{display:flex;flex-direction:column;gap:10px;} /* ===== Pannelli ===== */ .panel{border:1px solid rgba(255,255,255,.08);background:#0f1220;border-radius:12px;} .panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);} .panel__title{margin:0;font-size:14px;font-weight:700;color:#eaeefa;} .panel__body{padding:12px 14px;} .map-panel .panel__body{padding:0;} .map-embed{display:block;width:100%;height:clamp(420px,60vh,720px);border-radius:10px;overflow:hidden;} #helpdesk-map{display:block;width:100%;height:100%;} .map-embed .leaflet-container{width:100% !important;height:100% !important;} .btn--block{width:100%;justify-content:center;} .map-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:360px;color:var(--muted,#8b8fa3);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);border-radius:10px;} /* ===== Quick actions ===== */ .qa-group{display:flex;flex-direction:column;gap:10px;} .qa-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:12px;color:#eaeefa;font-weight:600;text-decoration:none;transition:background .18s,border-color .18s,transform .02s;} .qa-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);} .qa-btn:active{transform:translateY(1px);} .qa-btn--primary{background:rgba(108,99,255,.16);border-color:rgba(108,99,255,.28);} .qa-btn--primary:hover{background:rgba(108,99,255,.22);border-color:rgba(108,99,255,.35);} .qa-btn__glyph{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:var(--brand,#6c63ff);} /* ====================================================================== HELP DESK — Lista task compatta (scope: .helpdesk-grid) ====================================================================== */ /* Struttura riga */ .helpdesk-grid .panel .list--lines .list__row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px 12px;} .helpdesk-grid .panel .list--lines .list__main{display:flex;flex-direction:column;gap:4px;min-width:0;} .helpdesk-grid .list__row[draggable="true"]{cursor:grab;} .helpdesk-grid .list__row.is-dragging{opacity:.6;cursor:grabbing;} .helpdesk-grid .list__row.is-drag-over-before{box-shadow:inset 0 2px 0 0 var(--brand,#7c5cff);} .helpdesk-grid .list__row.is-drag-over-after{box-shadow:inset 0 -2px 0 0 var(--brand,#7c5cff);} .helpdesk-grid .panel .list--lines .list__row.is-focused{outline:1px solid var(--brand,#7c5cff);outline-offset:-1px;} .helpdesk-grid .list__row:hover{background-color:rgba(255,255,255,.02);} /* Header riga (badge a sx, meta a dx) */ .helpdesk-grid .task-row .task-header{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:4px;} .helpdesk-grid .task-row .task-header__left{display:flex;flex-wrap:wrap;align-items:center;gap:4px;} .helpdesk-grid .task-row .task-header__right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;} /* Titolo + actions in linea | descrizione full width sotto */ .helpdesk-grid .task-row .task-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 4px;} .helpdesk-grid .task-row .task-title{margin:0;font-size:14.5px;line-height:1.18;font-weight:bold;} .helpdesk-grid .task-row .task-desc{font-size:12.75px;line-height:1.15;opacity:.9;margin-top:0;} /* Azioni compatte (sempre in linea, no wrap desktop) */ .helpdesk-grid .task-row .task-actions{display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;margin-left:8px;} .helpdesk-grid .task-row .task-actions .chip{display:inline-flex;height:26px;padding:0 10px;border-radius:9999px;font-size:12.5px;white-space:nowrap;border:1px solid transparent;transition:140ms;} .helpdesk-grid .task-row .task-actions .chip--brand{background:color-mix(in oklab,var(--brand) 15%,transparent);border-color:color-mix(in oklab,var(--brand) 38%,transparent);} .helpdesk-grid .task-row .task-actions .chip--warning{background:color-mix(in oklab,var(--warn) 15%,transparent);border-color:color-mix(in oklab,var(--warn) 38%,transparent);} .helpdesk-grid .task-row .task-actions .chip--success{background:color-mix(in oklab,var(--ok) 13%,transparent);border-color:color-mix(in oklab,var(--ok) 36%,transparent);} @media (max-width:980px){ .helpdesk-grid .task-row .task-titlebar{flex-direction:column;align-items:flex-start;gap:8px;} .helpdesk-grid .task-row .task-actions{white-space:normal;margin-left:0;} } /* Pill/Badge — dimensioni e SPACING UNIFICATO e MINIMO */ .helpdesk-grid .task-row .badge, .helpdesk-grid .task-row .pill, .helpdesk-grid .task-row .date-badge, .helpdesk-grid .task-row .due-pill{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:12px;line-height:1.1;margin:0;} /* Badge base (cliente/sede/assegnatari) */ .helpdesk-grid .panel .list--lines .badge{font-weight:600;color:#eef1ff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);} .helpdesk-grid .panel .list--lines .badge--brand{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.28);color:#ece8ff;} .helpdesk-grid .task-row .badge--secondary.badge--count{background:var(--card_lighter);border:1px solid var(--line);font-weight:700;} /* Pill meta (Rich/Scad/Priorità) */ .helpdesk-grid .panel .list--lines .pill, .helpdesk-grid .panel .list--lines .date-badge, .helpdesk-grid .panel .list--lines .due-pill{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eaeefa;} .helpdesk-grid .panel .list--lines .priority-pill{min-width:auto;margin:0;} .helpdesk-grid .panel .list--lines .pill--success{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.32);color:#d7fff0;} .helpdesk-grid .panel .list--lines .pill--brand{background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.34);color:#e6e0ff;} .helpdesk-grid .panel .list--lines .pill--danger{background:rgba(239,68,68,.20);border-color:rgba(239,68,68,.36);color:#ffe5e5;} .helpdesk-grid .panel .list--lines .pill--warn{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.38);color:#fff2da;} .helpdesk-grid .panel .list--lines .due-pill--ok{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.32);color:#d7fff0;} .helpdesk-grid .panel .list--lines .due-pill--soon{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.38);color:#fff2da;} .helpdesk-grid .panel .list--lines .due-pill--overdue{background:rgba(239,68,68,.20);border-color:rgba(239,68,68,.36);color:#ffe5e5;} .helpdesk-grid .panel .list--lines .due-pill--none{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:#eaeefa;} /* Spaziature ORIZZONTALI MINIME tra tutte le pill/badge della riga */ .helpdesk-grid .task-row .task-header__left > *, .helpdesk-grid .task-row .task-header__right > *{margin-right:4px;} .helpdesk-grid .task-row .task-header__left > *:last-child, .helpdesk-grid .task-row .task-header__right > *:last-child{margin-right:0;} /* Marker priorità/brand (come prima) */ .helpdesk-grid .panel .list--lines .list__row.task-row{position:relative;border-left:5px solid transparent;--prioStart:transparent;--prioEnd:transparent;} .helpdesk-grid .panel .list--lines .list__row.task-row::before{content:"";position:absolute;inset:0;background-image:linear-gradient(270deg,rgba(124,92,255,.14) 0%,rgba(124,92,255,.08) 32%,rgba(124,92,255,.04) 64%,rgba(124,92,255,0) 100%);background-repeat:no-repeat;pointer-events:none;z-index:0;} .helpdesk-grid .panel .list--lines .list__row.task-row .list__main{position:relative;z-index:1;padding:8px 10px;background-image:linear-gradient(90deg,var(--prioStart) 0%,var(--prioStart) 22%,var(--prioEnd) 72%);background-repeat:no-repeat;border-radius:0;} .helpdesk-grid .panel .list--lines .list__row.task-row--prio-urgent{border-left-color:rgba(239,68,68,.95);--prioStart:rgba(239,68,68,.22);--prioEnd:rgba(239,68,68,0);} .helpdesk-grid .panel .list--lines .list__row.task-row--prio-normal{border-left-color:rgba(16,185,129,.95);--prioStart:rgba(16,185,129,.22);--prioEnd:rgba(16,185,129,0);} .helpdesk-grid .panel .list--lines .list__row.task-row--prio-force{border-left-color:rgba(108,99,255,.90);--prioStart:rgba(108,99,255,.20);--prioEnd:rgba(108,99,255,0);} /* Iconcina Google (se usi ) */ .helpdesk-grid .task-row .icon-g{width:14px;height:14px;margin-left:4px;vertical-align:middle;opacity:.9;} .helpdesk-grid .task-row .icon-g:hover{opacity:1;} /* Helpdesk — iPhone switch (alias delle regole .sw-settings) */ .helpdesk-toolbar__mine .sws-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer} .helpdesk-toolbar__mine .sws-switch__input{position:absolute;opacity:0;pointer-events:none} .helpdesk-toolbar__mine .sws-switch__track{ width:46px;height:26px;border-radius:9999px; background:var(--card_lighter);border:1px solid var(--line); position:relative;transition:.18s ease } .helpdesk-toolbar__mine .sws-switch__track::after{ content:"";position:absolute;top:50%;left:4px;transform:translateY(-50%); width:18px;height:18px;border-radius:50%; background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.18s ease } .helpdesk-toolbar__mine .sws-switch__input:checked + .sws-switch__track{ background:color-mix(in oklab, var(--ok) 25%, transparent); border-color:color-mix(in oklab, var(--ok) 50%, transparent) } .helpdesk-toolbar__mine .sws-switch__input:checked + .sws-switch__track::after{left:24px} .helpdesk-toolbar__mine .sws-switch__text{margin-left:6px;opacity:.9} /* == Clockbar (pulsanti Entrata/Uscita) ================================== */ .toolbar--actions .clockbar { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 14px; align-items: center; } @media (max-width: 1100px) { .toolbar--actions .clockbar { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } .toolbar--actions .clockbar__btn { /* reset gentile per input[type=submit] e .btn esistenti */ appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 9999px; padding: 12px 18px; height: 48px; font-weight: 700; letter-spacing: .2px; line-height: 1; justify-self: stretch; /* ogni bottone riempie la colonna */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.18), 0 6px 20px rgba(0,0,0,.12); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; color: var(--fg-on-tone, #fff); background: var(--tone-bg, var(--card)); border-color: var(--tone-border, var(--line)); } /* Hover/active/focus */ .toolbar--actions .clockbar__btn:hover { transform: translateY(-1px); filter: brightness(1.03); } .toolbar--actions .clockbar__btn:active { transform: translateY(0); filter: brightness(.97); } .toolbar--actions .clockbar__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--tone, #6ea8fe) 60%, transparent), 0 0 0 5px color-mix(in oklab, var(--tone, #6ea8fe) 24%, transparent); } /* Varianti tono (usa var(--*) se presenti, fallback inclusi) */ .toolbar--actions .clockbar__btn.-morning-in { --tone: var(--ok, #22c55e); --tone-bg: linear-gradient(180deg, color-mix(in oklab, var(--tone) 26%, transparent), color-mix(in oklab, var(--tone) 16%, transparent)); --tone-border: color-mix(in oklab, var(--tone) 38%, transparent); --fg-on-tone: #ffffff; } .toolbar--actions .clockbar__btn.-morning-out { --tone: var(--cyan, #22d3ee); --tone-bg: linear-gradient(180deg, color-mix(in oklab, var(--tone) 26%, transparent), color-mix(in oklab, var(--tone) 16%, transparent)); --tone-border: color-mix(in oklab, var(--tone) 38%, transparent); --fg-on-tone: #0b1f2a; } .toolbar--actions .clockbar__btn.-afternoon-in { --tone: var(--accent, #a78bfa); --tone-bg: linear-gradient(180deg, color-mix(in oklab, var(--tone) 26%, transparent), color-mix(in oklab, var(--tone) 16%, transparent)); --tone-border: color-mix(in oklab, var(--tone) 38%, transparent); --fg-on-tone: #101018; } .toolbar--actions .clockbar__btn.-afternoon-out { --tone: var(--info, #60a5fa); --tone-bg: linear-gradient(180deg, color-mix(in oklab, var(--tone) 26%, transparent), color-mix(in oklab, var(--tone) 16%, transparent)); --tone-border: color-mix(in oklab, var(--tone) 38%, transparent); --fg-on-tone: #0a1523; } /* Stato disabled (se mai usato) */ .toolbar--actions .clockbar__btn[disabled] { filter: grayscale(.2) opacity(.7); cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } /* == Clockbar — variante “bright & legible” ============================== */ .toolbar--actions .clockbar__btn{ height: 52px; padding: 12px 22px; border-radius: 9999px; border: 1px solid transparent; font-size: .95rem; font-weight: 800; letter-spacing: .2px; color: #fff; /* testo sempre bianco per contrasto */ text-shadow: 0 1px 0 rgba(0,0,0,.35); --tone: #6ea8fe; /* fallback neutro, sovrascritto sotto */ --tone-600: color-mix(in oklab, var(--tone) 65%, black 35%); --tone-700: color-mix(in oklab, var(--tone) 75%, black 25%); --tone-800: color-mix(in oklab, var(--tone) 85%, black 15%); background-image: linear-gradient(180deg, var(--tone-600), var(--tone-800)); border-color: var(--tone-700); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.18); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .toolbar--actions .clockbar__btn:hover{ transform: translateY(-1px); filter: saturate(1.2) brightness(1.05); } .toolbar--actions .clockbar__btn:active{ transform: translateY(0); filter: brightness(.95); } .toolbar--actions .clockbar__btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 55%, transparent), 0 0 0 6px color-mix(in oklab, var(--tone) 22%, transparent), 0 10px 26px rgba(0,0,0,.18); } /* Toni dedicati (più saturi) */ .toolbar--actions .clockbar__btn.-morning-in { --tone: #22c55e; } /* green */ .toolbar--actions .clockbar__btn.-morning-out { --tone: #06b6d4; } /* cyan */ .toolbar--actions .clockbar__btn.-afternoon-in{ --tone: #a78bfa; } /* violet*/ .toolbar--actions .clockbar__btn.-afternoon-out{--tone: #60a5fa; } /* blue */ /* Layout già esistente: aggiungo un filo di gap e auto-stretch, se serve */ .toolbar--actions .clockbar { gap: 16px; } .toolbar--actions .clockbar__btn { justify-self: stretch; } /* ====================================================================== DAILY WORK REPORTS — griglia unica + wrapper interno + doppio gradiente Stati: .row--ok, .row--warn, .is-dayoff.is-ferie, .is-dayoff.is-fest Compat badge legacy: .dwr-date__holiday / .dwr-date__fest ====================================================================== */ /* Punto di verità (scope) */ .table.table--list.table--reports.daily-work-reports{ --dwr-grid: minmax(200px,1.2fr) minmax(520px,3fr) minmax(120px,.9fr) minmax(120px,.9fr) minmax(140px,.9fr) auto; --dwr-gap: 18px; --dwr-pad-x: 16px; } /* Header: griglia allineata al body */ .table.table--list.table--reports.daily-work-reports > .table__head > .table__row--head{ display: grid !important; grid-template-columns: var(--dwr-grid) !important; column-gap: var(--dwr-gap) !important; align-items: center; padding-left: 0; padding-right: 0; } /* Body: riga esterna (bordo) + wrapper interno con griglia */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row{ position: relative; display: block; border-left: 6px solid transparent; background-color: transparent !important; overflow: hidden; /* evita “colata” del bg */ } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner{ position: relative; z-index: 0; display: grid; grid-template-columns: var(--dwr-grid); column-gap: var(--dwr-gap); align-items: center; padding: 6px 0; isolation: isolate; /* stacking context pulito */ } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner > *{ position: relative; z-index: 1; } /* Celle base */ .daily-work-reports .th{ padding-left:16px; padding-right:16px; white-space:normal; overflow:visible; text-overflow:initial; } .daily-work-reports .td{ padding-left:16px; padding-right:16px; white-space:normal; overflow:visible; text-overflow:initial; } /* Allineamenti (header/body coerenti) */ .daily-work-reports .table__row--head .th:nth-child(1), .daily-work-reports .table__body .table__row .td:nth-child(1){ text-align:left; } /* Data */ .daily-work-reports .table__row--head .th:nth-child(2), .daily-work-reports .table__body .table__row .td:nth-child(2){ text-align:left; } /* Orari */ .daily-work-reports .table__row--head .th:nth-child(3), .daily-work-reports .table__body .table__row .td:nth-child(3){ text-align:center; } /* Ore lav. */ .daily-work-reports .table__row--head .th:nth-child(4), .daily-work-reports .table__body .table__row .td:nth-child(4){ text-align:center; } /* Saldo */ .daily-work-reports .table__row--head .th:nth-child(5), .daily-work-reports .table__body .table__row .td:nth-child(5){ text-align:center; } /* Controllo */ .daily-work-reports .table__row--head .th:nth-child(6), .daily-work-reports .table__body .table__row .td:nth-child(6){ text-align:right; } /* Azioni */ /* Orari su una riga (wrappa solo sotto 1100px) */ .daily-work-reports .dwr-times__wrap{ display:flex; gap:10px; align-items:center; white-space:nowrap; flex-wrap:nowrap; } @media (max-width:1100px){ .daily-work-reports .dwr-times__wrap{ white-space:normal; flex-wrap:wrap; } } .daily-work-reports .dwr-times__seg{ white-space:nowrap; } .daily-work-reports .dwr-times__dot{ opacity:.35; } /* Tipografia numerica + colori saldo */ .daily-work-reports .dwr-worked__val{ font-variant-numeric:tabular-nums; font-weight:700; } .daily-work-reports .dwr-balance__val{ font-variant-numeric:tabular-nums; font-weight:700; } .daily-work-reports .dwr-balance__val.is-pos{ color:var(--ok); } .daily-work-reports .dwr-balance__val.is-neg{ color:var(--danger); } .daily-work-reports .dwr-value{ font-variant-numeric:tabular-nums; font-weight:700; } /* Badge: Controllo + FERIE/FESTIVITÀ (nuove e legacy) */ .daily-work-reports .dwr-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:.875rem; font-weight:600; line-height:1; border:1px solid transparent; vertical-align:middle; } .table.table--list.table--reports.daily-work-reports .dwr-date__holiday{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:.875rem; font-weight:600; line-height:1; border:1px solid transparent; vertical-align:middle; } .table.table--list.table--reports.daily-work-reports .dwr-date__fest{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:.875rem; font-weight:600; line-height:1; border:1px solid transparent; vertical-align:middle; } .daily-work-reports .dwr-badge--ok{ background:color-mix(in oklab, var(--ok) 18%, transparent); color:var(--ok); border-color:color-mix(in oklab, var(--ok) 35%, transparent); } .daily-work-reports .dwr-badge--ko{ background:color-mix(in oklab, var(--danger) 18%, transparent); color:var(--danger); border-color:color-mix(in oklab, var(--danger) 35%, transparent); } .daily-work-reports .dwr-badge--ferie, .table.table--list.table--reports.daily-work-reports .dwr-date__holiday{ background:color-mix(in oklab, var(--warn) 18%, transparent); color:var(--warn); border-color:color-mix(in oklab, var(--warn) 35%, transparent); } .daily-work-reports .dwr-badge--fest, .table.table--list.table--reports.daily-work-reports .dwr-date__fest{ background:color-mix(in oklab, var(--accent, #70a1ff) 18%, transparent); color:var(--accent, #70a1ff); border-color:color-mix(in oklab, var(--accent, #70a1ff) 35%, transparent); } /* =================== Doppio gradiente sul wrapper (.dwr-inner) ========= */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(90deg, var(--hl-start,transparent) 0%, var(--hl-mid,transparent) 38%, var(--hl-end,transparent) 70%, transparent 100%), linear-gradient(180deg, color-mix(in oklab, #fff 4%, transparent) 0%, transparent 28%); background-repeat:no-repeat; background-size:100% 100%; background-origin:padding-box; background-clip:padding-box; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row:hover > .dwr-inner::before{ filter:saturate(1.02) brightness(1.015); } /* Stati → bordo + variabili gradiente (intensità medium) */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.row--ok{ border-left-color:color-mix(in oklab, var(--ok) 92%, black 8%); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.row--ok > .dwr-inner{ --hl-start:color-mix(in oklab, var(--ok) 30%, transparent); --hl-mid:color-mix(in oklab, var(--ok) 20%, transparent); --hl-end:color-mix(in oklab, var(--ok) 12%, transparent); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.row--warn{ border-left-color:color-mix(in oklab, var(--danger) 92%, black 8%); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.row--warn > .dwr-inner{ --hl-start:color-mix(in oklab, var(--danger) 32%, transparent); --hl-mid:color-mix(in oklab, var(--danger) 22%, transparent); --hl-end:color-mix(in oklab, var(--danger) 14%, transparent); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.is-dayoff.is-ferie{ border-left-color:color-mix(in oklab, var(--warn) 92%, black 8%); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.is-dayoff.is-ferie > .dwr-inner{ --hl-start:color-mix(in oklab, var(--warn) 28%, transparent); --hl-mid:color-mix(in oklab, var(--warn) 19%, transparent); --hl-end:color-mix(in oklab, var(--warn) 11%, transparent); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.is-dayoff.is-fest{ border-left-color:color-mix(in oklab, var(--accent, #70a1ff) 92%, black 8%); } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row.is-dayoff.is-fest > .dwr-inner{ --hl-start:color-mix(in oklab, var(--accent, #70a1ff) 28%, transparent); --hl-mid:color-mix(in oklab, var(--accent, #70a1ff) 19%, transparent); --hl-end:color-mix(in oklab, var(--accent, #70a1ff) 11%, transparent); } /* =================== Barre secondarie a tutta riga ===================== */ /* “Viaggio / Escluse / …” e “Note” condividono il look */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra{ grid-column:1 / -1; position:relative; z-index:2; margin-top:8px; padding:8px 16px; background:var(--card_lighter); border:1px solid var(--line); border-radius:6px; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes{ grid-column:1 / -1; position:relative; z-index:2; margin-top:8px; padding:8px 16px; background:var(--card_lighter); border:1px solid var(--line); border-radius:6px; } /* Monoriga con ellissi per alloc/rules */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra .dwr-alloc{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra .dwr-rules{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra .dwr-dot{ opacity:.35; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra .dwr-label{ opacity:.65; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra .dwr-value{ font-weight:700; font-variant-numeric:tabular-nums; } /* NOTE inline: "Note: Testo delle note" (testo completo, con wrap) */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes .dwr-notes{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0; column-gap:6px; white-space:normal; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes .dwr-label{ display:inline; flex:0 0 auto; font-weight:600; opacity:.80; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes .dwr-label::after{ content:":"; margin-right:3px; } .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes .dwr-notes__text{ display:inline; flex:1 1 auto; min-width:0; margin:0; line-height:1.35; } /* Micro separatore visivo sopra le barre */ .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra::before, .table.table--list.table--reports.daily-work-reports > .table__body > .dwr-row > .dwr-inner .dwr-extra--notes::before{ content:""; position:absolute; left:0; right:0; top:-8px; height:8px; background:linear-gradient(180deg, rgba(0,0,0,.06), transparent); border-top-left-radius:6px; border-top-right-radius:6px; pointer-events:none; } .toolbar--totals { padding-block: 8px 0; } .toolbar--totals .totals-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1200px) { .toolbar--totals .totals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .toolbar--totals .totals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .toolbar--totals .totals-grid { grid-template-columns: 1fr; } } .toolbar--totals .totals-item { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%), var(--card); border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.25); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; overflow: hidden; } @media (pointer: fine){ .toolbar--totals .totals-item:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.30); background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 46%), var(--card); } } .toolbar--totals .totals-label { display: block; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; } .toolbar--totals .totals-value { font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: .2px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .toolbar--totals .totals-value.is-pos { color: color-mix(in oklab, #39d98a 80%, var(--text)); } .toolbar--totals .totals-value.is-warn { color: color-mix(in oklab, #ffb155 80%, var(--text)); } .toolbar--totals .totals-value.is-alert { color: color-mix(in oklab, #ff5555 80%, var(--text)); } .toolbar--totals .totals-item::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none; background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(124,92,255,0) 55%, rgba(255,255,255,.06) 100%); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px; opacity: .5; } @media (prefers-reduced-motion: reduce){ .toolbar--totals .totals-item { transition: none; } } /* ====================================================================== SW SETTINGS — INDEX + FORM (scope: .sw-settings) Usa variabili globali: --line, --card, --card_lighter, --ok, --danger, --accent ====================================================================== */ .sw-settings { padding: 10px 0 40px; } /* --- Head ------------------------------------------------------------- */ .sw-settings .page-title { margin: 0; } .sw-settings .page-subtitle { margin: 2px 0 0; opacity: .8; } .sw-settings .sws-head { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; margin-bottom: 16px; } .sw-settings .sws-head__titles { display: grid; gap: 2px; } /* --- Card contenitore ------------------------------------------------- */ .sw-settings .sws-card { border: 1px solid var(--line); background: var(--card); border-radius: 10px; box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06)); padding: 0; /* index */ overflow: hidden; margin-bottom: 14px; /* aria tra dati e azioni sottostanti */ } /* --- Griglia dati (INDEX) --------------------------------------------- */ .sw-settings .sws-grid { display: grid; grid-template-columns: 1fr; } .sw-settings .sws-row { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(360px, 2fr); gap: 18px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); } .sw-settings .sws-row:last-child { border-bottom: 0; } @media (max-width: 980px) { .sw-settings .sws-row { grid-template-columns: 1fr; gap: 8px; } } .sw-settings .sws-label { font-weight: 700; white-space: nowrap; align-self: center; } .sw-settings .sws-value { min-width: 0; } /* --- Pills destinatari ------------------------------------------------ */ .sw-settings .sws-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .sw-settings .sws-pill { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9999px; background: color-mix(in oklab, var(--card_lighter) 72%, transparent); font-variant-numeric: tabular-nums; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Badge (micro-tuning su globali) ---------------------------------- */ .sw-settings .badge { font-weight: 700; } .sw-settings .badge.badge--success { background: color-mix(in oklab, var(--ok) 20%, transparent); color: var(--ok); border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent); } .sw-settings .badge.badge--secondary { background: var(--card_lighter); color: inherit; border: 1px solid var(--line); } /* --- Stato empty ------------------------------------------------------ */ .sw-settings .sws-empty { text-align: left; padding: 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; } .sw-settings .sws-empty__title { margin: 0; font-weight: 800; } .sw-settings .sws-empty__subtitle { margin: 6px 0 0; opacity: .8; } /* --- Footer azioni (INDEX) -------------------------------------------- */ .sw-settings .sws-foot { margin-top: 4px; display: flex; gap: 10px; align-items: center; } /* --- Form (EDIT/NEW) -------------------------------------------------- */ .sw-settings .sws-card .sws-form { display: grid; gap: 14px; padding: 14px 16px; } /* Error box */ .sw-settings .sws-errors { border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent); background: color-mix(in oklab, var(--danger) 10%, transparent); border-radius: 8px; padding: 10px 12px; } .sw-settings .sws-errors__title { margin: 0 0 6px; font-weight: 800; color: var(--danger); } .sw-settings .sws-errors__list { margin: 0; padding-left: 18px; } /* Campi */ .sw-settings .sws-field { display: grid; gap: 8px; } .sw-settings .sws-field--inline { grid-template-columns: minmax(220px, .9fr) minmax(320px, 2fr); align-items: center; } @media (max-width: 900px) { .sw-settings .sws-field--inline { grid-template-columns: 1fr; } } .sw-settings .sws-input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card_lighter); color: inherit; resize: vertical; } .sw-settings .sws-help { margin: 4px 0 0; opacity: .75; } /* Switch (checkbox -> toggle) */ .sw-settings .sws-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .sw-settings .sws-switch__input { position: absolute; opacity: 0; pointer-events: none; } .sw-settings .sws-switch__track { width: 46px; height: 26px; border-radius: 9999px; background: var(--card_lighter); border: 1px solid var(--line); position: relative; transition: .18s ease; } .sw-settings .sws-switch__track::after { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: .18s ease; } .sw-settings .sws-switch__input:checked + .sws-switch__track { background: color-mix(in oklab, var(--ok) 25%, transparent); border-color: color-mix(in oklab, var(--ok) 50%, transparent); } .sw-settings .sws-switch__input:checked + .sws-switch__track::after { left: 24px; } .sw-settings .sws-switch__text { opacity: .9; } /* Actions form (in basso a sinistra) */ .sw-settings .sws-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-start; margin-top: 4px; } /* Ghost button (Annulla) — contrasto migliore su sfondo scuro */ .sw-settings .btn.btn--ghost { background: transparent; color: var(--text, #e8e8e8); border: 1px solid color-mix(in oklab, var(--line) 70%, transparent); border-radius: 8px; padding: 8px 14px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease; } .sw-settings .btn.btn--ghost:hover { background: color-mix(in oklab, var(--card_lighter) 55%, transparent); border-color: color-mix(in oklab, var(--line) 100%, transparent); } .sw-settings .btn.btn--ghost:active { transform: translateY(1px); } .sw-settings .btn.btn--ghost:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent, #70a1ff) 70%, transparent); outline-offset: 2px; } /* --- Utility locali ---------------------------------------------------- */ .sw-settings .text-dim { opacity: .8; } /* ====================================================================== TASKS · Publish confirm — card evento calendario (scope .task-publish-confirm) Usa variabili globali: --card, --card_lighter, --line, --ok, --danger, --accent, --shadow, --ink_on_accent ====================================================================== */ .task-publish-confirm { padding-top: 10px; padding-bottom: 40px; --tpc-max: 1080px; } .task-publish-confirm .tpc-card { max-width: var(--tpc-max); margin: 0 auto; border: 1px solid var(--line); background: var(--card); border-radius: 14px; box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06)); overflow: hidden; } @media (max-width: 1240px){ .task-publish-confirm .tpc-card { margin-left: 14px; margin-right: 14px; } } /* Header */ .task-publish-confirm .tpc-header { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab, #fff 6%, transparent) 0%, transparent 32%), var(--card); } @media (max-width: 720px){ .task-publish-confirm .tpc-header { grid-template-columns: 1fr; justify-items: start; } } /* Badge data */ .task-publish-confirm .tpc-date { display: grid; grid-template-rows: auto auto auto; align-items: center; justify-items: center; width: 74px; border: 1px solid var(--line); border-radius: 12px; background: var(--card_lighter); overflow: hidden; } .task-publish-confirm .tpc-date__day { font-size: 28px; font-weight: 800; line-height: 1; padding-top: 8px; } .task-publish-confirm .tpc-date__month { margin-top: 4px; padding: 2px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .6px; background: color-mix(in oklab, var(--accent, #70a1ff) 22%, transparent); color: var(--accent, #70a1ff); } .task-publish-confirm .tpc-date__year { font-size: 11px; opacity: .8; padding: 6px 0 8px; } .task-publish-confirm .tpc-date--empty .tpc-date__month { background: transparent; color: inherit; } @media (max-width: 720px){ .task-publish-confirm .tpc-date { width: 68px; } } /* Titoli */ .task-publish-confirm .tpc-titles { min-width: 0; } .task-publish-confirm .tpc-title { margin: 0; line-height: 1.15; } .task-publish-confirm .tpc-subtitle { margin: 4px 0 0 0; } .task-publish-confirm .tpc-chip { display: inline-block; padding: 4px 10px; border-radius: 9999px; border: 1px solid var(--line); background: var(--card_lighter); font-weight: 600; } /* Corpo */ .task-publish-confirm .tpc-body { padding: 14px 16px; } .task-publish-confirm .tpc-desc { margin: 0; line-height: 1.45; } .task-publish-confirm .tpc-desc + .tpc-meta { margin-top: 10px; } .task-publish-confirm .tpc-desc--muted { opacity: .8; } .task-publish-confirm .tpc-meta { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .task-publish-confirm .tpc-meta__item { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .task-publish-confirm .tpc-meta__label { opacity: .75; font-weight: 600; } .task-publish-confirm .tpc-meta__value { font-weight: 700; } /* Azioni */ .task-publish-confirm .tpc-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--card); } .task-publish-confirm .tpc-actions__form { display: inline; } /* Bottoni (base) */ .task-publish-confirm .tpc-btn { --btn-bg: var(--card_lighter); --btn-fg: inherit; --btn-bd: var(--line); height: 42px; min-width: 180px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; letter-spacing: .2px; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, filter .18s ease, transform .18s ease; cursor: pointer; user-select: none; } .task-publish-confirm .tpc-btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .task-publish-confirm .tpc-btn:active { transform: translateY(0); filter: brightness(.98); } .task-publish-confirm .tpc-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; } /* Bottoni (varianti) */ .task-publish-confirm .tpc-btn--ok { --btn-bg: color-mix(in oklab, var(--ok) 20%, transparent); --btn-fg: var(--ink_on_accent, #fff); --btn-bd: color-mix(in oklab, var(--ok) 45%, transparent); color: var(--btn-fg); } .task-publish-confirm .tpc-btn--ok:hover { --btn-bg: color-mix(in oklab, var(--ok) 26%, transparent); } .task-publish-confirm .tpc-btn--danger { --btn-bg: color-mix(in oklab, var(--danger) 20%, transparent); --btn-fg: var(--ink_on_accent, #fff); --btn-bd: color-mix(in oklab, var(--danger) 45%, transparent); color: var(--btn-fg); } .task-publish-confirm .tpc-btn--danger:hover { --btn-bg: color-mix(in oklab, var(--danger) 26%, transparent); } .task-publish-confirm .tpc-btn--ghost { --btn-bg: color-mix(in oklab, var(--card_lighter) 80%, transparent); --btn-fg: inherit; --btn-bd: var(--line); } /* Tipografia coerente dei bottoni (,