/* ============================================================================
   MOCK DI INTERFACCIA DEL GESTIONALE (.am + varianti)
   Interfacce ricostruite in HTML dai COMPUTED STYLES REALI dell'app
   (estrazione via browser su cloud-dev.imageandbeauty.it, 17 lug 2026):
   FullCalendar 5.9.0, DataTable header scuro #1e2128, card KPI radius 12 +
   ombra 0 2px 8px rgba(28,28,46,.07), arancio app #e8734a / accento #F47C20,
   font Nunito. Reso da template-parts/mock-app.php dentro le card .frame.
   Un dettaglio significativo per pagina; dati verosimili. Icone SVG, mai emoji.
   ========================================================================== */

.am{padding:clamp(13px,2vw,20px);font-family:'Nunito',sans-serif;background:#f4f6f8;
    --amp:#e8734a;--amo:#F47C20;--amt:#2d2d2d;--amm:#888;--amb:#e5e7eb;
    --amhead:#1e2128;--ams:0 2px 8px rgba(28,28,46,.07),0 1px 2px rgba(28,28,46,.05)}
.am *{box-sizing:border-box}
.am-ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}

.am-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.am-h1{font-size:16px;font-weight:800;color:var(--amt);letter-spacing:-.2px;line-height:1.1}
.am-bc{font-size:10px;font-weight:600;color:var(--amm);margin-top:2px}
.am-bc b{color:var(--amp);font-weight:700}
.am-bc .am-badge{margin-right:3px}

/* card bianca base dell'app (barra arancio in alto) */
.am-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--amb);border-radius:12px;box-shadow:var(--ams);padding:12px 14px;min-width:0}
.am-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--amo)}

