/* ===================================================================== Friggitoria Esposito — Gestionale ordini all'ingrosso Front cliente: "registro di bottega" — carta, inchiostro, oro. Back-office: skin gestionale professionale (sidebar, densità dati). Temi: chiaro/scuro via [data-theme] sull'elemento . ===================================================================== */ :root { --carta: #f4eedd; --carta-2: #ece3cb; --avorio: #fbf8ee; --inchiostro: #211c13; --inchiostro-2: #6b6151; --oro: #9a7b25; --oro-2: #c3a75a; --linea: #d8cba6; --linea-forte: #a99c74; --campo: #fdfbf2; --campo-focus: #ffffff; --verde: #3f6b39; --verde-bg: #e6ecda; --rosso: #8e2f21; --rosso-bg: #f2ded7; --blu: #2f4f66; --blu-bg: #dee7ec; --ambra: #96661a; --ambra-bg: #f3e6c8; --grigio: #6f675a; --grigio-bg: #e9e3d2; --nav-bg: #211c13; --nav-fg: #f4eedd; --btn-bg: #211c13; --btn-fg: #f4eedd; --sb-bg: #1d1a13; --sb-bg-2: #16130d; --sb-fg: #d8cfba; --sb-muted: #8f8671; --ombra-card: 0 0 0 4px var(--avorio), 0 0 0 5px var(--linea); --serif: Georgia, 'Times New Roman', 'Palatino Linotype', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* --------- Tema scuro (front) --------- */ :root[data-theme="dark"] { --carta: #171310; --carta-2: #231d12; --avorio: #1f1a12; --inchiostro: #ede4d0; --inchiostro-2: #a99b81; --oro: #c9a84c; --oro-2: #e2c878; --linea: #3a3324; --linea-forte: #5a5138; --campo: #262013; --campo-focus: #2e2717; --verde: #96c583; --verde-bg: #223019; --rosso: #e69078; --rosso-bg: #3a221b; --blu: #92b8d4; --blu-bg: #1f2c37; --ambra: #dcae52; --ambra-bg: #34290f; --grigio: #a89e8d; --grigio-bg: #2b271f; --nav-bg: #0e0c08; --nav-fg: #e8dfc9; --btn-bg: #e9dfc6; --btn-fg: #1b1610; --ombra-card: 0 0 0 4px var(--avorio), 0 0 0 5px var(--linea); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--sans); font-size: 14px; line-height: 1.5; } img { max-width: 100%; } a { color: var(--inchiostro); } h1, h2, h3 { font-family: var(--serif); font-weight: 700; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; } /* ------------------------------------------------ Barra superiore (front) */ .topbar { background: var(--carta); border-bottom: 3px double var(--oro); } .topbar-in { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 12px; gap: 12px; } .brand { text-decoration: none; display: block; line-height: 1.15; } .brand-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; } .brand-sub { display: block; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin-top: 2px; } .topbar-user { display: flex; align-items: center; gap: 10px; } .topbar-who { font-family: var(--serif); font-style: italic; color: var(--inchiostro-2); } .brand { display: flex; align-items: center; gap: 13px; } .brand-logo { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; } .sb-logo-img { width: 38px; height: 38px; flex: none; object-fit: contain; border-radius: 8px; display: block; } .brand-preview { max-height: 56px; max-width: 220px; border: 1px solid var(--linea-forte); border-radius: 6px; padding: 5px 8px; background: var(--campo); } .brand-preview-sm { max-height: 40px; } .mainnav { background: var(--nav-bg); } .mainnav-in { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 10px; } .navlink { color: var(--nav-fg); text-decoration: none; padding: 10px 14px 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 8px; } .navlink i { font-size: 12px; opacity: .75; } .navlink:hover { color: var(--oro-2); } .navlink.active { border-bottom-color: var(--oro); color: var(--oro-2); } .navlink-cc { background: rgba(195, 167, 90, .16); color: var(--oro-2); border-radius: 7px 7px 0 0; } .navlink-cc i { opacity: 1; } .navlink-cc:hover { background: rgba(195, 167, 90, .26); } .navbadge { background: var(--oro); color: #fff; font-weight: 700; border-radius: 10px; font-size: 11px; line-height: 1; padding: 3px 7px; letter-spacing: 0; } :root[data-theme="dark"] .navbadge { color: #241d0c; } .main { padding: 26px 18px 60px; } .foot { border-top: 3px double var(--oro); padding: 16px 0 26px; margin-top: 30px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); text-align: center; background: var(--carta); } /* ------------------------------------------------ Bottone-icona e tema */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 7px; cursor: pointer; border: 1px solid var(--linea-forte); background: transparent; color: var(--inchiostro); font-size: 14px; text-decoration: none; } .icon-btn:hover { border-color: var(--oro); color: var(--oro); } /* !important: il CSS del kit Font Awesome (display su .fa-solid) ha pari specificità e viene dopo */ .th-ic-sun { display: none !important; } :root[data-theme="dark"] .th-ic-moon { display: none !important; } :root[data-theme="dark"] .th-ic-sun { display: inline-block !important; } .auth-theme { position: fixed; top: 14px; right: 14px; z-index: 20; } /* ------------------------------------------------ Banner impersonificazione */ .imp-bar { background: var(--oro); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } :root[data-theme="dark"] .imp-bar { color: #241d0c; } .imp-bar .imp-btn { margin-left: auto; } /* ------------------------------------------------ Intestazioni pagina */ .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; } .page-title { font-size: 26px; margin: 0; letter-spacing: .02em; } .page-title small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--inchiostro-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ------------------------------------------------ Card */ .card { background: var(--avorio); border: 1px solid var(--linea-forte); box-shadow: var(--ombra-card); margin: 0 0 24px; border-radius: 1px; } .card-h { padding: 12px 18px 10px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .card-h h2 { margin: 0; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; } .card-h h2::before { content: '◆'; color: var(--oro); font-size: 9px; vertical-align: 2px; margin-right: 9px; } .card-h h2 i { color: var(--oro); margin-right: 7px; font-size: 13px; } .card-b { padding: 16px 18px; } .card-b.tight { padding: 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } /* ------------------------------------------------ KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; } .kpi { background: var(--avorio); border: 1px solid var(--linea-forte); padding: 14px 16px 12px; box-shadow: var(--ombra-card); } .kpi .n { font-family: var(--serif); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--inchiostro-2); margin-top: 4px; } .kpi .l i { margin-right: 5px; color: var(--oro); } .kpi.alert .n { color: var(--ambra); } .kpi a { text-decoration: none; } /* ------------------------------------------------ Timbri di stato */ .stamp { display: inline-block; padding: 2.5px 9px 2px; border: 1.5px solid currentColor; border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 700; white-space: nowrap; } .stamp-ok { color: var(--verde); background: var(--verde-bg); } .stamp-done { color: var(--verde); background: transparent; } .stamp-attesa { color: var(--ambra); background: var(--ambra-bg); } .stamp-prep { color: var(--grigio); background: var(--grigio-bg); } .stamp-sped { color: var(--blu); background: var(--blu-bg); } .stamp-ko { color: var(--rosso); background: var(--rosso-bg); } /* Chip codice catalogo, come i tag neri del PDF */ .cod { display: inline-block; background: #17120b; color: #f0e8d3; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2.5px 7px 2px; border-radius: 2px; white-space: nowrap; } .tag-sconto { display: inline-block; border: 1px solid var(--oro); color: var(--oro); font-size: 10.5px; font-weight: 600; padding: 2px 7px 1px; border-radius: 2px; letter-spacing: .04em; white-space: nowrap; } .chip { display: inline-block; border: 1px solid var(--linea-forte); border-radius: 99px; background: var(--carta-2); font-size: 11px; padding: 2px 9px; white-space: nowrap; } .chip b { color: var(--oro); } .promo-badge { display: inline-block; background: var(--rosso); color: #fff; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2.5px 8px 2px; text-transform: uppercase; vertical-align: 2px; font-family: var(--sans); } .promo-badge i { font-size: 9px; } tr.riga-esaurita .prod-thumb, tr.riga-esaurita .cell-unit { opacity: .5; } /* ------------------------------------------------ Bottoni */ .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); cursor: pointer; text-decoration: none; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 9px 18px 8px; border-radius: 2px; } .btn:hover { filter: brightness(1.12); } :root[data-theme="dark"] .btn:hover { filter: brightness(.94); } .btn-oro { background: transparent; color: var(--inchiostro); border-color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); } .btn-oro:hover { background: var(--oro); color: #fff; border-color: var(--oro); filter: none; } :root[data-theme="dark"] .btn-oro:hover { color: #241d0c; } .btn-ghost { background: transparent; color: var(--inchiostro); border-color: var(--linea-forte); } .btn-ghost:hover { background: var(--carta-2); color: var(--inchiostro); border-color: var(--inchiostro); filter: none; } .btn-danger { background: transparent; color: var(--rosso); border-color: var(--rosso); } .btn-danger:hover { background: var(--rosso); color: var(--avorio); border-color: var(--rosso); filter: none; } .btn-sm { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .07em; gap: 5px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* ------------------------------------------------ Tabelle */ .tbl-scroll { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--inchiostro-2); font-weight: 600; padding: 9px 10px 7px; border-bottom: 2px solid var(--inchiostro); white-space: nowrap; } .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; } .tbl tr:hover td { background: rgba(154, 123, 37, .05); } :root[data-theme="dark"] .tbl tr:hover td { background: rgba(201, 168, 76, .07); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl .ctr { text-align: center; } .tbl a { text-decoration: none; border-bottom: 1px solid var(--oro-2); } .tbl a:hover { color: var(--oro); } .tbl .muted, .muted { color: var(--inchiostro-2); } .tbl-sub { font-size: 12px; color: var(--inchiostro-2); } .thead-cat td { background: var(--carta-2); font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--linea-forte); } /* ------------------------------------------------ Form */ label.fl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--inchiostro-2); margin: 0 0 4px; font-weight: 600; } .fi, textarea.fi, select.fi { width: 100%; background: var(--campo); color: var(--inchiostro); border: 1px solid var(--linea-forte); border-radius: 2px; padding: 8px 10px; font-family: var(--sans); font-size: 14px; } .fi:focus, textarea.fi:focus, select.fi:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(154, 123, 37, .18); } .fi-sm { padding: 5px 7px; font-size: 13px; } .fi-num { text-align: right; font-variant-numeric: tabular-nums; } .frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; } .frow-1 { display: block; margin-bottom: 14px; } .fhelp { font-size: 12px; color: var(--inchiostro-2); margin-top: 4px; } fieldset { border: 1px solid var(--linea); padding: 14px 16px 12px; margin: 0 0 18px; border-radius: 2px; } legend { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--oro); font-weight: 700; padding: 0 8px; } /* Interruttore on/off (toggle) */ .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; user-select: none; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch .sw { width: 40px; height: 22px; border-radius: 99px; background: var(--linea-forte); position: relative; transition: background .15s ease; flex: none; } .switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .switch input:checked + .sw { background: var(--verde); } .switch input:checked + .sw::after { left: 21px; } .switch input:focus-visible + .sw { box-shadow: 0 0 0 3px rgba(154, 123, 37, .3); } .switch .sw-l { font-weight: 600; } /* ------------------------------------------------ Tab */ .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--linea); margin: 0 0 16px; flex-wrap: wrap; } .tab-btn { border: 0; background: none; padding: 9px 14px 8px; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; color: var(--inchiostro-2); border-bottom: 2px solid transparent; margin-bottom: -2px; } .tab-btn:hover { color: var(--inchiostro); } .tab-btn.active { color: var(--oro); border-bottom-color: var(--oro); } .tab-btn .pill-count { margin-left: 6px; } .tab-panel[hidden] { display: none; } /* ------------------------------------------------ Editor listino */ .icon-btn-sm { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; vertical-align: middle; } tr.has-ov td { background: rgba(154, 123, 37, .07); } :root[data-theme="dark"] tr.has-ov td { background: rgba(201, 168, 76, .09); } tr.subrow > td { background: var(--carta-2); padding: 0; border-bottom: 1px solid var(--linea-forte); } .subrow-in { padding: 12px 16px 14px; } .subrow-t { display: block; font-size: 12px; letter-spacing: .05em; margin-bottom: 8px; } .subrow-t i { color: var(--oro); margin-right: 6px; } .tbl-mini { max-width: 420px; } .tbl-mini th, .tbl-mini td { padding: 5px 8px; } tr.subrow .tbl tr:hover td, tr.subrow:hover td { background: var(--carta-2); } /* ------------------------------------------------ Barra "modifiche non salvate" */ .savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--nav-bg); color: var(--nav-fg); border-top: 3px solid var(--oro); transform: translateY(110%); transition: transform .28s cubic-bezier(.2, .9, .3, 1.15); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .5); } .savebar.show { transform: none; } body.bo .savebar { left: 238px; } .savebar-in { display: flex; align-items: center; gap: 10px; padding: 10px 22px; flex-wrap: wrap; } .savebar-sp { flex: 1; } .savebar-msg { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .04em; } .savebar-msg i { color: var(--oro-2); animation: sb-blink 1.6s ease-in-out infinite; } @keyframes sb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .savebar .icon-btn { color: var(--nav-fg); border-color: rgba(255, 255, 255, .3); } .savebar .icon-btn:hover { color: var(--oro-2); border-color: var(--oro-2); } .savebar .icon-btn[disabled] { opacity: .35; cursor: not-allowed; } .savebar .btn-salva { background: var(--oro); color: #fff; border-color: var(--oro); box-shadow: none; animation: sb-pulse 2.2s infinite; } .savebar .btn-salva:hover { background: var(--oro-2); border-color: var(--oro-2); color: #241d0c; filter: none; } @keyframes sb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(195, 167, 90, .55); } 55% { box-shadow: 0 0 0 10px rgba(195, 167, 90, 0); } } body.has-savebar .main { padding-bottom: 130px; } @media (prefers-reduced-motion: reduce) { .savebar { transition: none; } .savebar-msg i, .savebar .btn-salva { animation: none; } } /* ------------------------------------------------ Popup conferma (stile gestionale) */ .dlg-back { position: fixed; inset: 0; z-index: 70; background: rgba(12, 10, 6, .55); display: flex; align-items: center; justify-content: center; padding: 20px; } .dlg-back[hidden] { display: none; } .dlg { background: var(--avorio); color: var(--inchiostro); border: 1px solid var(--linea-forte); border-radius: 10px; max-width: 460px; width: 100%; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6); animation: dlg-in .16s ease; } @keyframes dlg-in { from { transform: translateY(14px) scale(.98); opacity: 0; } } .dlg-h { padding: 15px 18px 11px; font-weight: 700; font-size: 15px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--linea); } .dlg-h i { color: var(--ambra); } .dlg-b { padding: 14px 18px; font-size: 13.5px; } .dlg-f { padding: 2px 18px 16px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* tabelle fasce sconto */ .tiers-tbl input.fi { min-width: 84px; } .tiers-tbl td { border-bottom: 1px solid var(--linea); } /* ------------------------------------------------ Flash */ .flash-zone { margin-bottom: 18px; } .flash { padding: 11px 16px; border: 1px solid; margin-bottom: 8px; font-size: 13.5px; border-radius: 2px; } .flash-ok { color: var(--verde); border-color: var(--verde); background: var(--verde-bg); } .flash-err { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-bg); } .flash-warn { color: var(--ambra); border-color: var(--ambra); background: var(--ambra-bg); } /* ------------------------------------------------ Login / registrazione */ .auth-body { background: var(--carta); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 14px; } .auth-card { width: 100%; max-width: 430px; background: var(--avorio); border: 1px solid var(--inchiostro); box-shadow: 0 0 0 5px var(--avorio), 0 0 0 6px var(--oro), 0 22px 44px -18px rgba(0, 0, 0, .45); padding: 34px 34px 28px; } .auth-card.wide { max-width: 760px; } .auth-brand { text-align: center; border-bottom: 3px double var(--oro); padding-bottom: 18px; margin-bottom: 22px; } .auth-brand .b1 { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; } .auth-brand .b2 { font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: var(--oro); margin-top: 5px; } .auth-brand .b3 { font-family: var(--serif); font-style: italic; color: var(--inchiostro-2); margin-top: 10px; font-size: 14px; } .auth-links { text-align: center; margin-top: 18px; font-size: 13px; } .auth-title { font-size: 18px; margin: 0 0 14px; } /* ------------------------------------------------ Catalogo cliente */ .cat-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .cat-toolbar .fi { max-width: 320px; } .tiers-banner { border: 1px solid var(--oro); background: var(--ambra-bg); padding: 10px 14px; margin-bottom: 18px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .prod-thumb { width: 58px; height: 58px; object-fit: cover; object-position: center 32%; border: 1px solid var(--linea-forte); display: block; background: #fff; } .prod-name { font-family: var(--serif); font-weight: 700; font-size: 14.5px; } .qty-box { display: inline-flex; align-items: stretch; border: 1px solid var(--linea-forte); border-radius: 2px; overflow: hidden; background: var(--campo); } .qty-box button { border: 0; background: var(--carta-2); width: 30px; cursor: pointer; font-size: 16px; color: var(--inchiostro); } .qty-box button:hover { background: var(--oro-2); color: #241d0c; } .qty-box input { width: 56px; border: 0; text-align: center; font-size: 14px; background: transparent; font-variant-numeric: tabular-nums; color: var(--inchiostro); } .qty-box input:focus { outline: none; background: var(--campo-focus); } .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--nav-bg); color: var(--nav-fg); border-top: 3px solid var(--oro); transform: translateY(110%); transition: transform .18s ease; } .stickybar.show { transform: none; } .stickybar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; flex-wrap: wrap; } .stickybar .tot { font-family: var(--serif); font-size: 18px; } .stickybar .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--oro-2); } /* ------------------------------------------------ Pagamenti */ .pay-opts { display: grid; gap: 10px; margin: 6px 0 14px; } .pay-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--linea-forte); border-radius: 8px; padding: 12px 14px; background: var(--campo); } .pay-opt input { margin-top: 3px; accent-color: var(--oro); } .pay-opt .pi { font-size: 19px; width: 28px; text-align: center; color: var(--oro); flex: none; margin-top: 1px; } .pay-opt .pt b { display: block; font-size: 13.5px; } .pay-opt .pt small { color: var(--inchiostro-2); font-size: 12px; } .pay-opt:hover { border-color: var(--oro-2); } .pay-opt.sel { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); background: var(--campo-focus); } .pay-badge-test { background: var(--ambra-bg); color: var(--ambra); border: 1px dashed var(--ambra); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .bank-box { border: 1px dashed var(--oro); background: var(--ambra-bg); border-radius: 6px; padding: 14px 16px; font-size: 13.5px; margin: 10px 0; } .bank-box .iban { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 15px; letter-spacing: .06em; font-weight: 700; } /* Pagina pagamento simulato */ .fakepay { max-width: 460px; margin: 40px auto; text-align: center; } .fakepay .fp-logo { font-size: 40px; color: var(--oro); margin-bottom: 10px; } /* ------------------------------------------------ Messaggi */ .msg-thread { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding: 4px 2px; } .msg { max-width: 78%; padding: 10px 14px; border: 1px solid var(--linea-forte); background: var(--campo); border-radius: 2px; } .msg .msg-meta { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--inchiostro-2); margin-bottom: 4px; } .msg-mio { align-self: flex-end; background: var(--carta-2); border-color: var(--oro); } .msg-corpo { white-space: pre-wrap; word-wrap: break-word; } .msg-thread.compact { max-height: 320px; } /* ------------------------------------------------ Timeline stato ordine */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 14px 26px; border-left: 1px solid var(--linea-forte); margin-left: 8px; } .timeline li:last-child { border-left-color: transparent; } .timeline li::before { content: '◆'; position: absolute; left: -6.5px; top: -2px; color: var(--oro); background: var(--avorio); font-size: 12px; line-height: 1; } .timeline .t-quando { font-size: 11.5px; color: var(--inchiostro-2); } /* ------------------------------------------------ Modal scheda */ .modal-back { position: fixed; inset: 0; background: rgba(12, 10, 6, .66); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-back[hidden] { display: none; } .modal-box { position: relative; max-width: 620px; width: 100%; } .modal-box img { width: 100%; max-height: 88vh; object-fit: contain; border: 4px solid var(--avorio); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); } .modal-x { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--inchiostro); background: var(--carta); font-size: 20px; cursor: pointer; line-height: 1; color: var(--inchiostro); } /* ------------------------------------------------ Grafico a barre (SVG) */ .chart-wrap { overflow-x: auto; } .chart-note { font-size: 11px; color: var(--inchiostro-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; } .ch-bar { fill: var(--oro); } .ch-grid { stroke: var(--linea); } .ch-lbl { fill: var(--inchiostro-2); } .ch-val { fill: var(--inchiostro); } /* ------------------------------------------------ Utility */ .tr { text-align: right; } .tc { text-align: center; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .hr-oro { border: 0; border-top: 3px double var(--oro); margin: 22px 0; } .big-money { font-family: var(--serif); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .pill-count { background: var(--carta-2); border: 1px solid var(--linea-forte); border-radius: 10px; padding: 2px 9px; font-size: 11.5px; } .nowrap { white-space: nowrap; } .w-90 { width: 90px; } .w-120 { width: 120px; } .inline-form { display: inline; } .actions-cell { display: flex; gap: 6px; flex-wrap: wrap; } /* ===================================================================== BACK-OFFICE — skin gestionale professionale ===================================================================== */ body.bo { /* tavolozza neutra professionale (chiaro) */ --carta: #f1f0ec; --carta-2: #e9e7e0; --avorio: #ffffff; --inchiostro: #21201a; --inchiostro-2: #6f6a5d; --linea: #e4e2da; --linea-forte: #c9c6ba; --campo: #fafaf7; --campo-focus: #ffffff; --btn-bg: #26241d; --btn-fg: #f4f2ea; --ombra-card: 0 1px 2px rgba(30, 28, 20, .05); /* nel BO l'identità serif resta solo nel marchio in sidebar */ --serif: var(--sans); font-size: 13.5px; } :root[data-theme="dark"] body.bo { --carta: #141310; --carta-2: #1d1b16; --avorio: #1c1a15; --inchiostro: #e9e6dc; --inchiostro-2: #9c9682; --linea: #2d2b24; --linea-forte: #454235; --campo: #181712; --campo-focus: #232019; --btn-bg: #e9dfc6; --btn-fg: #1b1610; --ombra-card: 0 1px 2px rgba(0, 0, 0, .3); } .bo-shell { min-height: 100vh; } .bo-main { margin-left: 238px; min-height: 100vh; display: flex; flex-direction: column; } .bo .main { padding: 24px 28px 70px; width: 100%; max-width: 1500px; } /* --------- Sidebar --------- */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 238px; z-index: 50; background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-2) 100%); color: var(--sb-fg); display: flex; flex-direction: column; } :root[data-theme="dark"] .sidebar { --sb-bg: #12100b; --sb-bg-2: #0c0a07; } .sb-brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; text-decoration: none; color: var(--sb-fg); border-bottom: 1px solid rgba(255,255,255,.07); } .sb-seal { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--oro-2); border-radius: 8px; color: var(--oro-2); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 16px; letter-spacing: .05em; } .sb-title { font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; } .sb-title small { display: block; font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: .16em; color: var(--oro-2); margin-top: 2px; white-space: nowrap; } .sb-search { position: relative; margin: 12px 12px 6px; } .sb-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--sb-muted); pointer-events: none; } .sb-search input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--sb-fg); border-radius: 7px; padding: 7px 10px 7px 32px; font-size: 12.5px; font-family: var(--sans); } .sb-search input::placeholder { color: var(--sb-muted); } .sb-search input:focus { outline: none; border-color: var(--oro-2); background: rgba(255,255,255,.09); } .sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 12px; } .sb-sec { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-muted); margin: 16px 6px 6px; font-weight: 600; } .sb-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--sb-fg); font-size: 13px; font-weight: 500; padding: 8.5px 10px; border-radius: 7px; margin-bottom: 2px; border-left: 3px solid transparent; } .sb-link i { width: 17px; text-align: center; font-size: 13.5px; color: var(--sb-muted); flex: none; } .sb-link span { flex: 1; } .sb-link:hover { background: rgba(255,255,255,.06); } .sb-link:hover i { color: var(--oro-2); } .sb-link.active { background: rgba(195, 167, 90, .13); color: var(--oro-2); border-left-color: var(--oro); } .sb-link.active i { color: var(--oro-2); } .sb-link .navbadge { color: #241d0c; flex: none; } .sb-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 12px 14px; } .sb-user { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .sb-user i { color: var(--oro-2); font-size: 14px; } .sb-user span { line-height: 1.3; overflow: hidden; } .sb-user small { display: block; color: var(--sb-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; } .sb-overlay[hidden] { display: none; } /* --------- Barra superiore BO --------- */ .bo-top { position: sticky; top: 0; z-index: 30; height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: var(--avorio); border-bottom: 1px solid var(--linea); } .bo-top-title { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--inchiostro-2); text-transform: uppercase; } .bo-top-sp { flex: 1; } .sb-burger { display: none; } /* --------- Componenti in versione BO --------- */ .bo .card { border: 1px solid var(--linea); border-radius: 10px; } .bo .card-h { padding: 11px 16px 9px; } .bo .card-h h2 { font-size: 12px; letter-spacing: .1em; font-weight: 700; } .bo .card-h h2::before { content: none; } .bo .card-b { padding: 14px 16px; } .bo .kpi { border: 1px solid var(--linea); border-radius: 10px; } .bo .kpi .n { font-size: 24px; } .bo .page-title { font-size: 21px; letter-spacing: 0; } .bo .btn { border-radius: 7px; letter-spacing: .05em; } .bo .fi, .bo textarea.fi, .bo select.fi { border-radius: 7px; border-color: var(--linea-forte); } .bo .qty-box, .bo fieldset { border-radius: 7px; } .bo .tbl { font-size: 13px; } .bo .tbl th { font-size: 10px; border-bottom: 1px solid var(--linea-forte); padding: 8px 10px 6px; } .bo .tbl td { padding: 7.5px 10px; } .bo .thead-cat td { letter-spacing: .1em; font-size: 12px; } .bo .stamp { border-width: 0; border-radius: 99px; padding: 3.5px 11px 3px; letter-spacing: .06em; font-size: 10.5px; } .bo .stamp::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: .5px; } .bo .stamp-done { background: var(--verde-bg); } .bo .flash { border-radius: 8px; } .bo .modal-x { border-radius: 8px; } .bo .pill-count { border-radius: 99px; } /* ===================================================================== Stampa ===================================================================== */ @media print { .topbar, .mainnav, .foot, .page-actions, .stickybar, .no-print, .flash-zone, .sidebar, .bo-top, .imp-bar, .sb-overlay, .auth-theme { display: none !important; } body, body.bo { background: #fff; font-size: 12px; color: #000; } .bo-main { margin-left: 0; } .card { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; } .main, .bo .main { padding: 0; } a { text-decoration: none; color: #000; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1000px) { .sidebar { transform: translateX(-105%); transition: transform .18s ease; width: 258px; } body.sb-open .sidebar { transform: none; } .bo-main { margin-left: 0; } .sb-burger { display: inline-flex; } .bo .main { padding: 18px 16px 60px; } body.bo .savebar { left: 0; } } @media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .auth-card { padding: 24px 20px; } } @media (max-width: 640px) { .brand-name { font-size: 17px; } .prod-thumb { display: none; } .main { padding-top: 18px; } .page-title { font-size: 21px; } .bo-top { padding: 0 12px; } }