/* chip/pill dell'app */
.am-ag-tabs{margin-left:auto;display:flex;gap:5px}
.am-pill{padding:3px 11px;border-radius:20px;border:1.5px solid var(--amb);background:#fff;color:#374151;font-size:10.5px;font-weight:600;white-space:nowrap}
.am-pill.on{background:var(--amo);border-color:var(--amo);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(244,124,32,.18)}
.am-badge{display:inline-block;padding:2px 9px;border-radius:20px;background:#f0f2f5;color:#374151;font-size:8.5px;font-weight:700}
.am-badge.ok{background:rgba(46,184,92,.12);color:#1f8a48}

.am-kchips{margin-left:auto;display:flex;gap:6px}
.am-kchip{font-size:9.5px;font-weight:600;color:var(--amm);background:#fff;border:1px solid var(--amb);border-radius:20px;padding:4px 10px;white-space:nowrap}
.am-kchip b{color:var(--amt);font-weight:800}
.am-kchip.warn{color:#c85527;border-color:rgba(232,115,74,.3);background:rgba(232,115,74,.06)}
.am-kchip.warn b{color:#c85527}

/* ── AGENDA: mini-timeline a colonne (FullCalendar) ────────────────────── */
.am-agT-head{display:grid;grid-template-columns:26px repeat(3,1fr);gap:6px;margin-bottom:4px}
.am-agT-head span{font-size:10px;font-weight:800;color:var(--amm);text-align:center}
.am-agT-grid{position:relative;display:grid;grid-template-columns:26px repeat(3,1fr);gap:6px;height:178px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#eef0f2 calc(25% - 1px),#eef0f2 25%)}
.am-agT-grid .ax{position:relative}
.am-agT-grid .ax span{position:absolute;right:3px;font-size:9px;font-weight:700;color:var(--amm);transform:translateY(-4px)}
.am-agT-grid .col{position:relative;border-left:1px solid #eef0f2}
.am-agT-grid .ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:5px 7px;color:#fff;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.18);min-height:0}
.am-agT-grid .ev .t{display:block;font-size:8px;font-weight:600;opacity:.92;white-space:nowrap}
.am-agT-grid .ev .n{display:block;font-size:9.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-agT-grid .ev .s{display:block;font-size:8.5px;font-weight:500;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-agT-grid .ev.done{opacity:.62}
.am-agT-grid .now{position:absolute;left:26px;right:0;border-top:1.5px solid var(--amo);z-index:3}
.am-agT-grid .now::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--amo)}
.am-note{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:9.5px;font-weight:700;color:#1f8a48;background:rgba(46,184,92,.1);border-radius:8px;padding:7px 10px}
.am-note .ok{color:#1f8a48}

/* ── CASSA: scontrino con badge operatore + pagamenti ──────────────────── */
.am-cl-av{width:38px;height:38px;border-radius:50%;background:var(--amp);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.am-cl-av.sm{width:34px;height:34px;font-size:12px}
.am-ca-t{border:1px solid var(--amb);border-radius:10px;overflow:hidden}
.am-ca-th{display:grid;grid-template-columns:1fr 52px 26px 56px;gap:4px;background:var(--amo);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.2px;padding:7px 10px}
.am-ca-th span:nth-child(n+2){text-align:right}
.am-ca-r{display:grid;grid-template-columns:1fr 52px 26px 56px;gap:4px;align-items:center;padding:7px 10px;font-size:11px;font-weight:700;color:var(--amt);border-bottom:1px solid #f1f3f5}
.am-ca-r:last-child{border-bottom:0}
.am-ca-r .pr{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-ca-r .cb{width:26px;height:19px;border-radius:5px;color:#fff;font-size:9px;font-weight:800;font-style:normal;display:inline-flex;align-items:center;justify-content:center;flex:none}
.am-ca-r span:nth-child(2),.am-ca-r .qz,.am-ca-r .tt{text-align:right;font-variant-numeric:tabular-nums}
.am-ca-r .qz{color:var(--amm)}
.am-ca-tot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 4px 3px}
.am-ca-tot .l{font-size:9px;font-weight:700;letter-spacing:.4px;color:var(--amm);text-transform:uppercase}
.am-ca-tot .v{font-size:22px;font-weight:900;color:var(--amo);letter-spacing:-.5px}
.am-ca-pay{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.am-ca-pay span{padding:6px 4px;border-radius:8px;font-size:8.5px;font-weight:800;letter-spacing:.2px;color:#fff;text-align:center;white-space:nowrap}

/* ── DataTable generica (clienti, header scuro reale) ──────────────────── */
.am-tbl{border:1px solid var(--amb);border-radius:10px;overflow:hidden}
.am-tr{display:grid;grid-template-columns:34px 1fr 74px 40px 26px;gap:6px;align-items:center;padding:8px 10px;font-size:11px;border-bottom:1px solid #f1f3f5}
.am-tr:last-child{border-bottom:0}
.am-tr.am-th{background:var(--amhead);color:#d1d5db;font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:8px 10px}
.am-tr.am-th .r{text-align:right}
.am-tr.low{background:#fff6ee}
.am-tr .nm{font-weight:800;color:var(--amt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-tr .r{text-align:right}.am-tr .b{font-weight:800;color:var(--amt)}
.am-tr .gg{display:inline-flex;align-items:center;justify-content:center;min-width:30px;color:#fff;font-size:9.5px;font-weight:800;font-style:normal;border-radius:5px;padding:2px 6px}
.am-tr .cat{font-style:normal;background:#f0f2f5;color:var(--amm);border-radius:12px;font-size:8.5px;font-weight:700;padding:2px 8px;white-space:nowrap}
.am-tr .act{color:#2f6fed;text-align:center}
.am-cl-al{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;background:rgba(232,115,74,.08);border:1px solid rgba(232,115,74,.25);border-radius:10px;padding:9px 11px;font-size:10.5px;font-weight:700;color:#c85527}
.am-cl-al .go{margin-left:auto;background:var(--amo);color:#fff;border-radius:20px;padding:4px 12px;font-size:9.5px;font-weight:800;white-space:nowrap;box-shadow:0 3px 10px rgba(244,124,32,.18)}

/* ── MAGAZZINO: scorte con barre + stato ───────────────────────────────── */
.am-mg{border:1px solid var(--amb);border-radius:10px;padding:2px 12px;background:#fff}
.am-mg .pr{padding:10px 0;border-bottom:1px solid #f1f3f5}
.am-mg .pr:last-child{border-bottom:0}
.am-mg .pr.low{background:#fff6ee;margin:0 -12px;padding:10px 12px}
.am-mg .r1{display:flex;align-items:center;gap:8px;font-size:11px}
.am-mg .st{width:10px;height:10px;border-radius:50%;flex:none}
.am-mg .nm{font-weight:800;color:var(--amt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-mg .qt{margin-left:auto;font-size:10px;font-weight:700;color:var(--amm);white-space:nowrap}
.am-mg .mbar{height:6px;border-radius:6px;background:#eef0f2;margin-top:7px;overflow:hidden;padding:0;border:0}
.am-mg .mbar i{display:block;height:100%;border-radius:6px}
.am-mg .al{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;color:#c85527;margin-top:7px}
.am-mg .al .am-ico{width:12px;height:12px}

/* ── MARKETING: Telegram storico ───────────────────────────────────────── */
.am-mkt{border:1px solid var(--amb);border-radius:10px;overflow:hidden;background:#fff}
.am-mkt .mk{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:9px 11px;border-bottom:1px solid #f1f3f5}
.am-mkt .mk:last-child{border-bottom:0}
.am-mkt .tp{color:#fff;font-size:8.5px;font-weight:700;border-radius:12px;padding:3px 9px;white-space:nowrap}
.am-mkt .msg{font-size:10px;font-weight:600;color:#3a3a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.am-mkt .msg .cl{width:11px;height:11px;color:var(--amo)}
.am-mkt .ds{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--amm);white-space:nowrap}
.am-mkt .ds .am-ico{width:12px;height:12px;color:#9aa1a8}

/* ── STATISTICHE = Dashboard (KPI + donut) ─────────────────────────────── */
.am-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.am-kpi .k{display:flex;align-items:center;gap:9px}
.am-kpi .kic{width:34px;height:34px;border-radius:10px;background:rgba(232,115,74,.1);color:var(--amp);display:flex;align-items:center;justify-content:center;flex:none;margin:0}
.am-kpi .kic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.am-kpi .n{font-size:clamp(13px,1.3vw,16px);font-weight:900;color:var(--amt);line-height:1.1;letter-spacing:-.5px;white-space:nowrap}
.am-kpi .l{font-size:8px;font-weight:600;color:var(--amm);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;white-space:nowrap}
.am-comp-t{font-size:11px;font-weight:800;color:var(--amt);margin-bottom:10px}
.am-comp-b{display:flex;align-items:center;gap:16px}
.am-donut{width:84px;height:84px;flex:none;transform:rotate(-90deg)}
.am-donut circle{fill:none;stroke-width:5}
.am-donut .d-bg{stroke:#eef0f2}
.am-comp-lg{flex:1;font-size:11px}
.am-comp-lg .li{display:flex;align-items:center;gap:8px;padding:3px 0;font-weight:700;color:var(--amt)}
.am-comp-lg .sw{width:11px;height:11px;border-radius:3px;flex:none}
.am-comp-lg .li b{margin-left:auto;font-weight:800}

/* ── responsive dentro le card (le .frame scendono fino a ~330px) ──────── */
@media(max-width:460px){
  .am-kpi{grid-template-columns:1fr 1fr}
  .am-kpi .k:first-child{grid-column:1/-1}
  .am-ca-pay{grid-template-columns:repeat(2,1fr)}
  .am-kchips .am-kchip:nth-child(2){display:none}
  .am-tr{grid-template-columns:30px 1fr 40px 26px}
  .am-tr .cat,.am-th span:nth-child(3){display:none}
  .am-mkt .mk{grid-template-columns:auto 1fr}
  .am-mkt .ds{display:none}
}