:root{--ink:var(--hs-ds-color-body-ink);--forest:var(--hs-ds-color-ink);--green:var(--hs-ds-color-accent);--gold:var(--hs-ds-color-gold);--paper:var(--hs-ds-color-page-legacy);--card:var(--hs-ds-color-card-legacy);--muted:var(--hs-ds-color-muted);--line:var(--hs-ds-color-line);--bad:var(--hs-ds-color-danger);--ok:var(--hs-ds-color-success)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button, input {font:inherit}button{cursor:pointer}#gate{min-height:100dvh;display:grid;place-content:center;text-align:center;padding:var(--hs-ds-space-10)}.brand{width:76px;height:76px;border-radius:var(--hs-ds-radius-xl);background:var(--forest);color:var(--gold);display:grid;place-items:center;font:700 28px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:auto}#gate h1{font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:20px 0 4px}header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px 18px var(--hs-ds-space-6);background:linear-gradient(var(--paper) 85%,transparent)}header small{letter-spacing:.18em;color:var(--green);font-weight:800}header h1{font:700 28px/1.1 "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:4px 0}.icon{border:0;background:var(--forest);color:var(--gold);border-radius:var(--hs-ds-radius-circle);width:44px;height:44px}main{padding:var(--hs-ds-space-2) var(--hs-ds-space-8) 98px;max-width:780px;margin:auto}.quote{font:italic 17px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--green);padding:var(--hs-ds-space-8) var(--hs-ds-space-2) 22px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--hs-ds-space-5)}.card{background:var(--hs-ds-color-card-legacy);border:1px solid var(--hs-ds-color-line);border-radius:18px;padding:var(--hs-ds-space-8);box-shadow:0 5px 20px #21382d0a}.card.wide{grid-column:1/-1}.metric b{display:block;font:700 28px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--green)}.metric small,.muted{color:var(--muted)}h2{font:700 22px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:22px 0 10px}h3{margin:0 0 8px}.actions{display:flex;gap:var(--hs-ds-space-4);flex-wrap:wrap;margin-top:12px}.btn{border:0;border-radius:var(--hs-ds-radius-control);padding:var(--hs-ds-space-6) var(--hs-ds-space-control-x);background:var(--hs-ds-color-ink);color:var(--hs-ds-color-surface);font-weight:750}.btn.secondary{background:var(--hs-ds-color-control-secondary);color:var(--hs-ds-color-body-ink)}.btn.danger{background:var(--hs-ds-color-danger)}.btn.small{padding:var(--hs-ds-space-4) var(--hs-ds-space-5);font-size:var(--hs-ds-text-md)}.primary{width:100%;padding:var(--hs-ds-space-8);margin:var(--hs-ds-space-7) 0;background:var(--hs-ds-color-gold);color:var(--hs-ds-color-on-gold)}.row{display:flex;gap:var(--hs-ds-space-6);align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0}.row:last-child{border:0}.row strong{display:block}.pill{font-size:12px;padding:var(--hs-ds-space-2) var(--hs-ds-space-4);border-radius:var(--hs-ds-radius-lg);background:#e2eadf;color:var(--green)}.pill.bad{background:#f3ded9;color:var(--bad)}input {width:100%;border:1px solid #cfcac0;border-radius:var(--hs-ds-radius-control);background:white;padding:var(--hs-ds-space-6);color:var(--ink)}label{display:block;font-weight:700;margin:12px 0 5px}#toast{position:fixed;z-index:30;left:50%;bottom:92px;transform:translate(-50%,20px);background:var(--forest);color:white;border-radius:var(--hs-ds-radius-control);padding:var(--hs-ds-space-6) 18px;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}.progress{height:9px;background:#e1ddd3;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;background:var(--gold)}.section-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:var(--hs-ds-space-4)}.section-tabs button{white-space:nowrap}.empty{text-align:center;color:var(--muted);padding:30px}.admin-form{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--hs-ds-space-5)}.admin-form .wide{grid-column:1/-1}@media(min-width:700px){.grid{grid-template-columns:repeat(4,1fr)}.card.wide{grid-column:span 2}} #gate[hidden]{display:none} .product-editor-list{ display:grid; gap:var(--hs-ds-space-6) } .product-editor{ padding:var(--hs-ds-space-7) } .product-editor-head{ margin-bottom:10px } .product-name-input{ font-weight:800; font-size:17px; background:var(--hs-ds-color-surface); } .product-editor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--hs-ds-space-4) var(--hs-ds-space-5) } .product-editor-grid label{ font-size:var(--hs-ds-text-label); color:var(--muted); margin:0 0 4px } .product-editor-grid input, .product-editor-grid select{ padding:9px } @media(min-width:700px){ .product-editor-grid{ grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr } } /* VARIANTI PRODOTTO (6/10): riepilogo quando il prodotto ha varianti, al posto dei campi prezzo/stock/minimo/ideale (che non hanno senso qui perche' ce ne sono piu' di uno) */ .product-editor-variants-summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:var(--hs-ds-space-4); padding-top:var(--hs-ds-space-4); border-top:1px solid var(--hs-ds-color-border); } .product-editor-variants-summary small{ color:var(--muted); } .metric-button{ width:100%; text-align:left; color:var(--ink); cursor:pointer } .metric-button:hover{ border-color:#bfb9ac; transform:translateY(-1px) } .metric-open{ display:block; margin-top:8px; color:var(--green); font-size:12px; font-weight:800 } .activity-details{ margin-top:18px } .activity-details summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font:700 22px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:var(--hs-ds-space-6) var(--hs-ds-space-1) } .activity-details summary::-webkit-details-marker{display:none} .activity-details summary span{ font:700 12px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green) } .activity-details[open] summary span::after{content:"Chiudi"} .activity-details[open] summary span{font-size:0} .activity-details[open] summary span::after{font-size:12px} .home-panel-modal{ max-height:82dvh; overflow:hidden; display:flex; flex-direction:column } .home-panel-content{ overflow:auto; margin-top:14px; padding-right:3px } .modal-list-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-8); padding:var(--hs-ds-space-7) 0; border-bottom:1px solid var(--line) } .modal-list-row:last-child{border-bottom:0} .modal-list-row strong{display:block} .modal-list-row .muted{ display:block; margin-top:3px } .reorder-qty{ min-width:76px; text-align:center; background:#f1eadc; border-radius:var(--hs-ds-radius-control); padding:var(--hs-ds-space-4) } .reorder-qty small{ display:block; font-size:var(--hs-ds-text-xs); font-weight:800; color:var(--muted) } .reorder-qty b{ display:block; font:700 22px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green) } .section-intro{ margin:6px 2px 22px } .section-intro h2{ margin:3px 0 4px; font-size:26px } .section-intro p{ margin:0 } .eyebrow{ display:block; font-size:10px; letter-spacing:.16em; font-weight:850; color:var(--green) } .collaborator-card b{ display:block; font:700 25px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green); margin:5px 0 } .collaborator-card .btn{ margin-top:14px } .goal-line{ display:flex; justify-content:space-between; margin:14px 0 6px; font-size:12px } .back-button{ display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--green); font:750 13px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:var(--hs-ds-space-2) var(--hs-ds-space-1); margin:0 0 18px; cursor:pointer } .back-button span{ font-size:var(--hs-ds-text-lg); line-height:1 } .back-button:hover{ opacity:.65 } .salon-editor-modal{ max-height:88dvh; overflow:auto; } .form-group label{ display:block; font-size:12px; font-weight:750; margin-bottom:6px; } .form-group input, .form-group select{ width:100%; box-sizing:border-box; } .points-editor{ display:grid; gap:var(--hs-ds-space-4); } .service-options-list{ display:grid; gap:7px; margin:4px 0 10px; } .service-option-row{ display:grid; grid-template-columns:1fr 70px 80px 34px; gap:7px; align-items:center; } .service-option-row input{ width:100%; box-sizing:border-box; } .service-options-pick-list{ display:grid; gap:8px; margin:4px 0 8px; } .service-option-pick{ display:flex; align-items:center; gap:9px; margin:0; cursor:pointer; font-size:13px; } .point-editor-row{ display:grid; grid-template-columns:30px 1fr 34px; align-items:center; gap:7px; } .prep-item-row{ display:grid; grid-template-columns:1fr 64px 34px; align-items:center; gap:7px; margin-bottom:7px; } .prep-item-row .prep-item-qty{ text-align:center; padding:9px 4px; } /* VARIANTI PRODOTTO (6/10): riga nome+prezzo+stock+minimo+ideale */ .variant-item-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 34px; align-items:center; gap:7px; margin-bottom:7px; } .variant-item-row input[type="number"]{ text-align:center; padding:9px 4px; } @media(max-width:700px){ .variant-item-row{ grid-template-columns:1fr 1fr 34px; grid-template-areas: "name name remove" "price stock remove" "minimum ideal remove"; row-gap:6px; } .variant-item-row .variant-item-name{grid-area:name;} .variant-item-row .variant-item-price{grid-area:price;} .variant-item-row .variant-item-stock{grid-area:stock;} .variant-item-row .variant-item-minimum{grid-area:minimum;} .variant-item-row .variant-item-ideal{grid-area:ideal;} .variant-item-row .point-remove{grid-area:remove;} } .point-number{ width:28px; height:28px; border-radius:var(--hs-ds-radius-circle); display:grid; place-items:center; background:#eee9df; font-size:12px; font-weight:800; } .point-remove{ width:32px; height:32px; padding:0; border:0; border-radius:var(--hs-ds-radius-circle); background:#eee9df; color:var(--ink); font-size:20px; cursor:pointer; } .add-point-button{ margin-top:9px; border:1px dashed var(--line); background:transparent; width:100%; border-radius:var(--hs-ds-radius-control); padding:11px; color:var(--green); font-weight:800; cursor:pointer; } .add-point-button:hover{ background:var(--hs-ds-color-page-legacy); } .inventory-search-wrap{ position:sticky; top:0; z-index:5; padding:var(--hs-ds-space-2) 0 var(--hs-ds-space-7); background:var(--bg); } .inventory-search{ width:100%; box-sizing:border-box; padding:var(--hs-ds-space-7) var(--hs-ds-space-8); border-radius:15px; font-size:var(--hs-ds-text-base); } .inventory-section{ margin-bottom:24px; } .inventory-section h2{ margin-bottom:9px; } .inventory-list{ padding:0 15px; } .inventory-product{ display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-7); padding:var(--hs-ds-space-7) 0; border-bottom:1px solid var(--line); } .inventory-product:last-child{ border-bottom:0; } .inventory-product-info strong, .inventory-product-info .muted{ display:block; } .inventory-product-info .muted{ margin-top:3px; } .inventory-actions{ display:flex; gap:var(--hs-ds-space-3); flex-shrink:0; } .order-simple-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-8); padding:var(--hs-ds-space-7) 0; border-bottom:1px solid var(--line); } .order-simple-row:last-child{ border-bottom:0; } .order-simple-row strong, .order-simple-row .muted{ display:block; } .order-simple-row .muted{ margin-top:4px; } .order-copy-main{ margin-top:14px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--hs-ds-space-6); } .hs-birthdate-row{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:var(--hs-ds-space-4); } .reservations-date-row{ flex-wrap:wrap; } .reservations-date-nav{ margin-bottom:0; flex:1 1 auto; justify-content:flex-end; } .reservations-date-nav input[type="date"]{ width:auto; flex:0 1 auto; min-width:0; } .hs-list-section-label{ padding:var(--hs-ds-space-5) var(--hs-ds-space-8) var(--hs-ds-space-1); font-size:var(--hs-ds-text-xs); font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--hs-ds-color-muted); } .reservation-row{ gap:var(--hs-ds-space-5); } .reservation-arrived-toggle.is-arrived{ background:var(--green); border-color:var(--green); color:var(--hs-ds-color-surface); } .reservation-row.is-arrived .hs-row-main{ opacity:.55; } .reservation-row.is-arrived .hs-row-main strong{ text-decoration:line-through; } .check-option{ display:flex; align-items:flex-start; gap:9px; margin-top:20px; cursor:pointer; font-size:var(--hs-ds-text-md); } .check-option input{ width:auto; margin-top:2px; } @media(max-width:600px){ .inventory-product{ align-items:flex-start; flex-direction:column; } .inventory-actions{ width:100%; } .inventory-actions .btn{ flex:1; } .form-grid{ grid-template-columns:1fr; } } .product-groups{ display:grid; gap:30px; } .product-group{ min-width:0; } .product-group-title{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-5); margin-bottom:10px; } .product-group-title h2{ margin:0; } .product-group-title span{ min-width:28px; height:28px; padding:0 var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-lg); display:grid; place-items:center; background:#eee9df; color:var(--green); font-size:var(--hs-ds-text-label); font-weight:850; } .sales-team-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); margin-bottom:16px; } .sales-person-card{ min-width:0; } .sales-person-head, .sales-chart-head, .sales-list-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); } .sales-person-head h3, .sales-chart-head h3{ margin:2px 0 0; } .commission-badge{ min-width:50px; height:50px; border-radius:var(--hs-ds-radius-circle); display:grid; place-items:center; background:#eee9df; color:var(--green); font-size:var(--hs-ds-text-base); font-weight:850; } .sales-person-numbers{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-5); margin-top:18px; } .sales-person-numbers div{ padding:var(--hs-ds-space-6); border-radius:13px; background:var(--hs-ds-color-page-legacy); } .sales-person-numbers small, .sales-person-numbers strong{ display:block; } .sales-person-numbers strong{ font:700 22px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin-top:3px; } .commission-tier-info{ margin:14px 0; } .commission-tier-info span, .commission-tier-info small{ display:block; } .commission-tier-info small{ color:var(--muted); margin-top:4px; } .sales-chart-card{ margin:16px 0 24px; } .sales-chart-head strong{ font:700 20px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green); } .sales-chart-scroll{ overflow-x:auto; margin-top:12px; } .sales-line-chart{ width:100%; min-width:560px; height:auto; color:var(--green); } .chart-axis{ stroke:var(--line); stroke-width:1; } .chart-line{ stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .chart-dot{ fill:var(--card); stroke:currentColor; stroke-width:3; } .chart-months{ min-width:560px; display:grid; grid-template-columns:repeat(12,1fr); gap:var(--hs-ds-space-1); } .chart-months div{ text-align:center; } .chart-months span, .chart-months small{ display:block; font-size:10px; } .chart-months small{ color:var(--muted); margin-top:2px; } .sales-list-head{ margin-top:22px; } .sales-list-head span{ min-width:28px; height:28px; border-radius:18px; background:#eee9df; display:grid; place-items:center; font-size:var(--hs-ds-text-label); font-weight:800; } .commission-settings-grid{ display:grid; gap:var(--hs-ds-space-5); margin:18px 0; } .commission-setting-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:end; gap:var(--hs-ds-space-5); padding:var(--hs-ds-space-6); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-page-legacy); } .commission-setting-row:first-child{ grid-template-columns:1.2fr 1fr; } .commission-setting-row strong, .commission-setting-row span{ display:block; } .commission-setting-row span{ color:var(--muted); font-size:var(--hs-ds-text-label); margin-top:3px; } .commission-setting-row label{ font-size:var(--hs-ds-text-label); } .commission-setting-row input{ margin-top:4px; } @media(max-width:600px){ .sales-team-grid{ grid-template-columns:1fr; } .commission-setting-row, .commission-setting-row:first-child{ grid-template-columns:1fr; } } .communication-actions{ display:flex; gap:var(--hs-ds-space-4); margin-bottom:22px; } .communication-section{ margin-top:24px; } .communication-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .communication-title h2{ margin:0; } .communication-title > span{ min-width:28px; height:28px; border-radius:18px; background:#eee9df; display:grid; place-items:center; font-size:var(--hs-ds-text-label); font-weight:850; } .communication-list{ padding:0 15px; } .communication-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); padding:var(--hs-ds-space-7) 0; border-bottom:1px solid var(--line); } .communication-row:last-child{ border-bottom:0; } .communication-row strong, .communication-row .muted{ display:block; } .communication-row .muted{ margin-top:4px; } .issue-status-area{ display:flex; align-items:center; gap:var(--hs-ds-space-3); flex-shrink:0; } .settings-user-row{ display:grid; grid-template-columns:1fr 100px; align-items:center; gap:var(--hs-ds-space-6); padding:9px 0; border-bottom:1px solid var(--line); } .settings-user-row:last-child{ border-bottom:0; } #dailyQuotes{ width:100%; box-sizing:border-box; margin-top:8px; } @media(max-width:600px){ .communication-actions{ flex-direction:column; } .communication-row{ align-items:flex-start; flex-direction:column; } .issue-status-area{ width:100%; justify-content:space-between; } } /* STAFF HOME */ .staff-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-5); } .staff-goal-card{ margin-top:10px; } .staff-goal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; } .staff-goal-card small{ display:block; margin-top:7px; } .staff-sell-main{ margin-top:14px; } .staff-today, .staff-completed, .staff-page-section{ margin-top:26px; } .staff-section-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-5); margin-bottom:9px; } .staff-section-title h2{ margin:2px 0 0; } .staff-count{ min-width:28px; height:28px; padding:0 7px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-lg); background:#eee9df; color:var(--green); font-size:var(--hs-ds-text-label); font-weight:850; } .staff-action-list, .staff-completed-list{ padding:0 var(--hs-ds-space-7); } .staff-action-row{ min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); padding:11px 0; border-bottom:1px solid var(--line); } .staff-action-row:last-child{ border-bottom:0; } .staff-action-row strong, .staff-action-row small{ display:block; } .staff-action-type{ display:block; font-size:var(--hs-ds-text-xs); letter-spacing:.12em; font-weight:850; color:var(--green); margin-bottom:3px; } .staff-check-button{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); border:1px solid var(--line); background:#f8f6ef; color:var(--green); font-size:19px; font-weight:850; } .staff-all-done{ padding:22px; border:1px dashed var(--line); border-radius:16px; text-align:center; color:var(--muted); } .staff-quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-4); margin-top:14px; } .staff-message-alert{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-5); margin-top:10px; padding:var(--hs-ds-space-7) var(--hs-ds-space-8); border:0; border-radius:15px; background:#eee9df; color:var(--ink); text-align:left; } .staff-message-alert strong{ color:var(--green); } .completed-title{ opacity:.75; } .staff-completed-list{ opacity:.78; } .staff-completed-row{ display:flex; align-items:center; gap:var(--hs-ds-space-5); padding:11px 0; border-bottom:1px solid var(--line); } .staff-completed-row:last-child{ border-bottom:0; } .staff-done-icon{ width:25px; height:25px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); background:#eee9df; color:var(--green); font-weight:850; } .staff-checklist-card{ margin-bottom:10px; } .staff-checklist-card h3{ margin-top:0; } .staff-checklist-items{ display:grid; gap:9px; margin:14px 0; } .staff-checklist-items div{ display:grid; grid-template-columns:22px 1fr; gap:7px; align-items:start; } @media(max-width:430px){ .staff-quick-actions{ grid-template-columns:1fr; } } .staff-home .metric-button{ min-height:112px; } .staff-home .metric-open{ margin-top:6px; } .staff-communication-choice{ display:grid; gap:var(--hs-ds-space-5); margin-top:18px; } .communication-choice-card{ width:100%; border:1px solid var(--line); border-radius:15px; background:#f8f6ef; padding:var(--hs-ds-space-8); text-align:left; color:var(--ink); } .communication-choice-card strong, .communication-choice-card span{ display:block; } .communication-choice-card span{ color:var(--muted); font-size:12px; margin-top:4px; } .staff-panel-summary{ padding:var(--hs-ds-space-7) 0 18px; border-bottom:1px solid var(--line); } .staff-panel-summary strong{ display:block; font:700 34px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green); } .staff-panel-summary span{ color:var(--muted); font-size:12px; } .staff-commission-detail{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-4); margin:14px 0; } .staff-commission-detail div{ padding:var(--hs-ds-space-6); border-radius:13px; background:var(--hs-ds-color-page-legacy); } .staff-commission-detail small, .staff-commission-detail strong{ display:block; } .staff-commission-detail small{ color:var(--muted); font-size:var(--hs-ds-text-xs); letter-spacing:.08em; font-weight:800; } .staff-commission-detail strong{ margin-top:3px; font:700 21px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .commission-explanation{ margin:12px 0; } .commission-explanation strong, .commission-explanation span{ display:block; } .commission-explanation span{ margin-top:5px; } .staff-goal-big{ text-align:center; padding:18px 0; } .staff-goal-big strong{ display:block; font:700 38px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--green); } .staff-goal-big span{ display:block; margin-top:4px; color:var(--muted); } .staff-modal-progress{ margin-bottom:16px; } .staff-todo-details{ margin-top:26px; } .staff-todo-details > summary{ list-style:none; cursor:pointer; } .staff-todo-details > summary::-webkit-details-marker{ display:none; } .staff-todo-summary-right{ display:flex; align-items:center; gap:9px; } .staff-chevron{ font-size:var(--hs-ds-text-lg); transition:transform .18s ease; } .staff-todo-details[open] .staff-chevron{ transform:rotate(180deg); } .staff-todo-body{ margin-top:9px; } .staff-check-empty{ font-size:27px; font-weight:400; line-height:1; } .staff-check-empty:hover{ background:#eee9df; } .staff-inline-checklist{ border-bottom:1px solid var(--line); } .staff-inline-checklist:last-child{ border-bottom:0; } .staff-inline-checklist > summary{ list-style:none; cursor:pointer; } .staff-inline-checklist > summary::-webkit-details-marker{ display:none; } .staff-inline-arrow{ font-size:var(--hs-ds-text-lg); color:var(--green); transition:transform .18s ease; } .staff-inline-checklist[open] .staff-inline-arrow{ transform:rotate(180deg); } .staff-inline-checklist-items{ display:grid; gap:var(--hs-ds-space-1); padding:0 0 var(--hs-ds-space-6) var(--hs-ds-space-7); } .staff-checklist-item{ width:100%; display:grid; grid-template-columns:32px 1fr; align-items:center; gap:var(--hs-ds-space-4); border:0; background:transparent; padding:var(--hs-ds-space-5) var(--hs-ds-space-3); text-align:left; color:var(--ink); border-radius:var(--hs-ds-radius-sm); } .staff-checklist-item:hover{ background:var(--hs-ds-color-page-legacy); } .staff-item-circle{ font-size:24px; line-height:1; color:var(--green); } .staff-checklist-item.is-done{ opacity:.5; } .staff-checklist-item.is-done > span:last-child{ text-decoration:line-through; } .modal-inline-checklist{ padding:0; } .staff-task-details > summary, .staff-home-completed > summary{ list-style:none; cursor:pointer; } .staff-task-details > summary::-webkit-details-marker, .staff-home-completed > summary::-webkit-details-marker{ display:none; } .staff-task-details[open] .staff-chevron, .staff-home-completed[open] .staff-chevron{ transform:rotate(180deg); } .staff-tomorrow{ margin-top:24px; } .commission-year-card{ margin-bottom:12px; } .commission-history-head{ margin-top:22px; } /* ===== AGENDA ===== */ .agenda-shell{ padding-bottom:40px; } .agenda-topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-8); margin-bottom:14px; } .agenda-topbar h2{ margin:2px 0 0; text-transform:capitalize; } .agenda-add{ width:48px; height:48px; border:0; border-radius:var(--hs-ds-radius-circle); font-size:30px; line-height:1; background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); cursor:pointer; } .agenda-date-nav{ display:flex; align-items:center; justify-content:center; gap:var(--hs-ds-space-4); margin-bottom:14px; } .agenda-date-nav button{ border:1px solid rgba(16,28,23,.12); background:var(--hs-ds-color-surface); border-radius:var(--hs-ds-radius-control); padding:var(--hs-ds-space-4) 13px; font:inherit; cursor:pointer; } .agenda-today{ min-width:72px; } .agenda-calendar{ overflow-x:auto; border:1px solid rgba(16,28,23,.12); border-radius:18px; background:var(--hs-ds-color-surface); } .agenda-staff-head{ min-width:720px; display:grid; grid-template-columns:72px repeat(3,1fr); position:sticky; top:0; z-index:3; background:#f7f4ed; border-bottom:1px solid rgba(16,28,23,.12); } .agenda-person{ min-height:54px; display:flex; align-items:center; justify-content:center; } .agenda-person{ font-weight:700; border-left:1px solid rgba(16,28,23,.1); } .agenda-hour-row{ display:grid; grid-template-columns:72px repeat(3,1fr); min-height:72px; } .agenda-hour-label{ padding:var(--hs-ds-space-5) var(--hs-ds-space-4); text-align:center; color:#7b7d78; font-size:12px; border-top:1px solid rgba(16,28,23,.08); } .agenda-slot{ position:relative; border-left:1px solid rgba(16,28,23,.08); border-top:1px solid rgba(16,28,23,.08); cursor:pointer; } .agenda-slot:hover{ background:rgba(16,28,23,.025); } @media(max-width:700px){ .agenda-calendar{ margin-left:-4px; margin-right:-4px; } .agenda-staff-head{ min-width:660px; } } /* ===== AGENDA APPOINTMENTS ===== */ .agenda-slot{ padding:5px; text-align:left; background:var(--hs-ds-color-surface); appearance:none; width:100%; min-width:0; } .agenda-appointment{width:100%} .agenda-appointment + .agenda-appointment{margin-top:5px} .agenda-slot{ position:relative; min-height:72px; } .agenda-appointment{position:relative;z-index:2} /* ===== AGENDA PRO DAY VIEW ===== */ .agenda-calendar-pro{ overflow:auto; max-height:72vh; } .agenda-person{ flex-direction:column; gap:var(--hs-ds-space-1); } .agenda-person span{ font-size:10px; font-weight:500; opacity:.6; } .agenda-person-luca{ background:#f7dddd; } .agenda-person-daniele{ background:#dcefdc; } .agenda-person-antonio{ background:#dbeef6; } .agenda-off{ background:#f3f3f1; } .agenda-working.agenda-luca{ background:#fff2f2; } .agenda-working.agenda-daniele{ background:#eff9ef; } .agenda-working.agenda-antonio{ background:#eef8fc; } /* ===== AGENDA RESPONSIVE FINAL ===== */ /* Desktop: Agenda sfrutta davvero lo schermo */ @media(min-width:701px){ main:has(.agenda-shell){ width:100%; max-width:1500px; padding-left:28px; padding-right:28px; } main:has(.agenda-shell) .agenda-shell{ width:100%; max-width:1380px; margin:0 auto; } main:has(.agenda-shell) .agenda-calendar-pro{ width:100%; } main:has(.agenda-shell) .agenda-staff-head{ grid-template-columns:72px repeat(3,minmax(0,1fr)); min-width:0; } } /* Mobile: tutte e tre le agende visibili insieme */ @media(max-width:700px){ main{ padding-left:var(--hs-ds-space-5); padding-right:var(--hs-ds-space-5); } .agenda-shell{ width:100%; } .agenda-calendar-pro{ width:100%; overflow-y:auto; overflow-x:hidden; } .agenda-staff-head{ min-width:0 !important; width:100%; grid-template-columns:38px repeat(3,minmax(0,1fr)) !important; } .agenda-person{ min-width:0; padding:var(--hs-ds-space-4) var(--hs-ds-space-1); } .agenda-person strong{ font-size:var(--hs-ds-text-md); white-space:nowrap; } .agenda-person span{ font-size:8px; white-space:nowrap; } } /* ===== AGENDA DAY MONTH SWITCH ===== */ .agenda-view-switch{ display:flex; justify-content:center; gap:var(--hs-ds-space-2); margin:6px auto 10px; padding:var(--hs-ds-space-2); width:max-content; background:#e8e5dc; border-radius:13px; } .agenda-view-switch button{ border:0; background:transparent; padding:var(--hs-ds-space-4) 18px; border-radius:var(--hs-ds-radius-sm); font-weight:750; color:var(--hs-ds-color-muted); } .agenda-view-switch button.active{ background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); box-shadow:0 1px 5px rgba(0,0,0,.08); } .agenda-month{ background:var(--hs-ds-color-surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; touch-action:pan-y; } .agenda-month-weekdays, .agenda-month-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .agenda-month-weekdays span{ padding:var(--hs-ds-space-6) var(--hs-ds-space-2); text-align:center; font-size:12px; font-weight:750; color:var(--muted); border-bottom:1px solid var(--line); } .agenda-month-day, .agenda-month-empty{ min-height:92px; border:0; border-right:1px solid #eeece6; border-bottom:1px solid #eeece6; background:var(--hs-ds-color-surface); } .agenda-month-day{ position:relative; padding:var(--hs-ds-space-5); text-align:left; } .agenda-month-day strong{ display:grid; place-items:center; width:32px; height:32px; border-radius:var(--hs-ds-radius-sm); } .agenda-month-day.today strong{ background:var(--forest); color:white; } .agenda-month-day.selected{ background:var(--hs-ds-color-page-legacy); } .agenda-calendar-pro{ touch-action:pan-y; } @media(max-width:700px){ .agenda-view-switch button{ padding:var(--hs-ds-space-4) var(--hs-ds-space-7); } .agenda-month-day, .agenda-month-empty{ min-height:58px; } .agenda-month-day{ padding:5px; } .agenda-month-day strong{ width:28px; height:28px; font-size:var(--hs-ds-text-md); } } /* ===== AGENDA DRAG DROP ===== */ .agenda-drag-source{ opacity:.35; } .agenda-drag-ghost{ position:fixed !important; z-index:9999 !important; width:150px !important; min-height:58px !important; transform:translate(-50%,-50%); pointer-events:none !important; opacity:.92; box-shadow:0 12px 30px rgba(0,0,0,.22) !important; } .agenda-drop-hover{ outline:2px solid var(--forest); outline-offset:-2px; z-index:3; } .agenda-drag-saving{ opacity:.55; pointer-events:none; } @media(max-width:700px){ .agenda-drag-ghost{ width:110px !important; min-height:52px !important; } } /* ===== AGENDA 45 MIN LANES ===== */ .agenda-lanes{ display:grid; grid-template-columns:72px repeat(3,minmax(0,1fr)); min-width:0; width:100%; } .agenda-time-axis, .agenda-lane{ position:relative; height:900px; } .agenda-time-axis{ background:#faf9f5; border-right:1px solid rgba(16,28,23,.10); } .agenda-time-axis span{ position:absolute; right:8px; transform:translateY(-50%); font-size:10px; color:var(--hs-ds-color-ui-placeholder); white-space:nowrap; } .agenda-lane{ overflow:visible; background:#f3f3f1; border-right:1px solid rgba(16,28,23,.08); } .agenda-working-window{ position:absolute; top:var(--agenda-top); height:var(--agenda-height); left:0; right:0; pointer-events:none; } .agenda-working-window.agenda-luca{ background:#fff2f2; } .agenda-working-window.agenda-daniele{ background:#eff9ef; } .agenda-working-window.agenda-antonio{ background:#eef8fc; } .agenda-45-slot{ position:absolute; top:var(--agenda-top); height:var(--agenda-height); left:0; right:0; width:100%; border:0; border-top:1px solid rgba(16,28,23,.13); border-bottom:0; background:transparent; z-index:2; } .agenda-45-slot:hover{ background:rgba(255,255,255,.28); } .agenda-lane .agenda-appointment{position:absolute;top:calc(var(--agenda-top) + 2px);height:calc(var(--agenda-height) - 4px);min-height:0;left:4px;right:4px;width:auto;z-index:5} @media(max-width:700px){ .agenda-lanes{ grid-template-columns:38px repeat(3,minmax(0,1fr)); } .agenda-time-axis, .agenda-lane{ height:780px; } .agenda-time-axis span{ right:3px; font-size:8px; } .agenda-lane .agenda-appointment{left:2px;right:2px} } /* ===== AGENDA ADD MENU ===== */ .agenda-add-menu{ max-width:420px; } .agenda-add-choice{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:17px; margin-top:10px; border:1px solid var(--line); border-radius:15px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .agenda-add-choice strong{ font-size:var(--hs-ds-text-base); } .agenda-add-choice span{ font-size:12px; color:var(--muted); } .agenda-add-choice:hover{ background:#f7f4ec; } /* ===== AGENDA SLOT TIME LABELS ===== */ .agenda-45-slot{ text-align:left; } .agenda-slot-time{ position:absolute; top:3px; left:5px; font-size:var(--hs-ds-text-xs); line-height:1; font-weight:650; color:var(--hs-ds-color-field-border-focus); pointer-events:none; } .agenda-appointment{z-index:6} @media(max-width:700px){ .agenda-slot-time{ top:3px; left:3px; font-size:7px; } } /* ===== AGENDA MULTI SELECT ===== */ .agenda-bulk-bar{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; margin:8px 0 6px; } .agenda-bulk-btn{ border:1px solid var(--line); background:var(--hs-ds-color-surface); color:var(--forest); border-radius:var(--hs-ds-radius-sm); padding:7px 11px; font-size:12px; font-weight:750; } .agenda-bulk-btn:disabled{ opacity:.4; } .agenda-bulk-delete{ color:#a53232; } .agenda-bulk-count{ font-size:var(--hs-ds-text-label); color:var(--muted); margin-right:auto; } .agenda-selected{ outline:3px solid var(--forest) !important; outline-offset:-3px; } .agenda-select-dot{ position:absolute; top:5px; right:5px; width:19px; height:19px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.9); border-radius:var(--hs-ds-radius-circle); background:rgba(255,255,255,.24); color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-label)!important; font-weight:900; z-index:8; } .agenda-selected .agenda-select-dot{ background:var(--hs-ds-color-surface); color:var(--forest); } @media(max-width:700px){ .agenda-bulk-bar{ justify-content:flex-start; } .agenda-bulk-btn{ padding:7px 9px; font-size:var(--hs-ds-text-label); } .agenda-select-dot{ width:17px; height:17px; top:3px; right:3px; font-size:10px !important; } } /* ===== AGENDA MULTI SELECT ===== */ .agenda-bulk-bar{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:8px 0 6px; } .agenda-bulk-btn{ border:1px solid var(--line); background:var(--hs-ds-color-surface); color:var(--forest); border-radius:var(--hs-ds-radius-sm); padding:7px 11px; font-size:12px; font-weight:750; } .agenda-bulk-btn:disabled{ opacity:.4; } .agenda-bulk-delete{ color:#a53232; } .agenda-bulk-count{ margin-right:auto; font-size:var(--hs-ds-text-label); color:var(--muted); } .agenda-selected{ outline:3px solid var(--forest) !important; outline-offset:-3px; } .agenda-select-dot{ position:absolute; top:5px; right:5px; width:19px; height:19px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.95); border-radius:var(--hs-ds-radius-circle); background:rgba(255,255,255,.22); color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-label)!important; font-weight:900; z-index:9; } .agenda-selected .agenda-select-dot{ background:var(--hs-ds-color-surface); color:var(--forest); } @media(max-width:700px){ .agenda-bulk-btn{ padding:7px 9px; font-size:var(--hs-ds-text-label); } .agenda-select-dot{ width:17px; height:17px; top:3px; right:3px; } } /* ===== AGENDA DESKTOP ARROWS + NOTE ===== */ .agenda-desktop-stage{ position:relative; width:100%; } .agenda-side-arrow{ display:none; } .agenda-note-star{ display:inline; margin-left:2px; font-size:.85em; line-height:0; font-weight:900; } @media(min-width:901px){ .agenda-desktop-stage{ padding:0 48px; } .agenda-side-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; display:grid; place-items:center; width:38px; height:64px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); color:var(--forest); font-size:30px; line-height:1; cursor:pointer; } .agenda-side-prev{ left:2px; } .agenda-side-next{ right:2px; } .agenda-side-arrow:hover{ background:var(--hs-ds-color-page-legacy); } } /* card sempre contenute nei blocchi visuali */ .agenda-lane .agenda-appointment{top:calc(var(--agenda-top) + 4px);height:calc(var(--agenda-height) - 8px)} /* ===== CLIENT DATABASE ===== */ .agenda-top-actions{ display:flex; align-items:center; gap:var(--hs-ds-space-4); } .clients-shell{ width:100%; } .clients-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--hs-ds-space-8); } .clients-search-card{ margin-top:14px; padding:var(--hs-ds-space-6); } .clients-search-input{ width:100%; min-height:46px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-control); padding:0 var(--hs-ds-space-7); font-size:16px; background:var(--hs-ds-color-surface); color:var(--ink); } .clients-search-status{ display:block; margin-top:7px; font-size:var(--hs-ds-text-label); } .clients-results{ margin-top:10px; display:flex; flex-direction:column; gap:var(--hs-ds-space-3); } .client-row{ width:100%; min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:11px; border:1px solid var(--line); border-radius:13px; padding:var(--hs-ds-space-5) var(--hs-ds-space-6); background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .client-avatar{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); background:#eeece5; font-size:var(--hs-ds-text-control); font-weight:850; } .client-row-main{ min-width:0; display:flex; flex-direction:column; gap:3px; } .client-row-main strong{ font-size:var(--hs-ds-text-control); } .client-row-main span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hs-ds-text-label); color:var(--muted); } .client-row-arrow{ font-size:24px; color:var(--muted); } @media(max-width:700px){ .clients-header{ align-items:flex-start; flex-direction:column; } .clients-header .btn{ width:100%; } } /* ===== AGENDA CLIENT AUTOCOMPLETE ===== */ .agenda-customer-field{ position:relative; } .agenda-customer-results{ display:flex; flex-direction:column; gap:3px; margin-top:5px; max-height:220px; overflow:auto; border-radius:var(--hs-ds-radius-sm); } .agenda-customer-result{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:var(--hs-ds-space-1); padding:9px var(--hs-ds-space-5); border:1px solid var(--line); border-radius:9px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .agenda-customer-result strong{ font-size:12px; } .agenda-customer-result span{ font-size:10px; color:var(--muted); } .agenda-customer-empty{ padding:var(--hs-ds-space-4) var(--hs-ds-space-5); font-size:10px; color:var(--muted); } .agenda-selected-client{ margin-top:6px; padding:7px 9px; display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-5); border-radius:9px; background:#f1efe8; font-size:10px; } .agenda-selected-client[hidden]{ display:none; } .agenda-selected-client button{ border:0; background:transparent; padding:0; color:var(--forest); font-weight:800; cursor:pointer; } .agenda-new-client-fields{ margin-bottom:12px; padding:var(--hs-ds-space-5); border:1px dashed var(--line); border-radius:11px; } .agenda-new-client-fields[hidden]{ display:none; } .agenda-client-note-preview{ font-style:italic; } /* ===== AGENDA SLOT CENTERING FINAL ===== */ /* La durata continua a determinare lo spazio reale: 15/30/45 -> 1 slot visivo 60/75/90 -> 2 slot visivi La card viene però centrata dentro quello spazio invece di riempirlo da bordo a bordo. */ .agenda-lane .agenda-appointment{top:calc(var(--agenda-top) + 10px) !important;height:calc(var(--agenda-height) - 20px) !important;left:8px !important;right:8px !important;margin:0} /* l'orario resta dietro alla card se si sovrappongono */ .agenda-slot-time{ z-index:2; } .agenda-lane .agenda-appointment{z-index:7} @media(max-width:700px){ .agenda-lane .agenda-appointment{top:calc(var(--agenda-top) + 6px) !important;height:calc(var(--agenda-height) - 12px) !important;left:3px !important;right:3px !important} } /* ===== AGENDA SLOT MARGIN 1PX ===== */ .agenda-lane .agenda-appointment{top:calc(var(--agenda-top) + 1px) !important;height:calc(var(--agenda-height) - 2px) !important;left:1px !important;right:1px !important} @media(max-width:700px){ .agenda-lane .agenda-appointment{top:calc(var(--agenda-top) + 1px) !important;height:calc(var(--agenda-height) - 2px) !important;left:1px !important;right:1px !important} } /* ===== AGENDA SERVICES MANAGER ===== */ .services-shell{ width:100%; } .services-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--hs-ds-space-8); } .service-seed-card{ margin-top:14px; } .service-seed-card p{ margin:6px 0 12px; } .services-list{ margin-top:12px; display:flex; flex-direction:column; gap:7px; } .service-row{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:var(--hs-ds-space-5); padding:13px var(--hs-ds-space-7); border:1px solid var(--line); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .service-row-main{ min-width:0; display:flex; flex-direction:column; gap:3px; } .service-row-title{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .service-row-main strong{ font-size:var(--hs-ds-text-control); } .service-row-main span{ font-size:var(--hs-ds-text-label); color:var(--muted); } .service-row-main small{ margin-top:3px; font-size:10px; line-height:1.25; color:var(--muted); } .service-status{ display:inline-flex; padding:var(--hs-ds-space-1) var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-lg); background:#eee; font-size:var(--hs-ds-text-xs)!important; font-weight:800; } .service-inactive{ opacity:.55; } .service-staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .service-staff-option{ display:flex; align-items:center; justify-content:center; gap:var(--hs-ds-space-3); min-height:42px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); } .service-prep-box{ margin-top:12px; padding:var(--hs-ds-space-6); border:1px solid var(--line); border-radius:var(--hs-ds-radius-control); background:#faf9f5; } .service-prep-box>p{ margin:4px 0 12px; } .service-active-option{ margin-top:12px; } @media(max-width:700px){ .services-header{ align-items:flex-start; flex-direction:column; } .services-header .btn{ width:100%; } .service-staff-grid{ grid-template-columns:1fr; } } /* ===== SERVICES MANAGER ===== */ .services-shell{ width:100%; } .services-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--hs-ds-space-8); } .service-seed-card{ margin-top:14px; } .service-seed-card p{ margin:6px 0 12px; } .services-list{ margin-top:12px; display:flex; flex-direction:column; gap:7px; } .service-row{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:var(--hs-ds-space-5); padding:13px var(--hs-ds-space-7); border:1px solid var(--line); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .service-row-main{ min-width:0; display:flex; flex-direction:column; gap:3px; } .service-row-title{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .service-row-main strong{ font-size:var(--hs-ds-text-control); } .service-row-main span{ font-size:var(--hs-ds-text-label); color:var(--muted); } .service-row-main small{ margin-top:3px; font-size:10px; line-height:1.25; color:var(--muted); } .service-status{ display:inline-flex; padding:var(--hs-ds-space-1) var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-lg); background:#eee; font-size:var(--hs-ds-text-xs)!important; font-weight:800; } .service-inactive{ opacity:.55; } .service-staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .service-staff-option{ display:flex; justify-content:center; align-items:center; gap:var(--hs-ds-space-3); min-height:42px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); } .service-staff-option input{ width:auto; } .service-prep-box{ margin-top:12px; padding:var(--hs-ds-space-6); border:1px solid var(--line); border-radius:var(--hs-ds-radius-control); background:#faf9f5; } .service-prep-box>p{ margin:4px 0 12px; } .service-active-option{ margin-top:12px; } @media(max-width:700px){ .services-header{ flex-direction:column; align-items:flex-start; } .services-header .btn{ width:100%; } .service-staff-grid{ grid-template-columns:1fr; } } /* ===== AGENDA DAILY OPERATION SUMMARY ===== */ .agenda-day-summary{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-5); margin-top:14px; } .agenda-summary-card{ padding:13px var(--hs-ds-space-7); border:1px solid var(--line); border-radius:13px; background:var(--hs-ds-color-surface); } .agenda-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-5); margin-bottom:9px; } .agenda-summary-head small{ font-size:10px; font-weight:850; letter-spacing:.08em; color:var(--muted); } .agenda-summary-head strong{ font-size:20px; } .agenda-summary-items{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-3); } .agenda-summary-items span{ display:inline-flex; align-items:center; gap:var(--hs-ds-space-2); padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-lg); background:#f3f1eb; font-size:10px; } .agenda-summary-items b{ font-weight:900; } @media(max-width:700px){ .agenda-day-summary{ grid-template-columns:1fr; } } /* ========================================================= HS LEGACY EDIT CALENDAR CLEANUP V1 Il vecchio mini-calendario della modal Modifica appuntamento è stato rimosso. La modal usa ora il controllo date nativo. Restano qui soltanto le regole della vista Agenda mensile che condividevano accidentalmente il vecchio blocco. ========================================================= */ @media(max-width:700px){ .agenda-month-day, .agenda-month-empty{ min-height:62px; } .agenda-month-day{ padding:var(--hs-ds-space-2); } } /* ===== AGENDA SETTINGS CONTROL ROOM ===== */ .agenda-settings-button{ width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--ink); font-size:var(--hs-ds-text-lg); line-height:1; } .agenda-settings-shell{ width:100%; } .agenda-setting-section{ width:100%; } .agenda-public-preview-placeholder{ padding:28px var(--hs-ds-space-9); border:1px solid var(--line); border-radius:18px; background:var(--hs-ds-color-surface); text-align:center; } .agenda-public-preview-placeholder small{ font-size:var(--hs-ds-text-xs); font-weight:850; letter-spacing:.12em; color:var(--muted); } .agenda-public-preview-placeholder h2{ margin:8px 0; } .agenda-public-preview-placeholder p{ max-width:480px; margin:0 auto 16px; font-size:12px; line-height:1.45; color:var(--muted); } @media(max-width:700px){ .agenda-settings-button{ width:36px; height:36px; border-radius:var(--hs-ds-radius-sm); } } /* ===== TEAM EDITOR ===== */ .team-editor-list{ display:grid; grid-template-columns:1fr; gap:var(--hs-ds-space-5); margin-top:14px; } /* * Riga = maniglia drag&drop + card del profilo. Una sola colonna * (anche su desktop, non piu' 3 per riga) cosi' il trascinamento * dall'alto in basso corrisponde sempre a "su/giu' nella lista", * senza salti strani tra colonne diverse. */ .team-profile-row{ display:flex; align-items:center; gap:var(--hs-ds-space-4); } .team-profile-row.is-dragging{ opacity:.55; } .team-profile-row .team-profile-card{ flex:1; min-width:0; } .team-drag-handle{ flex:0 0 28px; width:28px; height:42px; display:grid; place-items:center; cursor:grab; touch-action:none; user-select:none; color:var(--muted); font-size:var(--hs-ds-text-lg); } .team-drag-handle:active{ cursor:grabbing; } /* DRAG&DROP POSIZIONE PRODOTTI (6/10): stesso pattern del team */ .product-sort-row{ display:flex; align-items:flex-start; gap:var(--hs-ds-space-4); } .product-sort-row.is-dragging{ opacity:.55; } .product-sort-row .product-editor{ flex:1; min-width:0; } .product-drag-handle{ flex:0 0 28px; width:28px; height:42px; margin-top:var(--hs-ds-space-2); display:grid; place-items:center; cursor:grab; touch-action:none; user-select:none; color:var(--muted); font-size:var(--hs-ds-text-lg); } .product-drag-handle:active{ cursor:grabbing; } .team-profile-card{ width:100%; min-width:0; display:grid; grid-template-columns:54px minmax(0,1fr) 20px; gap:var(--hs-ds-space-6); align-items:center; padding:var(--hs-ds-space-7); border:1px solid var(--line); border-radius:16px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .team-profile-card:hover{ transform:translateY(-1px); } .team-profile-avatar{ width:54px; height:54px; display:grid; place-items:center; overflow:hidden; border-radius:var(--hs-ds-radius-circle); border:2px solid var(--team-color,var(--hs-ds-color-ui-placeholder)); background:var(--hs-ds-color-field-disabled); } .team-profile-avatar img, .team-modal-avatar img{ width:100%; height:100%; object-fit:cover; } .team-profile-avatar span, .team-modal-avatar span{ font-size:var(--hs-ds-text-base); font-weight:850; } .team-profile-main{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .team-profile-main>span{ font-size:var(--hs-ds-text-label); color:var(--muted); } .team-profile-title{ display:flex; align-items:center; gap:7px; } .team-profile-title strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .team-profile-color{ width:8px; height:8px; flex:0 0 auto; border-radius:var(--hs-ds-radius-circle); background:var(--team-color,var(--hs-ds-color-ui-placeholder)); } .team-profile-badges{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-2); margin-top:3px; } .team-profile-badges small{ padding:3px var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-pill); font-size:7.5px; font-weight:800; line-height:1.1; } .team-badge-on{ background:#eef5ee; color:#44704b; } .team-badge-off{ background:#f2f2f2; color:#888; } .team-badge-pending{ background:#fbf0d9; color:#8a6a1f; } .team-settings-note{ display:flex; flex-direction:column; gap:3px; margin-top:12px; padding:var(--hs-ds-space-6) var(--hs-ds-space-7); border:1px solid var(--line); border-radius:13px; background:#f7f5f0; } .team-settings-note strong{ font-size:10px; } .team-settings-note span{ font-size:var(--hs-ds-text-xs); line-height:1.4; color:var(--muted); } .team-profile-card-self{ max-width:520px; margin-top:14px; } .team-profile-modal{ max-width:650px; } .team-modal-profile-preview{ display:flex; align-items:center; gap:var(--hs-ds-space-6); padding:var(--hs-ds-space-6); margin-bottom:14px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:#f7f5f0; } .team-modal-avatar{ width:58px; height:58px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border:2px solid var(--team-color,var(--hs-ds-color-ui-placeholder)); border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); } .team-modal-photo-actions{ display:flex; flex-direction:column; gap:var(--hs-ds-space-3); flex:0 0 auto; } .team-modal-photo-btn{ padding:var(--hs-ds-space-3) var(--hs-ds-space-5); border:0; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-label); font-weight:650; cursor:pointer; white-space:nowrap; } .team-modal-photo-btn-remove{ color:var(--hs-ds-color-danger); background:none; } .team-modal-profile-preview>div:last-child{ min-width:0; display:flex; flex-direction:column; gap:3px; } .team-modal-profile-preview strong{ font-size:var(--hs-ds-text-base); } .team-modal-profile-preview span{ font-size:10px; color:var(--muted); } .team-admin-settings-box{ display:flex; flex-direction:column; gap:var(--hs-ds-space-5); margin-top:14px; padding:var(--hs-ds-space-7); border:1px solid var(--line); border-radius:15px; background:#f7f5f0; } .team-admin-settings-title{ display:flex; flex-direction:column; gap:3px; } .team-admin-settings-title strong{ font-size:12px; } .team-admin-settings-title span{ font-size:var(--hs-ds-text-xs); color:var(--muted); } .team-color-field{ min-height:42px; display:flex; align-items:center; gap:var(--hs-ds-space-5); } .team-color-field span{ font-size:8.5px; line-height:1.3; color:var(--muted); } .team-services-field{ margin-top:4px; } @media(max-width:700px){ .team-editor-list{ grid-template-columns:1fr; } .team-profile-card{ grid-template-columns:48px minmax(0,1fr) 18px; padding:var(--hs-ds-space-6); } .team-profile-avatar{ width:48px; height:48px; } .team-profile-modal{ max-width:none; } } /* ===== GLOBAL RESPONSIVE FOUNDATION V110B ===== */ html{ width:100%; max-width:100%; min-height:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; } body{ width:100%; max-width:100%; min-height:100dvh; overflow-x:hidden; overscroll-behavior-x:none; } #app{ width:100%; max-width:100%; min-height:100dvh; overflow-x:hidden; } header{ width:100%; max-width:100%; } main{ width:100%; max-width:none; margin:0; padding-left:clamp(var(--hs-ds-space-6),2vw,28px); padding-right:clamp(var(--hs-ds-space-6),2vw,28px); } button, input, select, textarea, a{ touch-action:manipulation; } img{ max-width:100%; } .agenda-shell, .agenda-settings-shell, .agenda-setting-section, .services-shell, .clients-shell, .team-settings-shell{ width:100%; max-width:none; } .team-profile-modal{ width:min(1180px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; padding:22px; scrollbar-gutter:stable; } .team-profile-modal .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); } @media(min-width:1100px){ .team-profile-modal{ padding:26px 30px; } } @media(max-width:700px){ html, body{ width:100%; max-width:100vw; } main{ width:100%; max-width:100vw; padding-left:var(--hs-ds-space-6); padding-right:var(--hs-ds-space-6); } input, select, textarea{ font-size:16px; } .team-profile-modal{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding-top:max(var(--hs-ds-space-7),env(safe-area-inset-top)); padding-right:var(--hs-ds-space-7); padding-bottom:max(22px,env(safe-area-inset-bottom)); padding-left:var(--hs-ds-space-7); border:0; border-radius:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } .team-profile-modal .form-grid{ grid-template-columns:1fr; gap:0; } } /* ===== TEAM STATIC PHOTO NOTE ===== */ .team-photo-managed-note{ display:block; margin-top:6px; font-size:var(--hs-ds-text-xs); line-height:1.35; color:var(--muted); } /* ===== TEAM CUSTOM CONTROLS V116 ===== */ .team-admin-settings-box{ gap:var(--hs-ds-space-7); } .team-setting-help{ display:block; margin-top:7px; font-size:8.5px; line-height:1.35; color:var(--muted); } /* Posizione team */ .team-order-selector{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hs-ds-space-3); } .team-order-option{ margin:0; } .team-order-option input{ position:absolute; opacity:0; pointer-events:none; } .team-order-option span{ min-height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--muted); font-size:12px; font-weight:850; cursor:pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .team-order-option input:checked + span{ background:var(--forest); border-color:var(--forest); color:var(--hs-ds-color-surface); } .team-order-option span:active{ transform:scale(.97); } /* Toggle custom */ .team-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid var(--line); } .team-toggle-row>div{ min-width:0; display:flex; flex-direction:column; gap:3px; } .team-toggle-row strong{ font-size:var(--hs-ds-text-label); } .team-toggle-row>div>span{ font-size:8.5px; line-height:1.35; color:var(--muted); } .team-switch{ flex:0 0 auto; margin:0; } .team-switch input{ position:absolute; opacity:0; pointer-events:none; } .team-switch-track{ width:46px; height:27px; display:block; padding:3px; border-radius:var(--hs-ds-radius-pill); background:#d8d5cd; cursor:pointer; transition:background .18s ease; } .team-switch-track i{ width:21px; height:21px; display:block; border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); box-shadow:0 2px 6px rgba(0,0,0,.14); transition:transform .18s ease; } .team-switch input:checked + .team-switch-track{ background:var(--forest); } .team-switch input:checked + .team-switch-track i{ transform:translateX(19px); } /* Servizi custom */ .team-service-picker{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .team-service-option{ margin:0; } .team-service-option input{ position:absolute; opacity:0; pointer-events:none; } .team-service-option span{ min-height:42px; height:100%; display:flex; align-items:center; justify-content:center; padding:9px var(--hs-ds-space-5); border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--ink); font-size:9.5px; font-weight:750; text-align:center; cursor:pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .team-service-option input:checked + span{ background:#ece9df; border-color:#bcb6a8; color:var(--forest); } .team-service-option input:checked + span::before{ content:'✓'; margin-right:6px; font-size:var(--hs-ds-text-xs); font-weight:900; } .team-service-option span:active{ transform:scale(.98); } /* Colore Agenda */ .team-color-field{ min-height:44px; padding:var(--hs-ds-space-3) 9px; border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); } .team-color-field input[type="color"]{ width:32px; min-width:32px; height:32px; padding:0; border:0; border-radius:var(--hs-ds-radius-circle); overflow:hidden; background:transparent; } .team-color-field input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; } .team-color-field input[type="color"]::-webkit-color-swatch{ border:0; border-radius:var(--hs-ds-radius-circle); } @media(max-width:700px){ .team-service-picker{ grid-template-columns:repeat(2,minmax(0,1fr)); } .team-toggle-row{ gap:var(--hs-ds-space-6); } .team-order-option span{ min-height:44px; } } /* ===== GLOBAL DESIGN SYSTEM V119 ===== */ /* * Regola generale tabs: * - stessa altezza * - larghezza coerente * - niente tab microscopiche * - scroll orizzontale solo quando realmente necessario */ .section-tabs, .agenda-view-switch{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(118px,1fr); gap:7px; width:100%; max-width:100%; overflow-x:auto; scrollbar-width:none; } .section-tabs::-webkit-scrollbar, .agenda-view-switch::-webkit-scrollbar{ display:none; } .section-tabs button, .agenda-view-switch button{ width:100%; min-width:118px; min-height:40px; display:flex; align-items:center; justify-content:center; white-space:nowrap; } /* Tutte le sezioni impostazioni */ .agenda-setting-section{ width:100%; max-width:none; } .settings-block-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-8); margin-bottom:14px; } .settings-block-head>div{ display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .settings-block-head small{ font-size:8px; font-weight:850; letter-spacing:.12em; color:var(--muted); } .settings-block-head strong{ font-size:var(--hs-ds-text-control); } .settings-block-head>span{ font:700 20px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#c7c1b5; } /* ===== BRAND SETTINGS V119 ===== */ .brand-settings-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-8); } .brand-live-badge{ padding:7px var(--hs-ds-space-5); border:1px solid var(--line); border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface); font-size:8px; font-weight:850; letter-spacing:.06em; } .brand-settings-layout{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); gap:var(--hs-ds-space-7); margin-top:14px; } .brand-settings-main{ display:flex; flex-direction:column; gap:var(--hs-ds-space-5); } .brand-settings-card{ padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--card); } .brand-settings-card .form-group:first-of-type label{ margin-top:0; } .brand-toggle-list{ margin-top:4px; } .brand-preview-card{ position:sticky; top:100px; height:max-content; display:flex; flex-direction:column; align-items:center; padding:28px 22px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-lg); background:var(--forest); color:var(--hs-ds-color-surface); text-align:center; } .brand-preview-card>small{ font-size:8px; font-weight:850; letter-spacing:.16em; color:#d6c59d; } .brand-preview-logo{ width:58px; height:58px; display:grid; place-items:center; margin:22px 0 14px; border:1px solid rgba(255,255,255,.2); border-radius:17px; color:var(--gold); font:700 19px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .brand-preview-card>strong{ font:700 18px "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .brand-preview-card>span{ min-height:16px; margin-top:3px; font-size:var(--hs-ds-text-xs); color:#c8cec9; } .brand-preview-card h3{ margin:30px 0 8px; font:700 24px/1.08 "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .brand-preview-card p{ margin:0 0 20px; font-size:10px; line-height:1.5; color:#c8cec9; } .brand-preview-cta{ width:100%; min-height:44px; border:0; border-radius:var(--hs-ds-radius-control); background:var(--gold); color:var(--hs-ds-color-on-gold); font-weight:850; } .settings-save-bar{ position:sticky; bottom:82px; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); margin-top:14px; padding:var(--hs-ds-space-5) var(--hs-ds-space-6); border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:rgba(255,253,248,.94); backdrop-filter:blur(14px); } .settings-save-bar span{ font-size:var(--hs-ds-text-xs); color:var(--muted); } .settings-save-bar .btn{ flex:0 0 auto; } /* ===== SERVICES CUSTOM V119 ===== */ .service-editor-modal{ width:min(1080px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow-y:auto; padding:var(--hs-ds-space-10); } .service-editor-modal .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); } .service-person-option{ margin:0; } .service-person-option input{ position:absolute; opacity:0; pointer-events:none; } .service-person-option span{ min-height:44px; display:flex; align-items:center; justify-content:center; padding:9px var(--hs-ds-space-6); border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); font-size:10px; font-weight:800; cursor:pointer; } .service-person-option input:checked + span{ background:var(--forest); border-color:var(--forest); color:var(--hs-ds-color-surface); } .service-visibility-box{ margin-top:14px; padding:0 var(--hs-ds-space-7); border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:#faf9f5; } .service-public-description{ max-width:760px; font-size:10px; line-height:1.4; color:var(--green); } /* pulizia visuale righe servizi */ .services-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .service-row{ min-height:118px; padding:var(--hs-ds-space-8); border-radius:16px; } .service-row-main{ gap:5px; } .service-status{ background:var(--hs-ds-color-surface-deep); color:var(--hs-ds-color-muted); } /* Mobile */ @media(max-width:700px){ .section-tabs, .agenda-view-switch{ grid-auto-columns:118px; } .brand-settings-header{ align-items:flex-start; flex-direction:column; } .brand-settings-layout{ grid-template-columns:1fr; } .brand-preview-card{ position:static; } .brand-settings-card{ padding:var(--hs-ds-space-7); } .settings-save-bar{ bottom:76px; align-items:stretch; flex-direction:column; } .settings-save-bar .btn{ width:100%; } .service-editor-modal{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:var(--hs-ds-space-7); border:0; border-radius:0; } .service-editor-modal .form-grid{ grid-template-columns:1fr; gap:0; } .services-list{ grid-template-columns:1fr; } .service-row{ min-height:0; } .service-staff-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ===== HOURS & HOLIDAYS V122 ===== */ .hours-settings-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-8); } .hours-team-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; width:100%; margin-top:14px; padding:5px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:#ebe8df; } .hours-team-tabs button{ min-height:42px; border:0; border-radius:var(--hs-ds-radius-sm); background:transparent; color:var(--muted); font-size:10px; font-weight:850; } .hours-team-tabs button.active{ background:var(--forest); color:var(--hs-ds-color-surface); box-shadow:0 4px 14px rgba(16,28,23,.14); } .hours-settings-layout{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr); gap:var(--hs-ds-space-6); margin-top:12px; } .hours-week-card, .hours-exceptions-card{ padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--card); } .hours-week-list{ display:flex; flex-direction:column; } .hours-day-row{ display:grid; grid-template-columns: minmax(95px,.8fr) 48px minmax(230px,1.5fr) 68px minmax(190px,1.1fr); align-items:center; gap:var(--hs-ds-space-6); min-height:72px; padding:var(--hs-ds-space-5) 0; border-bottom:1px solid var(--line); } .hours-day-row:last-child{ border-bottom:0; } .hours-day-row.is-closed{ opacity:.52; } .hours-day-name{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .hours-day-name strong{ font-size:var(--hs-ds-text-label); } .hours-day-name span{ font-size:8px; color:var(--muted); } .hours-day-switch{ margin:0; } .hours-time-block{ display:grid; grid-template-columns:1fr 16px 1fr; align-items:end; gap:var(--hs-ds-space-3); } .hours-time-block>div{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .hours-time-block small{ font-size:7px; font-weight:850; letter-spacing:.08em; color:var(--muted); } .hours-time-block select, .hours-break-times select{ min-height:40px; padding:var(--hs-ds-space-4) var(--hs-ds-space-5); border-radius:var(--hs-ds-radius-sm); font-size:10px; font-weight:750; } .hours-time-block>span, .hours-break-times>span{ align-self:center; font-size:10px; color:var(--muted); } .hours-break-toggle{ margin:0; } .hours-break-toggle input{ position:absolute; opacity:0; pointer-events:none; } .hours-break-toggle span{ min-height:38px; display:grid; place-items:center; padding:7px var(--hs-ds-space-5); border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); color:var(--muted); font-size:8px; font-weight:800; } .hours-break-toggle input:checked + span{ border-color:#b9b2a4; background:#ebe8df; color:var(--forest); } .hours-break-times{ display:grid; grid-template-columns:1fr 14px 1fr; align-items:center; gap:5px; } .hours-save-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); margin-top:14px; padding-top:var(--hs-ds-space-7); border-top:1px solid var(--line); } .hours-save-row span{ font-size:8.5px; color:var(--muted); } .hours-exception-list{ display:flex; flex-direction:column; } .hours-exception-row{ display:grid; grid-template-columns:auto minmax(0,1fr) 32px; align-items:center; gap:var(--hs-ds-space-5); padding:var(--hs-ds-space-6) 0; border-bottom:1px solid var(--line); } .hours-exception-row:last-child{ border-bottom:0; } .hours-exception-type{ min-width:70px; display:inline-flex; justify-content:center; padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); background:#ece9e1; font-size:7px; font-weight:850; } .hours-exception-type.holiday{ background:#eee8d9; } .hours-exception-type.absence{ background:#efe4e2; } .hours-exception-type.special{ background:#e5ece7; } .hours-exception-type.extra{ background:#e5e9ef; } .hours-exception-main{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .hours-exception-main strong{ font-size:9.5px; } .hours-exception-main span, .hours-exception-main small{ font-size:8px; color:var(--muted); } .hours-exception-delete{ width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:var(--hs-ds-radius-circle); background:#eeeae2; color:var(--muted); font-size:16px; } .hours-empty-state{ min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; } .hours-empty-state>span{ font-size:var(--hs-ds-text-2xl); color:#bbb4a7; } .hours-empty-state strong{ font-size:var(--hs-ds-text-label); } .hours-empty-state small{ font-size:8.5px; color:var(--muted); } .hours-exception-modal{ width:min(720px,calc(100vw - 32px)); max-width:none; } .hours-type-selector{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; } .hours-type-option{ margin:0; } .hours-type-option input{ position:absolute; opacity:0; pointer-events:none; } .hours-type-option span{ min-height:42px; display:grid; place-items:center; padding:var(--hs-ds-space-4); border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--muted); font-size:8px; font-weight:800; text-align:center; } .hours-type-option input:checked + span{ border-color:var(--forest); background:var(--forest); color:var(--hs-ds-color-surface); } @media(max-width:900px){ .hours-settings-layout{ grid-template-columns:1fr; } /* HS HOURS MOBILE GRID V1 */ .hours-day-row{ grid-template-columns: minmax(0,1fr) 46px; gap:var(--hs-ds-space-4); } .hours-time-block, .hours-break-toggle, .hours-break-times{ grid-column:1/-1; } .hours-break-toggle, .hours-break-times{ grid-column:3; } } @media(max-width:700px){ .hours-settings-header{ align-items:stretch; flex-direction:column; } .hours-settings-header .btn{ width:100%; } .hours-team-tabs{ grid-template-columns:repeat(3,1fr); } .hours-week-card, .hours-exceptions-card{ padding:13px; } .hours-day-row{ grid-template-columns: minmax(0,1fr) 46px; gap:9px; padding:13px 0; } .hours-time-block{ grid-column:1/-1; grid-template-columns:1fr 18px 1fr; } .hours-break-toggle{ grid-column:1; } .hours-break-times{ grid-column:1/-1; } .hours-save-row{ align-items:stretch; flex-direction:column; } .hours-save-row .btn{ width:100%; } .hours-exception-modal{ width:100vw; max-width:100vw; min-height:100dvh; margin:0; padding:var(--hs-ds-space-7); border:0; border-radius:0; } .hours-type-selector{ grid-template-columns:repeat(2,1fr); } } /* ===== BOOKING SETTINGS V123 ===== */ .booking-settings-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-8); } .booking-status-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:76px; min-height:30px; padding:var(--hs-ds-space-3) var(--hs-ds-space-5); border-radius:var(--hs-ds-radius-pill); font-size:8px; font-weight:850; letter-spacing:.04em; } .booking-status-badge.on{ background:#e6eee8; color:#376346; } .booking-status-badge.off{ background:#eeeae5; color:#7c746c; } .booking-settings-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-5); margin-top:14px; } .booking-settings-card{ padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--card); } .booking-settings-card .team-toggle-row:first-of-type{ border-top:0; } .booking-settings-card .form-group:first-of-type label{ margin-top:0; } @media(max-width:800px){ .booking-settings-grid{ grid-template-columns:1fr; } } @media(max-width:700px){ .booking-settings-header{ align-items:flex-start; flex-direction:column; } .booking-settings-card{ padding:var(--hs-ds-space-7); } } /* ===== NOTIFICATION SETTINGS V124 ===== */ .notification-settings-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-8); } .notification-permission-badge{ min-width:82px; min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:var(--hs-ds-space-3) var(--hs-ds-space-5); border-radius:var(--hs-ds-radius-pill); font-size:8px; font-weight:850; } .notification-permission-badge.granted{ background:#e6eee8; color:#376346; } .notification-permission-badge.denied{ background:#efe5e2; color:#85584f; } .notification-permission-badge.default{ background:#eeebe4; color:#756f67; } .notification-settings-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-5); margin-top:14px; } .notification-settings-card{ padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--card); } .notification-settings-card .team-toggle-row:first-of-type{ border-top:0; } .notification-card-copy{ margin:0 0 14px; max-width:620px; font-size:9.5px; line-height:1.5; color:var(--muted); } .notification-enable-button{ width:100%; } .notification-warning{ display:block; margin-top:9px; font-size:8px; line-height:1.4; color:#85584f; } .notification-toggle-list{ display:flex; flex-direction:column; } .notification-time-field{ margin-top:12px; } .notification-time-field select:disabled{ opacity:.45; } @media(max-width:800px){ .notification-settings-grid{ grid-template-columns:1fr; } } @media(max-width:700px){ .notification-settings-header{ align-items:flex-start; flex-direction:column; } .notification-settings-card{ padding:var(--hs-ds-space-7); } } /* ========================================================= HS PANNELLI A SWIPE V1 (7/10, richiesta di Luca) Dentro una pagina di Impostazioni, le sottocategorie non sono piu' pagine separate ma pannelli che si cambiano toccando un'etichetta o scorrendo col dito - usato in Notifiche. ========================================================= */ .hs-swipe-settings{ margin-top:var(--hs-ds-space-5); } .hs-swipe-tabs{ display:flex; gap:var(--hs-ds-space-3); margin-bottom:var(--hs-ds-space-7); overflow-x:auto; } .hs-swipe-tab{ flex:1 0 auto; padding:var(--hs-ds-space-4) var(--hs-ds-space-7); border:1px solid var(--line); border-radius:var(--hs-ds-radius-pill); background:var(--card); color:var(--muted); font-size:var(--hs-ds-text-sm); font-weight:700; white-space:nowrap; } .hs-swipe-tab.is-active{ background:var(--hs-ds-color-ink); border-color:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); } .hs-swipe-area{ position:relative; touch-action:pan-y; } .hs-swipe-panel{ display:none; } .hs-swipe-panel.is-active{ display:block; animation:hsSwipeIn .22s ease; } @keyframes hsSwipeIn{ from{ opacity:0; transform:translateX(var(--hs-ds-space-6)); } to{ opacity:1; transform:translateX(0); } } /* ===== LIVE AGENDA AVAILABILITY V127 ===== */ .agenda-unavailable-block{ position:absolute; top:var(--agenda-top); height:var(--agenda-height); left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:auto; overflow:hidden; } .agenda-break-block{ background: repeating-linear-gradient( -45deg, rgba(28,31,29,.16) 0, rgba(28,31,29,.16) 5px, rgba(28,31,29,.22) 5px, rgba(28,31,29,.22) 10px ); border-top:1px solid rgba(16,28,23,.18); border-bottom:1px solid rgba(16,28,23,.18); } .agenda-break-block span{ padding:var(--hs-ds-space-2) 7px; border-radius:var(--hs-ds-radius-pill); background:rgba(255,255,255,.78); backdrop-filter:blur(6px); color:#4f514e; font-size:8px; font-weight:850; line-height:1; white-space:nowrap; } .agenda-unavailable-day{ background: repeating-linear-gradient( -45deg, rgba(29,31,30,.13) 0, rgba(29,31,30,.13) 7px, rgba(29,31,30,.19) 7px, rgba(29,31,30,.19) 14px ); z-index:3; } .agenda-unavailable-day span{ padding:var(--hs-ds-space-3) 9px; border-radius:var(--hs-ds-radius-pill); background:rgba(255,255,255,.82); color:#666762; font-size:8px; font-weight:850; letter-spacing:.03em; } /* * Gli appuntamenti esistenti restano sopra alla fascia: * non vengono cancellati automaticamente se Luca aggiunge * successivamente una pausa. */ .agenda-lane .agenda-appointment{z-index:6} @media(max-width:700px){ .agenda-break-block span, .agenda-unavailable-day span{ padding:3px 5px; font-size:6.5px; } } /* ===== AGENDA SMART NAV + PERSONAL WEEK V130 ===== */ .agenda-staff-filter-tabs, .agenda-personal-range-tabs{ width:100%; display:grid; gap:var(--hs-ds-space-3); margin:7px 0; padding:var(--hs-ds-space-2); border:1px solid var(--hs-ds-color-line); border-radius:13px; background:#ebe8df; } .agenda-staff-filter-tabs{ grid-template-columns:repeat(4,minmax(0,1fr)); } .agenda-personal-range-tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } .agenda-staff-filter-tabs button, .agenda-personal-range-tabs button{ width:100%; min-width:0; min-height:38px; border:0; border-radius:9px; background:transparent; color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-xs); font-weight:850; white-space:nowrap; } .agenda-staff-filter-tabs button.active, .agenda-personal-range-tabs button.active{ background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); box-shadow:0 3px 12px rgba(16,28,23,.12); } /* Settimana personale */ .agenda-person-week-scroll{ width:100%; overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:#faf9f5; scrollbar-width:thin; } .agenda-person-week{ --week-columns:5; display:grid; grid-template-columns: 58px repeat( var(--week-columns), minmax(150px,1fr) ); min-width: calc( 58px + (var(--week-columns) * 150px) ); } .agenda-week-time-head{ min-height:64px; background:#faf9f5; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .agenda-week-day-head{ min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--hs-ds-color-surface); text-align:center; } .agenda-week-day-head.today{ background:#efede5; } .agenda-week-day-head small{ font-size:7px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .agenda-week-day-head strong{ font-size:var(--hs-ds-text-label); } .agenda-week-day-head span{ font-size:7px; color:var(--muted); } .agenda-week-time-axis, .agenda-week-lane{ height:900px; } .agenda-week-time-axis{ grid-column:1; } .agenda-week-lane{ min-width:0; border-right:1px solid rgba(16,28,23,.08); } .agenda-absence-block{ background: repeating-linear-gradient( -45deg, rgba(95,65,61,.18) 0, rgba(95,65,61,.18) 5px, rgba(95,65,61,.25) 5px, rgba(95,65,61,.25) 10px ); border-top:1px solid rgba(95,65,61,.22); border-bottom:1px solid rgba(95,65,61,.22); } .agenda-absence-block span{ padding:var(--hs-ds-space-2) 7px; border-radius:var(--hs-ds-radius-pill); background:rgba(255,255,255,.82); color:#72534e; font-size:8px; font-weight:850; } /* ===== SMART EXCEPTIONS V130 ===== */ .hours-target-selector{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; } .hours-target-option{ margin:0; } .hours-target-option input{ position:absolute; opacity:0; pointer-events:none; } .hours-target-option span{ min-height:42px; display:grid; place-items:center; padding:var(--hs-ds-space-4); border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--muted); font-size:8px; font-weight:800; text-align:center; } .hours-target-option input:checked + span{ border-color:var(--forest); background:var(--forest); color:var(--hs-ds-color-surface); } .hours-slot-count-picker{ margin-bottom:12px; } .hours-slot-count-picker>small{ display:block; margin-bottom:6px; font-size:7px; font-weight:850; letter-spacing:.1em; color:var(--muted); } .hours-slot-count-picker>div{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--hs-ds-space-3); } .hours-slot-count-picker button{ min-height:40px; padding:7px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); color:var(--muted); font-size:7.5px; font-weight:800; } .hours-slot-count-picker button.active{ background:#ece9df; border-color:#aaa395; color:var(--forest); } .hours-smart-advice{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); margin-bottom:12px; padding:11px; border:1px solid #d7d0c1; border-radius:var(--hs-ds-radius-control); background:#f2efe7; } .hours-smart-advice:empty{ display:none; } .hours-smart-advice strong{ font-size:var(--hs-ds-text-xs); } .hours-smart-advice>span{ font-size:8px; line-height:1.4; color:var(--muted); } .hours-smart-advice>div{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; } .hours-smart-advice button{ min-height:30px; padding:5px 9px; border:1px solid #c5beaf; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface); color:var(--forest); font-size:8px; font-weight:850; } @media(max-width:700px){ .agenda-staff-filter-tabs{ grid-template-columns:repeat(4,minmax(74px,1fr)); overflow-x:auto; } .agenda-person-week{ grid-template-columns: 38px repeat( var(--week-columns), 124px ); min-width: calc( 38px + (var(--week-columns) * 124px) ); } .agenda-week-time-axis, .agenda-week-lane{ height:780px; } .agenda-week-day-head{ min-height:58px; } .hours-target-selector, .hours-slot-count-picker>div{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ========================================================= AGENDA V2 — SINGLE STAFF + APPOINTMENT DETAILS ========================================================= */ /* --------------------------------------------------------- Quando è selezionato un solo collaboratore: ORARIO + UNA SOLA COLONNA realmente full width --------------------------------------------------------- */ .agenda-calendar-pro.agenda-single-staff .agenda-staff-head{ grid-template-columns:72px minmax(0,1fr); min-width:0; width:100%; } .agenda-calendar-pro.agenda-single-staff .agenda-lanes{ grid-template-columns:72px minmax(0,1fr); min-width:0; width:100%; } .agenda-calendar-pro.agenda-single-staff .agenda-lane{ width:100%; } .agenda-calendar-pro.agenda-single-staff .agenda-person{ width:100%; } /* L'appuntamento sfrutta bene la nuova larghezza */ .agenda-calendar-pro.agenda-single-staff .agenda-lane .agenda-appointment{left:6px;right:6px} .agenda-details-section-title{ display:block; margin-bottom:14px; font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; color:var(--green); } .agenda-field-help{ display:block; margin-top:5px; color:var(--muted); font-size:10px; } /* Mobile */ @media(max-width:700px){ .agenda-calendar-pro.agenda-single-staff .agenda-staff-head{ grid-template-columns:38px minmax(0,1fr); } .agenda-calendar-pro.agenda-single-staff .agenda-lanes{ grid-template-columns:38px minmax(0,1fr); } .agenda-calendar-pro.agenda-single-staff{ min-width:0; width:100%; } } /* ONLINE CMS V1 */ .online-cms{ padding-bottom:120px; } .online-cms-header{ display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom:28px; } .online-cms-header h2{ margin:5px 0; font-size:36px; } .online-cms-header.hs-header-dup .eyebrow, .online-cms-header.hs-header-dup h2{ display:none; } .online-cms-status{ display:flex; align-items:center; gap:var(--hs-ds-space-5); } .online-live-dot{ display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:900; letter-spacing:.11em; } .online-live-dot i{ width:8px; height:8px; border-radius:var(--hs-ds-radius-circle); background:#55a56a; box-shadow:0 0 0 4px rgba(85,165,106,.12); } .online-cms-layout{ display:grid; grid-template-columns:170px minmax(430px,1fr) minmax(390px,.9fr); gap:18px; align-items:start; } .online-cms-nav{ position:sticky; top:20px; display:flex; flex-direction:column; gap:var(--hs-ds-space-2); padding:var(--hs-ds-space-4); border:1px solid #ded8ca; border-radius:18px; background:#fbf9f4; } .online-cms-nav button{ width:100%; border:0; border-radius:var(--hs-ds-radius-control); padding:var(--hs-ds-space-6) var(--hs-ds-space-5); display:flex; align-items:center; gap:var(--hs-ds-space-5); background:transparent; color:#707068; text-align:left; cursor:pointer; font-size:12px; font-weight:750; } .online-cms-nav button span{ color:#aaa79d; font-size:var(--hs-ds-text-xs); } .online-cms-nav button.active{ background:#0a251c; color:white; } .online-cms-nav button.active span{ color:#d3a24d; } .online-cms-editor{ min-width:0; } .online-editor-panel{ scroll-margin-top:22px; margin-bottom:16px; padding:22px; border:1px solid #ddd7ca; border-radius:var(--hs-ds-radius-lg); background:#fffefa; } .online-panel-head{ display:flex; gap:var(--hs-ds-space-7); align-items:flex-start; margin-bottom:24px; } .online-panel-head>span{ margin-left:auto; order:2; color:#c9c2b3; font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:20px; font-weight:700; } .online-panel-head small{ color:#5c6c65; font-size:var(--hs-ds-text-xs); font-weight:900; letter-spacing:.13em; } .online-panel-head h3{ margin:3px 0 0; font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:var(--hs-ds-text-xl); } .online-toggle-row{ margin-top:12px; padding:var(--hs-ds-space-7) 0; display:flex; justify-content:space-between; gap:var(--hs-ds-space-10); align-items:center; border-top:1px solid #ece7dc; } .online-toggle-row div{ display:flex; flex-direction:column; gap:3px; } .online-toggle-row strong{ font-size:var(--hs-ds-text-md); } .online-toggle-row span{ color:#85837d; font-size:var(--hs-ds-text-label); } .online-toggle-row>input{ width:18px; height:18px; } .online-section-sort{ margin-top:18px; border:1px solid #e3ddd2; border-radius:16px; overflow:hidden; } .online-section-row{ min-height:58px; padding:var(--hs-ds-space-5) var(--hs-ds-space-7); display:flex; align-items:center; gap:var(--hs-ds-space-6); border-top:1px solid #eee9df; } .online-section-row:first-child{ border-top:0; } .online-drag-mark{ color:#b3ada2; letter-spacing:-3px; } .online-section-row strong{ font-size:var(--hs-ds-text-md); } .online-section-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--hs-ds-space-3); } .online-section-actions>button{ width:30px; height:30px; border:1px solid #ded8cc; border-radius:var(--hs-ds-radius-xs); background:white; cursor:pointer; } .online-review-editor{ margin-top:14px; padding:var(--hs-ds-space-8); border:1px solid #e6e0d5; border-radius:var(--hs-ds-radius-md); background:#faf8f2; } .online-cms-preview{ position:sticky; top:18px; } .online-preview-toolbar{ margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-5); } .online-preview-toolbar>div:first-child{ display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .online-preview-toolbar strong{ font-size:12px; } .online-preview-toolbar span{ color:#88857d; font-size:var(--hs-ds-text-xs); } .online-preview-devices{ display:flex; gap:var(--hs-ds-space-2); padding:3px; background:#e9e5db; border-radius:var(--hs-ds-radius-sm); } .online-preview-devices button{ border:0; border-radius:7px; padding:7px 9px; background:transparent; cursor:pointer; font-size:var(--hs-ds-text-xs); font-weight:800; } .online-preview-devices button.active{ background:white; } .online-preview-stage{ height:720px; padding:var(--hs-ds-space-4); display:flex; justify-content:center; border:1px solid #d7d1c5; border-radius:var(--hs-ds-radius-lg); overflow:hidden; background:#ddd8cc; } .online-preview-stage iframe{ width:100%; height:100%; border:0; border-radius:13px; background:#171816; } .online-preview-stage[data-preview-stage="mobile"] iframe{ width:390px; max-width:100%; } .online-save-bar{ position:sticky; bottom:78px; z-index:20; margin-top:18px; padding:var(--hs-ds-space-7) 18px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-9); border:1px solid #d7d1c5; border-radius:18px; background:rgba(255,254,250,.92); backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(20,30,20,.08); } .online-save-bar>div{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .online-save-bar small{ color:#88857d; } @media(max-width:1250px){ .online-cms-layout{ grid-template-columns:150px minmax(440px,1fr); } .online-cms-preview{ grid-column:1/3; position:relative; top:auto; } .online-preview-stage{ height:680px; } } @media(max-width:800px){ .online-cms-header{ display:block; } .online-cms-status{ margin-top:16px; flex-wrap:wrap; } .online-cms-layout{ display:block; } .online-cms-nav{ position:sticky; top:0; z-index:10; margin-bottom:14px; flex-direction:row; overflow:auto; } .online-cms-nav button{ min-width:max-content; } .online-cms-preview{ margin-top:20px; } .online-preview-stage{ height:620px; } .online-save-bar{ bottom:72px; } } /* WAITLIST ADMIN + AGENDA CARD V2 */ .agenda-waitlist-shell{ padding-bottom:100px; } .agenda-waitlist-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--hs-ds-space-9); } .waitlist-live-pill{ display:inline-flex; align-items:center; gap:7px; padding:var(--hs-ds-space-4) 11px; border:1px solid #ddd7cb; border-radius:var(--hs-ds-radius-pill); font-size:var(--hs-ds-text-xs); font-weight:900; letter-spacing:.1em; } .waitlist-live-pill i{ width:7px; height:7px; border-radius:var(--hs-ds-radius-circle); background:#59a66b; } .waitlist-stats{ margin:25px 0 16px; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hs-ds-space-5); } .waitlist-stats>div{ min-height:92px; padding:17px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #ded8cc; border-radius:17px; background:#fffefa; } .waitlist-stats small{ color:#817f78; font-size:var(--hs-ds-text-xs); font-weight:850; letter-spacing:.1em; } .waitlist-stats strong{ font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:30px; } .waitlist-filter-tabs{ margin-bottom:14px; display:flex; gap:5px; } .waitlist-filter-tabs button{ padding:9px var(--hs-ds-space-7); border:1px solid #ddd7cb; border-radius:var(--hs-ds-radius-pill); background:white; cursor:pointer; font-size:var(--hs-ds-text-label); font-weight:750; } .waitlist-filter-tabs button.active{ background:#0c291f; border-color:#0c291f; color:white; } .agenda-waitlist-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-5); } .waitlist-admin-card{ padding:var(--hs-ds-space-9); border:1px solid #ded8cc; border-radius:19px; background:#fffefa; } .waitlist-admin-main{ display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr); gap:28px; } .waitlist-admin-person h3{ margin:9px 0 7px; font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:var(--hs-ds-text-xl); } .waitlist-status{ display:inline-flex; padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); background:#eee9df; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .waitlist-status-notified .waitlist-status{ background:#f1dfb8; } .waitlist-status-claimed .waitlist-status{ background:#d7eadb; } .waitlist-status-closed{ opacity:.6; } .waitlist-admin-contact{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .waitlist-admin-contact a{ color:#65645e; font-size:var(--hs-ds-text-label); } .waitlist-admin-request{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .waitlist-admin-request>div{ padding:13px; display:flex; flex-direction:column; gap:5px; border-radius:var(--hs-ds-radius-control); background:#f6f3ec; } .waitlist-admin-request small{ color:#8c8981; font-size:8px; font-weight:850; letter-spacing:.08em; } .waitlist-admin-request strong{ font-size:var(--hs-ds-text-label); } .waitlist-admin-footer{ margin-top:17px; padding-top:13px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ebe6db; } .waitlist-admin-footer span{ color:#929089; font-size:var(--hs-ds-text-xs); } .waitlist-admin-footer button{ border:0; background:transparent; cursor:pointer; color:#676760; font-size:10px; font-weight:750; } @media(max-width:760px){ .waitlist-admin-main{ grid-template-columns:1fr; } .waitlist-admin-request{ grid-template-columns:1fr; } } /* AGENDA CARD CLEAN V3 */ /* card molto strette */ /* smartphone / colonne strette */ /* AGENDA CARD FINAL V4 */ /* una sola colonna Agenda = più spazio alla nota */ /* colonne più strette */ /* AGENDA APPOINTMENT FINAL V5 */ /* vista singolo collaboratore: più spazio */ /* colonne strette */ /* WAITLIST OPERATIVA V2 */ .agenda-waitlist-badge{ min-width:20px; height:20px; margin-left:auto; padding:0 var(--hs-ds-space-3); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--hs-ds-radius-pill); background:#0d2b21; color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-xs); font-weight:850; line-height:1; } .agenda-waitlist-shortcut-label{ min-width:0; } [data-agenda-waitlist-shortcut]{ position:relative; } .waitlist-admin-actions{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--hs-ds-space-3); } .waitlist-action, .waitlist-admin-footer [data-waitlist-close]{ min-height:32px; padding:0 11px!important; display:inline-flex!important; align-items:center; justify-content:center; border:1px solid #ddd7cb!important; border-radius:var(--hs-ds-radius-pill)!important; background:var(--hs-ds-color-surface)!important; color:#393934!important; text-decoration:none!important; font-size:var(--hs-ds-text-xs)!important; font-weight:750!important; cursor:pointer; } .waitlist-action:hover{ border-color:#aaa398!important; } .waitlist-admin-footer{ gap:var(--hs-ds-space-5); } .waitlist-admin-footer [data-waitlist-close]{ color:#7c4f45!important; } @media(max-width:760px){ .waitlist-admin-footer{ align-items:flex-start; flex-direction:column; } .waitlist-admin-actions{ width:100%; margin-left:0; justify-content:flex-start; } } /* ========================================================= AGENDA WORKSPACE V1 core quotidiano Haircut Studio ========================================================= */ body.agenda-mode{ height:100dvh; overflow:hidden; } body.agenda-mode #app{ height:100dvh; overflow:hidden; } body.agenda-mode #app > header{ display:none!important; } body.agenda-mode main#view{ box-sizing:border-box; width:100%!important; max-width:none!important; height:100dvh; margin:0!important; padding: max(var(--hs-ds-space-4),env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom))!important; overflow:hidden; } body.agenda-mode .agenda-shell:not(.agenda-month-shell):not(.agenda-person-week-shell){ width:100%!important; max-width:none!important; height:100%; margin:0!important; padding:0!important; display:flex; flex-direction:column; overflow:hidden; } /* LIVE OGGI */ .agenda-live-strip{ flex:0 0 auto; display:flex; align-items:center; gap:var(--hs-ds-space-4); margin-bottom:8px; } .agenda-live-cards{ min-width:0; flex:1; display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; } .agenda-live-cards::-webkit-scrollbar{ display:none; } .agenda-live-card{ flex:0 0 auto; min-width:82px; height:42px; padding:var(--hs-ds-space-3) 9px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border:1px solid rgba(16,28,23,.08); border-radius:11px; background:var(--hs-ds-color-surface); color:var(--forest); text-align:left; cursor:pointer; } .agenda-live-card small{ color:var(--muted); font-size:7px; line-height:1; font-weight:750; } .agenda-live-card strong{ margin-top:3px; font-size:var(--hs-ds-text-base); line-height:1; font-weight:850; } /* NASCONDE I VECCHI CONTROLLI SOLO NELLA DAY VIEW */ body.agenda-mode .agenda-shell:not(.agenda-month-shell):not(.agenda-person-week-shell) > .agenda-view-switch, body.agenda-mode .agenda-shell:not(.agenda-month-shell):not(.agenda-person-week-shell) > .agenda-staff-filter-tabs, body.agenda-mode .agenda-shell:not(.agenda-month-shell):not(.agenda-person-week-shell) > .agenda-personal-range-tabs, body.agenda-mode .agenda-shell:not(.agenda-month-shell):not(.agenda-person-week-shell) > .agenda-date-nav{ display:none!important; } /* SELEZIONE: invisibile finché non viene attivata */ body.agenda-mode .agenda-bulk-bar{ display:none!important; } body.agenda-mode .agenda-bulk-bar:has(.agenda-bulk-count){ flex:0 0 auto; display:flex!important; margin:0 0 6px!important; } /* AGENDA OCCUPA TUTTO IL RESTO */ body.agenda-mode .agenda-desktop-stage{ min-height:0; flex:1 1 auto; width:100%; display:flex; align-items:stretch; } body.agenda-mode .agenda-calendar-pro{ position:relative; isolation:isolate; width:100%; height:100%; max-height:none!important; overflow:auto; border-radius:var(--hs-ds-radius-md); } body.agenda-mode .agenda-staff-head{ position:sticky!important; top:0!important; z-index:60!important; background:#f7f4ed; box-shadow: 0 1px 0 rgba(16,28,23,.09), 0 5px 14px rgba(16,28,23,.05); } body.agenda-mode .agenda-person{ min-height:47px; } body.agenda-mode .agenda-person strong{ font-size:12px; } body.agenda-mode .agenda-person span{ font-size:8px; } /* GIORNATA: prova a entrare interamente nello schermo. Su schermi bassi scrolla SOLO l'Agenda. */ body.agenda-mode .agenda-time-axis, body.agenda-mode .agenda-lane{ height: max( 620px, calc(100dvh - 158px) )!important; } body.agenda-mode .agenda-lane{ background:#eeefec; } body.agenda-mode .agenda-working-window.agenda-luca{ background:#fff5f5; } body.agenda-mode .agenda-working-window.agenda-daniele{ background:#f2faf2; } body.agenda-mode .agenda-working-window.agenda-antonio{ background:#f1f9fc; } /* PAUSE / ASSENZE MOLTO LEGGIBILI */ body.agenda-mode .agenda-unavailable-block{ position:absolute; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:center; pointer-events:none; background: repeating-linear-gradient( -45deg, rgba(100,103,100,.08) 0, rgba(100,103,100,.08) 5px, rgba(255,255,255,.45) 5px, rgba(255,255,255,.45) 10px ); border-top: 1px dashed rgba(80,83,80,.24); border-bottom: 1px dashed rgba(80,83,80,.24); } body.agenda-mode .agenda-unavailable-block span{ padding:3px 7px; border-radius:var(--hs-ds-radius-pill); background: rgba(247,246,242,.88); color:#747873; font-size:8px!important; font-weight:750; backdrop-filter:blur(4px); } /* APPOINTMENT SOTTO HEADER */ body.agenda-mode .agenda-lane .agenda-appointment{z-index:8} /* NASCONDE I VECCHI RIEPILOGHI SOTTO */ body.agenda-mode .agenda-day-summary{ display:none!important; } /* MENU ... */ .agenda-more-backdrop{ position:fixed; inset:0; z-index:9998; display:flex; align-items:stretch; justify-content:flex-end; padding:var(--hs-ds-space-5); background: var(--hs-ds-color-field-border-hover); backdrop-filter:blur(6px); } .agenda-more-head{ min-height:48px; display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; } .agenda-more-head > div{ display:flex; flex-direction:column; } .agenda-more-head small{ color:var(--muted); font-size:8px; letter-spacing:.1em; } .agenda-more-head strong{ margin-top:2px; font-size:19px; } .agenda-more-section{ padding:13px 0; border-top: 1px solid rgba(16,28,23,.08); } .agenda-more-title{ display:block; margin-bottom:8px; color:var(--muted); font-size:7px; font-weight:850; letter-spacing:.1em; } .agenda-more-danger{ width:100%; min-height:40px; border:1px solid rgba(163,50,50,.18); border-radius:11px; background:var(--hs-ds-color-surface); color:#a33232; font:inherit; font-size:10px; font-weight:750; } /* PANNELLI LIVE SOPRA L'AGENDA */ body.agenda-mode .home-panel-modal{ width: min( 720px, calc(100vw - 24px) ); max-height: min( 82dvh, 760px ); overflow:auto; } /* DESKTOP */ @media(min-width:901px){ body.agenda-mode .agenda-desktop-stage{ padding: 0 42px!important; } body.agenda-mode .agenda-side-arrow{ width:34px; height:54px; border-radius:var(--hs-ds-radius-control); font-size:25px; } } /* MOBILE */ @media(max-width:700px){ body.agenda-mode main#view{ padding: max( 6px, env(safe-area-inset-top) ) 6px max( 6px, env(safe-area-inset-bottom) )!important; } .agenda-live-strip{ gap:var(--hs-ds-space-3); } .agenda-live-card{ min-width:74px; height:39px; padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-sm); } .agenda-live-card strong{ font-size:var(--hs-ds-text-control); } body.agenda-mode .agenda-calendar-pro{ border-radius:11px; } body.agenda-mode .agenda-time-axis, body.agenda-mode .agenda-lane{ height:620px!important; } .agenda-more-backdrop{ align-items:flex-end; padding:var(--hs-ds-space-3); } } /* ========================================================= LIVE OGGI — SETTINGS ========================================================= */ .live-settings-card{ overflow:hidden; } .live-settings-head h3{ margin:3px 0 4px; } .live-settings-users{ margin-top:16px; display:flex; flex-direction:column; gap:var(--hs-ds-space-5); } .live-settings-user{ padding:13px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:#faf9f5; } .live-settings-user-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); margin-bottom:11px; } .live-settings-user-head > div{ display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .live-settings-user-head strong{ font-size:var(--hs-ds-text-control); } .live-settings-user-head small{ color:var(--muted); font-size:var(--hs-ds-text-xs); } .live-settings-user-head > span{ color:var(--muted); font-size:7px; font-weight:850; letter-spacing:.09em; } .live-settings-options{ display:grid; grid-template-columns: repeat( 5, minmax(0,1fr) ); gap:var(--hs-ds-space-3); } .live-setting-toggle{ min-width:0; padding:9px var(--hs-ds-space-4); display:flex; align-items:center; gap:7px; border:1px solid rgba(16,28,23,.08); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); cursor:pointer; } .live-setting-toggle input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .live-setting-toggle strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hs-ds-text-xs); font-weight:750; } .live-setting-control{ flex:0 0 auto; width:25px; height:15px; padding:var(--hs-ds-space-1); display:flex; align-items:center; border-radius:var(--hs-ds-radius-pill); background:#d9d9d4; transition: background .16s ease; } .live-setting-control i{ width:11px; height:11px; border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .16s ease; } .live-setting-toggle input:checked + .live-setting-control{ background:var(--forest); } .live-setting-toggle input:checked + .live-setting-control i{ transform: translateX(10px); } .live-setting-toggle:has( input:checked ){ border-color: rgba(16,28,23,.20); background:#f5f7f4; } @media(max-width:850px){ .live-settings-options{ grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media(max-width:480px){ .live-settings-user{ padding:11px; } .live-settings-options{ grid-template-columns:1fr; } .live-setting-toggle{ min-height:41px; } } /* ========================================================= AGENDA TASK SUGGESTIONS V2 ========================================================= */ .agenda-task-suggestion{ position:absolute; top:var(--agenda-top); height:var(--agenda-height); left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:var(--hs-ds-space-2) 7px; pointer-events:none; } .agenda-task-suggestion-card{ width:min( calc(100% - 8px), 250px ); max-height:calc(100% - 8px); padding:7px 9px; overflow:hidden; border: 1px dashed rgba(16,28,23,.20); border-radius:var(--hs-ds-radius-sm); background: rgba(255,255,255,.76); color:var(--forest); box-shadow: 0 3px 10px rgba(16,28,23,.035); backdrop-filter:blur(8px); pointer-events:none; } .agenda-task-suggestion-head{ display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:4px; } .agenda-task-suggestion-head > span{ color:rgba(16,28,23,.45); font-size:6px!important; line-height:1!important; font-weight:850; text-transform:uppercase; letter-spacing:.05em; } .agenda-task-open{ padding:var(--hs-ds-space-1) var(--hs-ds-space-3); border:0; border-radius:var(--hs-ds-radius-pill); background:rgba(16,28,23,.06); color:var(--forest); font:inherit; font-size:6px; font-weight:800; pointer-events:auto; cursor:pointer; } .agenda-task-suggestion-list{ display:flex; flex-direction:column; gap:3px; } .agenda-task-suggestion-row{ min-width:0; display:grid; grid-template-columns: 20px minmax(0,1fr); align-items:center; gap:5px; } .agenda-task-suggestion-row > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(16,28,23,.78); font-size:8px!important; line-height:1.1!important; font-weight:650; } .agenda-task-done{ width:19px; height:19px; padding:0; display:grid; place-items:center; border: 1px solid rgba(16,28,23,.24); border-radius:var(--hs-ds-radius-circle); background: rgba(255,255,255,.9); color:var(--forest); font:inherit; font-size:12px; line-height:1; font-weight:850; pointer-events:auto; cursor:pointer; touch-action:manipulation; transition: transform .12s ease, background .12s ease, color .12s ease; } .agenda-task-done:hover{ transform:scale(1.07); } .agenda-task-done.is-completing, .agenda-task-done.is-done{ background:var(--forest); color:var(--hs-ds-color-surface); } .agenda-task-more{ display:block; margin-top:4px; padding-left:25px; color:rgba(16,28,23,.44); font-size:6px; font-weight:750; } /* * Gli appuntamenti restano * sempre sopra i suggerimenti. */ body.agenda-mode .agenda-lane .agenda-appointment{z-index:8} @media(max-width:700px){ .agenda-task-suggestion{ padding:3px; } .agenda-task-suggestion-card{ width:calc(100% - 3px); padding:5px; border-radius:7px; } .agenda-task-suggestion-head{ margin-bottom:3px; } .agenda-task-suggestion-head > span{ display:none; } .agenda-task-open{ margin-left:auto; font-size:5px; } .agenda-task-suggestion-row{ grid-template-columns: 17px minmax(0,1fr); gap:3px; } .agenda-task-done{ width:16px; height:16px; font-size:10px; } .agenda-task-suggestion-row > span{ font-size:6px!important; } .agenda-task-more{ padding-left:var(--hs-ds-space-9); font-size:5px; } } /* ========================================================= APP HIERARCHY V2 HOME · AGENDA · IMPOSTAZIONI ========================================================= */ /* * In Agenda nascondiamo soltanto * il vecchio header superiore. * * La navigazione principale resta: * Home / Agenda / Impostazioni. */ body.agenda-mode #app > header{ display:none!important; } body.agenda-mode main#view{ height: calc( 100dvh - 70px - env(safe-area-inset-bottom) )!important; padding-bottom:5px!important; } /* HOME MANAGEMENT */ .home-management-hub{ margin-top:22px; } .home-management-head{ margin-bottom:8px; } .home-management-head small, .home-management-head strong{ display:block; } .home-management-head small{ color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.10em; } .home-management-head strong{ margin-top:2px; font-size:17px; } .home-management-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-4); } .home-management-grid button{ min-height:78px; padding:13px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .home-management-grid strong, .home-management-grid span{ display:block; } .home-management-grid strong{ font-size:var(--hs-ds-text-md); } .home-management-grid span{ margin-top:3px; color:var(--muted); font-size:var(--hs-ds-text-xs); line-height:1.35; } /* ========================================================= VIEW SHEET ========================================================= */ .agenda-view-backdrop{ position:fixed; inset:0; z-index:9999; display:flex; align-items:stretch; justify-content:flex-end; padding:var(--hs-ds-space-5); background: var(--hs-ds-color-field-border-hover); backdrop-filter:blur(6px); } .agenda-view-sheet{ width:min(390px,100%); height:100%; padding:15px; overflow:auto; border-radius:var(--hs-ds-radius-lg); background:var(--hs-ds-color-app-bg); box-shadow: 0 24px 60px rgba(16,28,23,.20); } .agenda-view-close{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); color:var(--forest); font-size:20px; } .agenda-view-people{ display:flex; flex-direction:column; } .agenda-view-people > button{ min-height:48px; padding:var(--hs-ds-space-4) 3px; display:flex; align-items:center; justify-content:space-between; border:0; border-bottom: 1px solid rgba(16,28,23,.08); background:transparent; color:var(--ink); text-align:left; } .agenda-view-people > button span{ font-size:12px; font-weight:750; } .agenda-view-people > button i{ width:25px; height:25px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); font-style:normal; } .agenda-view-people > button.active i{ background:var(--forest); color:var(--hs-ds-color-surface); } .agenda-view-period{ margin-top:18px; } .agenda-view-period > small{ display:block; margin-bottom:7px; color:var(--muted); font-size:7px; font-weight:850; letter-spacing:.10em; } .agenda-view-period-options{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--hs-ds-space-3); } .agenda-view-period-options button{ min-height:40px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); color:var(--forest); font-size:var(--hs-ds-text-xs); font-weight:750; } .agenda-view-period-options button.active{ background:var(--forest); color:var(--hs-ds-color-surface); } /* * Nella settimana personale * i vecchi controlli duplicati * non servono più. */ body.agenda-mode .agenda-person-week-shell > .agenda-view-switch, body.agenda-mode .agenda-person-week-shell > .agenda-staff-filter-tabs, body.agenda-mode .agenda-person-week-shell > .agenda-personal-range-tabs, body.agenda-mode .agenda-person-week-shell > .agenda-date-nav{ display:none!important; } @media(max-width:700px){ .agenda-view-backdrop{ align-items:flex-end; padding:var(--hs-ds-space-3); } .agenda-view-sheet{ width:100%; height:auto; max-height:88dvh; border-radius: 20px 20px 14px 14px; } .home-management-grid{ grid-template-columns:1fr 1fr; } } /* ========================================================= HAIRCUT STUDIO GLOBAL FORM SYSTEM ========================================================= */ /* * Una sola grammatica visuale per: * input, select, date, orari, textarea. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ width:100%; min-height:var(--hs-ds-control-height-form); padding: var(--hs-ds-field-padding-y) var(--hs-ds-field-padding-x); border: 1px solid var(--hs-ds-color-field-border); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); color:var(--hs-ds-color-body-ink); font:inherit; font-size:var(--hs-ds-text-control); outline:none; box-shadow: var(--hs-ds-shadow-field); transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover, textarea:hover{ border-color: var(--hs-ds-color-field-border-hover); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus{ border-color: var(--hs-ds-color-field-border-focus); background:var(--hs-ds-color-surface); box-shadow: 0 0 0 3px var(--hs-ds-color-field-ring); } input::placeholder, textarea::placeholder{ color: var(--hs-ds-color-field-placeholder); } /* SELECT UNIFORME */ select{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; background-color:var(--hs-ds-color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e756f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 12px center; background-size: 14px 14px; } select:disabled, input:disabled, textarea:disabled{ opacity:.52; cursor:not-allowed; background:var(--hs-ds-color-field-disabled); } /* DATE / TIME */ input[type="date"], input[type="time"], input[type="datetime-local"]{ appearance:none; -webkit-appearance:none; color-scheme:light; background-color:var(--hs-ds-color-surface); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; } /* LABEL */ .form-group label{ margin: 0 0 6px; color: var(--hs-ds-color-label); font-size:var(--hs-ds-text-label); font-weight:780; line-height:var(--hs-ds-line-compact); } .form-group{ margin-top:var(--hs-ds-space-8); } /* FORM A DUE COLONNE */ .form-grid{ gap: 0 var(--hs-ds-space-5); } /* ========================================================= MODAL / SHEET UNIFORMI ========================================================= */ /* ========================================================= MENU + APPUNTAMENTO / EVENTO / PRODOTTO ========================================================= */ .agenda-add-menu{ width: min( 420px, 100% ); padding:17px; } .agenda-add-choice{ position:relative; width:100%; min-height:64px; margin-top:7px; padding: 11px 42px 11px 13px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border: 1px solid rgba(16,28,23,.11); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--hs-ds-color-body-ink); text-align:left; transition: background .13s ease, border-color .13s ease, transform .13s ease; } .agenda-add-choice:hover{ border-color: rgba(16,28,23,.24); background:#f8f7f2; transform: translateY(-1px); } .agenda-add-choice:active{ transform:none; } .agenda-add-choice::after{ content:"›"; position:absolute; right:14px; top:50%; transform: translateY(-50%); color:var(--hs-ds-color-muted); font-size:23px; font-weight:400; } .agenda-add-choice strong{ display:block; font-size:var(--hs-ds-text-md); font-weight:800; } .agenda-add-choice span{ display:block; margin-top:2px; color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-xs); line-height:1.35; } /* ========================================================= RISULTATI / SCELTE INTERNE MODAL ========================================================= */ .agenda-customer-results{ margin-top:5px; overflow:hidden; border-radius:11px; } .agenda-customer-result{ min-height:48px; border-radius:var(--hs-ds-radius-sm)!important; } .agenda-selected-client{ margin-top:6px; border-radius:var(--hs-ds-radius-sm); } /* ========================================================= SAFARI / IPAD / IPHONE ========================================================= */ @supports (-webkit-touch-callout:none){ input:not([type="checkbox"]):not([type="radio"]), select, textarea{ /* * >=16px sui device touch evita * lo zoom automatico di Safari. */ font-size:16px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ min-height:48px; border-radius:var(--hs-ds-radius-control); } .agenda-add-menu{ width:100%; } .agenda-add-choice{ min-height:67px; } .form-grid{ grid-template-columns:1fr; gap:0; } } /* ========================================================= AGENDA MODAL SCROLL + TEAM BREAKS V137 ========================================================= */ /* * Nuovo appuntamento, evento e modifica: * il contenuto deve poter scorrere SEMPRE * fino alle azioni finali. */ /* * I pulsanti rimangono raggiungibili * mentre si modifica una scheda lunga. */ /* * La pausa è informazione operativa, * quindi deve essere leggibile sopra * la griglia ma sotto gli appuntamenti. */ .agenda-break-block, .agenda-absence-block{ z-index:6!important; pointer-events:none; display:flex; align-items:center; justify-content:center; border-top: 1px solid rgba(110,117,111,.20); border-bottom: 1px solid rgba(110,117,111,.20); background: repeating-linear-gradient( 135deg, rgba(110,117,111,.11), rgba(110,117,111,.11) 8px, rgba(110,117,111,.055) 8px, rgba(110,117,111,.055) 16px ); } .agenda-break-block span, .agenda-absence-block span{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; max-width: calc(100% - 10px); padding: var(--hs-ds-space-2) 7px; border-radius:var(--hs-ds-radius-pill); background: rgba( 255, 255, 255, .88 ); color: var(--muted); font-size:8px; font-weight:800; line-height:1.15; text-align:center; white-space:normal; } /* IPHONE / IPAD */ /* ========================================================= AGENDA MONTH STRIP V138 ========================================================= */ .agenda-month-strip{ width:min(720px,calc(100% - 4px)); margin:3px auto 7px; padding:7px 9px; border:1px solid rgba(16,28,23,.08); border-radius:var(--hs-ds-radius-control); background:rgba(255,255,255,.76); } .agenda-month-strip-title{ margin-bottom:5px; color:var(--muted); font-size:7px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .agenda-month-strip-weeks{ display:grid; grid-template-columns: repeat( auto-fit, minmax(42px,1fr) ); gap:var(--hs-ds-space-2); } .agenda-month-strip-weeks button{ position:relative; min-width:0; min-height:28px; padding:0 var(--hs-ds-space-2); border:1px solid rgba(16,28,23,.08); border-radius:var(--hs-ds-radius-xs); background:#f3f1eb; color:var(--muted); font-size:8px; font-weight:800; } .agenda-month-strip-weeks button.selected{ background:var(--forest); border-color:var(--forest); color:var(--hs-ds-color-surface); } .agenda-month-strip-weeks button.current:not(.selected)::after{ content:""; position:absolute; left:50%; bottom:3px; width:12px; height:2px; transform:translateX(-50%); border-radius:4px; background:var(--gold); } .agenda-month-strip-days{ display:grid; grid-template-columns: repeat(7,1fr); gap:3px; margin-top:5px; } .agenda-month-strip-days button{ min-height:37px; padding:3px 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:0; border-radius:var(--hs-ds-radius-xs); background:transparent; color:var(--ink); } .agenda-month-strip-days small{ color:var(--muted); font-size:6.5px; font-weight:800; } .agenda-month-strip-days strong{ font-size:var(--hs-ds-text-xs); font-weight:800; } .agenda-month-strip-days button.selected{ background:var(--forest); color:var(--hs-ds-color-surface); } .agenda-month-strip-days button.selected small{ color:rgba(255,255,255,.72); } .agenda-month-strip-days button.today:not(.selected){ box-shadow: inset 0 0 0 1px rgba(16,28,23,.25); } .agenda-month-strip-days button.outside{ opacity:.30; } @media(max-width:700px){ .agenda-month-strip{ width:100%; margin-top:2px; padding:var(--hs-ds-space-3) 7px; } .agenda-month-strip-weeks{ gap:3px; } .agenda-month-strip-weeks button{ min-height:27px; padding:0 var(--hs-ds-space-1); font-size:7px; } .agenda-month-strip-days{ gap:var(--hs-ds-space-1); } .agenda-month-strip-days button{ min-height:34px; } } /* ========================================================= HOME MANAGEMENT MENU V139 ========================================================= */ /* * In Home il vecchio pallino diventa * il menu gestionale principale. */ #bell.home-management-trigger{ width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--hs-ds-radius-circle); background:transparent; color:var(--forest); font-size:var(--hs-ds-text-lg); font-weight:900; letter-spacing:1px; } /* * Le vecchie card Gestione non devono * più comparire. */ .home-management-hub{ display:none!important; } /* * Sheet Home */ .home-menu-backdrop{ align-items:flex-end; } .home-menu-sheet{ width:min(520px,100%); max-height: calc( 100dvh - 32px ); overflow-y:auto; padding:18px; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow: 0 24px 70px rgba(16,28,23,.22); } .home-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); margin-bottom:13px; } .home-menu-head small, .home-menu-head strong{ display:block; } .home-menu-head small{ margin-bottom:2px; color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.12em; } .home-menu-head strong{ font-size:var(--hs-ds-text-lg); font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .home-menu-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-3); } .home-menu-list button{ width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); padding:11px var(--hs-ds-space-6); border:1px solid rgba(16,28,23,.08); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--ink); text-align:left; } .home-menu-list button > span{ min-width:0; } .home-menu-list strong, .home-menu-list small{ display:block; } .home-menu-list strong{ font-size:12px; font-weight:850; } .home-menu-list small{ margin-top:2px; color:var(--muted); font-size:8px; line-height:1.35; } .home-menu-list button > b{ flex:0 0 auto; color:var(--muted); font-size:var(--hs-ds-text-xl); font-weight:400; } @media(max-width:700px){ .home-menu-backdrop{ display:flex; align-items:flex-end; padding: var(--hs-ds-space-6) 10px max( 10px, env( safe-area-inset-bottom ) ); background: rgba(16,28,23,.42); } .home-menu-sheet{ width:100%; max-height: calc( 100dvh - 24px ); padding: 15px; border-radius:var(--hs-ds-radius-lg); } .home-menu-list button{ min-height:58px; } } .agenda-quick-view{ min-height:38px; padding:7px 11px; display:flex; align-items:center; gap:7px; border:1px solid rgba(212,178,125,.34); border-radius:var(--hs-ds-radius-control); background: rgba(212,178,125,.08); color:inherit; cursor:pointer; } .agenda-quick-view small{ color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .agenda-quick-view strong{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hs-ds-text-label); font-weight:800; } .agenda-quick-view i{ color:var(--accent); font-size:12px; font-style:normal; } .agenda-bulk-bar:empty{ display:none; } @media(max-width:600px){ .agenda-quick-view{ max-width:52%; min-height:36px; padding:var(--hs-ds-space-3) 9px; } .agenda-quick-view strong{ max-width:105px; font-size:10px; } } /* ========================================================= PANNI + VISTA ========================================================= */ .agenda-live-strip-v143{ margin-top:10px!important; } .agenda-live-cards-v143{ display:grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important; gap:var(--hs-ds-space-4)!important; } .agenda-live-cards-v143 .agenda-live-card{ width:100%!important; min-width:0!important; min-height:58px!important; margin:0!important; } .agenda-live-card-view{ position:relative; } .agenda-live-card-view i{ position:absolute; right:12px; top:50%; transform: translateY(-50%); color:var(--accent); font-style:normal; } /* ========================================================= MONTH STRIP V143 ========================================================= */ .agenda-month-strip-v143{ touch-action:pan-y; user-select:none; -webkit-user-select:none; } .agenda-month-strip-title-row{ display:grid; grid-template-columns: 38px 1fr 38px; align-items:center; gap:var(--hs-ds-space-4); margin-bottom:9px; } .agenda-month-strip-title-row .agenda-month-strip-title{ margin:0!important; text-align:center; text-transform:capitalize; } .agenda-month-strip-arrow{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--hs-ds-radius-circle); background:transparent; color:var(--text); cursor:pointer; font-size:19px; line-height:1; } /* ========================================================= MOBILE / IPAD TOUCH ========================================================= */ @media(max-width:760px){ .agenda-live-cards-v143{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } .agenda-month-strip-arrow{ width:32px; height:32px; } } /* * iPad / tablet: * layout ampio, interazione touch. */ @media( min-width:761px ) and ( max-width:1180px ){ .agenda-live-cards-v143{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } } /* ========================================================= PERSONAL WEEK SCROLL V145 ========================================================= */ /* * La settimana personale deve avere un suo vero * contenitore scrollabile verticale. * * In questo modo header/pagina non tagliano * la parte bassa dell'Agenda. */ body.agenda-mode .agenda-person-week-scroll{ width:100%; max-height: calc(100dvh - 250px); overflow-x:auto!important; overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action: pan-x pan-y; } /* * La settimana deve avere una vera altezza * verticale da Agenda, non essere compressa * alla sola altezza disponibile dello schermo. */ body.agenda-mode .agenda-person-week .agenda-week-time-axis, body.agenda-mode .agenda-person-week .agenda-week-lane{ height:900px!important; min-height:900px!important; } /* * Evita che il contenitore interno venga * compresso dal layout della pagina. */ body.agenda-mode .agenda-person-week{ min-height:900px; } /* * L'asse orari e le colonne restano * correttamente allineati durante lo scroll. */ body.agenda-mode .agenda-person-week .agenda-week-time-head, body.agenda-mode .agenda-person-week .agenda-week-day-head{ position:sticky; top:0; z-index:15; } /* MOBILE */ @media(max-width:700px){ body.agenda-mode .agenda-person-week-scroll{ max-height: calc(100dvh - 220px); overflow-y:auto!important; -webkit-overflow-scrolling:touch; } body.agenda-mode .agenda-person-week .agenda-week-time-axis, body.agenda-mode .agenda-person-week .agenda-week-lane{ height:900px!important; min-height:900px!important; } } /* IPAD / TABLET TOUCH */ @media( min-width:701px ) and ( max-width:1180px ){ body.agenda-mode .agenda-person-week-scroll{ max-height: calc(100dvh - 235px); overflow-y:auto!important; -webkit-overflow-scrolling:touch; } } /* ========================================================= PERSONAL WEEK SIDE ARROWS V147 ========================================================= */ .agenda-person-week-stage{ position:relative; width:100%; } @media(min-width:901px){ body.agenda-mode .agenda-person-week-stage{ padding-left:42px!important; padding-right:42px!important; } body.agenda-mode .agenda-person-week-stage .agenda-person-week-scroll{ width:100%; } } /* * Su telefono/iPad resta disponibile * soprattutto lo swipe. * * Le frecce laterali diventano visibili * quando c'è spazio sufficiente. */ @media(max-width:900px){ .agenda-person-week-stage .agenda-side-arrow{ display:none!important; } } /* ========================================================= HAIRCUT UI SYSTEM V150 ========================================================= */ /* ICON SYSTEM */ .ui-icon{ display:block; width:20px; height:20px; flex:0 0 auto; } .ui-menu-icon{ width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-app-bg); color:var(--forest); } .ui-menu-icon .ui-icon{ width:19px; height:19px; } /* --------------------------------------------------------- HEADER ACTIONS --------------------------------------------------------- */ .ui-header-actions{ display:flex; align-items:center; gap:var(--hs-ds-space-4); flex:0 0 auto; } .ui-header-actions .icon{ width:42px!important; height:42px!important; display:grid!important; place-items:center!important; padding:0!important; border:1px solid rgba(16,28,23,.08)!important; border-radius:var(--hs-ds-radius-circle)!important; background:var(--card)!important; color:var(--forest)!important; box-shadow: 0 3px 12px rgba(16,28,23,.06); } .ui-header-actions .icon .ui-icon{ width:19px; height:19px; } .home-quick-add-trigger{ background:var(--forest)!important; color:var(--hs-ds-color-surface)!important; } /* --------------------------------------------------------- BOTTOM NAV --------------------------------------------------------- */ /* --------------------------------------------------------- MODAL SYSTEM --------------------------------------------------------- */ /* FORM GRANDI */ .team-profile-modal, .service-editor-modal{ width: min( 1080px, calc(100vw - 36px) )!important; } /* HOME PANEL */ .home-panel-modal{ width: min( 780px, calc(100vw - 36px) )!important; max-height: calc(100dvh - 36px)!important; } /* --------------------------------------------------------- STANDARD SHEETS: HOME / AGENDA / VIEW --------------------------------------------------------- */ .home-menu-sheet, .agenda-view-sheet{ width: min( 640px, calc(100vw - 36px) )!important; max-width:none!important; max-height: min( 86dvh, 820px )!important; overflow:auto!important; padding:var(--hs-ds-space-9)!important; border:1px solid var(--line)!important; border-radius:22px!important; background:var(--card)!important; box-shadow: 0 24px 70px rgba(16,28,23,.22)!important; } .home-menu-head{ min-height:48px; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-8); margin-bottom:16px; } .home-menu-head small, .ui-sheet-eyebrow{ display:block; margin-bottom:4px; color:var(--green); font-size:var(--hs-ds-text-xs); font-weight:850; letter-spacing:.16em; } .home-menu-head strong{ display:block; font: 700 24px/1.1 "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* --------------------------------------------------------- MENU ROW STANDARD --------------------------------------------------------- */ .home-menu-list, .ui-action-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-4); } .home-menu-list > button, .ui-action-list > button{ width:100%; min-height:72px; display:flex; align-items:center; gap:13px; padding:13px var(--hs-ds-space-7)!important; border:1px solid var(--line)!important; border-radius:15px!important; background:var(--hs-ds-color-surface)!important; color:var(--ink)!important; text-align:left!important; } .home-menu-list > button > span:not(.ui-menu-icon), .ui-action-list > button > span:not(.ui-menu-icon){ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; } .home-menu-list strong, .ui-action-list strong{ font-size:var(--hs-ds-text-control); font-weight:800; } .home-menu-list small, .ui-action-list small{ color:var(--muted); font-size:10px; } .home-menu-list b, .ui-action-list b{ margin-left:auto; color:var(--muted); font-size:20px; font-weight:500; } /* QUICK ADD */ .ui-action-sheet{ width: min( 620px, calc(100vw - 36px) )!important; } .ui-action-list{ margin-top:18px; } /* --------------------------------------------------------- GENERIC PAGE MENUS --------------------------------------------------------- */ .ui-page-menu{ display:grid!important; grid-template-columns: repeat( 2, minmax(0,1fr) )!important; gap:var(--hs-ds-space-5)!important; } .ui-page-menu-card{ min-height:92px; display:grid!important; grid-template-columns: 42px minmax(0,1fr) 20px; align-items:center; gap:var(--hs-ds-space-6); padding:15px!important; text-align:left; } .ui-page-menu-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; } .ui-page-menu-copy strong{ font-size:var(--hs-ds-text-control); font-weight:800; } .ui-page-menu-copy small{ color:var(--muted); font-size:10px; } .ui-page-menu-arrow{ color:var(--muted); font-size:20px; } /* --------------------------------------------------------- HOME METRIC CARDS --------------------------------------------------------- */ body.home-mode .grid{ align-items:stretch; } body.home-mode .metric-button{ min-height:112px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-3); padding:15px!important; } body.home-mode .metric-button small{ min-height:16px; font-size:var(--hs-ds-text-xs); font-weight:850; letter-spacing:.08em; } body.home-mode .metric-button b{ margin:auto 0 0; font-size:27px; } body.home-mode .metric-open{ margin-top:4px; color:var(--muted); font-size:var(--hs-ds-text-xs); font-weight:750; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media( min-width:701px ) and ( max-width:1100px ){ .home-menu-sheet, .agenda-view-sheet{ width: min( 720px, calc(100vw - 40px) )!important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ .home-menu-sheet, .agenda-view-sheet, .ui-action-sheet, .home-panel-modal{ width:100vw!important; max-width:100vw!important; max-height:90dvh!important; margin:0!important; padding: 18px 14px max( 18px, env(safe-area-inset-bottom) )!important; border-left:0!important; border-right:0!important; border-bottom:0!important; border-radius: 22px 22px 0 0!important; overflow-y:auto!important; -webkit-overflow-scrolling: touch; } /* * Form complessi: * full screen. */ .team-profile-modal, .service-editor-modal{ width:100vw!important; height:100dvh!important; max-height:100dvh!important; border-radius:0!important; } .home-menu-list > button, .ui-action-list > button{ min-height:68px; } .ui-page-menu{ grid-template-columns: 1fr!important; } .ui-page-menu-card{ min-height:76px; } body.home-mode .metric-button{ min-height:102px; } .ui-header-actions{ gap:var(--hs-ds-space-3); } .ui-header-actions .icon{ width:38px!important; height:38px!important; } } /* ========================================================= AGENDA READABILITY V151 ========================================================= */ /* * Più spazio verticale per gli appuntamenti. * Preferiamo scorrere leggermente di più * invece di comprimere nome, servizio e note. */ body.agenda-mode .agenda-time-axis, body.agenda-mode .agenda-lane{ height: max( 760px, calc(100dvh - 118px) )!important; } /* * Un po' più aria dentro le card. */ /* * Note: permettiamo qualche pixel in più * prima del taglio visivo. */ /* * Anche la settimana personale segue * la nuova scala più leggibile. */ body.agenda-mode .agenda-person-week .agenda-week-time-axis, body.agenda-mode .agenda-person-week .agenda-week-lane{ height:980px!important; min-height:980px!important; } body.agenda-mode .agenda-person-week{ min-height:980px!important; } /* MOBILE */ @media(max-width:700px){ body.agenda-mode .agenda-time-axis, body.agenda-mode .agenda-lane{ height:760px!important; } body.agenda-mode .agenda-person-week .agenda-week-time-axis, body.agenda-mode .agenda-person-week .agenda-week-lane{ height:980px!important; min-height:980px!important; } } /* ========================================================= HOME QUICK ACTION V151 ========================================================= */ body.home-mode .home-quick-action-main{ width:100%; min-height:54px; margin: 8px 0 16px!important; display:flex; align-items:center; justify-content:center; border-radius:var(--hs-ds-radius-md)!important; font-size:var(--hs-ds-text-control); font-weight:850; letter-spacing:.01em; } /* * In Home non vogliamo più pulsanti + * aggiuntivi nell'header. */ body.home-mode .ui-header-actions [data-home-quick-add]{ display:none!important; } /* ========================================================= MORE MENU SYSTEM V152 Standard definitivo menu ••• ========================================================= */ /* --------------------------------------------------------- BACKDROP --------------------------------------------------------- */ .home-menu-backdrop, .agenda-more-backdrop{ position:fixed!important; inset:0!important; z-index:9998!important; display:flex!important; align-items:flex-start!important; justify-content:center!important; padding: clamp(var(--hs-ds-space-10),6vh,70px) 22px 24px!important; overflow-y:auto!important; background: rgba(16,28,23,.34)!important; backdrop-filter: blur(7px)!important; } /* --------------------------------------------------------- SHEET COMUNE --------------------------------------------------------- */ .ui-more-sheet{ width: min( 720px, calc(100vw - 44px) )!important; height:auto!important; max-width:none!important; max-height: calc(100dvh - 100px)!important; margin:0 auto!important; padding:22px!important; overflow-y:auto!important; border: 1px solid rgba(16,28,23,.10)!important; border-radius:var(--hs-ds-radius-xl)!important; background:var(--card)!important; box-shadow: 0 28px 80px rgba(16,28,23,.24)!important; scrollbar-gutter:stable; } /* --------------------------------------------------------- HEADER COMUNE --------------------------------------------------------- */ .ui-more-head{ min-height:58px!important; display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:18px!important; margin:0 0 18px!important; } .ui-more-title, .home-menu-head > div{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .ui-more-title small, .home-menu-head small, .agenda-more-head small{ display:block; margin:0 0 3px!important; color:var(--green)!important; font-size:var(--hs-ds-text-xs)!important; font-weight:850!important; letter-spacing:.16em!important; text-transform:uppercase; } .ui-more-title strong, .home-menu-head strong, .agenda-more-head strong{ display:block; margin:0!important; color:var(--ink)!important; font: 700 26px/1.08 "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important; } /* --------------------------------------------------------- AZIONI HEADER --------------------------------------------------------- */ .ui-more-head-actions{ display:flex; align-items:center; gap:var(--hs-ds-space-4); flex:0 0 auto; } /* * X sempre completamente isolata. */ /* * Selezione appuntamenti: * azione secondaria, NON voce del menu. */ .ui-select-action{ min-height:42px; display:flex; align-items:center; gap:var(--hs-ds-space-3); padding:0 13px!important; border: 1px solid var(--line)!important; border-radius:var(--hs-ds-radius-pill)!important; background:var(--hs-ds-color-surface)!important; color:var(--forest)!important; font-size:var(--hs-ds-text-label)!important; font-weight:800!important; white-space:nowrap; box-shadow:none!important; } .ui-select-action:hover{ background:#f3f1ea!important; } .ui-select-action.active{ border-color: var(--hs-ds-color-tertiary)!important; background:var(--forest)!important; color:var(--hs-ds-color-surface)!important; } .ui-select-check{ width:18px; height:18px; display:grid; place-items:center; border: 1px solid currentColor; border-radius:var(--hs-ds-radius-circle); font-size:10px; line-height:1; } /* --------------------------------------------------------- LISTE COMUNI --------------------------------------------------------- */ .home-menu-list, .ui-more-list{ display:flex!important; flex-direction:column!important; gap:9px!important; margin:0!important; } .home-menu-list > button, .ui-more-list > button{ width:100%!important; min-height:78px!important; display:grid!important; grid-template-columns: 44px minmax(0,1fr) 22px!important; align-items:center!important; gap:13px!important; padding:13px 15px!important; border: 1px solid var(--line)!important; border-radius:16px!important; background:var(--hs-ds-color-surface)!important; color:var(--ink)!important; text-align:left!important; box-shadow:none!important; } .home-menu-list > button:hover, .ui-more-list > button:hover{ border-color: rgba(16,28,23,.25)!important; background:#fbfaf7!important; } .home-menu-list .ui-menu-icon, .ui-more-list .ui-menu-icon{ width:44px!important; height:44px!important; display:grid!important; place-items:center!important; margin:0!important; border: 1px solid var(--line)!important; border-radius:var(--hs-ds-radius-control)!important; background:var(--hs-ds-color-app-bg)!important; color:var(--forest)!important; } .ui-more-row-copy, .home-menu-list > button > span:not(.ui-menu-icon){ min-width:0!important; display:flex!important; flex-direction:column!important; gap:3px!important; } .ui-more-row-copy strong, .home-menu-list strong{ display:block!important; color:var(--ink)!important; font-size:var(--hs-ds-text-control)!important; font-weight:800!important; line-height:1.2!important; } .ui-more-row-copy small, .home-menu-list small{ display:block!important; color:var(--muted)!important; font-size:10px!important; font-weight:500!important; line-height:1.35!important; } .ui-more-list > button > i, .home-menu-list > button > b{ margin-left:auto!important; color:var(--muted)!important; font-size:21px!important; font-style:normal!important; font-weight:500!important; text-align:center; } /* ========================================================= TABLET / IPAD ========================================================= */ @media( min-width:701px ) and ( max-width:1180px ){ .home-menu-backdrop, .agenda-more-backdrop{ padding: 34px 20px 24px!important; } .ui-more-sheet{ width: min( 760px, calc(100vw - 40px) )!important; max-height: calc(100dvh - 68px)!important; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .home-menu-backdrop, .agenda-more-backdrop{ align-items:flex-start!important; justify-content:center!important; padding: max( 8px, env(safe-area-inset-top) ) 6px 6px!important; background: rgba(16,28,23,.34)!important; } .ui-more-sheet{ width: calc(100vw - 12px)!important; max-width:none!important; max-height: calc( 100dvh - max( 16px, env(safe-area-inset-top) ) )!important; margin:0!important; padding: var(--hs-ds-space-8) 13px max( 18px, env(safe-area-inset-bottom) )!important; border: 1px solid rgba(16,28,23,.09)!important; border-radius:var(--hs-ds-radius-lg)!important; } .ui-more-head{ position:sticky; top:-16px; z-index:5; margin: -16px -13px 14px!important; padding: var(--hs-ds-space-8) 13px 12px!important; background:var(--card); border-bottom: 1px solid var(--hs-ds-color-field-ring); } .ui-more-title strong, .home-menu-head strong, .agenda-more-head strong{ font-size:23px!important; } .ui-select-action{ width:40px!important; height:40px!important; min-height:40px!important; justify-content:center; padding:0!important; } /* * Sul telefono lasciamo solo la spunta, * così X e selezione rimangono pulite. */ .ui-select-action > span:last-child{ display:none; } .ui-select-check{ width:20px; height:20px; } .home-menu-list, .ui-more-list{ gap:var(--hs-ds-space-4)!important; } .home-menu-list > button, .ui-more-list > button{ min-height:72px!important; grid-template-columns: 40px minmax(0,1fr) 20px!important; gap:11px!important; padding:11px var(--hs-ds-space-6)!important; } .home-menu-list .ui-menu-icon, .ui-more-list .ui-menu-icon{ width:40px!important; height:40px!important; } } /* CUSTOMER DUPLICATE WARNING */ .customer-duplicate-warning-list{ display:grid; gap:var(--hs-ds-space-6); margin-top:18px; } .customer-duplicate-warning-card{ border:1px solid rgba(127,127,127,.22); border-radius:16px; padding:var(--hs-ds-space-8); display:grid; gap:var(--hs-ds-space-5); } .customer-duplicate-warning-top{ display:grid; gap:5px; } .customer-duplicate-warning-top strong{ font-size:17px; } .customer-duplicate-level{ width:max-content; max-width:100%; font-size:var(--hs-ds-text-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.68; } .customer-duplicate-warning-contact{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-3) var(--hs-ds-space-6); font-size:var(--hs-ds-text-control); opacity:.75; } .customer-duplicate-warning-reasons{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-3); } .customer-duplicate-warning-reasons span{ font-size:12px; padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); background:rgba(127,127,127,.1); } .customer-duplicate-warning-card .btn{ justify-self:start; margin-top:2px; } @media (max-width:640px){ .customer-duplicate-warning-card{ padding:var(--hs-ds-space-7); } .customer-duplicate-warning-card .btn{ width:100%; } } /* CLIENT DATABASE QUALITY */ .clients-header-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hs-ds-space-4); } .client-quality-modal{ width:min(780px,calc(100vw - 32px)); max-height:min(88vh,900px); overflow:auto; } .client-quality-warning{ padding:var(--hs-ds-space-6) var(--hs-ds-space-7); margin-bottom:14px; border-radius:var(--hs-ds-radius-control); background:rgba(127,127,127,.1); font-size:var(--hs-ds-text-md); } .client-quality-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hs-ds-space-5); } .client-quality-stats article{ min-height:92px; padding:var(--hs-ds-space-7); border:1px solid rgba(127,127,127,.18); border-radius:var(--hs-ds-radius-md); display:flex; flex-direction:column; justify-content:space-between; gap:var(--hs-ds-space-4); } .client-quality-stats strong{ font-size:25px; line-height:1; } .client-quality-stats span{ font-size:12px; opacity:.68; } .client-quality-secondary{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-4) 18px; padding:15px var(--hs-ds-space-1); font-size:12px; opacity:.72; } .client-quality-section{ margin-top:10px; padding-top:var(--hs-ds-space-9); border-top:1px solid rgba(127,127,127,.16); } .client-quality-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-6); margin-bottom:12px; } .client-quality-section-head h3{ margin:3px 0 0; } .client-quality-groups{ display:grid; gap:var(--hs-ds-space-5); } .client-quality-group{ padding:var(--hs-ds-space-7); border:1px solid rgba(127,127,127,.18); border-radius:15px; display:grid; gap:11px; } .client-quality-group-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-6); } .client-quality-people{ display:grid; gap:5px; } .client-quality-people button{ appearance:none; width:100%; border:0; background:rgba(127,127,127,.06); border-radius:var(--hs-ds-radius-sm); padding:11px; text-align:left; cursor:pointer; display:grid; gap:3px; color:inherit; } .client-quality-people button span{ font-size:12px; opacity:.68; } @media (max-width:640px){ .clients-header-actions{ width:100%; } .clients-header-actions .btn{ flex:1; } .client-quality-modal{ width:calc(100vw - 20px); max-height:92vh; } .client-quality-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .client-duplicate-ignore{ justify-self:start; margin-top:2px; } @media (max-width:640px){ .client-duplicate-ignore{ width:100%; } } /* CUSTOMER MERGE PREVIEW */ .client-quality-group-actions{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-4); } .client-merge-preview-modal{ width:min(820px,calc(100vw - 32px)); max-height:min(90vh,940px); overflow:auto; } .client-merge-primary-title{ display:grid; gap:var(--hs-ds-space-2); margin-bottom:10px; } .client-merge-primary-title span{ font-size:12px; } .client-merge-primary-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-5); margin-bottom:20px; } .client-merge-primary-options button{ appearance:none; border:1px solid rgba(127,127,127,.2); background:rgba(127,127,127,.04); color:inherit; border-radius:15px; padding:var(--hs-ds-space-7); text-align:left; display:grid; gap:var(--hs-ds-space-2); cursor:pointer; } .client-merge-primary-options button.is-selected{ border-color:currentColor; background:rgba(127,127,127,.1); } .client-merge-primary-options button > span{ font-size:10px; letter-spacing:.08em; opacity:.58; } .client-merge-primary-options button > strong{ font-size:16px; } .client-merge-primary-options button > small{ opacity:.62; overflow-wrap:anywhere; } .client-merge-section{ padding:18px 0; border-top:1px solid rgba(127,127,127,.16); } .client-merge-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-6); margin-bottom:12px; } .client-merge-section-head h3{ margin:3px 0 0; } .client-merge-alert, .client-merge-ok{ font-size:var(--hs-ds-text-label); font-weight:700; padding:var(--hs-ds-space-3) 9px; border-radius:var(--hs-ds-radius-pill); background:rgba(127,127,127,.1); } .client-merge-fields{ display:grid; gap:var(--hs-ds-space-4); } .client-merge-field{ padding:var(--hs-ds-space-6); border-radius:13px; border:1px solid rgba(127,127,127,.16); } .client-merge-field-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-6); margin-bottom:9px; } .client-merge-status{ font-size:10px; font-weight:700; padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); background:rgba(127,127,127,.1); } .client-merge-status.conflict{ outline:1px solid rgba(127,127,127,.3); } .client-merge-status.same{ opacity:.68; } .client-merge-status.recover{ outline:1px dashed rgba(127,127,127,.45); } .client-merge-field-values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-4); } .client-merge-field-values > div{ padding:9px; border-radius:9px; background:rgba(127,127,127,.05); display:grid; gap:var(--hs-ds-space-2); min-width:0; } .client-merge-field-values small{ font-size:var(--hs-ds-text-xs); letter-spacing:.07em; opacity:.52; } .client-merge-field-values span{ font-size:12px; overflow-wrap:anywhere; white-space:pre-wrap; } .client-merge-aliases{ display:flex; flex-wrap:wrap; gap:7px; } .client-merge-aliases span{ padding:7px 9px; border-radius:var(--hs-ds-radius-pill); background:rgba(127,127,127,.09); font-size:var(--hs-ds-text-label); } .client-merge-relation-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--hs-ds-space-4); } .client-merge-relation-grid article{ border:1px solid rgba(127,127,127,.16); border-radius:var(--hs-ds-radius-control); padding:var(--hs-ds-space-6); display:grid; gap:var(--hs-ds-space-3); } .client-merge-relation-grid strong{ font-size:21px; } .client-merge-relation-grid span{ font-size:10px; opacity:.63; } .client-merge-legacy-notes{ display:grid; gap:7px; margin-top:10px; } .client-merge-legacy-notes > div{ padding:11px var(--hs-ds-space-6); border-radius:11px; background:rgba(127,127,127,.06); display:grid; gap:3px; } .client-merge-legacy-notes strong{ font-size:12px; } .client-merge-legacy-notes span{ font-size:var(--hs-ds-text-label); opacity:.66; } .client-merge-strategy{ margin:4px 0 14px; padding:var(--hs-ds-space-7); border-radius:13px; background:rgba(127,127,127,.07); display:grid; gap:5px; } .client-merge-strategy strong{ font-size:12px; } .client-merge-strategy span{ font-size:var(--hs-ds-text-label); opacity:.68; line-height:1.45; } .client-merge-disabled{ width:100%; opacity:.48; cursor:not-allowed; } @media (max-width:640px){ .client-quality-group-actions{ display:grid; grid-template-columns:1fr; } .client-quality-group-actions .btn{ width:100%; } .client-merge-preview-modal{ width:calc(100vw - 20px); max-height:92vh; } .client-merge-primary-options{ grid-template-columns:1fr; } .client-merge-field-values{ grid-template-columns:1fr; } .client-merge-relation-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* SELECTIVE CUSTOMER MERGE V160 */ .client-quality-person-select{ grid-template-columns:22px minmax(0,1fr) !important; align-items:center; gap:var(--hs-ds-space-5) !important; border:1px solid transparent !important; } .client-quality-person-select.is-selected{ border-color:currentColor !important; background:rgba(127,127,127,.11) !important; } .client-quality-check{ width:19px; height:19px; border-radius:6px; border:1px solid rgba(127,127,127,.35); display:grid; place-items:center; } .client-quality-person-select.is-selected .client-quality-check::after{ content:'✓'; font-size:12px; font-weight:800; } .client-quality-person-copy{ min-width:0; display:grid; gap:3px; } .client-quality-person-copy strong, .client-quality-person-copy span{ overflow-wrap:anywhere; } .client-quality-selected-count{ display:flex; align-items:center; padding:0 var(--hs-ds-space-2); font-size:var(--hs-ds-text-label); opacity:.62; } .client-quality-group-actions button:disabled{ opacity:.42; cursor:not-allowed; } .client-merge-choice-help{ margin:5px 0 12px; } .client-merge-choice-fields{ display:grid; gap:var(--hs-ds-space-5); } .client-merge-choice{ padding:13px; border:1px solid rgba(127,127,127,.16); border-radius:13px; display:grid; gap:9px; } .client-merge-choice-options{ display:grid; gap:var(--hs-ds-space-3); } .client-merge-choice-options label{ display:flex; align-items:center; gap:9px; padding:9px var(--hs-ds-space-5); border-radius:9px; background:rgba(127,127,127,.05); cursor:pointer; } .client-merge-choice-options input{ flex:0 0 auto; } .client-merge-choice-options span{ min-width:0; overflow-wrap:anywhere; font-size:12px; } @media (max-width:640px){ .client-quality-selected-count{ justify-content:center; min-height:24px; } } /* MERGE FIELD LAYOUT FIX V162 */ .client-merge-choice-options label{ width:100%; min-width:0; box-sizing:border-box; } .client-merge-choice-options input[type="radio"]{ appearance:auto; width:18px !important; min-width:18px !important; max-width:18px !important; height:18px !important; min-height:18px !important; padding:0 !important; margin:0 !important; flex:0 0 18px !important; } .client-merge-choice-options label > span{ display:block; width:auto; min-width:0; flex:1 1 auto; white-space:normal; word-break:normal; overflow-wrap:anywhere; line-height:1.35; } .client-merge-choice-options label:has(input:checked){ outline:1px solid currentColor; background:rgba(127,127,127,.1); } /* AGENDA CURRENT TIME V166 */ .agenda-lane{ position:relative; } .agenda-now-line{ position:absolute; left:0; right:0; top:var(--agenda-now-top); height:0; border-top:2px solid #c83232; z-index:18; pointer-events:none; } .agenda-now-line::before{ content:''; position:absolute; left:-4px; top:-5px; width:9px; height:9px; border-radius:var(--hs-ds-radius-pill); background:#c83232; } .agenda-now-line > span{ position:absolute; right:5px; top:-18px; padding:var(--hs-ds-space-1) 5px; border-radius:5px; background:#c83232; color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-xs); font-weight:800; } /* CLIENT IMPORT V166B */ .client-import-modal{ width:min(620px,calc(100vw - 28px)); } .client-import-preview{ min-height:74px; margin:14px 0; padding:var(--hs-ds-space-7); border:1px solid rgba(16,28,23,.10); border-radius:var(--hs-ds-radius-md); background:rgba(16,28,23,.035); display:flex; flex-direction:column; gap:var(--hs-ds-space-2); justify-content:center; } .client-import-preview strong{ font-size:var(--hs-ds-text-base); } .client-import-preview span, .client-import-preview small{ overflow-wrap:anywhere; } @media(max-width:700px){ .clients-header-actions{ flex-wrap:wrap; } } /* CLIENTI · SCHEDA CRM */ .client-profile-actions{ display:flex; gap:var(--hs-ds-space-4); flex-wrap:wrap; margin-bottom:14px; } .client-profile-contact{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-8); margin-bottom:12px; } .client-profile-contact div, .client-profile-appointments div{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .client-profile-contact small, .client-profile-appointments small, .client-profile-notes small{ font-size:var(--hs-ds-text-xs); font-weight:700; letter-spacing:.08em; } .client-profile-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-5); margin-bottom:12px; } .client-profile-appointments{ display:grid; gap:var(--hs-ds-space-7); margin-bottom:12px; } .client-profile-notes p{ margin:7px 0 0; white-space:pre-wrap; } @media(max-width:620px){ .client-profile-contact{ grid-template-columns:1fr; } } /* CLIENTI · SELEZIONE MULTIPLA */ .client-selection-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); margin-bottom:12px; } .client-selection-bar .actions{ display:flex; gap:var(--hs-ds-space-4); align-items:center; } .client-select-box{ width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border:1px solid rgba(127,127,127,.35); border-radius:7px; font-size:12px; font-weight:800; } .client-select-box.is-selected{ border-color:currentColor; } /* CLIENTI · APPUNTAMENTI CRM */ .client-profile-appointment-section{ margin-top:14px; } .client-profile-section-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; } .client-profile-section-head small{ font-size:var(--hs-ds-text-xs); font-weight:750; letter-spacing:.08em; } .client-appointment-list{ padding:0; overflow:hidden; } .client-appointment-row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); padding:var(--hs-ds-space-6) var(--hs-ds-space-7); border:0; border-bottom:1px solid rgba(127,127,127,.13); background:transparent; text-align:left; cursor:pointer; } .client-appointment-row:last-child{ border-bottom:0; } .client-appointment-row span{ display:flex; min-width:0; flex-direction:column; gap:3px; } .client-appointment-row strong{ font-size:12px; } .client-appointment-row small{ font-size:var(--hs-ds-text-xs); } .client-history{ margin-top:12px; } .client-history summary{ display:flex; align-items:center; justify-content:space-between; padding:var(--hs-ds-space-5) var(--hs-ds-space-1); cursor:pointer; font-size:var(--hs-ds-text-label); font-weight:700; list-style:none; } .client-history summary::-webkit-details-marker{ display:none; } /* SERVIZI · DRAG SORT */ .service-row{ position:relative; } .service-drag-handle{ flex:0 0 30px; width:30px; min-height:42px; display:grid; place-items:center; cursor:grab; touch-action:none; user-select:none; color:var(--muted); font-size:var(--hs-ds-text-lg); } .service-drag-handle:active{ cursor:grabbing; } .service-row.is-dragging{ opacity:.55; } /* AGENDA · COLORI DINAMICI */ /* ========================================================= SERVIZI · LISTA COMPATTA + DRAG PER PUBBLICO ========================================================= */ .service-audience-section{ margin-top:24px; } .service-audience-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-8); margin:0 2px 10px; } .service-audience-title h3{ margin:2px 0 0; } .services-sort-list{ overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:18px; } .service-sort-row{ display:flex; align-items:stretch; width:100%; min-height:68px; border-bottom:1px solid var(--line); background:var(--card); } .service-sort-row:last-child{ border-bottom:0; } .service-sort-row.is-dragging{ opacity:.55; box-shadow:0 8px 30px rgba(0,0,0,.10); } .service-sort-content{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); padding:13px var(--hs-ds-space-4) 13px var(--hs-ds-space-8); border:0; background:transparent; /* senza questo, Safari iOS mostra il testo del bottone in blu di sistema */ color:var(--ink); appearance:none; -webkit-appearance:none; text-align:left; } .service-sort-copy{ min-width:0; display:flex; flex-direction:column; gap:5px; } .service-sort-meta{ font-size:12px; color:var(--muted); } .service-drag-handle{ flex:0 0 54px; width:54px; border:0; border-left:1px solid var(--line); background:transparent; display:grid; place-items:center; font-size:var(--hs-ds-text-lg); color:var(--muted); cursor:grab; touch-action:none; } .service-drag-handle:active{ cursor:grabbing; } /* ========================================================= AGENDA · COLORE COLLABORATORE = FONTE UNICA ========================================================= */ .agenda-person[style*="--agenda-team-color"]{ background: color-mix( in srgb, var(--agenda-team-color) 20%, white ); } .agenda-lane[style*="--agenda-team-color"]{ background: color-mix( in srgb, var(--agenda-team-color) 7%, white ); } .agenda-lane[style*="--agenda-team-color"] .agenda-working-window{ background: color-mix( in srgb, var(--agenda-team-color) 10%, white ); } .agenda-lane[style*="--agenda-team-color"] .agenda-45-slot{ border-color: color-mix( in srgb, var(--agenda-team-color) 24%, transparent ); } /* ========================================================= OPERATIONS ENGINE ========================================================= */ .product-reminder-editor{ margin-top:14px; border-top:1px solid rgba(255,255,255,.08); padding-top:var(--hs-ds-space-6); } .product-reminder-editor>summary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-6); list-style:none; font-weight:700; } .product-reminder-editor>summary::-webkit-details-marker{ display:none; } .product-reminder-editor>summary small{ opacity:.58; font-weight:500; } .product-reminder-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); margin-top:14px; } .product-reminder-next{ display:flex; justify-content:space-between; gap:var(--hs-ds-space-6); align-items:center; padding-top:var(--hs-ds-space-6); margin-top:4px; border-top:1px solid rgba(255,255,255,.07); } .product-reminder-next small{ opacity:.55; } .home-ops-section{ margin-top:22px; } .home-ops-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--hs-ds-space-6); margin-bottom:10px; } .home-ops-head h2{ margin:2px 0 0; } .home-important-label{ padding:var(--hs-ds-space-5) var(--hs-ds-space-7) var(--hs-ds-space-2); font-size:10px; letter-spacing:.1em; opacity:.55; } .staff-action-row.is-important strong{ font-weight:800; } .home-shopping-list{ display:grid; } .home-shopping-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-8); padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); } .home-shopping-row:last-child{ border-bottom:0; } .home-shopping-row>div{ display:flex; flex-direction:column; gap:3px; } .home-incoming-card{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); } .home-incoming-card>div{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .task-repeat-grid{ align-items:end; } @media(max-width:640px){ .product-reminder-grid{ grid-template-columns:1fr; } } /* ========================================================= PROFESSIONAL CONTROL CENTER ========================================================= */ .settings-control-center{ display:flex; flex-direction:column; gap:var(--hs-ds-space-8); } .settings-control-intro{ margin-bottom:2px; } .settings-control-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); } .settings-control-card{ appearance:none; width:100%; border:0; text-align:left; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:var(--hs-ds-space-9); } .settings-control-card div{ min-width:0; } .settings-control-card small{ display:block; margin-bottom:18px; opacity:.52; font-weight:700; letter-spacing:.08em; } .settings-control-card h3{ margin:0 0 7px; font-size:20px; } .settings-control-card p{ margin:0; line-height:1.45; opacity:.68; } .settings-control-card>span{ font-size:var(--hs-ds-text-2xl); line-height:1; opacity:.5; } .team-permissions-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-7); } .team-permission-card{ padding:18px; } .team-permission-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-7); margin-bottom:10px; } .team-permission-head small{ display:block; margin-bottom:4px; opacity:.55; font-weight:700; letter-spacing:.08em; } .team-permission-head h3{ margin:0; font-size:20px; } .team-permission-head>span{ font-size:var(--hs-ds-text-label); opacity:.55; text-transform:uppercase; letter-spacing:.08em; } .team-permission-card details{ border-top:1px solid rgba(0,0,0,.08); padding:var(--hs-ds-space-6) 0; } .team-permission-card details:first-of-type{ margin-top:4px; } .team-permission-card summary{ cursor:pointer; font-weight:700; list-style:none; text-transform:uppercase; letter-spacing:.02em; } .team-permission-card summary::-webkit-details-marker{ display:none; } .permission-toggle-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-4); margin-top:12px; } .permission-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); padding:11px var(--hs-ds-space-6); border-radius:var(--hs-ds-radius-control); background:rgba(0,0,0,.035); } .permission-toggle-row span{ font-size:var(--hs-ds-text-md); line-height:1.3; } .permission-toggle-row input{ flex:0 0 auto; } @media(max-width:720px){ .settings-control-grid{ grid-template-columns:1fr; } .permission-toggle-grid{ grid-template-columns:1fr; } } /* ========================================================= UNIVERSAL ACTION + TASK MANAGEMENT ========================================================= */ .universal-action-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-4); } .task-row-actions{ display:flex; align-items:center; gap:7px; flex:0 0 auto; } .task-management-actions{ flex-wrap:wrap; } .staff-home-module-link{ width:100%; appearance:none; border:0; text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); margin-top:12px; } .staff-home-module-link div{ display:flex; flex-direction:column; gap:3px; } .staff-home-module-link small{ opacity:.55; font-weight:700; letter-spacing:.07em; } .staff-home-module-link>span{ font-size:24px; opacity:.45; } @media(max-width:720px){ .task-row-actions{ gap:5px; } .task-row-actions .btn.small{ padding-left:9px; padding-right:9px; } } /* ========================================================= AGENDA COMMAND CENTER — UNIFIED HOME V1 ========================================================= */ .agenda-unified-shell{ display:flex; flex-direction:column; gap:var(--hs-ds-space-5); } .agenda-command-empty{ padding:18px var(--hs-ds-space-3); text-align:center; font-size:var(--hs-ds-text-xs); color:var(--muted); } .agenda-command-copy{ width:100%; margin:8px 0 5px; } /* * Nella vista giorno principale i vecchi controlli * restano nel DOM per compatibilità ma non vengono * più mostrati: usiamo il nuovo Control Center. */ .agenda-unified-shell> .agenda-workspace-toolbar, .agenda-unified-shell> .agenda-view-switch, .agenda-unified-shell> .agenda-staff-filter-tabs, .agenda-unified-shell> .agenda-date-nav{ display:none !important; } /* Agenda fisicamente attaccata alla navigazione */ .agenda-unified-shell .agenda-calendar-pro{ margin-top:-10px; border-radius:0 0 16px 16px; } /* Header collaboratori sempre leggibile nello scroll */ .agenda-unified-shell .agenda-staff-head{ position:sticky; top:0; z-index:20; box-shadow:0 1px 0 rgba(16,28,23,.08); } .agenda-command-brand strong{ font-size:var(--hs-ds-text-base); font-weight:900; letter-spacing:.015em; } .agenda-command-tool-empty{ min-height:0; border:1px solid var(--line); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); } /* ========================================================= CALENDARIO = TESTATA REALE DELL'AGENDA ========================================================= */ .agenda-unified-shell{ gap:0 !important; } /* * Nessun secondo calendario / Live Oggi / * Panni / Vista tra calendario e Agenda. */ .agenda-unified-shell .agenda-live-strip{ display:none !important; } /* * nascondiamo anche i vecchi controlli * che sono già stati sostituiti sopra. */ .agenda-unified-shell> .agenda-view-switch, .agenda-unified-shell> .agenda-staff-filter-tabs, .agenda-unified-shell> .agenda-date-nav{ display:none !important; } /* eventuale bulk vuoto non deve creare spazio */ .agenda-unified-shell .agenda-bulk-bar:empty{ display:none; } /* Agenda attaccata fisicamente al calendario */ .agenda-unified-shell .agenda-calendar-pro{ width:100%; margin-top:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; } /* intestazione Luca/Daniele/Antonio */ .agenda-unified-shell .agenda-staff-head{ position:sticky; top:0; z-index:25; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:700px){ /* * Su mobile lo spazio futuro non deve * rubare area utile{ display:none; } } /* ========================================================= INLINE PANEL ========================================================= */ /* CLIENTI INLINE */ .agenda-inline-client-search{ display:grid; grid-template-columns:1fr auto; gap:var(--hs-ds-space-3); margin-bottom:7px; } .agenda-inline-client-results{ display:grid; } .agenda-inline-client-row{ min-height:44px; padding:var(--hs-ds-space-3) var(--hs-ds-space-2); border:0; border-bottom:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:space-between; text-align:left; } .agenda-inline-client-row>div{ min-width:0; display:flex; flex-direction:column; } .agenda-inline-client-row strong{ font-size:var(--hs-ds-text-xs); } .agenda-inline-client-row small{ font-size:7px; color:var(--muted); } /* VISTA INLINE */ .agenda-inline-view-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .agenda-inline-view-grid button, .agenda-inline-period-grid button{ min-height:36px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-xs); background:var(--hs-ds-color-surface); font-size:8px; font-weight:800; } .agenda-inline-view-grid button.active, .agenda-inline-period-grid button.active{ background:var(--forest); color:var(--hs-ds-color-surface); } .agenda-inline-period-grid{ margin-top:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } /* PANNI */ .agenda-inline-kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hs-ds-space-3); } .agenda-inline-kpi-grid>div{ padding:var(--hs-ds-space-5); border:1px solid var(--line); border-radius:9px; display:flex; flex-direction:column; } .agenda-inline-kpi-grid small{ font-size:6px; color:var(--muted); } .agenda-inline-kpi-grid strong{ font-size:17px; } /* CALENDARIO INLINE PIÙ COMPATTO */ /* AGENDA ATTACCATA ALLA TOOLBAR */ .agenda-unified-shell .agenda-calendar-pro{ margin-top:0 !important; border-radius:0 0 12px 12px !important; } /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= INLINE PANEL ========================================================= */ /* CONTROLLO */ .agenda-monitor-list{ display:grid; gap:var(--hs-ds-space-2); } .agenda-monitor-list button{ min-height:40px; padding:var(--hs-ds-space-3) var(--hs-ds-space-4); border:1px solid var(--line); border-radius:var(--hs-ds-radius-xs); background:var(--hs-ds-color-surface); display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:var(--hs-ds-space-4); text-align:left; } .agenda-monitor-list span{ font-size:8px; font-weight:750; } .agenda-monitor-list strong{ min-width:24px; font-size:12px; text-align:center; } .agenda-monitor-list i{ font-size:12px; font-style:normal; color:var(--muted); } .agenda-monitor-clear{ min-height:56px; display:flex; align-items:center; justify-content:center; gap:9px; text-align:left; } .agenda-monitor-clear>span{ width:26px; height:26px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); background:#edf2eb; font-size:var(--hs-ds-text-label); } .agenda-monitor-clear>div{ display:flex; flex-direction:column; } .agenda-monitor-clear strong{ font-size:var(--hs-ds-text-xs); } .agenda-monitor-clear small{ margin-top:1px; font-size:6.5px; color:var(--muted); } .agenda-management-separator{ padding:var(--hs-ds-space-5) var(--hs-ds-space-2) var(--hs-ds-space-2); font-size:5.5px; font-weight:900; letter-spacing:.1em; color:var(--muted); } .agenda-spotlight-search{ min-height:44px; padding:var(--hs-ds-space-2) var(--hs-ds-space-3); display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; background:var(--hs-ds-color-surface); } .agenda-spotlight-search>span{ padding-left:5px; font-size:var(--hs-ds-text-base); } .agenda-spotlight-search input{ width:100%; min-height:34px; padding:0; border:0!important; outline:0!important; background:transparent; font-size:10px; } .agenda-spotlight-search kbd{ padding:var(--hs-ds-space-2) var(--hs-ds-space-3); border:1px solid var(--line); border-radius:5px; background:#f4f2ed; font-family:inherit; font-size:6px; color:var(--muted); } .agenda-spotlight-results{ display:grid; margin-top:5px; } .agenda-spotlight-results button{ min-height:43px; padding:var(--hs-ds-space-3) 5px; border:0; border-bottom:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); text-align:left; } .agenda-spotlight-results button>div{ min-width:0; display:flex; flex-direction:column; } .agenda-spotlight-results strong{ font-size:var(--hs-ds-text-xs); } .agenda-spotlight-results small{ margin-top:2px; font-size:7px; color:var(--muted); } .agenda-spotlight-results button>span{ flex:0 0 auto; font-size:6.5px; color:var(--muted); } .agenda-spotlight-empty{ min-height:50px; display:grid; place-items:center; font-size:7px; color:var(--muted); } /* * Agenda attaccata perfettamente. */ .agenda-unified-shell .agenda-calendar-pro{ width:100%!important; margin:0!important; border-top: 1px solid var(--line)!important; border-radius: 0 0 12px 12px!important; } /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .agenda-spotlight-search kbd{ display:none; } } /* SINISTRA */ .agenda-inline-monitor, .agenda-inline-clients, .agenda-inline-todo, .agenda-inline-checklists, .agenda-inline-orders, .agenda-inline-issues{ left:0; right:auto; } /* DESTRA */ .agenda-inline-add{ right:0; left:auto; } /* ADD */ .agenda-inline-add{ width:360px!important; } .agenda-spotlight-results-v5{ margin:0; } /* * Nessun gap fra barra e agenda. */ .agenda-unified-shell{ gap:0!important; } .agenda-calendar-pro{ position:relative; z-index:1; } /* ========================================================= TABLET ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* V6 STACKED POPOVERS */ /* ========================================================= V6.1 — POPOVER GEOMETRY FIX ========================================================= */ /* ROOT */ /* ========================================================= DESKTOP / IPAD ogni livello successivo DAVVERO di fianco ========================================================= */ @media(min-width:701px){ /* * Spotlight e Add sono a destra: * eventuali livelli secondari * crescono verso sinistra. */ } /* ========================================================= MOBILE un solo pannello utile alla volta. Il precedente resta appena percepibile. ========================================================= */ /* * Dropdown risultati esattamente * sotto la barra Spotlight. */ .agenda-popover-root-spotlight{ left:auto!important; right:40px!important; width:var(--spotlight-width)!important; } /* ========================================================= CLIENT SEARCH GEOMETRY ========================================================= */ .agenda-inline-client-search{ box-sizing:border-box; grid-template-columns: minmax(0,1fr) auto!important; width:100%; } .agenda-inline-client-search input{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; border-radius:var(--hs-ds-radius-xs)!important; } /* ========================================================= AGENDA UI FIX — OVERLAYS ABOVE EVERYTHING ========================================================= */ /* Tutto il sistema menu sta sopra appuntamenti{ position:relative!important; z-index:5000!important; overflow:visible!important; } .agenda-popover-stack{ z-index:9000!important; overflow:visible!important; } .agenda-stack-panel{ z-index:9001; } .agenda-stack-panel.is-top{ z-index:9010!important; pointer-events:auto!important; } .agenda-calendar-pro, .agenda-staff-head, .agenda-appointment, .agenda-appointment-card{ z-index:auto; } /* risultati esattamente larghi quanto Spotlight */ .agenda-popover-root-spotlight{ width:var(--spotlight-width)!important; max-width:var(--spotlight-width)!important; left:auto!important; right:40px!important; } /* ========================================================= AGENDA A TUTTA LARGHEZZA ========================================================= */ /* via le grandi frecce laterali */ .agenda-shell [data-agenda-side-prev], .agenda-shell [data-agenda-side-next], .agenda-side-prev, .agenda-side-next, .agenda-calendar-side-prev, .agenda-calendar-side-next{ display:none!important; } .agenda-calendar-pro{ box-sizing:border-box!important; } .agenda-calendar-pro{ width:100%!important; max-width:none!important; } .agenda-calendar-pro{ border: 1px solid var(--line)!important; border-top:0!important; border-radius: 0 0 12px 12px!important; } /* ========================================================= CLICKABILITY ========================================================= */ .agenda-stack-list{ display:grid; } .agenda-stack-list>div{ min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-4); border-bottom:1px solid var(--line); } .agenda-stack-list span{ min-width:0; font-size:7.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .agenda-stack-list strong{ flex:0 0 auto; font-size:8px; } /* ORDINI */ .agenda-order-received-button, .agenda-order-confirm-button{ width:100%; min-height:40px; margin-top:8px; border:0; border-radius:var(--hs-ds-radius-xs); background:var(--forest); color:var(--hs-ds-color-surface); font-size:7px; font-weight:900; letter-spacing:.04em; } .agenda-receive-order>p{ margin:0 0 7px; font-size:6.5px; line-height:1.4; color:var(--muted); } .agenda-receive-row{ min-height:46px; display:grid; grid-template-columns: minmax(0,1fr) 65px; align-items:center; gap:var(--hs-ds-space-4); border-bottom: 1px solid var(--line); } .agenda-receive-row>div{ display:flex; flex-direction:column; } .agenda-receive-row strong{ font-size:8px; } .agenda-receive-row small{ margin-top:1px; font-size:5.7px; color:var(--muted); } .agenda-receive-row input{ box-sizing:border-box; width:65px; height:32px; text-align:center; font-size:var(--hs-ds-text-xs); } /* SETTINGS */ .agenda-settings-quick{ display:grid; gap:var(--hs-ds-space-2); } .agenda-settings-quick button{ min-height:41px; padding:5px 7px; border:1px solid var(--line); border-radius:var(--hs-ds-radius-xs); background:var(--hs-ds-color-surface); display:flex; align-items:center; justify-content:space-between; text-align:left; } .agenda-settings-quick strong{ font-size:8px; } .agenda-settings-quick span{ font-size:var(--hs-ds-text-label); color:var(--muted); } /* ========================================================= FINAL TYPOGRAPHY + SPOTLIGHT CLEANUP ========================================================= */ html, body, button, input, select, textarea{ font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================================================= HAIRCUT STUDIO · AGENDA V7A Agenda full-width / time axis legacy rimossa ========================================================= */ /* * Gli orari utili sono già rappresentati * nelle singole lane/staff. * La vecchia colonna generale di sinistra * non deve più occupare spazio. */ .agenda-calendar-pro .agenda-time-axis, .agenda-week-time-axis{ display:none!important; width:0!important; min-width:0!important; max-width:0!important; flex:0 0 0!important; padding:0!important; margin:0!important; border:0!important; overflow:hidden!important; } /* * La griglia staff deve usare tutta la larghezza * liberata dalla time-axis. */ .agenda-calendar-pro .agenda-staff-head, .agenda-calendar-pro .agenda-lanes{ width:100%!important; max-width:none!important; } .agenda-calendar-pro{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* * Il contenitore Agenda diventa realmente wide. * Non tocchiamo le altre pagine del gestionale. */ main:has(.agenda-shell), main:has(.agenda-calendar-pro){ width:100%!important; max-width:none!important; } main:has(.agenda-shell) .agenda-shell, main:has(.agenda-shell) .agenda-unified-shell{ width:100%!important; max-width:none!important; } /* * Desktop / iPad: * margine minimo, così il calendario usa * praticamente tutto lo schermo. */ @media(min-width:701px){ main:has(.agenda-shell){ padding-left:var(--hs-ds-space-5)!important; padding-right:var(--hs-ds-space-5)!important; } } /* * Telefono: * recuperiamo ulteriore spazio senza * far toccare i contenuti al bordo fisico. */ @media(max-width:700px){ main:has(.agenda-shell){ padding-left:5px!important; padding-right:5px!important; } .agenda-calendar-pro{ border-radius:var(--hs-ds-radius-control)!important; } } .agenda-order-toolbar small{ display:block; font-size:10px; letter-spacing:.08em; opacity:.55; } .agenda-order-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--hs-ds-space-5); margin-bottom:12px; } .agenda-order-toolbar>div>strong{ display:block; margin-top:2px; } .agenda-order-toolbar>button, .agenda-order-copy-button{ border:1px solid rgba(20,28,24,.12); background:var(--hs-ds-color-surface); border-radius:var(--hs-ds-radius-sm); min-height:34px; padding:0 11px; font-size:var(--hs-ds-text-label); font-weight:750; } .agenda-order-edit-list{ display:grid; gap:7px; } .agenda-order-edit-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 30px; align-items:center; gap:9px; padding:9px; border:1px solid rgba(20,28,24,.08); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); } .agenda-order-product{ min-width:0; } .agenda-order-product strong, .agenda-order-product small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .agenda-order-product small{ margin-top:2px; opacity:.55; font-size:10px; } .agenda-order-stepper{ display:flex; align-items:center; gap:5px; } .agenda-order-stepper button{ width:29px; height:29px; padding:0; border:1px solid rgba(20,28,24,.1); border-radius:var(--hs-ds-radius-xs); background:#f7f7f5; font-size:var(--hs-ds-text-lg); } .agenda-order-stepper strong{ min-width:24px; text-align:center; font-size:var(--hs-ds-text-md); } .agenda-order-remove{ width:29px; height:29px; border:0; background:transparent; border-radius:var(--hs-ds-radius-xs); font-size:19px; opacity:.45; } .agenda-order-actions{ display:grid; grid-template-columns:1fr 1.3fr; gap:7px; margin-top:12px; } .agenda-order-actions button{ min-height:40px; } @media(max-width:700px){ .agenda-order-edit-row{ grid-template-columns:minmax(0,1fr) auto 28px; gap:var(--hs-ds-space-3); } .agenda-order-actions{ grid-template-columns:1fr; } } /* ========================================================= HAIRCUT STUDIO · V7B2 Spotlight definitivo ========================================================= */ .agenda-popover-root-spotlight{ width:var(--spotlight-width)!important; min-width:var(--spotlight-width)!important; max-width:var(--spotlight-width)!important; } .agenda-spotlight-results-v7{ width:100%!important; max-width:none!important; max-height:min(520px,65vh); overflow-y:auto; overscroll-behavior:contain; } .agenda-spotlight-result-v7{ width:100%; min-width:0; display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--hs-ds-space-6); text-align:left; } .agenda-spotlight-result-main{ min-width:0; } .agenda-spotlight-result-main strong, .agenda-spotlight-result-main small{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .agenda-spotlight-result-main small{ margin-top:3px; } .agenda-spotlight-result-type{ max-width:92px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .agenda-spotlight-result-appointment .agenda-spotlight-result-type{ font-weight:700; } @media(max-width:700px){ .agenda-popover-root-spotlight{ --spotlight-width:min(100%,420px); width:100%!important; min-width:0!important; max-width:100%!important; } .agenda-spotlight-results-v7{ max-height:58vh; } } /* ========================================================= HAIRCUT STUDIO · V8 Agenda real 3-column grid + stable LIVE ========================================================= */ /* * Vista team: nessuna quarta colonna fantasma. */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; } .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; } /* * Ogni membro e relativa lane devono occupare * esattamente un terzo della larghezza. */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-person, .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lane{ min-width:0!important; width:auto!important; max-width:none!important; } /* * Sicurezza contro vecchi pseudo-spazi della time axis. */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head::before, .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes::before{ display:none!important; content:none!important; } /* * LIVE è indicatore realtime{ opacity:1!important; } /* * Il refresh manuale resta tecnicamente disponibile{ color:inherit!important; background:inherit!important; } /* ========================================================= HAIRCUT STUDIO · V8 TYPOGRAPHY SYSTEM Bold = gerarchia Regular = contenuto Light = micro-informazioni ========================================================= */ /* ---------- REGULAR BASE ---------- */ .agenda-unified-shell, .agenda-calendar-pro{ font-weight:400!important; } .agenda-person > strong, .agenda-inline-client-row strong, .agenda-spotlight-result-main strong, .agenda-order-product > strong, .agenda-monitor-clear strong, .agenda-summary-head > strong{ font-weight:700!important; } .agenda-inline-client-search input, .agenda-inline-view-grid button, .agenda-inline-period-grid button, .agenda-order-actions button{ font-weight:400!important; } .agenda-inline-kpi-grid strong, .agenda-order-stepper > strong{ font-weight:700!important; } .agenda-person > span, .agenda-inline-client-row small, .agenda-spotlight-result-main small, .agenda-spotlight-result-type, .agenda-order-product small, .agenda-monitor-clear small, .agenda-summary-head small, .agenda-summary-items{ font-weight:300!important; } /* Nomi staff: unico vero titolo della colonna */ .agenda-person > strong{ font-size:var(--hs-ds-text-base)!important; line-height:1.15!important; } /* Orario staff secondario */ .agenda-person > span{ font-size:var(--hs-ds-text-label)!important; } /* Risultati ricerca: nome forte, dettagli discreti */ .agenda-spotlight-result-main strong, .agenda-inline-client-row strong{ line-height:1.2!important; } .agenda-spotlight-result-main small, .agenda-inline-client-row small{ line-height:1.3!important; } /* Titoli dei pannelli */ /* Nessun browser deve simulare pesi estremi */ .agenda-unified-shell strong{ font-synthesis:none; } @media(max-width:700px){ .agenda-person > strong{ font-size:var(--hs-ds-text-control)!important; } .agenda-person > span{ font-size:10px!important; } } .agenda-activity-mini>div, .agenda-stack-list>div{ display:flex; flex-direction:column; gap:3px; } /* ========================================================= HAIRCUT STUDIO · V9 FINAL VISUAL SYSTEM ========================================================= */ :root{ --hs-panel-title:var(--hs-ds-text-lg); --hs-ui-text:var(--hs-ds-text-control); --hs-small-text:12px; --hs-count-text:var(--hs-ds-text-md); } /* ========================================================= 1. STACK / PANELS ========================================================= */ /* ========================================================= 2. TREE NAVIGATION ========================================================= */ .agenda-tree-menu{ display:flex!important; flex-direction:column!important; gap:3px!important; width:100%!important; } .agenda-tree-row{ box-sizing:border-box!important; width:100%!important; min-height:50px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:var(--hs-ds-space-6)!important; padding:9px var(--hs-ds-space-5)!important; border:0!important; border-radius:var(--hs-ds-radius-sm)!important; background:transparent!important; color:var(--hs-ds-color-ui-strong)!important; text-align:left!important; } .agenda-tree-row:hover{ background:rgba(0,0,0,.035)!important; } .agenda-tree-row > div{ min-width:0!important; display:flex!important; flex-direction:column!important; gap:var(--hs-ds-space-1)!important; } .agenda-tree-row strong{ font-size:var(--hs-ui-text)!important; line-height:1.2!important; font-weight:700!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-tree-row small{ font-size:var(--hs-small-text)!important; line-height:1.25!important; font-weight:400!important; color:var(--hs-ds-color-ui-muted)!important; } .agenda-tree-side{ display:flex!important; align-items:center!important; gap:var(--hs-ds-space-4)!important; flex:0 0 auto!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-tree-side i{ font-size:var(--hs-ds-text-lg)!important; line-height:1!important; font-style:normal!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-tree-badge{ min-width:25px!important; height:25px!important; display:grid!important; place-items:center!important; padding:0 7px!important; border-radius:var(--hs-ds-radius-pill)!important; font-size:var(--hs-count-text)!important; line-height:1!important; font-weight:600!important; background:#efefed!important; color:var(--hs-ds-color-ui-strong)!important; } /* ========================================================= 4. GENERIC PANEL TEXT ========================================================= */ .agenda-receive-row small, .agenda-receive-order > p { font-size:var(--hs-small-text)!important; line-height:1.3!important; color:var(--hs-ds-color-ui-muted)!important; } .agenda-stack-list > div{ min-height:46px!important; } .agenda-stack-list span, .agenda-stack-list strong{ font-size:var(--hs-ui-text)!important; } .agenda-order-product > strong, .agenda-receive-row strong{ font-size:var(--hs-ui-text)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-order-stepper > strong{ font-size:var(--hs-ds-text-base)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-order-actions button, .agenda-order-stepper button, .agenda-order-remove, .agenda-order-received-button, .agenda-order-confirm-button{ font-size:var(--hs-ds-text-md)!important; } .agenda-receive-row input{ font-size:var(--hs-ds-text-control)!important; } /* ========================================================= 6. CLIENT SEARCH INSIDE PANELS ========================================================= */ .agenda-inline-client-search input{ min-height:42px!important; font-size:var(--hs-ds-text-control)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-inline-client-search input::placeholder{ color:var(--hs-ds-color-ui-placeholder)!important; } .agenda-inline-client-row strong, .agenda-spotlight-result-main strong{ font-size:var(--hs-ds-text-control)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-inline-client-row small, .agenda-spotlight-result-main small{ font-size:12px!important; color:var(--hs-ds-color-ui-muted)!important; } .agenda-inline-view-grid button, .agenda-inline-period-grid button{ font-size:var(--hs-ds-text-md)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-person > strong{ font-size:var(--hs-ds-text-base)!important; color:var(--hs-ds-color-ui-strong); } .agenda-person > span{ font-size:12px!important; } /* * Il pannello aperto dalla lente invece deve * essere ampio e realmente comodo per cercare. */ .agenda-popover-root-spotlight{ width:min(520px,calc(100vw - 24px))!important; right:44px!important; left:auto!important; --spotlight-width:min( 520px, calc(100vw - 24px) )!important; } .agenda-stack-spotlight{ width:100%!important; } .agenda-stack-spotlight input{ position:static!important; width:100%!important; height:42px!important; opacity:1!important; pointer-events:auto!important; padding:0 var(--hs-ds-space-6)!important; font-size:var(--hs-ds-text-control)!important; } /* ========================================================= 10. AGENDA WIDTH ========================================================= */ body.agenda-mode main, main:has(.agenda-shell), main:has(.agenda-calendar-pro){ width:100%!important; max-width:none!important; padding-left:var(--hs-ds-space-3)!important; padding-right:var(--hs-ds-space-3)!important; } main:has(.agenda-shell) .agenda-shell, main:has(.agenda-shell) .agenda-unified-shell, .agenda-calendar-pro{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; } .agenda-unified-shell{ gap:0!important; } /* ========================================================= 11. FORCE NEUTRAL TEXT INSIDE MANAGEMENT UI ========================================================= */ /* ========================================================= 12. MOBILE ========================================================= */ @media(max-width:700px){ :root{ --hs-panel-title:17px; --hs-ui-text:var(--hs-ds-text-control); --hs-small-text:12px; --hs-count-text:var(--hs-ds-text-md); } .agenda-person > strong{ font-size:var(--hs-ds-text-control)!important; } .agenda-person > span{ font-size:var(--hs-ds-text-label)!important; } .agenda-popover-root-spotlight{ width:calc(100vw - 16px)!important; right:0!important; } body.agenda-mode main, main:has(.agenda-shell){ padding-left:var(--hs-ds-space-2)!important; padding-right:var(--hs-ds-space-2)!important; } } /* HAIRCUT STUDIO · V17 FINAL UI */ /* ========================================================= 1. AGENDA — GEOMETRIA UNICA ========================================================= */ body.agenda-mode main, main:has(.agenda-unified-shell){ width:100%!important; max-width:none!important; padding-left:var(--hs-ds-space-3)!important; padding-right:var(--hs-ds-space-3)!important; } .agenda-unified-shell, .agenda-desktop-stage, .agenda-calendar-pro{ width:100%!important; max-width:none!important; box-sizing:border-box!important; margin-left:0!important; margin-right:0!important; } .agenda-desktop-stage{ position:relative!important; padding-left:0!important; padding-right:0!important; } .agenda-calendar-pro{ left:auto!important; right:auto!important; } .agenda-calendar-pro .agenda-staff-head, .agenda-calendar-pro .agenda-lanes{ width:100%!important; max-width:none!important; margin:0!important; padding-left:0!important; padding-right:0!important; box-sizing:border-box!important; } /* Team = esattamente tre colonne reali */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head, .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes{ display:grid!important; grid-template-columns:repeat( 3, minmax(0,1fr) )!important; } /* ========================================================= 3. STACK — GERARCHIA VISIVA ========================================================= */ /* Titolo pannello vero */ /* Back e X = controlli secondari */ /* Body leggibile */ /* ========================================================= 4. TYPOGRAPHY HIERARCHY ========================================================= */ .agenda-tree-row{ min-height:48px!important; padding:9px var(--hs-ds-space-5)!important; } .agenda-tree-row strong{ font-size:var(--hs-ds-text-control)!important; line-height:1.2!important; font-weight:650!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-tree-row small{ font-size:var(--hs-ds-text-label)!important; line-height:1.25!important; font-weight:400!important; color:#5d625f!important; } /* Controlli / bottoni non devono dominare */ /* ========================================================= 5. COLORI — NIENTE PIÙ NERO FORZATO SUI BOTTONI SCURI ========================================================= */ /* bottoni realmente scuri */ .agenda-order-received-button{ color:var(--hs-ds-color-surface)!important; } .agenda-order-received-button *{ color:var(--hs-ds-color-surface)!important; } .agenda-order-received-button{ background:var(--forest)!important; } /* secondari */ /* ========================================================= 6. MODALE APERTA = POPOVER NASCOSTI, STATO PRESERVATO ========================================================= */ /* ========================================================= 7. DESKTOP gerarchia affiancata ========================================================= */ /* ========================================================= 8. IPAD / TABLET pannelli larghi e mai fuori viewport ========================================================= */ @media(min-width:701px) and (max-width:1100px){ /* * Su tablet manteniamo il livello corrente leggibile. * I livelli precedenti restano nello stack logico, * quindi back e X continuano a funzionare. */ } /* ========================================================= 9. IPHONE un pannello reale alla volta ========================================================= */ @media(max-width:700px){ body.agenda-mode main, main:has(.agenda-unified-shell){ padding-left:var(--hs-ds-space-2)!important; padding-right:var(--hs-ds-space-2)!important; } .agenda-tree-row{ min-height:48px!important; } .agenda-tree-row strong{ font-size:var(--hs-ds-text-control)!important; } .agenda-person > strong{ font-size:var(--hs-ds-text-control)!important; } .agenda-person > span{ font-size:var(--hs-ds-text-label)!important; } } /* HAIRCUT STUDIO · V18B UNIFIED AGENDA */ /* ========================================================= AGENDA = UNICO BLOCCO FULL WIDTH ========================================================= */ body.agenda-mode main, main:has(.agenda-unified-shell){ width:100%!important; max-width:none!important; padding-left:var(--hs-ds-space-4)!important; padding-right:var(--hs-ds-space-4)!important; } /* * Tutto il blocco Agenda usa la stessa larghezza. */ .agenda-unified-shell{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; overflow:visible!important; } .agenda-unified-shell .agenda-calendar-pro{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* * Agenda colorata = parte bassa dello stesso blocco. */ .agenda-unified-shell .agenda-calendar-pro{ margin-top:0!important; border-radius: 0 0 16px 16px!important; border: 1px solid rgba(16,28,23,.10)!important; overflow:hidden!important; } /* * Nessun rientro interno fantasma. */ .agenda-unified-shell .agenda-calendar-pro .agenda-staff-head, .agenda-unified-shell .agenda-calendar-pro .agenda-lanes{ width:100%!important; max-width:none!important; margin:0!important; box-sizing:border-box!important; } /* * Le tre colonne occupano davvero tutto. */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head, .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes{ display:grid!important; grid-template-columns: repeat( 3, minmax(0,1fr) )!important; } /* * Nessuna quarta colonna / asse fantasma. */ .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head::before, .agenda-unified-shell .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes::before{ display:none!important; content:none!important; } .agenda-unified-shell .agenda-calendar-pro{ box-shadow: 0 2px 10px rgba(16,28,23,.04)!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ body.agenda-mode main, main:has(.agenda-unified-shell){ padding-left:var(--hs-ds-space-2)!important; padding-right:var(--hs-ds-space-2)!important; } .agenda-unified-shell .agenda-calendar-pro{ border-radius: 0 0 13px 13px!important; } } /* ========================================================= SPOTLIGHT — STABLE RESULTS ========================================================= */ .agenda-spotlight-results{ transition: opacity .14s ease, transform .14s ease; } .agenda-spotlight-result-v7{ transition: background .14s ease, transform .14s ease; } /* Mobile */ /* HAIRCUT STUDIO · V20 TRUE UNIFIED AGENDA */ /* ========================================================= UN SOLO RETTANGOLO ========================================================= */ /* * QUESTO è l'override decisivo. * * Il vecchio CSS usa: * body.agenda-mode .agenda-desktop-stage * * quindi dobbiamo usare almeno la stessa specificità. */ body.agenda-mode .agenda-desktop-stage{ width:100%!important; max-width:none!important; margin:0!important; padding-left:0!important; padding-right:0!important; position:relative!important; } /* * Le vecchie frecce laterali non devono più * occupare né suggerire spazio esterno. */ body.agenda-mode .agenda-side-arrow, body.agenda-mode [data-agenda-side-prev], body.agenda-mode [data-agenda-side-next]{ display:none!important; } body.agenda-mode .agenda-unified-shell .agenda-desktop-stage, body.agenda-mode .agenda-unified-shell .agenda-calendar-pro{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* * Il contenitore esterno diventa il vero blocco. */ body.agenda-mode .agenda-unified-shell{ width:100%!important; max-width:none!important; border-radius:16px!important; overflow:visible!important; } /* * PARTE COLORATA */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro{ margin-top:0!important; border-radius: 0 0 16px 16px!important; border: 1px solid rgba(16,28,23,.10)!important; border-top:0!important; box-shadow: 0 5px 18px rgba(16,28,23,.05)!important; overflow:hidden!important; } /* * Niente rientri interni. */ body.agenda-mode .agenda-calendar-pro .agenda-staff-head, body.agenda-mode .agenda-calendar-pro .agenda-lanes{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } /* * Tre agende = tre colonne vere, * da bordo a bordo. */ body.agenda-mode .agenda-calendar-pro:not(.agenda-single-staff) .agenda-staff-head, body.agenda-mode .agenda-calendar-pro:not(.agenda-single-staff) .agenda-lanes{ display:grid!important; grid-template-columns: repeat( 3, minmax(0,1fr) )!important; } /* ========================================================= CALENDARIO POPUP sotto la data{ position:relative!important; /* * Il popup deve poter uscire dal bordo inferiore. */ overflow:visible!important; } /* ========================================================= SPOTLIGHT nessun effetto visivo "a scatto" ========================================================= */ .agenda-spotlight-results{ transition:none!important; } .agenda-spotlight-result-v7{ transition: background-color .10s ease!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-desktop-stage{ padding:0!important; } body.agenda-mode .agenda-unified-shell{ border-radius:13px!important; } body.agenda-mode .agenda-unified-shell .agenda-calendar-pro{ border-radius: 0 0 13px 13px!important; } } /* HAIRCUT STUDIO · V21 SPOTLIGHT FOCUS + AGENDA SCROLL */ /* ========================================================= AGENDA conserva il blocco unico V20 ma torna scrollabile ========================================================= */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro{ /* * Orizzontalmente resta perfettamente contenuta. * Verticalmente deve poter arrivare fino alla * chiusura reale della giornata. */ overflow-x:hidden!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; scrollbar-gutter:stable; } /* * Lo stage non deve intercettare lo scroll. */ body.agenda-mode .agenda-desktop-stage{ overflow:visible!important; min-height:0!important; } /* * Header Luca / Daniele / Antonio resta visibile * mentre scorriamo la giornata. */ body.agenda-mode .agenda-calendar-pro .agenda-staff-head{ position:sticky!important; top:0!important; z-index:60!important; } [data-agenda-spotlight-input]{ caret-color:var(--hs-ds-color-ui-strong); } /* niente animazioni che possano dare sensazione di salto */ .agenda-stack-spotlight, .agenda-spotlight-results-v7{ scroll-behavior:auto!important; } /* HAIRCUT STUDIO · V22P2 PERSIST + SINGLE STAFF */ /* --------------------------------------------------------- ACTIVE STATE Le regole tipografiche successive non devono rendere di nuovo nero il testo dei pulsanti selezionati. --------------------------------------------------------- */ body.agenda-mode .agenda-inline-view-grid button.active, body.agenda-mode .agenda-inline-period-grid button.active, body.agenda-mode .agenda-staff-filter-tabs button.active, body.agenda-mode .agenda-personal-range-tabs button.active, body.agenda-mode .agenda-view-period-options button.active{ background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); } body.agenda-mode .agenda-inline-view-grid button.active *, body.agenda-mode .agenda-inline-period-grid button.active *, body.agenda-mode .agenda-staff-filter-tabs button.active *, body.agenda-mode .agenda-personal-range-tabs button.active *, body.agenda-mode .agenda-view-period-options button.active *{ color:var(--hs-ds-color-surface); } /* --------------------------------------------------------- SINGOLO COLLABORATORE — GIORNO Una sola agenda deve occupare tutta la larghezza. Non modifica la vista Tutti a 3 colonne. --------------------------------------------------------- */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-single-staff .agenda-staff-head{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; max-width:none!important; } body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-single-staff .agenda-lanes{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; max-width:none!important; } body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-single-staff .agenda-person, body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-single-staff .agenda-lane{ width:100%!important; max-width:none!important; min-width:0!important; } /* HAIRCUT STUDIO · PERSONAL WEEK CLEAN V22W */ /* * La time-axis della settimana è già stata eliminata * visivamente. Ora eliminiamo anche la sua colonna * dalla CSS grid. */ body.agenda-mode .agenda-person-week{ grid-template-columns: repeat( var(--week-columns), minmax(150px,1fr) )!important; min-width: calc( var(--week-columns) * 150px )!important; width:100%!important; } /* * Anche la cella header vuota della vecchia * colonna orari non deve occupare spazio. */ body.agenda-mode .agenda-person-week .agenda-week-time-head, body.agenda-mode .agenda-person-week .agenda-week-time-axis{ display:none!important; } /* * Le giornate occupano quindi tutta la larghezza * effettivamente disponibile. */ body.agenda-mode .agenda-person-week .agenda-week-day-head, body.agenda-mode .agenda-person-week .agenda-week-lane{ min-width:0!important; width:auto!important; } /* mobile mantiene colonne scorrevoli ma senza fascia fantasma */ @media(max-width:700px){ body.agenda-mode .agenda-person-week{ grid-template-columns: repeat( var(--week-columns), 124px )!important; min-width: calc( var(--week-columns) * 124px )!important; } } /* HS WEEK PAN X V1 * Su telefono la settimana e' piu' larga dello schermo * (una colonna per giorno): serve lo scroll orizzontale * con il dito, oltre a quello verticale. */ body.agenda-mode .agenda-person-week-scroll{ touch-action:pan-x pan-y!important; } /* HAIRCUT STUDIO · V22 RESPONSIVE STACK */ /* ========================================================= DESKTOP I pannelli si adattano al numero di livelli aperti. Nessuna modifica alla tipografia. ========================================================= */ @media(min-width:1101px){ /* * Dal quarto livello in poi non continuiamo * a spingere pannelli fuori viewport. * * Lo stack logico resta completo: * il pulsante indietro continua quindi * a ricostruire correttamente il percorso. */ /* * Spotlight / Aggiungi crescono normalmente * verso sinistra fino a 3 livelli. */ .agenda-popover-root-spotlight[data-stack-depth="2"], .agenda-popover-root-spotlight[data-stack-depth="3"], .agenda-popover-root-add[data-stack-depth="2"], .agenda-popover-root-add[data-stack-depth="3"]{ left:auto!important; } } /* ========================================================= TABLET + MOBILE Confermiamo il comportamento già corretto: un solo pannello utile alla volta. ========================================================= */ /* ========================================================= AGENDA — APPOINTMENT CARD READABILITY V1 Solo visuale. Nessuna modifica a geometria/durata. ========================================================= */ /* Manteniamo leggibilità anche nelle colonne strette */ /* ========================================================= HAIRCUT STUDIO · NATIVE TYPOGRAPHY V1 UI refinement only. Agenda geometry + appointment cards untouched. ========================================================= */ html, body, button, input, select, textarea{ font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body{ font-size:var(--hs-ds-text-base); line-height:1.4; letter-spacing:-.005em; } /* ---------- TITOLI ---------- */ h1, h2, h3{ text-wrap:balance; } h1{ letter-spacing:-.035em; } h2{ letter-spacing:-.025em; } h3{ letter-spacing:-.018em; } /* ---------- BUTTONS ---------- */ button, .btn{ font-family:inherit; letter-spacing:-.008em; -webkit-tap-highlight-color:transparent; } .btn{ font-weight:700; } .btn.small{ font-weight:650; } /* feedback fisico leggero */ button:active, .btn:active{ transform:scale(.985); } /* ---------- FORM ---------- */ input, select, textarea{ font-family:inherit; font-weight:500; letter-spacing:-.008em; } input::placeholder, textarea::placeholder{ font-weight:450; opacity:.58; } label{ letter-spacing:.005em; } /* ---------- MODALS ---------- */ /* ---------- GENERIC CARDS ---------- */ .card > h2, .card > h3{ line-height:1.15; } /* ---------- AGENDA MANAGEMENT UI ---------- */ /* Collaboratori */ body.agenda-mode .agenda-person > strong{ letter-spacing:-.018em; } /* * IMPORTANTE: * niente override di: * * .agenda-appointment * .agenda-appointment-name * .agenda-appointment-meta * .agenda-appointment-note * * Appointment Card Readability V1 resta sovrana. */ /* ---------- MOBILE ---------- */ @media(max-width:700px){ body{ font-size:var(--hs-ds-text-control); } /* * 16px sugli input principali evita lo zoom * automatico di Safari/iOS durante il focus. * * Escludiamo i controlli Agenda compatti, * già progettati separatamente. */ button, .btn{ -webkit-touch-callout:none; } } /* ========================================================= HAIRCUT STUDIO · NATIVE INTERACTION V1 Motion + touch refinement only. ========================================================= */ :root{ --hs-motion-fast:120ms; --hs-motion-normal:220ms; --hs-motion-spring:cubic-bezier(.22,.8,.28,1); } /* ---------- TAP / TOUCH ---------- */ button, .btn, [role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } button, .btn{ transition: transform var(--hs-motion-fast) ease, opacity var(--hs-motion-fast) ease, background-color var(--hs-motion-fast) ease, border-color var(--hs-motion-fast) ease; } button:disabled, .btn:disabled{ cursor:default; } /* ---------- TOUCH TARGET ---------- */ /* * Aumentiamo il target fisico senza forzare * la geometria interna dell'Agenda. */ .icon, .staff-check-button, .agenda-quick-check, .agenda-quick-more{ min-width:44px; min-height:44px; } /* ---------- PANEL / POPOVER ---------- */ /* ---------- MODAL DESKTOP ---------- */ /* ---------- MOBILE BOTTOM SHEET ---------- */ @media(max-width:700px){ .home-menu-sheet, .agenda-view-sheet, .ui-action-sheet, .home-panel-modal{ animation: hsSheetIn 260ms var(--hs-motion-spring) both; } /* * Handle visivo stile sheet iOS. * Non richiede modifica HTML. */ .home-menu-sheet::before, .agenda-view-sheet::before, .ui-action-sheet::before, .home-panel-modal::before{ content:""; display:block; width:36px; height:5px; margin: -7px auto 11px; border-radius:var(--hs-ds-radius-pill); background: rgba(16,28,23,.18); } /* * I modali full-screen non devono mostrare * la maniglia del bottom sheet. */ .team-profile-modal::before, .service-editor-modal::before{ display:none!important; } } /* ---------- ANIMATIONS ---------- */ @keyframes hsBackdropIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes hsModalIn{ from{ opacity:0; transform: translateY(8px) scale(.985); } to{ opacity:1; transform: translateY(0) scale(1); } } @keyframes hsSheetIn{ from{ opacity:.92; transform: translateY(32px); } to{ opacity:1; transform: translateY(0); } } /* ---------- SCROLL FEEL ---------- */ .agenda-calendar-pro{ -webkit-overflow-scrolling:touch; } /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } /* ========================================================= SICUREZZA AGENDA ========================================================= */ /* * Non alteriamo transform sulle card appuntamento, * sugli slot o sui controlli principali dell'Agenda. */ .agenda-slot:active, .agenda-lane:active{ transform:none!important; } .agenda-appointment:active{transform:none!important} /* ========================================================= HAIRCUT STUDIO · BOOK SWIPE V2 Adjacent real-page preview. ========================================================= */ .agenda-desktop-stage{ position:relative; } .agenda-book-viewport{ position:absolute; inset:0; z-index:45; overflow:hidden; border-radius: inherit; opacity:0; visibility:hidden; pointer-events:none; contain: layout paint; transition: opacity 80ms linear; } .agenda-book-viewport.is-active{ opacity:1; visibility:visible; } .agenda-book-track{ width:300%; height:100%; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); transform: translate3d( -33.333333%, 0, 0 ); will-change:transform; } .agenda-book-page{ min-width:0; width:100%; height:100%; overflow:hidden; background: var(--bg,var(--hs-ds-color-app-bg)); } .agenda-book-page-current{ visibility:hidden; } .agenda-book-page .agenda-calendar-pro{ width:100%!important; height:100%!important; margin:0!important; transform:none!important; pointer-events:none!important; } /* * Il clone è solo visuale: * niente sticky che possa uscire dal proprio pannello. */ .agenda-book-page .agenda-staff-head{ position:sticky!important; top:0!important; } /* * Nessun elemento del preview può intercettare gesture. */ .agenda-book-page *, .agenda-book-page button{ pointer-events:none!important; } /* * Il calendario reale deve restare sopra * quando il preview non è attivo. */ .agenda-calendar-pro[data-agenda-swipe]{ position:relative; z-index:46; will-change:auto; } @media(prefers-reduced-motion:reduce){ .agenda-book-track, .agenda-book-viewport{ transition:none!important; } } /* ========================================================= HAIRCUT STUDIO · ALL STAFF VIEW FIX Vista Tutti = tre colonne reali e stabili. ========================================================= */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff{ width:100%!important; max-width:none!important; min-width:0!important; } /* * Tre intestazioni reali: * Luca · Daniele · Antonio */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-staff-head{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; width:100%!important; max-width:none!important; min-width:0!important; } /* * Tre lane perfettamente allineate * alle intestazioni. */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-lanes{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; width:100%!important; max-width:none!important; min-width:0!important; } body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-person, body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-lane{ width:100%!important; min-width:0!important; max-width:none!important; } /* * Mobile: * manteniamo le tre colonne visibili, * senza trasformarle accidentalmente * nella modalità singolo collaboratore. */ @media(max-width:700px){ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-staff-head, body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-lanes{ grid-template-columns: repeat(3,minmax(0,1fr))!important; } } /* ========================================================= HAIRCUT STUDIO · TOAST TOP LAYER FIX Il feedback di salvataggio deve stare sopra tutta l'app. ========================================================= */ #toast{ z-index:10000!important; } .agenda-inline-view-grid button, .agenda-inline-period-grid button{ position:relative; z-index:2; pointer-events:auto!important; cursor:pointer; } /* ========================================================= AGENDA LAYER SYSTEM FINAL Toolbar / dropdown SEMPRE sopra la griglia Agenda ========================================================= */ /* * Contenitore unico Agenda. * Diventa il riferimento dei layer interni. */ .agenda-unified-shell, .agenda-person-week-shell{ position:relative!important; isolation:isolate!important; } /* * Dropdown Vista / Calendario. * * Essendo absolute rispetto alla testata{ position:absolute!important; top:100%!important; right:6px!important; z-index:1100!important; pointer-events:auto!important; overflow:visible!important; } /* * CALENDARIO / TIMELINE AGENDA * * Rimane volutamente sotto la testata. */ .agenda-calendar-pro, .agenda-person-week-stage, .agenda-person-week-scroll{ position:relative!important; z-index:1!important; } /* * Evitiamo che elementi della timeline creino * accidentalmente layer sopra al dropdown. */ .agenda-calendar-pro .agenda-staff-head, .agenda-calendar-pro .agenda-column, .agenda-calendar-pro .agenda-cell, .agenda-calendar-pro [data-agenda-appointment]{ z-index:auto; } /* * MOBILE */ /* nome mese */ .agenda-month-strip-title{ font-size:10px!important; font-weight:800!important; letter-spacing:.02em!important; } /* settimane del mese */ .agenda-month-strip-weeks{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:5px!important; margin-bottom:6px!important; } .agenda-month-strip-weeks button{ min-height:26px!important; padding:var(--hs-ds-space-2) var(--hs-ds-space-3)!important; border-radius:7px!important; font-size:8px!important; font-weight:750!important; } /* giorni della settimana selezionata */ .agenda-month-strip-days{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:3px!important; } .agenda-month-strip-days button{ min-height:34px!important; padding:3px!important; border-radius:7px!important; font-size:8px!important; font-weight:750!important; } /* mobile */ @media(max-width:700px){ .agenda-month-strip-weeks{ gap:var(--hs-ds-space-2)!important; } .agenda-month-strip-days{ gap:var(--hs-ds-space-1)!important; } } /* ========================================================= WEEK UI UNIFIED La settimana usa lo stesso frame della vista Giorno ========================================================= */ body.agenda-mode .agenda-person-week-shell{ box-sizing:border-box; width:100%!important; max-width:none!important; height:100%; margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:0!important; overflow:hidden; } /* * La griglia settimana occupa tutto lo spazio * rimasto sotto alla toolbar unificata. */ body.agenda-mode .agenda-person-week-shell .agenda-person-week-scroll{ flex:1 1 auto; min-height:0; margin:0!important; border-radius: 0 0 12px 12px; } /* * La griglia settimana resta sotto. */ .agenda-person-week-stage, .agenda-person-week-scroll{ position:relative; z-index:1; } /* PRODOTTO USATO */ .agenda-product-use-panel{ display:flex; flex-direction:column; gap:var(--hs-ds-space-4); } .agenda-product-use-search{ position:sticky; top:0; z-index:2; padding-bottom:var(--hs-ds-space-2); background:var(--hs-ds-color-surface); } .agenda-product-use-search input{ width:100%; height:40px; padding:0 var(--hs-ds-space-6); border:1px solid rgba(16,28,23,.10); border-radius:13px; background:#f7f6f2; color:var(--forest); outline:none; font:inherit; } .agenda-product-use-list{ display:grid; gap:5px; max-height:340px; overflow:auto; } .agenda-product-use-row{ width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); padding:var(--hs-ds-space-4) 11px; border:1px solid rgba(16,28,23,.08); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--forest); text-align:left; cursor:pointer; } .agenda-product-use-row span{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .agenda-product-use-row strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hs-ds-text-label); font-weight:700; } .agenda-product-use-row small{ color:var(--muted); font-size:8px; font-weight:400; } .agenda-product-use-row b{ flex:0 0 auto; min-width:34px; height:30px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-pill); background:var(--forest); color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-label); font-weight:700; } /* ORDINE RICEVUTO */ .agenda-order-received-button, .agenda-order-confirm-button{ background:var(--hs-ds-color-ui-strong)!important; color:var(--hs-ds-color-surface)!important; border-color:var(--hs-ds-color-ui-strong)!important; } .agenda-order-received-button *, .agenda-order-confirm-button *{ color:var(--hs-ds-color-surface)!important; } /* IMPOSTAZIONI: niente blu browser / link blu */ body .settings-page a, body .settings-page button, body [class*="settings"] a{ color:var(--forest); } /* MICRO POLISH */ @media(max-width:700px){ .agenda-product-use-row{ min-height:52px; border-radius:15px; } .agenda-product-use-list{ max-height:52vh; } } /* ========================================================= HS MOTOR · CHECKLIST VISUAL V1 SOLO CSS — LOGICA INVARIATA ========================================================= */ .agenda-quick-checklists{ display:grid; gap:var(--hs-ds-space-4); } /* CARD PRINCIPALE */ .agenda-quick-checklist{ overflow:hidden; margin:0; border: 1px solid rgba(16,28,23,.09); border-radius:17px; background:var(--hs-ds-color-surface); } /* HEADER CHECKLIST */ .agenda-quick-checklist > summary{ list-style:none; min-height:58px; display:flex; align-items:center; gap:var(--hs-ds-space-5); padding:var(--hs-ds-space-5) var(--hs-ds-space-6); cursor:pointer; -webkit-tap-highlight-color: transparent; } .agenda-quick-checklist > summary::-webkit-details-marker{ display:none; } .agenda-quick-checklist > summary::marker{ content:''; } /* * Nasconde la vecchia freccetta ⌄. */ .agenda-quick-checklist > summary > span{ display:none!important; } /* TESTO HEADER */ .agenda-quick-checklist > summary > div{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; } .agenda-quick-checklist > summary strong{ color:var(--forest); font-size:var(--hs-ds-text-label); line-height:1.25; font-weight:750; } .agenda-quick-checklist > summary small{ color:var(--muted); font-size:8px; line-height:1.25; font-weight:400; } /* * Un solo controllo apertura, * molto più chiaro. */ .agenda-quick-checklist > summary::after{ content:'+'; flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-pill); background:#f3f1ec; color:var(--forest); font-size:var(--hs-ds-text-base); line-height:1; font-weight:400; } .agenda-quick-checklist[open] > summary::after{ content:'−'; background:var(--forest); color:var(--hs-ds-color-surface); } /* CHECKLIST APERTA */ .agenda-quick-checklist[open] > summary{ border-bottom: 1px solid var(--hs-ds-color-field-ring); } /* ELEMENTI INTERNI */ .agenda-quick-checklist-items{ display:grid; gap:var(--hs-ds-space-2); padding:var(--hs-ds-space-4); } .agenda-quick-checklist-item{ width:100%; min-height:42px; display:flex; align-items:center; gap:9px; padding:var(--hs-ds-space-4) 9px; border:0; border-radius:11px; background:#f7f6f2; color:var(--forest); text-align:left; cursor:pointer; } .agenda-quick-checklist-item > span{ flex:0 0 auto; width:23px; height:23px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface); font-size:12px; line-height:1; } .agenda-quick-checklist-item > strong{ min-width:0; font-size:10px; line-height:1.3; font-weight:550; } /* COMPLETATO */ .agenda-quick-checklist-item.is-done{ opacity:.55; } .agenda-quick-checklist-item.is-done > strong{ text-decoration:line-through; } /* MODIFICA */ .agenda-quick-checklist-manage{ width:calc(100% - 16px); min-height:44px; margin: 0 8px 8px; border:0; border-radius:11px; background:#f1efe9; color:var(--forest); font-size:var(--hs-ds-text-xs); font-weight:650; } /* MOBILE */ @media(max-width:700px){ .agenda-quick-checklists{ gap:7px; } .agenda-quick-checklist{ border-radius:18px; } .agenda-quick-checklist > summary{ min-height:62px; padding: 11px var(--hs-ds-space-6); } .agenda-quick-checklist-item{ min-height:46px; border-radius:var(--hs-ds-radius-control); } } /* ========================================================= WAITLIST ADMIN CREATE V1 ========================================================= */ .waitlist-create-modal{ width:min(620px,calc(100vw - 24px)); } .waitlist-create-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); margin-top:8px; } .waitlist-create-full{ grid-column:1 / -1; } .waitlist-create-time-row{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-6); } .waitlist-create-modal .form-group{ margin:0; } .waitlist-create-modal label{ display:block; margin-bottom:5px; color:var(--forest); font-size:10px; font-weight:650; } .waitlist-create-modal input, .waitlist-create-modal select, .waitlist-create-modal textarea{ box-sizing:border-box; width:100%; border: 1px solid rgba(16,28,23,.12); border-radius:13px; background:#f7f6f2; color:var(--forest); font:inherit; } .waitlist-create-modal input, .waitlist-create-modal select{ min-height:43px; padding:0 11px; } .waitlist-create-modal textarea{ min-height:82px; padding:var(--hs-ds-space-5) 11px; resize:vertical; } @media(max-width:700px){ .waitlist-create-modal{ width:calc(100vw - 16px); max-height: calc(100dvh - 24px); overflow:auto; border-radius:22px; } .waitlist-create-grid{ grid-template-columns:1fr; gap:var(--hs-ds-space-5); } .waitlist-create-full{ grid-column:auto; } .waitlist-create-time-row{ grid-template-columns: repeat(2,minmax(0,1fr)); } .waitlist-create-modal input, .waitlist-create-modal select{ min-height:46px; } } /* ========================================================= SETTINGS INDEX V2 NO BLUE / IOS SAFE ========================================================= */ .settings-index{ width:100%; max-width:760px; margin:0 auto; padding-bottom:var(--hs-ds-space-11); color:var(--ink); } .settings-index *, .settings-index button, .settings-index a{ -webkit-tap-highlight-color:transparent; } .settings-index-header{ margin-bottom:24px; } .settings-index-section{ margin:0 0 26px; } .settings-index-section > h3{ margin: 0 0 8px 4px; color:var(--forest)!important; -webkit-text-fill-color:var(--forest); font-size:var(--hs-ds-text-label); line-height:1; font-weight:800; letter-spacing:.16em; } .settings-index-row{ appearance:none; -webkit-appearance:none; width:100%; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-8); margin:0; padding:15px var(--hs-ds-space-8); border:0; border-bottom: 1px solid rgba(16,28,23,.08); border-radius:0; background:transparent; color:var(--ink)!important; -webkit-text-fill-color:var(--ink); text-align:left; } .settings-index-section .settings-index-row:first-of-type{ border-radius:18px 18px 0 0; } .settings-index-section .settings-index-row:last-child{ border-bottom:0; border-radius:0 0 18px 18px; } /* HS SETTINGS DESKTOP SCROLL FIX V1 clip mantiene gli angoli ma non crea uno scroll container che intercetta wheel/trackpad. */ .settings-index-section{ overflow:clip; border: 1px solid var(--hs-ds-color-field-ring); border-radius:18px; background:var(--hs-ds-color-surface); } .settings-index-section > h3{ /* * La label deve stare fuori visivamente dalla card, * ma manteniamo la struttura semplice. */ padding: var(--hs-ds-space-7) 16px 8px; margin:0; background:var(--paper); } .settings-index-row > span{ min-width:0; display:flex; flex-direction:column; gap:3px; } .settings-index-row strong{ display:block; color:var(--ink)!important; -webkit-text-fill-color:var(--ink); font-size:var(--hs-ds-text-base); line-height:1.25; font-weight:700; } .settings-index-row small{ display:block; color:var(--muted)!important; -webkit-text-fill-color:var(--muted); font-size:12px; line-height:1.35; font-weight:400; } .settings-index-row > i{ flex:0 0 auto; color:var(--forest)!important; -webkit-text-fill-color:var(--forest); font-style:normal; font-size:var(--hs-ds-text-xl); font-weight:300; } /* --------------------------------------------------------- IOS / SAFARI: neutralizza il blu automatico SOLO nelle impostazioni --------------------------------------------------------- */ .settings-index button, .settings-index button:link, .settings-index button:visited, .settings-index button:hover, .settings-index button:active, .settings-index a, .settings-index a:link, .settings-index a:visited{ color:var(--ink)!important; text-decoration:none!important; } .settings-index button:not(.btn) strong{ color:var(--ink)!important; } .settings-index button:not(.btn) small{ color:var(--muted)!important; } /* vecchio Centro di Controllo: se rimane raggiungibile da cache/stato UI, niente blu comunque */ .settings-control-center, .settings-control-center button, .settings-control-center button *, .settings-control-card, .settings-control-card *{ color:var(--ink)!important; } .settings-control-card p{ color:var(--muted)!important; } .settings-control-card small, .settings-control-card > span{ color:var(--forest)!important; } @media(max-width:700px){ .settings-index{ padding: 0 6px 28px; } .settings-index-section{ margin-bottom:20px; border-radius:17px; } .settings-index-row{ min-height:68px; padding: 13px 14px; } .settings-index-row strong{ font-size:var(--hs-ds-text-control); } .settings-index-row small{ font-size:var(--hs-ds-text-label); } } /* ========================================================= MOBILE ========================================================= */ /* telefono molto stretto */ /* --------------------------------------------------------- POPOVER SYSTEM --------------------------------------------------------- */ .agenda-v6-popover-host{ position:absolute; top:100%; left:0; right:0; z-index:5000; pointer-events:none; } /* * Il contenuto vero torna cliccabile. * In questo modo il wrapper non blocca l'Agenda. */ .agenda-v6-popover-host > *:not(:empty){ pointer-events:auto; } /* * I pannelli inline esistenti diventano overlay. * Non devono più aumentare l'altezza dell'header. */ .agenda-v6-popover-host .agenda-popover, .agenda-v6-popover-host [data-agenda-inline-panel]{ position:absolute!important; top:4px; width:min(390px,calc(100vw - 14px)); max-height:min(70vh,560px); overflow:auto; margin:0!important; border:1px solid rgba(16,28,23,.12); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); box-shadow: 0 14px 38px var(--hs-ds-color-field-border); z-index:5001; } /* fallback: se agendaInlinePanelHtml restituisce direttamente una card */ .agenda-v6-popover-host > .card, .agenda-v6-popover-host > section{ max-height:min(70vh,560px); } /* --------------------------------------------------------- ANCORAGGI --------------------------------------------------------- */ /* OGGI */ .agenda-v6-popover-today .agenda-popover, .agenda-v6-popover-today [data-agenda-inline-panel]{ left:38px!important; right:auto!important; } /* WAITLIST */ .agenda-v6-popover-waitlist .agenda-popover, .agenda-v6-popover-waitlist [data-agenda-inline-panel]{ left:92px!important; right:auto!important; } /* MENU TRE PUNTINI */ .agenda-v6-popover-menu .agenda-popover, .agenda-v6-popover-menu [data-agenda-inline-panel]{ left:6px!important; right:auto!important; } /* RICERCA */ .agenda-v6-popover-spotlight .agenda-popover, .agenda-v6-popover-spotlight [data-agenda-inline-panel]{ left:auto!important; right:72px!important; } /* +: deve comparire direttamente sotto il + */ .agenda-v6-popover-add .agenda-popover, .agenda-v6-popover-add [data-agenda-inline-panel]{ left:auto!important; right:5px!important; } /* CALENDARIO: centrato sotto la data */ .agenda-v6-popover-calendar .agenda-popover, .agenda-v6-popover-calendar [data-agenda-inline-panel]{ left:50%!important; right:auto!important; transform:translateX(-50%); } /* TUTTI: sotto al controllo destro */ .agenda-v6-popover-view .agenda-popover, .agenda-v6-popover-view [data-agenda-inline-panel]{ left:auto!important; right:5px!important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ /* * Su telefono i popover possono essere quasi larghi * quanto lo schermo, ma restano sovrapposti. */ .agenda-v6-popover-host .agenda-popover, .agenda-v6-popover-host [data-agenda-inline-panel]{ width:calc(100vw - 12px); max-height:68vh; border-radius:11px; } .agenda-v6-popover-today .agenda-popover, .agenda-v6-popover-today [data-agenda-inline-panel], .agenda-v6-popover-waitlist .agenda-popover, .agenda-v6-popover-waitlist [data-agenda-inline-panel], .agenda-v6-popover-spotlight .agenda-popover, .agenda-v6-popover-spotlight [data-agenda-inline-panel], .agenda-v6-popover-calendar .agenda-popover, .agenda-v6-popover-calendar [data-agenda-inline-panel]{ left:6px!important; right:auto!important; transform:none!important; } /* + rimane ancorato a destra */ .agenda-v6-popover-add .agenda-popover, .agenda-v6-popover-add [data-agenda-inline-panel]{ left:auto!important; right:6px!important; } /* TUTTI rimane ancorato a destra */ .agenda-v6-popover-view .agenda-popover, .agenda-v6-popover-view [data-agenda-inline-panel]{ left:auto!important; right:6px!important; } } /* ========================================================= AGENDA HEADER V8 · CALENDAR / VIEW POPOVER FIX ========================================================= */ .agenda-v6-native-popover{ position:absolute!important; top:4px!important; background:var(--hs-ds-color-surface); border: 1px solid rgba(16,28,23,.12); border-radius:var(--hs-ds-radius-control); box-shadow: 0 14px 38px var(--hs-ds-color-field-border); overflow:auto; z-index:5002; } /* Calendario sotto alla data */ .agenda-v6-popover-calendar .agenda-v6-native-popover{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:min( 390px, calc(100vw - 14px) ); } /* Vista sotto TUTTI */ .agenda-v6-popover-view .agenda-v6-native-popover{ left:auto!important; right:5px!important; transform:none!important; width:min( 330px, calc(100vw - 14px) ); } @media(max-width:700px){ .agenda-v6-popover-calendar .agenda-v6-native-popover{ left:6px!important; right:auto!important; transform:none!important; width:calc(100vw - 12px); } .agenda-v6-popover-view .agenda-v6-native-popover{ left:auto!important; right:6px!important; transform:none!important; width:min( 330px, calc(100vw - 12px) ); } } /* ========================================================= HAIRCUT STUDIO · OGGI + WAITLIST V1 ========================================================= */ .agenda-staff-today{ display:grid; gap:var(--hs-ds-space-6); } .agenda-staff-today-section{ border:1px solid rgba(20,20,20,.09); border-radius:16px; background:var(--hs-ds-color-surface); overflow:hidden; } .agenda-staff-today-title{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px 9px; } .agenda-staff-today-title strong{ font-size:var(--hs-ds-text-md); line-height:1; letter-spacing:-.01em; } .waitlist-create-modal{ width:min(620px,calc(100vw - 24px)); } .waitlist-create-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-7); } .waitlist-create-full{ grid-column:1/-1; } .waitlist-create-time-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-7); } @media(max-width:640px){ .waitlist-create-modal{ width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; } .waitlist-create-grid{ grid-template-columns:1fr; } .waitlist-create-full{ grid-column:auto; } .waitlist-create-time-row{ grid-template-columns:1fr 1fr; } } /* ========================================================= HAIRCUT STUDIO · COMUNICAZIONI V1 ========================================================= */ .communication-done-button{ width:34px; height:34px; min-width:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(20,20,20,.12); border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); color:var(--ink); font-size:var(--hs-ds-text-base); font-weight:700; cursor:pointer; } .communication-done-button:hover{ background:rgba(20,20,20,.05); } .communication-done-button:active{ transform:scale(.94); } /* ========================================================= HAIRCUT STUDIO · DATI E RESET V1 ========================================================= */ .data-reset-modal{ width:min(720px,calc(100vw - 28px)); max-height:min(86vh,900px); overflow:auto; } .data-reset-warning{ display:flex; flex-direction:column; gap:var(--hs-ds-space-3); margin:4px 0 18px; padding:var(--hs-ds-space-7) var(--hs-ds-space-8); border:1px solid rgba(0,0,0,.12); border-radius:var(--hs-ds-radius-md); } .data-reset-warning strong{ font-size:var(--hs-ds-text-control); } .data-reset-warning span{ font-size:var(--hs-ds-text-md); line-height:1.45; opacity:.66; } .data-reset-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-4); } .data-reset-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:var(--hs-ds-space-7) 0; border-bottom:1px solid rgba(0,0,0,.08); } .data-reset-row > div{ min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-2); } .data-reset-row strong{ font-size:var(--hs-ds-text-control); } .data-reset-row small{ display:block; max-width:470px; font-size:12px; line-height:1.4; opacity:.58; } .data-reset-row .btn{ flex:0 0 auto; } .data-reset-footer{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); margin-top:18px; padding-top:var(--hs-ds-space-7); border-top:1px solid rgba(0,0,0,.08); font-size:12px; } .data-reset-footer span{ opacity:.55; } @media(max-width:620px){ .data-reset-modal{ width:calc(100vw - 18px); max-height:92vh; } .data-reset-row{ align-items:flex-start; flex-direction:column; gap:var(--hs-ds-space-5); } .data-reset-row .btn{ width:100%; } } /* ========================================================= PUBLIC EDITOR V2A · AREA CLIENTE ========================================================= */ .online-preview-pages{ display:flex; align-items:center; gap:var(--hs-ds-space-2); padding:3px; border:1px solid rgba(0,0,0,.08); border-radius:var(--hs-ds-radius-sm); } .online-preview-pages button{ border:0; background:transparent; padding:var(--hs-ds-space-3) 9px; border-radius:7px; font:inherit; font-size:var(--hs-ds-text-label); cursor:pointer; opacity:.55; } .online-preview-pages button.active{ background:rgba(0,0,0,.07); opacity:1; } .online-customer-feature-grid{ display:flex; flex-direction:column; margin-top:8px; } .online-customer-note{ display:flex; flex-direction:column; gap:var(--hs-ds-space-2); margin-top:16px; padding:var(--hs-ds-space-7) var(--hs-ds-space-8); border-radius:var(--hs-ds-radius-md); background:rgba(0,0,0,.035); } .online-customer-note strong{ font-size:var(--hs-ds-text-md); } .online-customer-note span{ font-size:12px; line-height:1.45; opacity:.6; } @media(max-width:760px){ .online-preview-pages{ width:100%; } .online-preview-pages button{ flex:1; } } /* ========================================================= PUBLIC EDITOR V2C · CUSTOMER ORDER ========================================================= */ .customer-order-editor{ margin-top:18px; } .customer-order-list{ display:flex; flex-direction:column; margin-top:10px; border-top:1px solid rgba(0,0,0,.08); } .customer-order-row{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:50px; border-bottom:1px solid rgba(0,0,0,.08); transition: opacity .14s ease, transform .14s ease; } .customer-order-row.is-dragging{ opacity:.35; } .customer-order-drag{ border:0; background:transparent; cursor:grab; font-size:16px; opacity:.4; } .customer-order-row strong{ font-size:var(--hs-ds-text-md); } .customer-order-actions{ display:flex; gap:3px; } .customer-order-actions button{ width:30px; height:30px; border:1px solid rgba(0,0,0,.08); border-radius:var(--hs-ds-radius-xs); background:transparent; cursor:pointer; font:inherit; } @media(max-width:620px){ .customer-order-row{ min-height:54px; } } /* ========================================================= FINAL CLEANUP · AGENDA BEHAVIOR ========================================================= */ .agenda-behavior-summary{ display:grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap:var(--hs-ds-space-6); } .agenda-behavior-summary > .card{ display:flex; flex-direction:column; gap:7px; padding:18px; } .agenda-behavior-summary small{ font-size:var(--hs-ds-text-xs); letter-spacing:.13em; opacity:.48; } .agenda-behavior-summary strong{ font-size:var(--hs-ds-text-control); } .agenda-behavior-summary .muted{ font-size:12px; line-height:1.45; } @media(max-width:760px){ .agenda-behavior-summary{ grid-template-columns:1fr; } } /* ========================================================= HAIRCUT STUDIO · REFACTOR 1A.2 ========================================================= */ /* TEAM */ .hs-team-dynamic .team-settings-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-8); } .hs-team-inactive{ opacity:.52; } .hs-team-create-note{ padding:13px var(--hs-ds-space-7); display:grid; gap:var(--hs-ds-space-2); border:1px solid rgba(20,35,28,.09); border-radius:var(--hs-ds-radius-control); background:#f7f6f2; } .hs-team-create-note strong{ font-size:var(--hs-ds-text-md); } .hs-team-create-note span{ font-size:12px; line-height:1.45; opacity:.68; } /* ONLINE */ .hs-online-availability{ display:grid; gap:var(--hs-ds-space-7); } .hs-online-card{ padding:0!important; overflow:hidden; } .hs-online-card-head{ padding:15px var(--hs-ds-space-8) var(--hs-ds-space-6); display:grid; gap:3px; border-bottom:1px solid rgba(20,35,28,.07); } .hs-online-card-head small{ font-size:10px; font-weight:800; letter-spacing:.08em; opacity:.55; } .hs-online-row{ min-height:64px; padding:var(--hs-ds-space-6) var(--hs-ds-space-8); display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--hs-ds-space-7); border-bottom:1px solid rgba(20,35,28,.06); } .hs-online-row:last-child{ border-bottom:0; } .hs-online-row > div{ min-width:0; display:grid; gap:3px; } .hs-online-row > div strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hs-online-row > div small{ opacity:.6; } .hs-online-row > label{ display:flex; align-items:center; gap:var(--hs-ds-space-3); font-size:var(--hs-ds-text-label); white-space:nowrap; } /* ONLINE: OWNER UNICO */ .team-admin-settings-box .team-toggle-row:has(#teamBookingVisible), .team-admin-settings-box .team-toggle-row:has(#teamBookingEnabled), .service-editor-modal .team-toggle-row:has(#serviceOnlineVisible), .service-editor-modal .team-toggle-row:has(#serviceOnlineBookable){ display:none!important; } /* CONFIG CHECKER */ .hs-config-checker{ display:grid; gap:var(--hs-ds-space-6); } .hs-config-checker-head{ padding:var(--hs-ds-space-8); display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); border:1px solid rgba(20,35,28,.08); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); } .hs-config-checker-head > div{ display:grid; gap:var(--hs-ds-space-2); } .hs-config-checker-head small{ font-size:10px; font-weight:800; letter-spacing:.08em; opacity:.55; } .hs-config-checker-head > span{ width:32px; height:32px; display:grid; place-items:center; border-radius:var(--hs-ds-radius-circle); font-weight:900; } .hs-config-checker-list{ display:grid; gap:var(--hs-ds-space-4); } .hs-config-checker-row{ padding:var(--hs-ds-space-6) var(--hs-ds-space-7); display:flex; align-items:center; gap:var(--hs-ds-space-6); border:1px solid rgba(20,35,28,.07); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); } .hs-config-checker-row i{ width:25px; height:25px; display:grid; place-items:center; flex:0 0 25px; border-radius:var(--hs-ds-radius-circle); font-style:normal; font-weight:900; } .hs-config-checker-row > div{ display:grid; gap:var(--hs-ds-space-1); } .hs-config-checker-row small{ opacity:.62; } .hs-config-checker .ok{ color:#356b4b; background:rgba(53,107,75,.11); } .hs-config-checker .warning{ color:#8c5b20; background:rgba(140,91,32,.11); } /* * AGENDA: NUMERO TEAM DINAMICO * Stessa specificita' (body.agenda-mode .agenda-unified-shell * .agenda-calendar-pro.agenda-all-staff ...) della regola piu' in * alto che fissava 3 colonne (repeat(3,...)) - altrimenti quella * vinceva sempre a prescindere dall'ordine nel file, perche' aveva * un selettore piu' specifico (le classi contano, non la posizione). * Qui niente e' fissato: tante colonne quante sono le persone * (1 = tutta la larghezza, 2 = meta' ciascuno, 8 = tutte visibili). */ body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-staff-head, body.agenda-mode .agenda-unified-shell .agenda-calendar-pro.agenda-all-staff .agenda-lanes{ grid-template-columns:none!important; grid-auto-flow:column!important; grid-auto-columns:minmax(0,1fr)!important; } @media(max-width:700px){ .hs-team-dynamic .team-settings-header{ display:grid; } .hs-team-dynamic [data-hs-team-add]{ width:100%; } .hs-online-row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--hs-ds-space-4) var(--hs-ds-space-6); } .hs-online-row > label:last-child{ grid-column:2; } } /* ===== HAIRCUT 1F1G1H FINAL OVERRIDES ===== */ /* --------------------------------------------------------- BOTTOM DOCK Home centrale · Studio a destra --------------------------------------------------------- */ /* * Il vecchio trigger superiore non serve più * quando siamo nell'Agenda. */ body.agenda-mode #bell{ display:none!important; } @keyframes haircutSyncPulse{ from{ opacity:.45; transform:scale(.82); } to{ opacity:1; transform:scale(1.08); } } /* --------------------------------------------------------- WAITLIST CREATE --------------------------------------------------------- */ .waitlist-create-modal{ width:min(760px,calc(100vw - 24px))!important; max-width:760px!important; } /* --------------------------------------------------------- SECURE RESET --------------------------------------------------------- */ .secure-reset-modal{ width:min(760px,calc(100vw - 24px))!important; max-width:760px!important; } .secure-reset-status{ margin:4px 0 16px; padding:var(--hs-ds-space-5) var(--hs-ds-space-6); border-radius:var(--hs-ds-radius-sm); background:#f2f1ec; font-size:12px; font-weight:700; } .secure-reset-status.configured{ background:#eaf4ec; } .secure-reset-section{ display:grid; gap:var(--hs-ds-space-6); margin-top:18px; padding:18px; border:1px solid rgba(16,28,23,.10); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); } .secure-reset-section h3{ margin:0; } .secure-reset-section label{ display:grid; gap:var(--hs-ds-space-3); font-size:12px; font-weight:700; } .secure-reset-section input{ width:100%; } .secure-reset-danger{ border-color:rgba(160,45,45,.24); } .secure-reset-keep, .secure-reset-delete{ display:grid; gap:5px; padding:var(--hs-ds-space-6); border-radius:var(--hs-ds-radius-sm); } .secure-reset-keep{ background:#eef6ef; } .secure-reset-delete{ background:#f9eded; } .secure-reset-keep strong, .secure-reset-delete strong{ margin-bottom:3px; } .secure-reset-keep span, .secure-reset-delete span{ font-size:12px; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ .waitlist-create-modal, .secure-reset-modal{ width:calc(100vw - 10px)!important; max-width:none!important; max-height: calc( 100dvh - env(safe-area-inset-top) - 10px )!important; margin:5px!important; border-radius:var(--hs-ds-radius-md)!important; } } /* ===== HAIRCUT UX POLISH V1 FINAL ===== */ /* ========================================================= BOTTOM BAR ========================================================= */ /* ========================================================= DESKTOP / TABLET PANELS stessa logica visiva mobile: tutti centrati e sovrapposti ========================================================= */ @media(min-width:701px){ .agenda-v6-popover-host{ position:fixed!important; left:50%!important; right:auto!important; top: max( 82px, calc( env(safe-area-inset-top) + 72px ) )!important; width: min( 760px, calc(100vw - 48px) )!important; transform: translateX(-50%)!important; z-index:8000!important; pointer-events:none!important; } .agenda-v6-popover-host .agenda-popover, .agenda-v6-popover-host [data-agenda-inline-panel], .agenda-v6-popover-host .agenda-v6-native-popover{ position:absolute!important; left:50%!important; right:auto!important; top:0!important; width: min( 720px, calc(100vw - 64px) )!important; max-width:720px!important; max-height: calc( 100dvh - 130px )!important; transform: translateX(-50%)!important; margin:0!important; overflow:auto!important; pointer-events:auto!important; } } /* ========================================================= WAITLIST V2 ========================================================= */ .waitlist-create-v2{ width: min( 720px, calc(100vw - 24px) )!important; max-width:720px!important; } .waitlist-v2-section{ display:grid; gap:var(--hs-ds-space-6); margin-top:14px; padding:15px; border: 1px solid rgba(16,28,23,.10); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); } .waitlist-v2-section label{ display:grid; gap:var(--hs-ds-space-3); font-size:12px; font-weight:700; } .waitlist-v2-section input, .waitlist-v2-section select, .waitlist-v2-section textarea{ width:100%; } .waitlist-client-results{ display:grid; gap:var(--hs-ds-space-2); } .waitlist-client-result{ width:100%; display:grid; gap:var(--hs-ds-space-1); padding: var(--hs-ds-space-5) 12px; border:0; border-radius:var(--hs-ds-radius-sm); background:#f3f2ed; text-align:left; } .waitlist-client-result strong{ font-size:var(--hs-ds-text-md); } .waitlist-client-result small{ font-size:var(--hs-ds-text-label); opacity:.62; } .waitlist-client-empty{ padding:var(--hs-ds-space-4) var(--hs-ds-space-2); font-size:var(--hs-ds-text-label); opacity:.58; } .waitlist-selected-client{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-5); padding: var(--hs-ds-space-5) 12px; border-radius:var(--hs-ds-radius-sm); background:#edf5ee; } .waitlist-selected-client div{ display:grid; gap:var(--hs-ds-space-1); } .waitlist-selected-client small{ font-size:var(--hs-ds-text-label); opacity:.62; } .waitlist-selected-client button{ border:0; background:transparent; font-size:var(--hs-ds-text-lg); } .waitlist-new-client-fields{ display:grid; gap:var(--hs-ds-space-5); } .waitlist-segmented{ display:grid; grid-template-columns: 1fr 1fr; gap:3px; padding:3px; border-radius:var(--hs-ds-radius-sm); background:#efeee9; } .waitlist-segmented button{ border:0; border-radius:var(--hs-ds-radius-xs); padding: 9px 10px; background:transparent; font-size:var(--hs-ds-text-label); font-weight:750; } .waitlist-segmented button.active{ background:var(--hs-ds-color-surface); box-shadow: 0 1px 5px rgba(0,0,0,.07); } .waitlist-date-range, .waitlist-time-exact{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--hs-ds-space-5); } .waitlist-band-list{ display:grid; gap:var(--hs-ds-space-3); } .waitlist-band-option{ display:flex!important; align-items:center; gap:var(--hs-ds-space-5)!important; padding: var(--hs-ds-space-5) 12px; border: 1px solid rgba(16,28,23,.10); border-radius:var(--hs-ds-radius-sm); } .waitlist-band-option input{ width:auto!important; } .waitlist-band-option span{ display:grid; gap:var(--hs-ds-space-1); } .waitlist-band-option small{ font-size:10px; opacity:.6; } /* ========================================================= HAIRCUT DATE PICKER ========================================================= */ @media(max-width:700px){ .waitlist-create-v2{ width: calc( 100vw - 10px )!important; max-width:none!important; margin:5px!important; } .waitlist-date-range, .waitlist-time-exact{ grid-template-columns: 1fr; } } /* ===== WAITLIST MICRO FIX V2 ===== */ .hs-waitlist-date-field{ width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-5); padding:9px 11px; border: 1px solid rgba(16,28,23,.14); border-radius:9px; background:var(--hs-ds-color-surface); color:var(--forest); text-align:left; font:inherit; cursor:pointer; } .hs-waitlist-date-field span{ font-size:12px; font-weight:650; } .hs-waitlist-date-field i{ font-style:normal; font-size:10px; opacity:.5; } #waitlistClientSearch[hidden], .waitlist-new-client-fields[hidden]{ display:none!important; } /* ===== HAIRCUT UI POLISH V2.1 ===== */ /* UNICO SFONDO */ body.agenda-mode, body.agenda-mode #app, body.agenda-mode #view{ background:var(--bg,var(--hs-ds-color-app-bg))!important; } /* ========================================================= DOCK · AGGIUNGI | HOME | GENERALE ========================================================= */ body.agenda-mode #view{ padding-bottom: calc( 54px + env(safe-area-inset-bottom) )!important; } /* ========================================================= ADD PANEL DAL BASSO ========================================================= */ .agenda-v6-popover-host.agenda-v6-popover-add{ position:fixed!important; left:50%!important; right:auto!important; top:auto!important; bottom: calc( 58px + env(safe-area-inset-bottom) )!important; width: min( 620px, calc(100vw - 20px) )!important; transform: translateX(-50%)!important; pointer-events:none!important; z-index:8900!important; } .agenda-v6-popover-host.agenda-v6-popover-add [data-agenda-inline-panel]{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; width:100%!important; max-width:none!important; margin:0!important; transform:none!important; pointer-events:auto!important; } /* ========================================================= WAITLIST · ZERO BLU ========================================================= */ .waitlist-create-v2, .waitlist-create-v2 *, .waitlist-create-v2 button, .waitlist-create-v2 input, .waitlist-create-v2 select, .waitlist-create-v2 textarea{ color:var(--ink,var(--hs-ds-color-ink))!important; accent-color:var(--ink,var(--hs-ds-color-ink))!important; -webkit-tap-highlight-color: transparent!important; } .waitlist-client-result, .waitlist-client-result strong, .waitlist-client-result small, .waitlist-selected-client, .waitlist-selected-client strong, .waitlist-selected-client small{ color:var(--ink,var(--hs-ds-color-ink))!important; -webkit-text-fill-color: var(--ink,var(--hs-ds-color-ink))!important; } .waitlist-segmented button, .waitlist-segmented button.active{ color:var(--ink,var(--hs-ds-color-ink))!important; -webkit-text-fill-color: var(--ink,var(--hs-ds-color-ink))!important; } /* hidden DEVE vincere sul grid */ .waitlist-date-range[hidden], [data-waitlist-date-single][hidden], .waitlist-time-exact[hidden], [data-waitlist-time-band][hidden], .waitlist-new-client-fields[hidden], #waitlistClientSearch[hidden]{ display:none!important; } /* ========================================================= WAITLIST SCROLL ISOLATO ========================================================= */ .waitlist-create-backdrop{ position:fixed!important; inset:0!important; overflow:hidden!important; overscroll-behavior:none!important; display:flex!important; align-items:center!important; justify-content:center!important; padding: max(5px,env(safe-area-inset-top)) 5px max(5px,env(safe-area-inset-bottom))!important; } .waitlist-create-v2{ width: min( 720px, calc(100vw - 24px) )!important; max-height: calc( 100dvh - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)) )!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling: touch!important; touch-action:pan-y!important; } /* ========================================================= DATE / TIME ========================================================= */ .waitlist-date-range, .waitlist-time-exact{ grid-template-columns: 1fr 1fr; } .waitlist-time-exact option:disabled{ color: rgba(16,28,23,.25)!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .waitlist-create-backdrop{ align-items:stretch!important; } .waitlist-create-v2{ width: calc( 100vw - 10px )!important; max-width:none!important; height:auto!important; max-height: calc( 100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px )!important; margin:0!important; } .waitlist-date-range, .waitlist-time-exact{ grid-template-columns: 1fr!important; } .agenda-v6-popover-host.agenda-v6-popover-add{ left:5px!important; right:5px!important; width:auto!important; transform:none!important; bottom: calc( 58px + env(safe-area-inset-bottom) )!important; } } /* ===== HAIRCUT MOBILE CONTINUITY V1 ===== */ /* Dock più sottile e integrato */ /* Bottoni più compatti */ /* Icone leggermente più piccole */ /* Label più vicine all'icona */ /* L'agenda arriva visivamente quasi fino al dock */ body.agenda-mode #view{ padding-bottom: calc( 46px + env(safe-area-inset-bottom) )!important; } /* Pannello aggiungi si riallinea al nuovo dock */ .agenda-v6-popover-host.agenda-v6-popover-add{ bottom: calc( 49px + env(safe-area-inset-bottom) )!important; } /* Mobile: continuità visiva */ @media(max-width:700px){ body.agenda-mode,body.agenda-mode #app,body.agenda-mode #view{ background: var(--bg,var(--hs-ds-color-app-bg))!important; } .agenda-v6-popover-host.agenda-v6-popover-add{ bottom: calc( 49px + env(safe-area-inset-bottom) )!important; } } /* ===== HAIRCUT NATIVE APP VISUAL V1 ===== */ /* ========================================================= 1 · ROOT Il beige è il vero foglio sotto tutta l'app. Serve anche per l'overscroll Safari/iOS. ========================================================= */ html, body{ background:var(--hs-ds-color-app-bg)!important; } html{ min-height:100%; } body{ min-height:100dvh; overscroll-behavior-y:none; color:var(--hs-ds-color-ui-strong)!important; } body.agenda-mode, body.agenda-mode #app, body.agenda-mode #view{ background:var(--hs-ds-color-app-bg)!important; } /* ========================================================= 2 · UNICO FOGLIO BIANCO AGENDA Header + navigazione + calendario. ========================================================= */ body.agenda-mode .agenda-unified-shell, body.agenda-mode .agenda-person-week-shell{ background:var(--hs-ds-color-surface); border:0; box-shadow:none; border-radius:0; overflow:hidden!important; } /* ========================================================= 3 · CALENDARIO = CONTINUAZIONE DEL FOGLIO ========================================================= */ body.agenda-mode .agenda-calendar-pro, body.agenda-mode .agenda-person-week-scroll, body.agenda-mode .agenda-person-week-stage{ background:var(--hs-ds-color-surface); border:0; box-shadow:none; border-radius:0; } /* * Intestazione collaboratori: * più app, meno tabella web. */ body.agenda-mode .agenda-staff-head{ border-top:0; border-bottom: 1px solid rgba(16,28,23,.055); box-shadow:none; } body.agenda-mode .agenda-person{ padding-top:var(--hs-ds-space-5)!important; padding-bottom:var(--hs-ds-space-5)!important; border-top:0; border-bottom:0; } body.agenda-mode .agenda-person > strong{ font-size:16px!important; line-height:1.08!important; font-weight:750!important; letter-spacing:-.025em!important; } body.agenda-mode .agenda-person > span{ margin-top:3px!important; font-size:var(--hs-ds-text-sm)!important; line-height:1.15!important; font-weight:400!important; opacity:.48!important; } /* ========================================================= 4 · TIMELINE Più leggibile, meno griglia Excel. ========================================================= */ body.agenda-mode .agenda-time-axis span{ font-size:var(--hs-ds-text-label)!important; font-weight:500!important; opacity:.52!important; } body.agenda-mode .agenda-45-slot{ color: rgba(16,28,23,.58); font-size:10.5px!important; font-weight:550!important; } /* * Righe più leggere. * Non tocchiamo dimensioni/posizione degli slot. */ body.agenda-mode .agenda-lane, body.agenda-mode .agenda-45-slot{ border-color: rgba(16,28,23,.075); } /* ========================================================= 5 · APPOINTMENT CARDS Geometria/durata INVARIATA. Solo trattamento visivo. ========================================================= */ /* * Piccolo distacco visivo tra le card, * senza alterarne top/height. */ /* ========================================================= 7 · BOTTOM SHEET / DOCK È il beige sottostante, non una quarta scheda. ========================================================= */ /* * Lo spazio dopo il calendario deve essere * esattamente quello del dock, non una fascia extra. */ body.agenda-mode #view{ padding-bottom: calc( 48px + env(safe-area-inset-bottom) )!important; } /* Aggiungi si riallinea */ .agenda-v6-popover-host.agenda-v6-popover-add{ bottom: calc( 53px + env(safe-area-inset-bottom) )!important; } /* ========================================================= 8 · MOBILE ========================================================= */ @media(max-width:700px){ /* * Safari deve vedere sempre beige dietro * anche durante bounce / overscroll. */ html,body,body.agenda-mode,body.agenda-mode #app,body.agenda-mode #view{ background:var(--hs-ds-color-app-bg)!important; } /* * Il foglio vero dell'agenda rimane bianco. */ body.agenda-mode .agenda-unified-shell, body.agenda-mode .agenda-person-week-shell, body.agenda-mode .agenda-calendar-pro { background:var(--hs-ds-color-surface); } body.agenda-mode .agenda-person > strong{ font-size:var(--hs-ds-text-base)!important; } body.agenda-mode .agenda-person > span{ font-size:var(--hs-ds-text-label)!important; } /* * Prima erano 13 / 10: * troppo "sito web". */ body.agenda-mode .agenda-time-axis span{ font-size:10.5px!important; } body.agenda-mode .agenda-45-slot{ font-size:10px!important; } .agenda-v6-popover-host.agenda-v6-popover-add{ bottom: calc( 53px + env(safe-area-inset-bottom) )!important; } } /* ========================================================= 9 · DESKTOP / TABLET Stessa grammatica visiva. ========================================================= */ @media(min-width:701px){ body.agenda-mode .agenda-unified-shell, body.agenda-mode .agenda-person-week-shell{ border-radius:var(--hs-ds-radius-md); overflow:hidden!important; box-shadow: 0 1px 0 var(--hs-ds-color-hairline-soft); } } /* ===== HAIRCUT PREMIUM APP V1 ===== */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root{ --hs-app-bg:var(--hs-ds-color-app-bg); --hs-surface:var(--hs-ds-color-surface); --hs-surface-soft:var(--hs-ds-color-surface-soft); --hs-surface-deep:var(--hs-ds-color-surface-deep); --hs-ink:var(--hs-ds-color-ink); --hs-secondary:var(--hs-ds-color-secondary); --hs-tertiary:var(--hs-ds-color-tertiary); --hs-hairline:var(--hs-ds-color-hairline); --hs-hairline-soft:var(--hs-ds-color-hairline-soft); --hs-now:var(--hs-ds-color-now); --hs-radius-sm:10px; --hs-radius-md:14px; --hs-radius-lg:20px; --hs-radius-xl:24px; --hs-shadow-soft: 0 1px 2px rgba(16,28,23,.025), 0 7px 24px var(--hs-ds-color-hairline-soft); --hs-shadow-sheet: 0 -2px 3px rgba(16,28,23,.025), 0 -18px 48px rgba(16,28,23,.12); } /* ========================================================= APP MATERIAL ========================================================= */ html, body, body.agenda-mode, body.agenda-mode #app, body.agenda-mode #view{ background: var(--hs-app-bg)!important; } body.agenda-mode .agenda-unified-shell, body.agenda-mode .agenda-person-week-shell, body.agenda-mode .agenda-calendar-pro { background: var(--hs-surface); } /* ========================================================= STAFF HEADER ========================================================= */ body.agenda-mode .agenda-staff-head{ border-bottom: 1px solid var(--hs-hairline); background: rgba(255,255,255,.985); } body.agenda-mode .agenda-person{ padding: 11px 8px!important; min-height:58px; border:0; } body.agenda-mode .agenda-person > strong{ font-size:16px!important; line-height:1.08!important; font-weight:750!important; letter-spacing:-.025em!important; } body.agenda-mode .agenda-person > span{ margin-top:4px!important; font-size:var(--hs-ds-text-sm)!important; line-height:1.15!important; font-weight:450!important; opacity:.5!important; } /* piccolo segno colore persona */ body.agenda-mode .agenda-person::after{ content:''; width:18px; height:2px; display:block; margin: 7px auto 0; border-radius:var(--hs-ds-radius-pill); background: var(--agenda-team-color); opacity:.75; } /* ========================================================= DAY CANVAS Più spazio verticale. Le percentuali JS restano identiche. ========================================================= */ /* * 08 → 21 = 13 ore. * * Desktop: * circa 66 px / ora. * * Mobile: * circa 74 px / ora. * * Questo rende 45 min abbastanza alti per: * nome + orario + servizio. */ body.agenda-mode .agenda-lanes{ min-height:860px!important; } body.agenda-mode .agenda-lane{ height:860px!important; min-height:860px!important; } /* * Anche la working window / slots / appointment * restano perfettamente proporzionali perché usano * --agenda-top e --agenda-height in percentuale. */ /* ========================================================= GRID ========================================================= */ body.agenda-mode .agenda-lane{ border-color: var(--hs-hairline-soft); } body.agenda-mode .agenda-45-slot{ border-color: rgba(16,28,23,.052); color: var(--hs-ds-color-field-border-focus); font-size:10.5px!important; font-weight:500!important; transition: background-color 130ms ease!important; } @media(hover:hover){ body.agenda-mode .agenda-45-slot:hover{ background: rgba(16,28,23,.018); } } body.agenda-mode .agenda-slot-time{ opacity:.66!important; } /* ========================================================= APPOINTMENT CARDS ========================================================= */ body.agenda-mode .agenda-appointment{top: calc( var(--agenda-top) + 2px )!important;height: calc( var(--agenda-height) - 4px )!important} /* * niente transform: * è importante per drag & drop. */ /* ========================================================= DESKTOP: nome + orario/servizio sfruttano la larghezza ========================================================= */ /* ========================================================= MOBILE: più spazio e testo molto leggibile ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-lanes{ min-height:960px!important; } body.agenda-mode .agenda-lane{ height:960px!important; min-height:960px!important; } body.agenda-mode .agenda-person{ min-height:58px; padding: var(--hs-ds-space-5) 5px!important; } body.agenda-mode .agenda-person > strong{ font-size:var(--hs-ds-text-base)!important; } body.agenda-mode .agenda-person > span{ font-size:10.5px!important; } body.agenda-mode .agenda-45-slot{ font-size:10px!important; } } /* ========================================================= CURRENT TIME via il rosso. ========================================================= */ body.agenda-mode .agenda-now-line{ border-color: var(--hs-now)!important; background: var(--hs-now)!important; box-shadow:none!important; opacity:.92!important; } /* * Qualunque implementazione precedente * usasse pseudo-elementi eredita lo stesso colore. */ body.agenda-mode .agenda-now-line::before, body.agenda-mode .agenda-now-line::after{ background: var(--hs-now)!important; border-color: var(--hs-now)!important; } body.agenda-mode .agenda-now-line span{ background: var(--hs-now)!important; color:var(--hs-ds-color-surface)!important; border:0!important; border-radius:var(--hs-ds-radius-pill)!important; padding: var(--hs-ds-space-1) 6px!important; box-shadow: 0 1px 4px rgba(16,28,23,.10)!important; font-size:var(--hs-ds-text-xs)!important; font-weight:700!important; letter-spacing:.01em!important; } /* * Una sola etichetta ora nella vista Tutti. * La linea continua invece sulle tre colonne. */ body.agenda-mode .agenda-lanes > .agenda-lane:not(:first-child) > .agenda-now-line > span{ display:none!important; } /* ========================================================= ADD · NATIVE BOTTOM SHEET Logica/stack invariati. ========================================================= */ .agenda-v6-popover-host.agenda-v6-popover-add{ bottom: calc( 54px + env(safe-area-inset-bottom) )!important; } /* * Handle dello sheet solo sul pannello visibile. */ /* ========================================================= GENERALE · STESSA STRUTTURA, .agenda-v6-popover-menu .agenda-stack-panel{ border: 1px solid rgba(16,28,23,.055)!important; border-radius: 22px!important; background: rgba(255,255,255,.97)!important; box-shadow: var(--hs-shadow-soft)!important; -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%); } .agenda-v6-popover-menu .agenda-stack-head{ border-bottom: 1px solid var(--hs-hairline-soft)!important; } .agenda-v6-popover-menu .agenda-stack-body button{ border-radius: 13px!important; transition: background-color 130ms ease, opacity 130ms ease!important; } @media(hover:hover){ .agenda-v6-popover-menu .agenda-stack-body button:hover{ background: var(--hs-surface-soft)!important; } } /* ========================================================= DOCK Dimensioni lasciate praticamente identiche. ========================================================= */ /* * Home attiva: * molto leggera, non un pulsantone. */ /* ========================================================= MODAL SYSTEM ========================================================= */ /* ========================================================= FORMS ========================================================= */ /* ========================================================= BUTTONS ========================================================= */ /* ========================================================= MICROINTERACTIONS ========================================================= */ /* * Appointment e slot NON ricevono scale/transform. * Swipe e drag rimangono intatti. */ /* ========================================================= MOBILE SHEETS ========================================================= */ @media(max-width:700px){ .agenda-v6-popover-host.agenda-v6-popover-add{ left:6px!important; right:6px!important; width:auto!important; bottom: calc( 53px + env(safe-area-inset-bottom) )!important; transform:none!important; } } /* ========================================================= TABLET / DESKTOP SURFACES ========================================================= */ @media(min-width:701px){ body.agenda-mode .agenda-unified-shell, body.agenda-mode .agenda-person-week-shell{ border-radius: 16px; box-shadow: 0 1px 1px rgba(16,28,23,.025), 0 12px 36px rgba(16,28,23,.035); } body.agenda-mode .agenda-calendar-pro{ border-radius: 0 0 16px 16px!important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .agenda-45-slot{ transition:none!important; } } /* ===== HAIRCUT CURRENT TIME MINIMAL V1 ===== */ body.agenda-mode .agenda-now-line{ height:1px!important; border:0!important; background: rgba(16,28,23,.34)!important; box-shadow:none!important; opacity:1!important; } body.agenda-mode .agenda-now-line::before, body.agenda-mode .agenda-now-line::after{ display:none!important; content:none!important; } body.agenda-mode .agenda-now-line span{ background:transparent!important; color: rgba(16,28,23,.58)!important; border:0!important; box-shadow:none!important; padding:0 var(--hs-ds-space-2)!important; border-radius:0!important; font-size:8.5px!important; font-weight:600!important; letter-spacing:.01em!important; } /* ===== HAIRCUT MOBILE PANELS SCROLL + TYPE V1 ===== */ @media(max-width:700px){ /* * Tutti i pannelli Agenda diventano layer realmente * indipendenti dall'Agenda sottostante. */ /* * Scorre SOLO il contenuto del pannello. */ /* * Quando un pannello è aperto l'Agenda dietro * non deve reagire allo swipe verticale. */ /* ===================================================== TYPOGRAPHY stessa scala leggibile del resto dell'app ===================================================== */ body.agenda-mode .agenda-tree-row{ min-height: 58px!important; padding: var(--hs-ds-space-5) 12px!important; } body.agenda-mode .agenda-tree-row strong{ font-size: 14.5px!important; line-height: 1.2!important; font-weight: 700!important; } body.agenda-mode .agenda-tree-row small{ margin-top: 3px!important; font-size: var(--hs-ds-text-sm)!important; line-height: 1.3!important; opacity: .62!important; } body.agenda-mode .agenda-product-use-row strong{ font-size: var(--hs-ds-text-control)!important; } body.agenda-mode .agenda-product-use-row small{ font-size: var(--hs-ds-text-sm)!important; line-height: 1.3!important; } } /* ===== HAIRCUT WHATSAPP ASSISTANT V1 ===== */ .hs-wa-tomorrow-section{ background: rgba(116,136,124,.055); } .hs-wa-reminders{ display:grid; gap:var(--hs-ds-space-3); } .hs-wa-row{ min-height:58px; display:flex; align-items:center; gap:var(--hs-ds-space-5); padding:9px var(--hs-ds-space-5); border: 1px solid rgba(16,28,23,.055); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); } .hs-wa-copy{ min-width:0; flex:1; display:grid; gap:3px; } .hs-wa-copy strong{ font-size:var(--hs-ds-text-control); line-height:1.15; font-weight:750; letter-spacing:-.015em; } .hs-wa-copy small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hs-ds-text-label); line-height:1.2; opacity:.62; } .hs-wa-send{ flex:0 0 auto; min-width:64px; min-height:36px; padding:0 var(--hs-ds-space-6); border:0; border-radius:var(--hs-ds-radius-pill); background: var(--hs-ink,var(--hs-ds-color-ink)); color:var(--hs-ds-color-surface)!important; font:inherit; font-size:var(--hs-ds-text-label); font-weight:750; cursor:pointer; -webkit-tap-highlight-color: transparent; } .hs-wa-send:disabled{ opacity:.45; } .hs-wa-count{ min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--hs-ds-radius-pill); background: rgba(16,28,23,.08); font-size:10px; font-weight:750; } .hs-wa-empty{ padding:var(--hs-ds-space-5) var(--hs-ds-space-1); font-size:12px; color: rgba(16,28,23,.55); } @media(max-width:700px){ .hs-wa-row{ min-height:64px; padding:var(--hs-ds-space-5) 11px; } .hs-wa-copy strong{ font-size:var(--hs-ds-text-base); } .hs-wa-copy small{ font-size:var(--hs-ds-text-sm); } .hs-wa-send{ min-width:70px; min-height:40px; font-size:12px; } } /* ========================================================= HAIRCUT STUDIO · SMART RESCHEDULE V1 ========================================================= */ .hs-smart-reschedule{ width:min( 620px, calc(100vw - 32px) )!important; } .hs-smart-reschedule-current{ margin:5px 0 0; font-size:12px; line-height:1.3; color:rgba(16,28,23,.55); } .hs-smart-reschedule-controls{ display:grid; grid-template-columns:1fr 1fr; gap:var(--hs-ds-space-5); margin-top:18px; } .hs-smart-reschedule-controls label{ display:grid; gap:var(--hs-ds-space-3); } .hs-smart-reschedule-controls label > span{ font-size:var(--hs-ds-text-label); font-weight:750; color:rgba(16,28,23,.58); } .hs-smart-reschedule-controls input, .hs-smart-reschedule-controls select{ width:100%; min-height:46px; padding:0 var(--hs-ds-space-6); border:1px solid rgba(16,28,23,.10); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--hs-ink,var(--hs-ds-color-ink)); font:inherit; font-size:var(--hs-ds-text-control); } .hs-smart-reschedule-slots-section{ margin-top:18px; } .hs-smart-reschedule-slots-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-6); margin-bottom:10px; } .hs-smart-reschedule-slots-head > div{ display:grid; gap:3px; } .hs-smart-reschedule-slots-head small{ font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--hs-ds-color-field-border-focus); } .hs-smart-reschedule-slots-head strong{ font-size:16px; } .hs-smart-reschedule-slots-head > span{ font-size:var(--hs-ds-text-label); color:var(--hs-ds-color-field-border-focus); } .hs-smart-reschedule-slots{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:7px; } .hs-smart-reschedule-slot{ min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--hs-ds-space-1); padding:var(--hs-ds-space-4) var(--hs-ds-space-3); border:1px solid rgba(16,28,23,.09); border-radius:13px; background:var(--hs-ds-color-app-bg); color:var(--hs-ink,var(--hs-ds-color-ink)); cursor:pointer; -webkit-tap-highlight-color: transparent; } .hs-smart-reschedule-slot strong{ font-size:var(--hs-ds-text-control); font-weight:750; } .hs-smart-reschedule-slot small{ font-size:var(--hs-ds-text-xs); opacity:.5; } .hs-smart-reschedule-slot.is-current{ opacity:.42; } .hs-smart-reschedule-slot.is-moving{ background:var(--hs-ink,var(--hs-ds-color-ink)); color:var(--hs-ds-color-surface); } .hs-smart-reschedule-empty, .hs-smart-reschedule-loading{ grid-column:1/-1; padding:18px var(--hs-ds-space-5); border-radius:13px; background:rgba(16,28,23,.035); color:rgba(16,28,23,.55); text-align:center; font-size:12px; } @media(max-width:700px){ .hs-smart-reschedule{ max-height:88dvh!important; } .hs-smart-reschedule-controls{ grid-template-columns:1fr; } .hs-smart-reschedule-controls input, .hs-smart-reschedule-controls select{ min-height:48px; font-size:16px; } .hs-smart-reschedule-slots{ grid-template-columns: repeat(3,minmax(0,1fr)); } .hs-smart-reschedule-slot{ min-height:54px; } .hs-smart-reschedule-slot strong{ font-size:var(--hs-ds-text-base); } } /* ========================================================= HAIRCUT WHATSAPP SETTINGS + IPHONE REMINDER V1 ========================================================= */ .hs-wa-status-pill{ display:inline-flex; align-items:center; justify-content:center; padding:var(--hs-ds-space-3) 9px; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-field-ring); color:rgba(16,28,23,.62); font-size:10px; font-weight:750; white-space:nowrap; } .hs-wa-iphone-note{ margin-top:9px; padding:var(--hs-ds-space-5) 11px; border-radius:var(--hs-ds-radius-control); background:rgba(16,28,23,.035); color:rgba(16,28,23,.58); font-size:var(--hs-ds-text-sm); line-height:1.4; } .hs-wa-iphone-summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-6); padding:var(--hs-ds-space-6); border:1px solid rgba(16,28,23,.08); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); } .hs-wa-iphone-summary > div{ display:grid; gap:3px; } .hs-wa-iphone-summary small{ font-size:var(--hs-ds-text-xs); font-weight:800; letter-spacing:.06em; color:rgba(16,28,23,.45); } .hs-wa-iphone-summary strong{ font-size:var(--hs-ds-text-control); } .hs-wa-settings-card{ grid-column:1/-1; } .hs-wa-template-vars{ display:block; margin-top:6px; color:var(--hs-ds-color-field-border-focus); font-size:10.5px; line-height:1.4; } .hs-wa-settings-card .btn.small{ margin-top:8px; } /* ========================================================= HAIRCUT WHATSAPP SETTINGS CARD V2 ========================================================= */ .hs-wa-settings-card{ grid-column:1/-1!important; } .hs-wa-template-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hs-ds-space-9); margin-top:4px; } .hs-wa-settings-card .form-group{ margin-top:14px; } .hs-wa-settings-card textarea{ width:100%; min-height:118px; padding:13px var(--hs-ds-space-7); border:1px solid rgba(16,28,23,.12); border-radius:13px; background:var(--hs-ds-color-surface); color:var(--ink); line-height:1.45; resize:vertical; } .hs-wa-template-vars{ display:block; margin-top:7px; color:var(--muted); font-size:9.5px; line-height:1.45; } /* ========================================================= HS FEEDBACK CLIENTI V1 ========================================================= */ .hs-feedback-summary{ margin-top:16px; } .hs-feedback-average{ font-size:15px; margin:0 0 10px; } .hs-feedback-average strong{ font-size:20px; } .hs-feedback-list{ display:flex; flex-direction:column; gap:10px; max-height:320px; overflow:auto; } .hs-feedback-item{ border:1px solid rgba(16,28,23,.1); border-radius:12px; padding:10px 12px; } .hs-feedback-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .hs-feedback-stars{ color:var(--hs-ds-color-field-border-focus); letter-spacing:1px; } .hs-feedback-item p{ margin:6px 0 0; font-size:13px; line-height:1.4; } .hs-feedback-areas{ display:flex; flex-wrap:wrap; gap:6px; } .hs-feedback-areas span{ background:rgba(16,28,23,.08); border-radius:999px; padding:3px 10px; font-size:12px; } .hs-wa-settings-card .btn.small{ margin-top:10px; } @media(max-width:700px){ .hs-wa-template-grid{ grid-template-columns:1fr; gap:var(--hs-ds-space-4); } .hs-wa-settings-card textarea{ min-height:132px; font-size:16px!important; } } /* ========================================================= HAIRCUT UNIVERSAL PANEL SYSTEM V1 REGOLE: 1 livello = centrato 2+ livelli = ramo da sinistra mobile = un pannello grande alla volta modal = sempre centrato ========================================================= */ /* ========================================================= STACK · BASE ========================================================= */ /* ========================================================= DESKTOP / TABLET ========================================================= */ @media(min-width:701px){ /* * Singolo pannello: * sempre centrato nello schermo. */ /* * RAMI: * partono da sinistra. */ /* * Due livelli: * max 430px, ma riduce se necessario. */ /* * Tre livelli: * sempre tutti nello schermo. */ } /* ========================================================= MOBILE stile iPhone: un foglio alla volta ========================================================= */ @media(max-width:700px){ /* * Tutti i pannelli operativi, compreso Aggiungi, * sono sopra Agenda e sopra Home. */ /* * Come iOS: * il parent esiste nello stack, * ma non rimane visibile sotto al figlio. */ /* * Bottom nav resta dietro al pannello. */ } /* ========================================================= MENU ROW · TYPOGRAPHY UNIVERSALE ========================================================= */ body.agenda-mode .agenda-tree-row{ min-height: 64px!important; padding: 11px var(--hs-ds-space-6)!important; } body.agenda-mode .agenda-tree-row strong{ font-size: var(--hs-ds-text-control)!important; line-height: 1.2!important; } body.agenda-mode .agenda-tree-row small{ margin-top: 3px!important; font-size: var(--hs-ds-text-label)!important; line-height: 1.3!important; opacity: .60!important; } @media(max-width:700px){ body.agenda-mode .agenda-tree-row{ min-height: 70px!important; padding: 13px var(--hs-ds-space-6)!important; } body.agenda-mode .agenda-tree-row strong{ font-size: var(--hs-ds-text-base)!important; } body.agenda-mode .agenda-tree-row small{ font-size: var(--hs-ds-text-sm)!important; } } /* ========================================================= MODAL UNIVERSALI niente più bottom-sheet a metà ========================================================= */ @media(max-width:700px){ .team-profile-modal, .service-editor-modal, .home-panel-modal{ width: calc( 100vw - 16px )!important; max-width: none!important; height: auto!important; max-height: calc( 100dvh - 82px )!important; margin: auto!important; padding: 18px 16px!important; border-radius: var(--hs-ds-radius-xl); overflow-y: auto!important; -webkit-overflow-scrolling: touch!important; } } /* ========================================================= WAITLIST CLEAN ========================================================= */ .agenda-waitlist-clean{ display: grid; gap: var(--hs-ds-space-4); } .agenda-waitlist-clean-row{ display: flex; flex-direction: column; gap: var(--hs-ds-space-2); padding: var(--hs-ds-space-7); border: 1px solid var(--hs-ds-color-hairline); border-radius: 15px; background: var(--hs-ds-color-surface); } .agenda-waitlist-clean-row strong{ font-size: var(--hs-ds-text-control); font-weight: 750; } .agenda-waitlist-clean-row small{ color: rgba(16,28,23,.52); font-size: var(--hs-ds-text-label); line-height: 1.35; } /* ========================================================= REMINDER CLEAN ========================================================= */ .hs-reminder-today-clean{ display: flex; align-items: center; justify-content: space-between; gap: var(--hs-ds-space-7); padding: 13px var(--hs-ds-space-7); border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-md); background: var(--hs-ds-color-surface); } .hs-reminder-today-clean > div{ display: grid; gap: 3px; } .hs-reminder-today-clean small, .hs-reminder-clean-card small{ color: var(--hs-secondary,#627068); font-size: var(--hs-ds-text-xs); font-weight: 800; letter-spacing: .08em; } .hs-reminder-today-clean strong{ font-size: var(--hs-ds-text-control); } .hs-reminder-today-clean > span{ padding: 5px var(--hs-ds-space-4); border-radius: var(--hs-ds-radius-pill); background: var(--hs-surface-deep,var(--hs-ds-color-surface-deep)); color: var(--hs-secondary,#627068); font-size: 10px; font-weight: 750; } .hs-reminder-clean-card{ display: grid; gap: var(--hs-ds-space-3); margin-top: 18px; padding: 18px; border: 1px solid var(--hs-ds-color-hairline); border-radius: 17px; background: var(--hs-surface-soft,var(--hs-ds-color-surface-soft)); } .hs-reminder-clean-card strong{ font-size: 20px; } .hs-reminder-clean-card span{ margin-top: 4px; color: rgba(16,28,23,.55); font-size: 12px; line-height: 1.45; } /* ========================================================= HAIRCUT SINGLE PANEL ENGINE V1 UNA SOLA TAB SEMPRE. Stack = cronologia, non layout. ========================================================= */ /* ========================================================= ROOT ========================================================= */ body.agenda-mode .agenda-single-panel-stack{ position:fixed!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width: min( 680px, calc(100vw - 40px) )!important; height: min( 720px, calc(100dvh - 120px) )!important; max-width:none!important; max-height:none!important; transform: translate( -50%, -50% )!important; margin:0!important; z-index: 30000!important; pointer-events: auto!important; } /* ========================================================= PANEL ========================================================= */ /* ========================================================= HEADER STANDARD ========================================================= */ /* ========================================================= BODY scrolla sempre ========================================================= */ /* * Questo risolve direttamente il problema: * Gestionale arrivava solo fino ad Attività * perché il body non aveva uno scroll * affidabile dentro il pannello. */ /* ========================================================= RIGHE STANDARD ========================================================= */ /* * Azzeriamo TUTTE le vecchie geometrie * speciali del root ADD. */ body.agenda-mode .agenda-popover-root-add.agenda-single-panel-stack{ top: 50%!important; left: 50%!important; right: auto!important; bottom: auto!important; width: min( 680px, calc(100vw - 40px) )!important; height: min( 720px, calc(100dvh - 120px) )!important; max-height: none!important; transform: translate( -50%, -50% )!important; } /* niente handle da bottom sheet */ /* ========================================================= MOBILE quasi full-screen ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-single-panel-stack, body.agenda-mode .agenda-popover-root-add.agenda-single-panel-stack{ top: max( 8px, env(safe-area-inset-top) )!important; left: 8px!important; right: 8px!important; bottom: calc( 58px + env(safe-area-inset-bottom) )!important; width: auto!important; height: auto!important; max-height: none!important; transform: none!important; z-index: 30000!important; } /* * Home / nav resta fisicamente sotto. */ } /* ========================================================= MODALI DI AZIONE temporaneamente stessa geometria del pannello. Prossimo step: contenuto direttamente nel panel. ========================================================= */ /* ========================================================= HAIRCUT BODY PANEL PORTAL V1 LAYER CONTRACT --------------------------------------------------------- Agenda = background Portal = 50000 Nav = 55000 Modal = 60000 MAI PIÙ pannelli dipendenti dal popover host Agenda. ========================================================= */ /* ========================================================= 1 · NON DISABILITARE MAI IL CONTENITORE AGENDA ========================================================= */ body.agenda-panel-open .agenda-main, body.agenda-panel-open .agenda-calendar-pro, body.agenda-panel-open .agenda-person-week-scroll, body.agenda-panel-open .agenda-board{ pointer-events: auto!important; } /* * Il freeze reale viene ottenuto dal layer sopra, * NON spegnendo l'Agenda. */ body.agenda-panel-open{ overflow: hidden!important; overscroll-behavior: none!important; } /* ========================================================= 2 · BODY PORTAL ========================================================= */ /* ========================================================= 3 · FULL SCREEN LAYER ========================================================= */ /* ========================================================= 4 · BACKDROP ========================================================= */ /* ========================================================= 5 · PANNELLO ========================================================= */ /* ========================================================= 6 · HEADER ========================================================= */ /* ========================================================= 7 · SOLO IL BODY DEL PANEL SCROLLA ========================================================= */ /* ========================================================= 8 · NAV SEMPRE SOPRA IL BACKDROP ========================================================= */ /* ========================================================= 9 · MODALI SOPRA TUTTO ========================================================= */ /* ========================================================= 10 · IL VECCHIO HOST NON GOVERNA PIÙ I PANEL ========================================================= */ /* * Il vecchio host resta valido esclusivamente * per Calendario e Vista Agenda. * * Non contiene più Aggiungi / Gestionale / * Waitlist / Oggi. */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HAIRCUT PORTAL VISIBILITY FIX V1 Il portal deve ignorare COMPLETAMENTE la vecchia geometria degli stack Agenda. ========================================================= */ /* ========================================================= SHELL ========================================================= */ /* * Forziamo anche ogni profondità. * Nessun vecchio height:0 può più vincere. */ /* ========================================================= CARD ========================================================= */ /* ========================================================= BODY SCROLL ========================================================= */ /* ========================================================= BACKDROP ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HAIRCUT UI TYPOGRAPHY + INLINE TABS V1 ========================================================= */ :root{ --hs-text-primary-size:15px; --hs-text-primary-line:1.35; --hs-text-secondary-size:11.5px; --hs-text-secondary-line:1.35; --hs-title-size:18px; --hs-title-mobile-size:19px; } /* ========================================================= PRIMARY TYPOGRAPHY ========================================================= */ /* * Testo principale: * menu, pulsanti, righe operative, form. */ body{ font-size: var(--hs-text-primary-size); } button, input, select, textarea{ font-family: inherit; } button, input, select{ font-size: var(--hs-text-primary-size); } .form-group label, .setting-row > label, .agenda-tree-label{ font-size: var(--hs-text-primary-size)!important; line-height: var(--hs-text-primary-line)!important; } /* ========================================================= SECONDARY TYPOGRAPHY ========================================================= */ small, .muted, .eyebrow, .form-hint, .setting-help, .setting-description, .agenda-tree-row small{ font-size: var(--hs-text-secondary-size)!important; line-height: var(--hs-text-secondary-line)!important; } /* * Manteniamo i secondari visivamente leggeri. */ .muted, .form-hint, .setting-help, .setting-description{ color: rgba(16,28,23,.52)!important; } /* * Avviso non bloccante nei form (es. coperti ristorante superati, * 8/10 richiesta di Luca): stesso peso tipografico dei form-hint, * ma col colore "danger" del design system per farlo notare senza * essere un errore bloccante. */ .hs-field-warning{ font-size: var(--hs-text-secondary-size); line-height: var(--hs-text-secondary-line); color: var(--hs-ds-color-danger); margin-top: -8px; } /* ========================================================= PANEL TITLES ========================================================= */ /* ========================================================= VISTA AGENDA + CALENDARIO DESKTOP ========================================================= */ /* * Vecchio host: * da ora Vista e Calendario hanno una * geometria coerente con i nuovi pannelli. */ body.agenda-mode .agenda-v6-popover-host{ z-index: 45000!important; } body.agenda-mode .agenda-v6-popover-host .agenda-v6-native-popover{ width: min( 720px, calc(100vw - 56px) )!important; max-width: none!important; max-height: min( 720px, calc(100dvh - 120px) )!important; border: 1px solid rgba(16,28,23,.08)!important; border-radius: 22px!important; background: var(--hs-ds-color-surface)!important; box-shadow: 0 26px 80px var(--hs-ds-color-field-border)!important; overflow: hidden!important; } /* ========================================================= INLINE HEADER ========================================================= */ /* ========================================================= INLINE BODY ========================================================= */ /* ========================================================= VISTA AGENDA CONTROLS ========================================================= */ /* * Gruppi/tabs più ordinati. */ body.agenda-mode .agenda-v6-popover-host .agenda-view-tabs, body.agenda-mode .agenda-v6-popover-host .agenda-staff-filter-tabs, body.agenda-mode .agenda-v6-popover-host .agenda-personal-range-tabs{ gap: var(--hs-ds-space-4)!important; } /* ========================================================= MOBILE Vista Agenda + Calendario quasi full-screen ========================================================= */ @media(max-width:700px){ :root{ --hs-text-primary-size:15.5px; --hs-text-secondary-size:11.5px; } body.agenda-mode .agenda-v6-popover-host{ position: fixed!important; top: calc( env(safe-area-inset-top,0px) + 68px )!important; left: 8px!important; right: 8px!important; bottom: calc( env(safe-area-inset-bottom,0px) + 70px )!important; width: auto!important; height: auto!important; max-width: none!important; max-height: none!important; margin: 0!important; transform: none!important; z-index: 45000!important; pointer-events: auto!important; } body.agenda-mode .agenda-v6-popover-host .agenda-v6-native-popover{ position: absolute!important; inset: 0!important; width: 100%!important; height: 100%!important; max-width: none!important; max-height: none!important; margin: 0!important; border-radius: 22px!important; display: flex!important; flex-direction: column!important; overflow: hidden!important; } } /* ========================================================= MOBILE APP-LIKE TEXT ========================================================= */ @media(max-width:700px){ .agenda-tree-label, .form-group label{ font-size: 15.5px!important; } small, .muted, .form-hint, .setting-help, .setting-description{ font-size: var(--hs-ds-text-sm)!important; } } /* ========================================================= HAIRCUT CALENDAR SLIM V1 ========================================================= */ /* pannello calendario leggermente più basso */ body.agenda-mode .agenda-v6-popover-host .agenda-v6-native-calendar{ width: min( 760px, calc(100vw - 56px) )!important; max-height: 420px!important; } /* meno aria verticale */ body.agenda-mode .agenda-v6-popover-host .agenda-v6-native-calendar .agenda-inline-panel-body{ padding: var(--hs-ds-space-5) var(--hs-ds-space-8) var(--hs-ds-space-7)!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-v6-popover-host .agenda-v6-native-calendar{ width:100%!important; max-height:none!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-inline-panel-body{ padding: var(--hs-ds-space-6) var(--hs-ds-space-5)!important; } } /* ========================================================= HAIRCUT CALENDAR V2 · SLIM WIDE Solo calendario APERTO. Non modifica barra giorno Agenda. ========================================================= */ /* ========================================================= DESKTOP · PIÙ LARGO, MOLTO PIÙ SLIM ========================================================= */ body.agenda-mode .agenda-v6-popover-calendar .agenda-v6-native-popover{ width: min( 840px, calc(100vw - 64px) )!important; height: auto!important; max-height: min( 500px, calc(100dvh - 130px) )!important; } /* corpo calendario */ /* fallback: eventuale strong del mese */ body.agenda-mode .agenda-v6-popover-calendar .agenda-month-weekdays{ font-size: 9.5px!important; line-height: 1!important; } body.agenda-mode .agenda-v6-popover-calendar .agenda-month-grid{ gap: var(--hs-ds-space-2)!important; } /* ========================================================= MOBILE quasi tutta larghezza, ma NON enorme in altezza ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-v6-popover-calendar{ top: calc( env(safe-area-inset-top,0px) + 76px )!important; left: 6px!important; right: 6px!important; bottom: auto!important; width: auto!important; height: auto!important; max-height: calc( 100dvh - env(safe-area-inset-top,0px) - 160px )!important; } body.agenda-mode .agenda-v6-popover-calendar .agenda-v6-native-popover{ position: relative!important; inset: auto!important; width: 100%!important; height: auto!important; max-height: calc( 100dvh - env(safe-area-inset-top,0px) - 160px )!important; margin: 0!important; } } /* ========================================================= HAIRCUT · CANONICAL PANEL UI V1 CONTRATTO UFFICIALE: Add / Gestionale / branches / create menus usano ESATTAMENTE lo stesso componente. ========================================================= */ /* ========================================================= PANEL SHELL ========================================================= */ /* * Aggiungi NON ha più una geometria propria. */ /* ========================================================= PANEL ========================================================= */ /* ========================================================= HEADER ========================================================= */ /* BACK + CLOSE */ /* ========================================================= BODY ========================================================= */ /* ========================================================= UNIVERSAL MENU ========================================================= */ /* ========================================================= UNIVERSAL ROW ========================================================= */ /* ========================================================= LEFT SIDE ========================================================= */ /* * Qualunque vecchio subtitle rimasto nel DOM * NON appartiene più ai menu del panel. */ /* ========================================================= CREATE ROW ========================================================= */ /* ========================================================= RIGHT SIDE ========================================================= */ /* ========================================================= BADGE ========================================================= */ /* ========================================================= INTERACTION ========================================================= */ /* ========================================================= MOBILE ========================================================= */ /* HOVER */ /* MOBILE */ /* ========================================================= HAIRCUT · CANONICAL MODAL SYSTEM V2 CONTRATTO: - backdrop unico - modal sopra panel/nav - card centrata - solo card scrollabile - header sticky - X uniforme - mobile quasi full-screen ========================================================= */ /* ========================================================= BACKDROP / LAYER ========================================================= */ /* ========================================================= CARD ========================================================= */ /* ========================================================= HEADER rimane visibile anche nei form lunghi ========================================================= */ /* contenuto titolo */ /* ========================================================= EYEBROW ========================================================= */ /* ========================================================= TITLE ========================================================= */ /* ========================================================= CLOSE ========================================================= */ /* ========================================================= FORMS ========================================================= */ /* ========================================================= BUTTON / ACTION AREAS niente elementi che escano dalla card ========================================================= */ /* ========================================================= HOVER ========================================================= */ /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .team-profile-modal, .service-editor-modal, .home-panel-modal{ width: calc(100vw - 16px)!important; max-width: none!important; height: auto!important; max-height: calc( 100dvh - max( 16px, env(safe-area-inset-top,0px) ) - max( 16px, env(safe-area-inset-bottom,0px) ) )!important; margin: auto!important; border-radius: var(--hs-ds-radius-lg); } } /* ========================================================= VERY SMALL PHONE ========================================================= */ /* ========================================================= HAIRCUT · FINAL AGENDA NAV CONTRACT V2 ========================================================= */ /* --------------------------------------------------------- DRAG Il JS NON crea più ghost. Questo è soltanto un fail-safe. --------------------------------------------------------- */ .agenda-drag-ghost{ display:none!important; } /* * La card originale resta visibile durante il drag, * senza sembrare un oggetto flottante. */ .agenda-drag-source{ opacity:.48!important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ /* ========================================================= HAIRCUT · DRAG FOOTPRINT PREVIEW V1 ========================================================= */ body.agenda-mode .agenda-drop-hover{ position:relative!important; z-index:4!important; outline:0!important; background: rgba(16,28,23,.075)!important; box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink)!important; } /* primo slot */ body.agenda-mode .agenda-drop-hover-first{ box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink), inset 0 2px 0 var(--hs-ds-color-ink)!important; border-radius: 8px 8px 0 0!important; } /* ultimo slot */ body.agenda-mode .agenda-drop-hover-last{ box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink), inset 0 -2px 0 var(--hs-ds-color-ink)!important; border-radius: 0 0 8px 8px!important; } /* appuntamento da un solo slot */ body.agenda-mode .agenda-drop-hover-first.agenda-drop-hover-last{ box-shadow: inset 0 0 0 2px var(--hs-ds-color-ink)!important; border-radius: var(--hs-ds-radius-xs)!important; } /* * Se verso la fine giornata non ci sono abbastanza * slot consecutivi per mostrare l'intera durata. */ body.agenda-mode .agenda-drop-hover-invalid{ background: rgba(140,55,42,.09)!important; box-shadow: inset 0 0 0 2px rgba(140,55,42,.72)!important; } /* ========================================================= HAIRCUT · REAL DRAG PREVIEW V2 ========================================================= */ .agenda-drag-preview{ position:fixed!important; z-index:60000!important; margin:0!important; padding:0!important; transform: translate(-50%,-50%)!important; pointer-events:none!important; overflow:hidden!important; box-sizing:border-box!important; opacity:.92!important; border-radius:var(--hs-ds-radius-xs)!important; background:var(--hs-ds-color-surface)!important; box-shadow: 0 12px 30px rgba(16,28,23,.22)!important; transition:none!important; } /* * Copia visualmente il contenuto della card. */ .agenda-drag-preview .agenda-appointment-name, .agenda-drag-preview .agenda-appointment-meta, .agenda-drag-preview .agenda-appointment-note{ visibility:visible!important; } /* * Vecchio ghost definitivamente disabilitato. */ .agenda-drag-ghost{ display:none!important; } /* * Card originale attenuata nello slot di partenza. */ body.agenda-mode .agenda-drag-source{ opacity:.42!important; } /* ========================================================= HAIRCUT · PREMIUM GRID TARGET + CALENDAR NAV V2.2 ========================================================= */ /* ========================================================= DRAG ========================================================= */ /* * Nessun cartellone che segue il mouse. */ .agenda-drag-preview, .agenda-drag-ghost{ display:none!important; } /* * Card originale appena attenuata. */ body.agenda-mode .agenda-drag-source{ opacity:.42!important; } /* ========================================================= TARGET PREMIUM NELLA GRIGLIA ========================================================= */ body.agenda-mode .agenda-drop-hover{ position:relative!important; z-index:8!important; outline:0!important; background: rgba(16,28,23,.035)!important; border-radius:0!important; box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink)!important; } /* * Primo slot dell'appuntamento. */ body.agenda-mode .agenda-drop-hover-first{ box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink), inset 0 2px 0 var(--hs-ds-color-ink)!important; } /* * Ultimo slot dell'appuntamento. */ body.agenda-mode .agenda-drop-hover-last{ box-shadow: inset 2px 0 0 var(--hs-ds-color-ink), inset -2px 0 0 var(--hs-ds-color-ink), inset 0 -2px 0 var(--hs-ds-color-ink)!important; } /* * Appuntamento 45 minuti: * un solo riquadro completo. */ body.agenda-mode .agenda-drop-hover-first.agenda-drop-hover-last{ border-radius: 7px!important; box-shadow: inset 0 0 0 2px var(--hs-ds-color-ink)!important; } /* * Appuntamento multi-slot. */ body.agenda-mode .agenda-drop-hover-first:not( .agenda-drop-hover-last ){ border-radius: 7px 7px 0 0!important; } body.agenda-mode .agenda-drop-hover-last:not( .agenda-drop-hover-first ){ border-radius: 0 0 7px 7px!important; } /* * Frecce semplici{ position:static!important; inset:auto!important; transform:none!important; width:26px!important; min-width:26px!important; height:32px!important; min-height:32px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--hs-ds-color-ink)!important; opacity:1!important; visibility:visible!important; font-size:var(--hs-ds-text-xl)!important; font-weight:900!important; line-height:1!important; -webkit-text-stroke: .55px var(--hs-ds-color-ink)!important; } /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HAIRCUT · GRID SNAP PREVIEW + REAL ARROWS V1 ========================================================= */ /* ========================================================= SNAP PREVIEW Non segue il cursore. È fisicamente posizionata SOPRA gli slot target. ========================================================= */ .agenda-drop-preview-box{ position:fixed!important; z-index:120!important; margin:0!important; padding:0!important; box-sizing: border-box!important; pointer-events: none!important; border: 2px solid var(--hs-ds-color-ink)!important; border-radius: var(--hs-ds-radius-xs)!important; background: rgba(16,28,23,.055)!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 5px 18px rgba(16,28,23,.08)!important; opacity: 1!important; transition: left 55ms ease, top 55ms ease, width 55ms ease, height 55ms ease!important; } /* * Se non entra completamente prima della * fine della giornata. */ .agenda-drop-preview-box.is-invalid{ border-color: rgba(130,48,38,.8)!important; background: rgba(130,48,38,.07)!important; } /* * Gli slot sotto possono continuare ad avere * il feedback leggero, ma il protagonista * è il riquadro unico sopra. */ body.agenda-mode .agenda-drop-hover{ outline:0!important; background: rgba(16,28,23,.025)!important; box-shadow: none!important; } body.agenda-mode .agenda-drop-hover-first, body.agenda-mode .agenda-drop-hover-last, body.agenda-mode .agenda-drop-hover-first.agenda-drop-hover-last{ box-shadow: none!important; } /* ========================================================= MOBILE ========================================================= */ /* ========================================================= HAIRCUT · ROOT FIX V1 REAL V6 HEADER + NATIVE CALENDAR + LANE SNAP ========================================================= */ /* ========================================================= A · DRAG SNAP PREVIEW ========================================================= */ /* * Disattiviamo i vecchi tentativi visivi sugli slot. * Gli slot servono solo al calcolo/hit-test. */ body.agenda-mode .agenda-drop-hover, body.agenda-mode .agenda-drop-hover-first, body.agenda-mode .agenda-drop-hover-last{ outline:0!important; box-shadow:none!important; background:transparent!important; } /* * Preview vera: dentro la stessa lane dell'appuntamento. */ body.agenda-mode .agenda-lane-snap-preview{ position:absolute!important; left:2px!important; right:2px!important; z-index:40!important; margin:0!important; padding:0!important; box-sizing:border-box!important; pointer-events:none!important; border: 2px solid var(--hs-ds-color-ink)!important; border-radius: var(--hs-ds-radius-xs)!important; background: rgba(16,28,23,.055)!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32)!important; opacity:1!important; transition: top 65ms ease, height 65ms ease!important; } /* * Fine giornata / footprint incompleto. */ body.agenda-mode .agenda-lane-snap-preview.is-invalid{ border-color: rgba(144,54,42,.82)!important; background: rgba(144,54,42,.07)!important; } /* * La card originale resta appena attenuata. */ body.agenda-mode .agenda-drag-source{ opacity:.38!important; } /* vecchi ghost / floating preview OFF */ .agenda-drag-preview, .agenda-drag-ghost, .agenda-drop-preview-box{ display:none!important; } /* ========================================================= C · CALENDARIO APERTO REALE ========================================================= */ /* * IMPORTANTE: * il popup reale è .agenda-v6-native-calendar. * NON .agenda-frame-calendar. */ /* * Mese centrato sopra. * Neutralizza la vecchia grid 38px 1fr 38px. */ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-title-row{ display:block!important; width:100%!important; min-height:0!important; margin:0 0 10px!important; padding:0!important; text-align:center!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-title{ display:block!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; color:var(--hs-ds-color-ink)!important; font-size:16px!important; font-weight:780!important; line-height:1.2!important; text-align:center!important; text-transform:capitalize!important; white-space:nowrap!important; } /* * ‹ [1–6][7–13][14–20][21–27][28–30] › */ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav{ width:100%!important; display:grid!important; grid-template-columns: 24px minmax(0,1fr) 24px!important; align-items:center!important; column-gap:3px!important; margin:0!important; padding:0!important; } /* * Blocchi beige. */ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav > .agenda-month-strip-weeks{ width:100%!important; min-width:0!important; margin:0!important; padding:0!important; } /* * Frecce mese: * vicinissime ai blocchi beige, * nessun pulsantone. */ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav > button.agenda-month-strip-arrow{ position:static!important; inset:auto!important; transform:none!important; width:24px!important; min-width:24px!important; height:34px!important; min-height:34px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--hs-ds-color-ink)!important; opacity:1!important; visibility:visible!important; font-size:23px!important; font-weight:900!important; line-height:1!important; -webkit-text-stroke: .7px var(--hs-ds-color-ink)!important; } /* * Il contenuto del calendario deve usare * tutta la larghezza del pannello. */ body.agenda-mode .agenda-v6-native-calendar .agenda-inline-panel-body{ width:100%!important; padding: var(--hs-ds-space-8) 22px var(--hs-ds-space-9)!important; box-sizing:border-box!important; } /* ========================================================= D · MOBILE ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav{ grid-template-columns: 21px minmax(0,1fr) 21px!important; column-gap:var(--hs-ds-space-1)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav > button.agenda-month-strip-arrow{ width:21px!important; min-width:21px!important; font-size:20px!important; } } /* ========================================================= HAIRCUT STUDIO · VISUAL NORMALIZATION SHORT V1 Spotlight + Oggi ========================================================= */ /* SPOTLIGHT */ .agenda-popover-root-spotlight .agenda-spotlight-search-box{ min-height:48px; display:flex; align-items:center; gap:var(--hs-ds-space-5); margin-bottom:10px; padding:0 13px; border:1px solid rgba(16,28,23,.08); border-radius:15px; background:#f7f6f2; } .agenda-popover-root-spotlight .agenda-spotlight-search-box>span{ color:rgba(16,28,23,.42); font-size:17px; line-height:1; } .agenda-popover-root-spotlight .agenda-spotlight-search-box>input{ width:100%; min-width:0; height:46px; margin:0!important; padding:0!important; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; color:var(--hs-ds-color-ink); font:inherit; font-size:var(--hs-ds-text-control); } .agenda-popover-root-spotlight .agenda-spotlight-results-v7{ display:grid!important; grid-template-columns:1fr!important; gap:var(--hs-ds-space-4)!important; padding:0!important; } .agenda-popover-root-spotlight .agenda-spotlight-result-v7{ min-height:58px; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:var(--hs-ds-space-6)!important; padding:var(--hs-ds-space-6) var(--hs-ds-space-7)!important; border:1px solid var(--hs-ds-color-hairline)!important; border-radius:15px!important; background:var(--hs-ds-color-surface)!important; box-shadow:none!important; text-align:left!important; } .agenda-popover-root-spotlight .agenda-spotlight-result-v7:hover{ background:#faf9f6!important; } .agenda-popover-root-spotlight .agenda-spotlight-result-main strong{ font-size:var(--hs-ds-text-control)!important; line-height:1.2!important; font-weight:750!important; } .agenda-popover-root-spotlight .agenda-spotlight-result-main small{ margin-top:3px!important; color:rgba(16,28,23,.52)!important; font-size:var(--hs-ds-text-label)!important; line-height:1.3!important; } .agenda-popover-root-spotlight .agenda-spotlight-result-type{ padding:5px var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); background:#f2f1ed; color:rgba(16,28,23,.62)!important; font-size:10px!important; line-height:1!important; font-weight:650!important; } .agenda-popover-root-spotlight .agenda-spotlight-empty{ min-height:74px; font-size:var(--hs-ds-text-label)!important; color:var(--hs-ds-color-field-border-focus)!important; } /* OGGI */ .agenda-popover-root-today .agenda-staff-today, .agenda-popover-root-staff-todo .agenda-staff-today{ display:grid!important; gap:var(--hs-ds-space-5)!important; } .agenda-popover-root-today .agenda-staff-today-section, .agenda-popover-root-staff-todo .agenda-staff-today-section{ overflow:hidden; border:1px solid var(--hs-ds-color-field-ring)!important; border-radius:15px!important; background:var(--hs-ds-color-surface)!important; box-shadow:none!important; } .agenda-popover-root-today .agenda-staff-today-title, .agenda-popover-root-staff-todo .agenda-staff-today-title{ min-height:45px; padding:var(--hs-ds-space-6) var(--hs-ds-space-7) var(--hs-ds-space-5)!important; border-bottom:1px solid rgba(16,28,23,.055); } .agenda-popover-root-today .agenda-staff-today-title strong, .agenda-popover-root-staff-todo .agenda-staff-today-title strong{ font-size:var(--hs-ds-text-md)!important; line-height:1.15!important; font-weight:750!important; } .agenda-popover-root-today .agenda-quick-work-list, .agenda-popover-root-staff-todo .agenda-quick-work-list{ display:grid!important; gap:var(--hs-ds-space-4)!important; margin:10px 12px 12px!important; } .agenda-popover-root-today .agenda-quick-work-row, .agenda-popover-root-staff-todo .agenda-quick-work-row{ min-height:56px; display:grid!important; grid-template-columns:44px minmax(0,1fr) 44px!important; align-items:center!important; gap:9px!important; padding:var(--hs-ds-space-4) 9px!important; border:1px solid var(--hs-ds-color-hairline)!important; border-radius:13px!important; background:var(--hs-ds-color-surface)!important; } /* HS TASK ROW LAYOUT V2 * spunta | nome | tre puntini: margini laterali uguali, * il pulsante a destra resta dentro la card. */ .agenda-popover-root-today .agenda-quick-more, .agenda-popover-root-staff-todo .agenda-quick-more{ font-size:var(--hs-ds-text-label)!important; letter-spacing:1.5px!important; line-height:1!important; } .agenda-popover-root-today .agenda-quick-work-main, .agenda-popover-root-staff-todo .agenda-quick-work-main{ min-width:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:3px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; text-align:left!important; } .agenda-popover-root-today .agenda-quick-work-main strong, .agenda-popover-root-staff-todo .agenda-quick-work-main strong{ font-size:var(--hs-ds-text-md)!important; line-height:1.2!important; font-weight:750!important; } .agenda-popover-root-today .agenda-quick-work-main small, .agenda-popover-root-staff-todo .agenda-quick-work-main small{ color:rgba(16,28,23,.50)!important; font-size:10.5px!important; line-height:1.25!important; } .agenda-popover-root-today .agenda-quick-checklists, .agenda-popover-root-staff-todo .agenda-quick-checklists{ display:grid!important; gap:var(--hs-ds-space-4)!important; margin:10px 12px 12px!important; } .agenda-popover-root-today .agenda-quick-checklist, .agenda-popover-root-staff-todo .agenda-quick-checklist{ margin:0!important; border:1px solid var(--hs-ds-color-hairline)!important; border-radius:13px!important; background:var(--hs-ds-color-surface)!important; box-shadow:none!important; } .agenda-popover-root-today .agenda-quick-checklist>summary, .agenda-popover-root-staff-todo .agenda-quick-checklist>summary{ min-height:54px!important; padding:var(--hs-ds-space-5) var(--hs-ds-space-6)!important; } .agenda-popover-root-today .agenda-quick-add-last, .agenda-popover-root-staff-todo .agenda-quick-add-last{ width:calc(100% - 24px)!important; min-height:40px!important; margin:0 12px 12px!important; border:1px dashed rgba(16,28,23,.13)!important; border-radius:var(--hs-ds-radius-control)!important; background:#faf9f6!important; } .agenda-popover-root-today .agenda-inline-kpi-grid, .agenda-popover-root-staff-todo .agenda-inline-kpi-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:var(--hs-ds-space-4)!important; margin:10px 12px 12px!important; } .agenda-popover-root-today .agenda-inline-kpi-grid>div, .agenda-popover-root-staff-todo .agenda-inline-kpi-grid>div{ min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:var(--hs-ds-space-2); padding:var(--hs-ds-space-5) 11px; border:1px solid var(--hs-ds-color-hairline); border-radius:13px; background:#f8f7f4; } .agenda-popover-root-today .agenda-inline-kpi-grid small, .agenda-popover-root-staff-todo .agenda-inline-kpi-grid small{ color:var(--hs-ds-color-field-border-focus)!important; font-size:var(--hs-ds-text-xs)!important; line-height:1.1!important; font-weight:700!important; } .agenda-popover-root-today .agenda-inline-kpi-grid strong, .agenda-popover-root-staff-todo .agenda-inline-kpi-grid strong{ font-size:var(--hs-ds-text-lg)!important; line-height:1!important; font-weight:750!important; } /* ========================================================= HAIRCUT STUDIO · TODAY POLISH V2 More internal breathing + symmetric create actions ========================================================= */ .agenda-popover-root-today .agenda-staff-today-title, .agenda-popover-root-staff-todo .agenda-staff-today-title{ padding:var(--hs-ds-space-7) var(--hs-ds-space-8) var(--hs-ds-space-6)!important; } .agenda-popover-root-today .hs-reminder-today-clean, .agenda-popover-root-staff-todo .hs-reminder-today-clean{ margin:12px 14px 14px!important; } .agenda-popover-root-today .hs-wa-empty, .agenda-popover-root-staff-todo .hs-wa-empty{ margin:12px 14px 14px!important; } .agenda-popover-root-today .agenda-quick-work-list, .agenda-popover-root-staff-todo .agenda-quick-work-list{ margin:12px 14px 10px!important; } .agenda-popover-root-today .agenda-quick-checklists, .agenda-popover-root-staff-todo .agenda-quick-checklists{ margin:12px 14px 10px!important; } .agenda-popover-root-today .agenda-monitor-clear, .agenda-popover-root-staff-todo .agenda-monitor-clear{ margin:12px 14px 10px!important; } .agenda-popover-root-today .agenda-quick-add-last, .agenda-popover-root-staff-todo .agenda-quick-add-last{ width:calc(100% - 28px)!important; margin:0 14px 14px!important; } .agenda-popover-root-today .agenda-inline-kpi-grid, .agenda-popover-root-staff-todo .agenda-inline-kpi-grid{ margin:12px 14px 14px!important; } /* ========================================================= HAIRCUT DESIGN SYSTEM · FOUNDATION V1 CANONICAL SOURCE OF TRUTH REGOLA: - nuovi componenti usano --hs-ds-* - token legacy restano come alias compatibili - nessun valore visuale viene modificato in questa fase ========================================================= */ :root{ /* ------------------------------------------------------- FONT ------------------------------------------------------- */ --hs-ds-font-sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ------------------------------------------------------- COLORS · CORE ------------------------------------------------------- */ --hs-ds-color-body-ink:#17221d; --hs-ds-color-ink:#101c17; --hs-ds-color-accent:#234b3b; --hs-ds-color-gold:#c7984c; --hs-ds-color-danger:#9b3f35; --hs-ds-color-success:#287350; --hs-ds-color-on-gold:#17130c; /* ------------------------------------------------------- COLORS · SURFACES ------------------------------------------------------- */ --hs-ds-color-page-legacy:#f4f1e9; --hs-ds-color-card-legacy:#fffdf8; --hs-ds-color-app-bg:#f7f5ef; --hs-ds-color-surface:#ffffff; --hs-ds-color-surface-soft:#f6f4ef; --hs-ds-color-surface-deep:#efede7; --hs-ds-color-control-secondary:#e6e2d8; /* ------------------------------------------------------- COLORS · TEXT ------------------------------------------------------- */ --hs-ds-color-muted:#6e756f; --hs-ds-color-secondary: rgba(16,28,23,.56); --hs-ds-color-tertiary: rgba(16,28,23,.38); /* ------------------------------------------------------- COLORS · BORDERS ------------------------------------------------------- */ --hs-ds-color-line:#dedbd2; --hs-ds-color-hairline: rgba(16,28,23,.065); --hs-ds-color-hairline-soft: rgba(16,28,23,.045); /* ------------------------------------------------------- AGENDA ------------------------------------------------------- */ --hs-ds-color-now:#74887c; /* ------------------------------------------------------- RADIUS ------------------------------------------------------- */ --hs-ds-radius-xs:8px; --hs-ds-radius-control:12px; --hs-ds-radius-sm:10px; --hs-ds-radius-md:14px; --hs-ds-radius-lg:20px; --hs-ds-radius-xl:24px; --hs-ds-radius-pill:999px; --hs-ds-radius-circle:50%; /* ------------------------------------------------------- SPACING ------------------------------------------------------- */ --hs-ds-space-1:2px; --hs-ds-space-2:4px; --hs-ds-space-3:6px; --hs-ds-space-4:8px; --hs-ds-space-5:10px; --hs-ds-space-6:12px; --hs-ds-space-7:14px; --hs-ds-space-8:16px; --hs-ds-space-control-x:15px; --hs-ds-space-9:20px; --hs-ds-space-10:24px; --hs-ds-space-11:32px; /* ------------------------------------------------------- TYPOGRAPHY SCALE ------------------------------------------------------- */ --hs-ds-text-xs:9px; --hs-ds-text-sm:11.5px; --hs-ds-text-md:13px; --hs-ds-text-base:15px; --hs-ds-text-lg:18px; --hs-ds-text-xl:22px; --hs-ds-text-2xl:28px; --hs-ds-line-tight:1.1; --hs-ds-line-normal:1.35; --hs-ds-line-relaxed:1.45; /* ------------------------------------------------------- CONTROL GEOMETRY ------------------------------------------------------- */ --hs-ds-control-height-sm:36px; --hs-ds-control-height:44px; --hs-ds-control-height-mobile:48px; --hs-ds-icon-button:38px; /* ------------------------------------------------------- HAIRCUT DESIGN SYSTEM · FORM TOKENS V1 ------------------------------------------------------- */ --hs-ds-control-height-form:46px; --hs-ds-field-padding-y:11px; --hs-ds-field-padding-x:13px; --hs-ds-text-control:14px; --hs-ds-text-label:11px; --hs-ds-line-compact:1.25; --hs-ds-color-field-border: rgba(16,28,23,.16); --hs-ds-color-field-border-hover: rgba(16,28,23,.28); --hs-ds-color-field-border-focus: rgba(16,28,23,.48); --hs-ds-color-field-ring: rgba(16,28,23,.07); --hs-ds-color-field-placeholder: rgba(110,117,111,.68); --hs-ds-color-field-disabled: #f2f0ea; --hs-ds-color-label: rgba(23,34,29,.78); --hs-ds-shadow-field: 0 1px 0 rgba(16,28,23,.02); /* ------------------------------------------------------- MOTION ------------------------------------------------------- */ --hs-ds-motion-fast:120ms; --hs-ds-motion-normal:220ms; --hs-ds-motion-spring: cubic-bezier(.22,.8,.28,1); /* ======================================================= COMPATIBILITY ALIASES · LEGACY SYSTEM ======================================================= */ --ink:var(--hs-ds-color-body-ink); --forest:var(--hs-ds-color-ink); --green:var(--hs-ds-color-accent); --gold:var(--hs-ds-color-gold); --paper:var(--hs-ds-color-page-legacy); --card:var(--hs-ds-color-card-legacy); --muted:var(--hs-ds-color-muted); --line:var(--hs-ds-color-line); --bad:var(--hs-ds-color-danger); --ok:var(--hs-ds-color-success); /* ======================================================= COMPATIBILITY ALIASES · MODERN HS SYSTEM ======================================================= */ --hs-app-bg: var(--hs-ds-color-app-bg); --hs-surface: var(--hs-ds-color-surface); --hs-surface-soft: var(--hs-ds-color-surface-soft); --hs-surface-deep: var(--hs-ds-color-surface-deep); --hs-ink: var(--hs-ds-color-ink); --hs-secondary: var(--hs-ds-color-secondary); --hs-tertiary: var(--hs-ds-color-tertiary); --hs-hairline: var(--hs-ds-color-hairline); --hs-hairline-soft: var(--hs-ds-color-hairline-soft); --hs-now: var(--hs-ds-color-now); --hs-radius-sm: var(--hs-ds-radius-sm); --hs-radius-md: var(--hs-ds-radius-md); --hs-radius-lg: var(--hs-ds-radius-lg); --hs-radius-xl: var(--hs-ds-radius-xl); --hs-motion-fast: var(--hs-ds-motion-fast); --hs-motion-normal: var(--hs-ds-motion-normal); --hs-motion-spring: var(--hs-ds-motion-spring); } /* --------------------------------------------------------- HAIRCUT DESIGN SYSTEM · NEUTRAL UI TOKENS V1 --------------------------------------------------------- */ :root{ --hs-ds-color-ui-strong:#111; --hs-ds-color-ui-muted:#555; --hs-ds-color-ui-placeholder:#777; } /* ========================================================= HAIRCUT DESIGN SYSTEM · COMPONENTS V1 CANONICAL COMPONENT CONTRACT REGOLA GENERALE: - nuovi componenti usano classi hs-ui-* - niente nuovi valori visuali hardcoded se esiste un token - niente CSS specifico di pagina per componenti generici - varianti tramite modifier, non duplicando il componente - questo layer è opt-in: nessuna UI esistente cambia ========================================================= */ /* ========================================================= 1. TYPOGRAPHY ========================================================= */ .hs-ui-title{ margin:0; color:var(--hs-ds-color-ink); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-lg); line-height:var(--hs-ds-line-tight); font-weight:750; letter-spacing:-.025em; } .hs-ui-text{ color:var(--hs-ds-color-ink); font-size:var(--hs-ds-text-base); line-height:var(--hs-ds-line-normal); } .hs-ui-meta{ color:var(--hs-ds-color-secondary); font-size:var(--hs-ds-text-sm); line-height:var(--hs-ds-line-normal); } /* ========================================================= 2. BUTTON ========================================================= */ .hs-ui-button{ min-height:var(--hs-ds-control-height); display:inline-flex; align-items:center; justify-content:center; gap:var(--hs-ds-space-4); padding: 0 var(--hs-ds-space-7); border: 1px solid transparent; border-radius: var(--hs-ds-radius-sm); background: var(--hs-ds-color-ink); color:#fff; font-family: var(--hs-ds-font-sans); font-size: var(--hs-ds-text-base); line-height:1; font-weight:750; cursor:pointer; transition: background-color var(--hs-ds-motion-fast) ease, border-color var(--hs-ds-motion-fast) ease, opacity var(--hs-ds-motion-fast) ease, transform var(--hs-ds-motion-fast) ease; } .hs-ui-button:hover{ opacity:.92; } .hs-ui-button:active{ transform:scale(.985); } .hs-ui-button:focus-visible{ outline:0; box-shadow: 0 0 0 3px rgba(16,28,23,.07); } .hs-ui-button:disabled{ opacity:.42; cursor:not-allowed; transform:none; } .hs-ui-button--secondary{ border-color: var(--hs-ds-color-hairline); background: var(--hs-ds-color-surface-deep); color: var(--hs-ds-color-ink); } .hs-ui-button--ghost{ border-color: var(--hs-ds-color-hairline); background: transparent; color: var(--hs-ds-color-ink); } .hs-ui-button--danger{ background: var(--hs-ds-color-danger); color:#fff; } .hs-ui-button--small{ min-height: var(--hs-ds-control-height-sm); padding: 0 var(--hs-ds-space-6); font-size: var(--hs-ds-text-md); } .hs-ui-button--icon{ width: var(--hs-ds-icon-button); height: var(--hs-ds-icon-button); min-height: var(--hs-ds-icon-button); padding:0; border-radius: var(--hs-ds-radius-pill); } /* ========================================================= 3. FIELD ========================================================= */ .hs-ui-field{ width:100%; min-height:var(--hs-ds-control-height); padding: 0 var(--hs-ds-space-6); border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-sm); background: var(--hs-ds-color-surface); color: var(--hs-ds-color-ink); font-family: var(--hs-ds-font-sans); font-size: var(--hs-ds-text-base); transition: border-color var(--hs-ds-motion-fast) ease, box-shadow var(--hs-ds-motion-fast) ease; } textarea.hs-ui-field{ min-height:96px; padding: var(--hs-ds-space-6); resize:vertical; } .hs-ui-field::placeholder{ color: var(--hs-ds-color-tertiary); } .hs-ui-field:focus{ outline:0; border-color: rgba(16,28,23,.18); box-shadow: 0 0 0 3px rgba(16,28,23,.05); } .hs-ui-field:disabled{ opacity:.55; cursor:not-allowed; } /* ========================================================= 4. CARD ========================================================= */ .hs-ui-card{ padding: var(--hs-ds-space-7); border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-md); background: var(--hs-ds-color-surface); } .hs-ui-card--soft{ background: var(--hs-ds-color-surface-soft); } /* ========================================================= 5. LIST ========================================================= */ .hs-ui-list{ width:100%; display:flex; flex-direction:column; } .hs-ui-row{ width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap: var(--hs-ds-space-6); padding: var(--hs-ds-space-6) var(--hs-ds-space-7); border:0; border-bottom: 1px solid var(--hs-ds-color-hairline-soft); background: var(--hs-ds-color-surface); color: var(--hs-ds-color-ink); text-align:left; } .hs-ui-row:last-child{ border-bottom:0; } .hs-ui-row-main{ min-width:0; display:flex; flex-direction:column; gap: var(--hs-ds-space-1); } .hs-ui-row-main strong{ font-size: var(--hs-ds-text-base); line-height: var(--hs-ds-line-normal); } .hs-ui-row-main small{ color: var(--hs-ds-color-secondary); font-size: var(--hs-ds-text-sm); line-height: var(--hs-ds-line-normal); } /* ========================================================= 6. BADGE ========================================================= */ .hs-ui-badge{ min-height:25px; display:inline-flex; align-items:center; justify-content:center; padding: 0 var(--hs-ds-space-4); border-radius: var(--hs-ds-radius-pill); background: var(--hs-ds-color-surface-deep); color: var(--hs-ds-color-ink); font-size: var(--hs-ds-text-sm); line-height:1; font-weight:650; } .hs-ui-badge--success{ background:#e2eadf; color:var(--hs-ds-color-success); } .hs-ui-badge--danger{ background:#f3ded9; color:var(--hs-ds-color-danger); } /* ========================================================= 7. TABS / SEGMENTED ========================================================= */ .hs-ui-tabs{ width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(118px,1fr); gap: var(--hs-ds-space-4); overflow-x:auto; scrollbar-width:none; } .hs-ui-tabs::-webkit-scrollbar{ display:none; } .hs-ui-tab{ width:100%; min-width:118px; min-height:var(--hs-ds-control-height); display:flex; align-items:center; justify-content:center; padding: 0 var(--hs-ds-space-6); border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-sm); background: var(--hs-ds-color-surface); color: var(--hs-ds-color-secondary); font-size: var(--hs-ds-text-md); font-weight:700; white-space:nowrap; } .hs-ui-tab.active, .hs-ui-tab[aria-selected="true"]{ border-color: var(--hs-ds-color-ink); background: var(--hs-ds-color-ink); color:#fff; } /* ========================================================= 8. PANEL ========================================================= */ .hs-ui-panel{ width: min( 460px, calc(100vw - 24px) ); max-height: min( 720px, calc(100dvh - 120px) ); display:flex; flex-direction:column; overflow:hidden; border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-xl); background: var(--hs-ds-color-surface); color: var(--hs-ds-color-ink); } .hs-ui-panel-head{ flex:0 0 auto; min-height:58px; display:grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items:center; padding: var(--hs-ds-space-4) var(--hs-ds-space-7); border-bottom: 1px solid var(--hs-ds-color-hairline-soft); background: var(--hs-ds-color-surface); } .hs-ui-panel-head > strong{ grid-column:2; text-align:center; font-size: var(--hs-ds-text-lg); line-height: var(--hs-ds-line-tight); font-weight:750; } .hs-ui-panel-body{ flex:1 1 auto; min-height:0; padding: var(--hs-ds-space-7); overflow-y:auto; overscroll-behavior:contain; } /* ========================================================= 9. MODAL ========================================================= */ .hs-ui-modal-backdrop{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding: var(--hs-ds-space-9); background: rgba(16,28,23,.48); backdrop-filter: blur(4px); } .hs-ui-modal{ width: min( 460px, 100% ); max-height: calc(100dvh - 40px); overflow:auto; padding: var(--hs-ds-space-9); border: 1px solid var(--hs-ds-color-hairline); border-radius: var(--hs-ds-radius-xl); background: var(--hs-ds-color-surface); color: var(--hs-ds-color-ink); } .hs-ui-modal-head{ display:flex; align-items:center; justify-content:space-between; gap: var(--hs-ds-space-6); } .hs-ui-modal-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap: var(--hs-ds-space-4); margin-top: var(--hs-ds-space-9); } /* ========================================================= 10. EMPTY / FEEDBACK ========================================================= */ .hs-ui-empty{ min-height:84px; display:grid; place-items:center; padding: var(--hs-ds-space-8); color: var(--hs-ds-color-secondary); font-size: var(--hs-ds-text-sm); line-height: var(--hs-ds-line-normal); text-align:center; } /* ========================================================= 11. ACTION GROUP ========================================================= */ .hs-ui-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap: var(--hs-ds-space-4); } /* ========================================================= 12. MOBILE CONTRACT ========================================================= */ @media(max-width:700px){ .hs-ui-button, .hs-ui-field, .hs-ui-tab{ min-height: var(--hs-ds-control-height-mobile); } .hs-ui-panel{ width: calc(100vw - 16px); } .hs-ui-modal-backdrop{ padding: var(--hs-ds-space-4); } .hs-ui-modal{ max-height: calc(100dvh - 16px); padding: var(--hs-ds-space-8); } } /* ======================================================== HAIRCUT STUDIO · IOS AGENDA GESTURES V1 Touch contract only. No layout changes. ========================================================= */ @media (pointer:coarse){ body.agenda-mode [data-agenda-swipe]{ touch-action:pan-y!important; -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } body.agenda-mode [data-agenda-swipe] *{ -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } body.agenda-mode [data-agenda-swipe] [data-agenda-new-slot]{ touch-action:pan-y!important; } body.agenda-mode [data-agenda-appointment]{ touch-action:pan-y!important; -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; -webkit-user-drag:none!important; } body.agenda-mode [data-agenda-appointment] *{ -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; -webkit-user-drag:none!important; } } /* ========================================================= HAIRCUT STUDIO MOBILE DRAG LANDING PREVIEW V2 Touch-only visual target. Drag/drop logic unchanged. ========================================================= */ @media (pointer:coarse){ body.agenda-mode .agenda-drop-preview-box{ display:block!important; z-index:120!important; pointer-events:none!important; border-color: var(--hs-ds-color-ink)!important; border-radius: var(--hs-ds-radius-sm)!important; background: color-mix( in srgb, var(--hs-ds-color-ink) 8%, transparent )!important; opacity:1!important; } body.agenda-mode .agenda-drop-preview-box.is-invalid{ border-color: var(--hs-ds-color-danger)!important; background: color-mix( in srgb, var(--hs-ds-color-danger) 8%, transparent )!important; } body.agenda-mode .agenda-lane-snap-preview{ display:none!important; } } /* ========================================================= HAIRCUT STUDIO DESKTOP DRAG LANDING PREVIEW V1 Re-enable the existing fixed drop target on fine pointers. No drag/drop logic changes. ========================================================= */ @media (pointer:fine){ body.agenda-mode .agenda-drop-preview-box{ display:block!important; } body.agenda-mode .agenda-lane-snap-preview{ display:none!important; } } /* ========================================================= HS DROP SHADOW V1 Ombra di atterraggio durante il trascinamento di un appuntamento: stessa altezza reale, orario di inizio e fine. ========================================================= */ /* Le celle evidenziate restano posizionate in modo assoluto: con position:relative uscivano dalla griglia e spostavano l'anteprima (errata per gli appuntamenti oltre 45 minuti). */ body.agenda-mode .agenda-45-slot.agenda-drop-hover{ position:absolute!important; } body.agenda-mode .agenda-drop-preview-box{ z-index:900!important; border:2px solid var(--hs-ds-color-ink)!important; border-radius:var(--hs-ds-radius-sm)!important; background:color-mix(in srgb,var(--hs-ds-color-ink) 14%,transparent)!important; filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--hs-ds-color-ink) 30%,transparent)); } body.agenda-mode .agenda-drop-preview-box.is-invalid{ border-color:var(--hs-ds-color-danger)!important; background:color-mix(in srgb,var(--hs-ds-color-danger) 14%,transparent)!important; } body.agenda-mode .agenda-drop-preview-box::before{ content:attr(data-label); position:absolute; left:-2px; bottom:100%; margin-bottom:var(--hs-ds-space-3); padding:var(--hs-ds-space-1) var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-label); font-weight:600; line-height:1.2; white-space:nowrap; } body.agenda-mode .agenda-drop-preview-box.is-invalid::before{ background:var(--hs-ds-color-danger); } body.agenda-mode .agenda-drop-preview-box.label-in::before{ bottom:auto; top:var(--hs-ds-space-2); left:var(--hs-ds-space-2); margin-bottom:0; } /* ========================================================= HAIRCUT STUDIO IOS TEXT SELECTION GUARD FINAL Visual/native selection guard only. No gesture interception. ========================================================= */ body.agenda-mode [data-agenda-swipe], body.agenda-mode [data-agenda-swipe] *{ -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } /* ========================================================= HAIRCUT STUDIO BOOK SWIPE HIT TEST FIX V1 Preview pages are visual only and must never receive input. ========================================================= */ .agenda-book-viewport, .agenda-book-track, .agenda-book-page, .agenda-book-page *{ pointer-events:none!important; -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } .agenda-calendar-pro[data-agenda-swipe]{ pointer-events:auto!important; } /* ========================================================= HAIRCUT STUDIO AGENDA HOST HIT TEST FIX V1 Legacy popover host must never block the agenda. Real panels live in BODY PANEL PORTAL. ========================================================= */ body.agenda-mode .agenda-v6-popover-host{ pointer-events:none!important; } body.agenda-mode .agenda-v6-popover-host > *{ pointer-events:none!important; } /* ========================================================= HAIRCUT STUDIO MOBILE CARD DRAG OWNER V1 Appointment cards own touch gestures on coarse pointers. Empty agenda keeps native vertical scrolling. ========================================================= */ @media (pointer:coarse){ body.agenda-mode [data-agenda-appointment], body.agenda-mode [data-agenda-appointment] *{ touch-action:none!important; -webkit-user-select:none!important; user-select:none!important; -webkit-touch-callout:none!important; } } /* ========================================================= HAIRCUT STUDIO PANEL PORTAL HIT TEST FIX V1 Full-screen wrappers never own input. Only the actual visible panel is interactive. ========================================================= */ /* ========================================================= HAIRCUT STUDIO PANEL PORTAL HIT TEST FIX V1 Full-screen wrappers never own input. Only the actual visible panel is interactive. ========================================================= */ /* ========================================================= HS APPOINTMENT DURATION PROPORTIONAL V1 L'altezza della card segue la durata reale (griglia da 45' sempre visibile). Le card corte diventano compatte. I pulsanti di selezione non vengono toccati. ========================================================= */ /* ========================================================= HS CALENDAR STRIP REFINED V1 Selettore settimane/giorni piu' fine ed elegante: titolo con anno in grigio, settimane a pillola sottile, giorni con lettera piccola e numero regolare. ========================================================= */ /* Il contenitore grande resta trasparente ai tocchi (fix precedente), ma il solo popup del Calendario deve riceverli: tasti, giorni, swipe. */ body.agenda-mode .agenda-v6-popover-host.agenda-v6-popover-calendar > .agenda-v6-native-calendar, body.agenda-mode .agenda-v6-popover-host.agenda-v6-popover-calendar > .agenda-v6-native-calendar *{ pointer-events:auto!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-title{ font-size:var(--hs-ds-text-lg)!important; font-weight:500!important; letter-spacing:0!important; text-align:center!important; text-transform:capitalize!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-year{ color:var(--hs-ds-color-muted)!important; font-weight:400!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks{ display:flex!important; justify-content:center!important; gap:var(--hs-ds-space-3)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks > button{ flex:1 1 0!important; min-width:0!important; height:32px!important; min-height:32px!important; border:1px solid var(--hs-ds-color-line)!important; border-radius:var(--hs-ds-radius-pill)!important; background:transparent!important; color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-sm)!important; font-weight:500!important; line-height:1!important; white-space:nowrap!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks > button.selected{ border-color:var(--hs-ds-color-ink)!important; background:var(--hs-ds-color-ink)!important; color:var(--hs-ds-color-surface)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-weeks-nav > button.agenda-month-strip-arrow{ color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-lg)!important; font-weight:300!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:var(--hs-ds-space-1)!important; margin-top:var(--hs-ds-space-4)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:var(--hs-ds-space-2)!important; height:auto!important; min-height:52px!important; border:0!important; border-radius:var(--hs-ds-radius-sm)!important; background:transparent!important; color:var(--hs-ds-color-ink)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button small{ color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-label)!important; font-weight:500!important; letter-spacing:.04em!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button strong{ color:inherit!important; font-size:var(--hs-ds-text-base)!important; font-weight:500!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button.today{ background:var(--hs-ds-color-surface-deep)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button.selected{ background:var(--hs-ds-color-ink)!important; color:var(--hs-ds-color-surface)!important; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button.selected small{ color:var(--hs-ds-color-surface)!important; opacity:.7; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days > button.outside{ opacity:.4; } @keyframes hsStripSlideNext{ from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} } @keyframes hsStripSlidePrev{ from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none} } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days.slide-next{ animation:hsStripSlideNext .22s ease-out; } body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days.slide-prev{ animation:hsStripSlidePrev .22s ease-out; } @media (prefers-reduced-motion:reduce){ body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days.slide-next, body.agenda-mode .agenda-v6-native-calendar .agenda-month-strip-days.slide-prev{ animation:none!important; } } /* ========================================================= HS GROUPED LIST V1 Impostazioni e Gestionale stile iOS · solo token hs-ds ========================================================= */ .hs-ui-grouped{ display:flex; flex-direction:column; gap:var(--hs-ds-space-9); font-family:var(--hs-ds-font-sans); } .hs-ui-list-section{ display:flex; flex-direction:column; gap:var(--hs-ds-space-3); } .hs-ui-grouped .hs-ui-list-title{ margin:0 var(--hs-ds-space-8); font-size:var(--hs-ds-text-md); font-weight:500; letter-spacing:0; text-transform:none; color:var(--hs-ds-color-muted); } .hs-ui-grouped .hs-ui-list-footer{ margin:0 var(--hs-ds-space-8); font-size:var(--hs-ds-text-sm); line-height:var(--hs-ds-line-relaxed); color:var(--hs-ds-color-muted); } .hs-ui-grouped .hs-ui-list{ background:var(--hs-ds-color-surface); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-md); overflow:hidden; } .hs-ui-grouped button.hs-ui-row{ --tone:var(--hs-ds-color-muted); position:relative; display:flex; align-items:center; gap:var(--hs-ds-space-6); width:100%; min-height:var(--hs-ds-control-height); margin:0; padding:var(--hs-ds-space-5) var(--hs-ds-space-8); border:0; border-radius:var(--hs-ds-radius-none,0); background:transparent; color:var(--hs-ds-color-ink); font:inherit; text-align:left; cursor:pointer; transition:background var(--hs-ds-motion-fast) ease; } .hs-ui-grouped button.hs-ui-row + button.hs-ui-row::before{ content:""; position:absolute; top:0; right:0; left:calc(var(--hs-ds-space-8) + 30px + var(--hs-ds-space-6)); height:1px; background:var(--hs-ds-color-line); } .hs-ui-grouped button.hs-ui-row:hover{ background:var(--hs-ds-color-surface-soft); } .hs-ui-grouped button.hs-ui-row:active{ background:var(--hs-ds-color-surface-deep); } .hs-ui-grouped .hs-ui-row.is-salon{--tone:var(--hs-ds-color-accent)} .hs-ui-grouped .hs-ui-row.is-online{--tone:color-mix(in srgb,var(--hs-ds-color-gold) 72%,var(--hs-ds-color-ink))} .hs-ui-grouped .hs-ui-row.is-neutral{--tone:var(--hs-ds-color-muted)} .hs-ui-grouped .hs-ui-row.is-danger{--tone:var(--hs-ds-color-danger)} .hs-ui-grouped .hs-ui-row.is-team{--tone:var(--hs-ds-color-success)} .hs-ui-grouped .hs-ui-row-icon{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:var(--hs-ds-radius-xs); background:color-mix(in srgb,var(--tone) 13%,var(--hs-ds-color-surface)); color:var(--tone); } .hs-ui-grouped .hs-ui-row-icon .ui-icon{ width:18px; height:18px; } .hs-ui-grouped .hs-ui-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--hs-ds-space-1); } .hs-ui-grouped .hs-ui-row-label{ font-size:var(--hs-ds-text-base); font-weight:500; line-height:var(--hs-ds-line-normal); color:var(--hs-ds-color-ink); } .hs-ui-grouped .hs-ui-row-sub{ font-size:var(--hs-ds-text-sm); line-height:var(--hs-ds-line-normal); color:var(--hs-ds-color-muted); } .hs-ui-grouped .hs-ui-row-value{ flex:none; font-size:var(--hs-ds-text-md); color:var(--hs-ds-color-muted); } .hs-ui-grouped .hs-ui-row-value.is-success{color:var(--hs-ds-color-success)} .hs-ui-grouped .hs-ui-row-value.is-danger{color:var(--hs-ds-color-danger)} .hs-ui-grouped .hs-ui-row-value.is-warning{color:color-mix(in srgb,var(--hs-ds-color-gold) 72%,var(--hs-ds-color-ink))} .hs-ui-grouped .hs-ui-row-badge{ flex:none; display:grid; place-items:center; min-width:22px; height:22px; padding:0 var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); font-size:var(--hs-ds-text-sm); font-weight:600; font-variant-numeric:tabular-nums; } .hs-ui-grouped .hs-ui-row-chevron{ flex:none; font-size:var(--hs-ds-text-lg); line-height:1; color:var(--hs-ds-color-line); } .hs-ui-grouped button.hs-ui-profile{ padding-top:var(--hs-ds-space-7); padding-bottom:var(--hs-ds-space-7); } .hs-ui-grouped .hs-ui-profile-photo{ position:relative; flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:var(--hs-ds-radius-circle); overflow:hidden; background:color-mix(in srgb,var(--hs-ds-color-gold) 18%,var(--hs-ds-color-surface)); color:color-mix(in srgb,var(--hs-ds-color-gold) 60%,var(--hs-ds-color-ink)); font-size:var(--hs-ds-text-lg); font-weight:600; } .hs-ui-grouped .hs-ui-profile-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hs-ui-grouped .hs-ui-profile-name{ font-size:var(--hs-ds-text-lg); font-weight:600; line-height:var(--hs-ds-line-tight); color:var(--hs-ds-color-ink); } @media (max-width:700px){ .hs-ui-grouped button.hs-ui-row{ min-height:var(--hs-ds-control-height-mobile); } } /* ========================================================= HS FOUNDATION V2 · FASE 2A 1. Pesi tipografici stile Apple: ogni grassetto (>=550) usa Avenir Next Demi Bold, senza toccare le regole esistenti. Se il font non c'e' si usa la riserva. 2. Rendering nitido. 3. Testo minimo 11px, superfici legacy unificate. ========================================================= */ @font-face{ font-family:"Avenir Next"; font-style:normal; font-weight:1 449; src:local("AvenirNext-Regular"),local("Avenir Next Regular"); } @font-face{ font-family:"Avenir Next"; font-style:normal; font-weight:450 549; src:local("AvenirNext-Medium"),local("Avenir Next Medium"); } @font-face{ font-family:"Avenir Next"; font-style:normal; font-weight:550 1000; src:local("AvenirNext-DemiBold"),local("Avenir Next Demi Bold"); } @font-face{ font-family:"Avenir Next"; font-style:italic; font-weight:1 449; src:local("AvenirNext-Italic"),local("Avenir Next Italic"); } @font-face{ font-family:"Avenir Next"; font-style:italic; font-weight:450 549; src:local("AvenirNext-MediumItalic"),local("Avenir Next Medium Italic"); } @font-face{ font-family:"Avenir Next"; font-style:italic; font-weight:550 1000; src:local("AvenirNext-DemiBoldItalic"),local("Avenir Next Demi Bold Italic"); } :root{ --hs-ds-text-xs:11px; --hs-ds-color-page-legacy:var(--hs-ds-color-app-bg); --hs-ds-color-card-legacy:var(--hs-ds-color-surface); } html body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ========================================================= HS DOCK V1 Unica definizione del dock (sostituisce 12 generazioni). Barra stile iOS: traslucida, tinta sulla voce attiva. ========================================================= */ :root{ --hs-dock-height:48px; } #nav{ position:fixed; left:0; right:0; bottom:0; z-index:9000; box-sizing:border-box; width:100%; height:calc(var(--hs-dock-height) + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:var(--hs-ds-space-2); padding:var(--hs-ds-space-1) max(var(--hs-ds-space-4),env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--hs-ds-space-4),env(safe-area-inset-left)); background:color-mix(in srgb,var(--hs-ds-color-app-bg) 78%,transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--hs-ds-color-hairline); } #nav button{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--hs-ds-space-1); width:100%; height:44px; margin:0; padding:0 var(--hs-ds-space-2); border:0; border-radius:var(--hs-ds-radius-sm); background:transparent; color:var(--hs-ds-color-muted); font-family:var(--hs-ds-font-sans); cursor:pointer; transition:color var(--hs-ds-motion-fast) ease,transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring); } #nav button.active{ color:var(--hs-ds-color-ink); } #nav button:active{ transform:scale(.92); } #nav [data-page="add"]{grid-column:1} #nav [data-page="agenda"]{grid-column:2} #nav [data-page="studio"]{grid-column:3} #nav .ui-nav-icon{ display:grid; place-items:center; width:24px; height:24px; } #nav .ui-nav-icon svg{ width:22px; height:22px; } #nav .ui-nav-plus{ display:block; font-size:var(--hs-ds-text-2xl); font-weight:400; line-height:var(--hs-ds-line-tight); color:inherit; } #nav button small{ display:block; font-size:var(--hs-ds-text-xs); font-weight:500; line-height:1; letter-spacing:0; color:inherit; } /* ========================================================= HS INVENTORY V1 ========================================================= */ #view [data-inventory-product][hidden], #view [data-inventory-section][hidden], #view [data-inventory-section] h2[hidden]{ display:none!important; } #view .hs-inv-row{ display:flex; align-items:center; gap:var(--hs-ds-space-6); padding:var(--hs-ds-space-4) var(--hs-ds-space-8); border-bottom:1px solid var(--hs-ds-color-line); } #view .hs-inv-row:last-child{ border-bottom:0; } #view .hs-inv-main{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--hs-ds-space-1); margin:0; padding:var(--hs-ds-space-3) 0; border:0; background:transparent; color:inherit; font-family:var(--hs-ds-font-sans); text-align:left; cursor:pointer; } #view div.hs-inv-main{ cursor:default; } #view .hs-inv-name{ font-size:var(--hs-ds-text-base); font-weight:600; color:var(--hs-ds-color-ink); } #view .hs-inv-sub{ font-size:var(--hs-ds-text-md); color:var(--hs-ds-color-muted); } #view .hs-inv-stock{ flex:none; display:flex; flex-direction:column; align-items:flex-end; min-width:64px; } #view .hs-inv-stock b{ font-size:var(--hs-ds-text-lg); font-weight:600; font-variant-numeric:tabular-nums; line-height:var(--hs-ds-line-tight); color:var(--hs-ds-color-ink); } #view .hs-inv-stock small{ font-size:var(--hs-ds-text-xs); color:var(--hs-ds-color-muted); } #view .hs-inv-row.is-low .hs-inv-stock b, #view .hs-inv-row.is-low .hs-inv-stock small{ color:var(--hs-ds-color-danger); } #view .hs-inv-use{ flex:none; font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:600; cursor:pointer; } /* ========================================================= HS PAGE FRAME V1 · header pagine stile iOS ========================================================= */ body:not(.agenda-mode) #app > header{ position:sticky; top:0; z-index:50; display:flex; align-items:flex-end; gap:var(--hs-ds-space-6); padding:max(var(--hs-ds-space-6),env(safe-area-inset-top)) var(--hs-ds-space-8) var(--hs-ds-space-6); background:color-mix(in srgb,var(--hs-ds-color-app-bg) 84%,transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hs-ds-color-hairline); } body:not(.agenda-mode) #app > header > div{ display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; } body:not(.agenda-mode) #app > header small{ display:none; } body:not(.agenda-mode) #app > header h1{ margin:0; font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-2xl); font-weight:600; line-height:var(--hs-ds-line-tight); letter-spacing:-.01em; color:var(--hs-ds-color-ink); } .hs-ui-back{ display:inline-flex; align-items:center; gap:var(--hs-ds-space-2); margin:0 0 var(--hs-ds-space-3); padding:var(--hs-ds-space-1) 0; border:0; background:transparent; color:var(--hs-ds-color-accent); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-base); font-weight:500; cursor:pointer; } .hs-ui-back span{ font-size:var(--hs-ds-text-xl); line-height:1; } .hs-ui-page-actions{ display:flex; gap:var(--hs-ds-space-3); margin-left:auto; } .hs-ui-pill-button{ min-height:var(--hs-ds-control-height-sm); padding:0 var(--hs-ds-space-8); border:0; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:600; cursor:pointer; transition:transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring); } .hs-ui-pill-button:active{ transform:scale(.95); } #view .hs-frame-source[hidden]{ display:none; } .section-intro.hs-intro-dup .eyebrow, .section-intro.hs-intro-dup h2{ display:none; } /* ========================================================= HS PAGE PARTS V1 · riepilogo, segmented, tag, icon button ========================================================= */ .hs-ui-summary{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-2) var(--hs-ds-space-6); margin:0 0 var(--hs-ds-space-8); font-size:var(--hs-ds-text-md); color:var(--hs-ds-color-muted); } .hs-ui-summary b{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--hs-ds-color-ink); } .hs-ui-live{ display:inline-flex; align-items:center; gap:var(--hs-ds-space-2); margin-left:var(--hs-ds-space-3); font-size:var(--hs-ds-text-sm); font-weight:500; color:var(--hs-ds-color-success); } .hs-ui-live i{ width:6px; height:6px; border-radius:var(--hs-ds-radius-circle); background:currentColor; } .hs-ui-segmented{ display:inline-flex; gap:var(--hs-ds-space-1); margin:0 0 var(--hs-ds-space-8); padding:var(--hs-ds-space-1); border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface-deep); } .hs-ui-segmented button{ min-height:30px; padding:0 var(--hs-ds-space-8); border:0; border-radius:var(--hs-ds-radius-xs); background:transparent; color:var(--hs-ds-color-muted); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:500; cursor:pointer; } .hs-ui-segmented button.active{ background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); box-shadow:var(--hs-ds-shadow-field); } .hs-ui-tag{ flex:none; padding:var(--hs-ds-space-1) var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-pill); font-size:var(--hs-ds-text-sm); font-weight:600; --tag:var(--hs-ds-color-accent); background:color-mix(in srgb,var(--tag) 12%,var(--hs-ds-color-surface)); color:var(--tag); } .hs-ui-tag.is-notified{--tag:color-mix(in srgb,var(--hs-ds-color-gold) 70%,var(--hs-ds-color-ink))} .hs-ui-tag.is-claimed{--tag:var(--hs-ds-color-success)} .hs-ui-tag.is-closed{--tag:var(--hs-ds-color-muted)} .hs-ui-icon-button{ display:grid; place-items:center; width:var(--hs-ds-icon-button); height:var(--hs-ds-icon-button); border:0; border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface-soft); color:var(--hs-ds-color-ink); text-decoration:none; transition:background var(--hs-ds-motion-fast) ease; } .hs-ui-icon-button:hover{ background:var(--hs-ds-color-surface-deep); } .hs-ui-icon-button .ui-icon{ width:18px; height:18px; } /* ========================================================= HS WAITLIST V1 ========================================================= */ .hs-wait-list{ display:flex; flex-direction:column; gap:var(--hs-ds-space-6); } .hs-wait-row{ display:flex; flex-direction:column; gap:var(--hs-ds-space-4); padding:var(--hs-ds-space-8); background:var(--hs-ds-color-surface); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-md); } .hs-wait-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--hs-ds-space-6); } .hs-wait-who{ min-width:0; } .hs-wait-row .hs-wait-name{ margin:0; font-size:var(--hs-ds-text-lg); font-weight:600; line-height:var(--hs-ds-line-tight); color:var(--hs-ds-color-ink); } .hs-wait-row p{ margin:0; } .hs-wait-meta, .hs-wait-contact{ margin-top:var(--hs-ds-space-2); font-size:var(--hs-ds-text-md); color:var(--hs-ds-color-muted); } .hs-wait-when{ display:flex; align-items:center; gap:var(--hs-ds-space-3); font-size:var(--hs-ds-text-base); font-weight:500; color:var(--hs-ds-color-ink); } .hs-wait-when .ui-icon{ flex:none; width:16px; height:16px; color:var(--hs-ds-color-muted); } .hs-wait-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--hs-ds-space-6); padding-top:var(--hs-ds-space-5); border-top:1px solid var(--hs-ds-color-line); } .hs-wait-actions{ display:flex; gap:var(--hs-ds-space-3); } .hs-wait-created{ flex:1; font-size:var(--hs-ds-text-sm); color:var(--hs-ds-color-muted); } .hs-wait-close{ padding:var(--hs-ds-space-2) 0; border:0; background:transparent; color:var(--hs-ds-color-danger); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:500; cursor:pointer; } /* ========================================================= HS PAGE FRAME V2 "•••" sempre a destra, intro in colonna, stile comune per bottoni, card ed etichette. ========================================================= */ body:not(.agenda-mode) #app > header > div{order:1} body:not(.agenda-mode) #app > header .hs-ui-page-actions{order:2} body:not(.agenda-mode) #app > header #bell{ order:3; flex:none; position:static!important; inset:auto!important; transform:none!important; margin:0 0 0 var(--hs-ds-space-3)!important; } .section-intro.hs-intro-dup{ display:block; margin-top:var(--hs-ds-space-3); } .section-intro.hs-intro-dup > p{ margin:0 0 var(--hs-ds-space-8); text-align:left; } body .eyebrow{ font-size:var(--hs-ds-text-sm); font-weight:600; letter-spacing:.04em; text-transform:lowercase; color:var(--hs-ds-color-muted); } body .eyebrow::first-letter{ text-transform:uppercase; } body .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--hs-ds-space-3); min-height:var(--hs-ds-control-height); padding:0 var(--hs-ds-space-9); border:0; border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-base); font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; transition:transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring),background var(--hs-ds-motion-fast) ease; } body .btn:active{ transform:scale(.97); } body .btn.secondary{ background:var(--hs-ds-color-surface-deep); color:var(--hs-ds-color-ink); } body .btn.danger{ background:color-mix(in srgb,var(--hs-ds-color-danger) 12%,var(--hs-ds-color-surface)); color:var(--hs-ds-color-danger); } body .btn.small{ min-height:var(--hs-ds-control-height-sm); padding:0 var(--hs-ds-space-6); border-radius:var(--hs-ds-radius-sm); font-size:var(--hs-ds-text-md); } body .card{ background:var(--hs-ds-color-surface); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-md); } /* ========================================================= HS PAGE FRAME V3 Titolo a sinistra, azioni + Gestionale a destra. ========================================================= */ body:not(.agenda-mode) #app > header{ display:flex!important; align-items:center!important; justify-content:flex-start!important; } body:not(.agenda-mode) #app > header > div:first-child{ flex:1 1 auto; min-width:0; } .hs-ui-header-right{ display:flex; align-items:center; gap:var(--hs-ds-space-3); flex:none; margin-left:auto; } .hs-ui-circle-button{ display:grid; place-items:center; width:var(--hs-ds-icon-button); height:var(--hs-ds-icon-button); border:0; border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface-deep); color:var(--hs-ds-color-ink); cursor:pointer; transition:transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring); } .hs-ui-circle-button:active{ transform:scale(.92); } .hs-ui-circle-button .ui-icon{ width:20px; height:20px; } .hs-frame-hidden[hidden]{ display:none!important; } /* ========================================================= HS DROP PREVIEW V2 Ombra di atterraggio sempre visibile durante il drag. Vince sulle generazioni precedenti che la spegnevano. ========================================================= */ @keyframes hsDropIn{ from{opacity:0} to{opacity:1} } body .agenda-lane-snap-preview{ display:block!important; position:absolute!important; left:var(--hs-ds-space-1)!important; right:var(--hs-ds-space-1)!important; z-index:40!important; box-sizing:border-box!important; pointer-events:none!important; border:2px dashed color-mix(in srgb,var(--hs-ds-color-accent) 70%,transparent)!important; border-radius:var(--hs-ds-radius-sm)!important; background:color-mix(in srgb,var(--hs-ds-color-accent) 12%,transparent)!important; animation:hsDropIn var(--hs-ds-motion-fast) ease; } body .agenda-lane-snap-preview::after{ content:attr(data-time); position:absolute; top:var(--hs-ds-space-2); left:var(--hs-ds-space-3); padding:var(--hs-ds-space-1) var(--hs-ds-space-3); border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-accent); color:var(--hs-ds-color-surface); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-sm); font-weight:600; font-variant-numeric:tabular-nums; } body .agenda-lane-snap-preview[data-time=""]::after{ display:none; } body .agenda-lane-snap-preview.is-invalid{ border-color:color-mix(in srgb,var(--hs-ds-color-danger) 70%,transparent)!important; background:color-mix(in srgb,var(--hs-ds-color-danger) 10%,transparent)!important; } body .agenda-lane-snap-preview.is-invalid::after{ content:"Non entra"; display:block; background:var(--hs-ds-color-danger); } /* ========================================================= HS PAGE FRAME V4 Gruppo destro affiancato, header compatto allo scroll, barra Salva fissa sopra il dock. ========================================================= */ body:not(.agenda-mode) #app > header > .hs-ui-header-right{ flex:none; flex-direction:row; align-items:center; align-self:flex-end; margin-left:auto; } .hs-ui-savebar{ position:fixed; left:0; right:0; bottom:calc(var(--hs-dock-height) + env(safe-area-inset-bottom)); z-index:8999; display:flex; justify-content:center; padding:var(--hs-ds-space-5) var(--hs-ds-space-8); background:color-mix(in srgb,var(--hs-ds-color-app-bg) 82%,transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--hs-ds-color-hairline); } .hs-ui-savebar[hidden]{ display:none; } .hs-ui-savebar .btn{ width:min(420px,100%); } /* ========================================================= HS DROP PREVIEW V3 Una sola ombra di atterraggio: quella dentro la colonna. Selettori piu forti delle 4 generazioni precedenti (incluse le media query pointer:fine / pointer:coarse). ========================================================= */ html body.agenda-mode .agenda-drop-preview-box{ display:none!important; } html body.agenda-mode .agenda-lane-snap-preview{ display:block!important; position:absolute!important; left:var(--hs-ds-space-1)!important; right:var(--hs-ds-space-1)!important; z-index:40!important; margin:0!important; padding:0!important; box-sizing:border-box!important; pointer-events:none!important; opacity:1!important; border:2px dashed color-mix(in srgb,var(--hs-ds-color-accent) 75%,transparent)!important; border-radius:var(--hs-ds-radius-sm)!important; background:color-mix(in srgb,var(--hs-ds-color-accent) 13%,transparent)!important; } html body.agenda-mode .agenda-lane-snap-preview::after{ content:attr(data-time); display:block; position:absolute; top:var(--hs-ds-space-2); left:var(--hs-ds-space-3); max-width:calc(100% - var(--hs-ds-space-6)); padding:var(--hs-ds-space-1) var(--hs-ds-space-3); overflow:hidden; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-accent); color:var(--hs-ds-color-surface); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-sm); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; } html body.agenda-mode .agenda-lane-snap-preview.is-invalid{ border-color:color-mix(in srgb,var(--hs-ds-color-danger) 75%,transparent)!important; background:color-mix(in srgb,var(--hs-ds-color-danger) 10%,transparent)!important; } html body.agenda-mode .agenda-lane-snap-preview.is-invalid::after{ content:attr(data-time); background:var(--hs-ds-color-danger); } /* ========================================================= HS DROP PREVIEW V4 · visibilita forzata ========================================================= */ html body.agenda-mode .agenda-lane .agenda-lane-snap-preview{ visibility:visible!important; } /* ========================================================= HS BRAND GATE V1 · apertura con il marchio reale ========================================================= */ #gate{ position:fixed; inset:0; z-index:100000; display:grid; place-content:center; justify-items:center; gap:var(--hs-ds-space-9); padding:var(--hs-ds-space-10); background:var(--hs-ds-color-app-bg); overflow-y:auto; -webkit-overflow-scrolling:touch; } #gate[hidden]{ display:none!important; } #gate .hs-gate-logo{ display:block; width:min(760px,88vw); height:auto; animation:hsGateIn 700ms var(--hs-ds-motion-spring) both; } #gate #gateText{ margin:0; font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); letter-spacing:.02em; color:var(--hs-ds-color-muted); animation:hsGateIn 700ms 150ms var(--hs-ds-motion-spring) both; } #gate .hs-gate-bar{ display:block; width:120px; height:2px; border-radius:var(--hs-ds-radius-pill); background:linear-gradient(90deg,transparent,var(--hs-ds-color-ink),transparent); background-size:200% 100%; opacity:.35; animation:hsGateBar 1200ms ease-in-out infinite; } @keyframes hsGateIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } @keyframes hsGateBar{ from{background-position:100% 0} to{background-position:-100% 0} } /* ========================================================= HS PAGE TRANSITIONS V1 · push / pop stile iOS ========================================================= */ @keyframes hsEnterForward{ from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:none} } @keyframes hsEnterBack{ from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:none} } body:not(.agenda-mode) #view.hs-enter-forward{ animation:hsEnterForward 320ms var(--hs-ds-motion-spring); } body:not(.agenda-mode) #view.hs-enter-back{ animation:hsEnterBack 320ms var(--hs-ds-motion-spring); } #view.hs-swiping{ transition:none; will-change:transform; } @media (prefers-reduced-motion:reduce){ body:not(.agenda-mode) #view.hs-enter-forward, body:not(.agenda-mode) #view.hs-enter-back, #gate .hs-gate-logo, #gate #gateText, #gate .hs-gate-bar{ animation:none; } } /* ========================================================= HS AGENDA V7 · stile Calendario Apple Solo presentazione: logica drag, swipe e popover invariata. ========================================================= */ :root{ --hs-ds-shadow-card: 0 1px 2px color-mix(in srgb,var(--hs-ds-color-ink) 8%,transparent), 0 2px 8px color-mix(in srgb,var(--hs-ds-color-ink) 5%,transparent); --hs-ds-shadow-lift: 0 2px 4px color-mix(in srgb,var(--hs-ds-color-ink) 10%,transparent), 0 10px 24px color-mix(in srgb,var(--hs-ds-color-ink) 12%,transparent); } html body.agenda-mode .agenda-command-shell-v6 .agenda-v6-popover-host{grid-area:pop} /* ---------- Intestazione colonne ---------- */ html body.agenda-mode .agenda-staff-head .agenda-person{ background:var(--hs-ds-color-surface); border-bottom:1px solid var(--hs-ds-color-line); cursor:pointer; } html body.agenda-mode .agenda-staff-head .agenda-person:active{ opacity:.75; } html body.agenda-mode .agenda-staff-head .agenda-person strong{ display:inline-flex!important; align-items:center!important; gap:var(--hs-ds-space-3)!important; color:var(--hs-ds-color-ink); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-base)!important; font-weight:600!important; } html body.agenda-mode .agenda-staff-head .agenda-person strong::before{ content:""; flex:none; width:10px; height:10px; border-radius:var(--hs-ds-radius-circle); background:var(--agenda-team-color,var(--hs-ds-color-muted)); } html body.agenda-mode .agenda-staff-head .agenda-person span{ color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-sm)!important; font-weight:500!important; font-variant-numeric:tabular-nums!important; } /* ---------- Colonne e slot ---------- */ html body.agenda-mode .agenda-lanes .agenda-lane{ background:color-mix(in srgb,var(--agenda-team-color,var(--hs-ds-color-muted)) 4%,var(--hs-ds-color-surface)); } html body.agenda-mode .agenda-lanes .agenda-45-slot{ background:transparent; border:0; border-top:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 6%,transparent); transition:background var(--hs-ds-motion-fast) ease; } html body.agenda-mode .agenda-lanes .agenda-45-slot:hover{ background:color-mix(in srgb,var(--agenda-team-color,var(--hs-ds-color-muted)) 10%,transparent); } html body.agenda-mode .agenda-lanes .agenda-slot-time{ color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-xs)!important; font-weight:500!important; font-variant-numeric:tabular-nums!important; } /* ---------- Card appuntamento ---------- */ /* ---------- Ora attuale ---------- */ html body.agenda-mode .agenda-now-line{ height:2px!important; border:0!important; background:var(--hs-ds-color-gold)!important; z-index:30!important; } html body.agenda-mode .agenda-now-line span{ padding:var(--hs-ds-space-1) var(--hs-ds-space-3)!important; border-radius:var(--hs-ds-radius-pill)!important; background:var(--hs-ds-color-gold)!important; color:var(--hs-ds-color-on-gold)!important; font-family:var(--hs-ds-font-sans)!important; font-size:var(--hs-ds-text-xs)!important; font-weight:600!important; font-variant-numeric:tabular-nums!important; } /* ---------- Pause, assenze, ferie ---------- */ html body.agenda-mode .agenda-unavailable-block{ border:0; background:repeating-linear-gradient( 135deg, color-mix(in srgb,var(--hs-ds-color-ink) 5%,transparent) 0 6px, transparent 6px 12px ); } html body.agenda-mode .agenda-unavailable-block span{ padding:var(--hs-ds-space-1) var(--hs-ds-space-4)!important; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface); color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-xs)!important; font-weight:500!important; } /* ---------- Frecce laterali piu discrete ---------- */ html body.agenda-mode .agenda-side-arrow{ width:var(--hs-ds-control-height-sm)!important; height:var(--hs-ds-control-height-sm)!important; border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); color:var(--hs-ds-color-muted); box-shadow:var(--hs-ds-shadow-card); } /* ========================================================= HS THEME PICKER V1 ========================================================= */ .hs-theme-picker{ display:flex; flex-direction:column; gap:var(--hs-ds-space-5); margin-bottom:var(--hs-ds-space-9); } .hs-theme-swatches{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-4); } .hs-theme-swatch{ display:flex; flex-direction:column; align-items:center; gap:var(--hs-ds-space-3); min-width:64px; padding:var(--hs-ds-space-3) var(--hs-ds-space-2); border:0; border-radius:var(--hs-ds-radius-sm); background:transparent; color:var(--hs-ds-color-muted); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-sm); font-weight:500; cursor:pointer; } .hs-theme-swatch i{ width:40px; height:40px; border-radius:var(--hs-ds-radius-circle); background:var(--swatch); box-shadow:var(--hs-ds-shadow-card); transition:transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring); } .hs-theme-swatch:hover i{ transform:scale(1.06); } .hs-theme-swatch.is-active{ color:var(--hs-ds-color-ink); } .hs-theme-swatch.is-active i{ outline:2px solid var(--hs-ds-color-ink); outline-offset:3px; } .hs-theme-custom{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hs-ds-space-5); color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-sm); } .hs-theme-custom input[type="color"]{ flex:none; width:44px; height:44px; padding:var(--hs-ds-space-1); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-circle); background:var(--hs-ds-color-surface); cursor:pointer; } .hs-theme-custom span{ /* senza questo, su schermi stretti la scritta esce dalla pagina * invece di andare a capo (riga accanto al colore libero) */ flex:1 1 180px; min-width:0; } /* ========================================================= HS NON AGENDA ROOT SCROLL V1 Le pagine normali e le pagine Impostazioni usano lo scroll nativo del documento. L'Agenda mantiene invece il proprio scroller interno. ========================================================= */ @media (min-width:701px){ html{ overflow-y:auto; overscroll-behavior-y:auto; } body:not(.agenda-mode){ height:auto!important; min-height:100dvh; overflow-y:visible!important; overscroll-behavior-y:auto!important; } body:not(.agenda-mode) #app{ height:auto!important; min-height:100dvh; overflow-y:visible!important; } body:not(.agenda-mode) main#view{ height:auto!important; min-height:0!important; max-height:none!important; overflow-y:visible!important; padding-bottom: calc( var(--hs-dock-height) + env(safe-area-inset-bottom) + var(--hs-ds-space-10) )!important; } } /* HS DESIGN SYSTEM UTILITIES V1 */ .hs-u-mt-5{ margin-top:var(--hs-ds-space-5)!important; } .hs-u-mt-7{ margin-top:var(--hs-ds-space-7)!important; } .hs-u-mt-8{ margin-top:var(--hs-ds-space-8)!important; } .hs-u-mt-9{ margin-top:var(--hs-ds-space-9)!important; } .hs-u-mb-5{ margin-bottom:var(--hs-ds-space-5)!important; } .hs-u-mb-6{ margin-bottom:var(--hs-ds-space-6)!important; } /* ========================================================= HS STACK PANELS V1 Regole fisse per tutti i pannelli del Gestionale. Livello 1: base a priorita zero (:where) per qualsiasi elemento senza stile proprio. Livello 2: stati vuoti e liste. ========================================================= */ /* ---------- Stati vuoti ---------- */ /* ---------- Liste nei pannelli ---------- */ /* ========================================================= HS SHEETS V1 Tutte le finestre: card centrata su Mac, foglio dal basso su iPhone. Titolo e bottoni fissi, contenuto che scorre. ========================================================= */ @keyframes hsSheetIn{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} } /* ========================================================= HS CLIENTS POLISH V1 Ricerca principale senza card ridondante. ========================================================= */ .clients-search-card{ background:transparent; border:0; box-shadow:var(--hs-ds-shadow-none,none); padding:var(--hs-ds-space-none,0); } /* HS CLIENTS ACTIONS V1 */ .clients-search-footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-4); margin-top:var(--hs-ds-space-4); } .clients-search-actions{ position:relative; flex:none; } .clients-actions-trigger{ min-height:var(--hs-ds-control-height-sm); padding:0 var(--hs-ds-space-5); border:0; border-radius:var(--hs-ds-radius-pill); background:transparent; color:var(--hs-ds-color-accent); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:600; cursor:pointer; } .clients-actions-trigger:active{ opacity:.65; } .clients-actions-popover{ position:absolute; z-index:20; top:calc(100% + var(--hs-ds-space-2)); right:0; width:min(230px,calc(100vw - 32px)); padding:var(--hs-ds-space-2); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-lg); background:var(--hs-ds-color-surface); box-shadow:var(--hs-ds-shadow-card,none); } .clients-actions-popover[hidden]{ display:none; } .clients-actions-popover button{ display:block; width:100%; min-height:44px; padding:0 var(--hs-ds-space-5); border:0; border-radius:var(--hs-ds-radius-control); background:transparent; color:var(--hs-ds-color-ink); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-md); font-weight:500; text-align:left; cursor:pointer; } .clients-actions-popover button:active{ background:var(--hs-ds-color-surface-deep); } @media(max-width:700px){ .clients-search-footer{ min-height:var(--hs-ds-control-height-sm); } .clients-search-status:empty{ display:none; } .clients-search-status:empty + .clients-search-actions{ margin-left:auto; } } /* HS CLIENT SEARCH POLISH V1 */ .agenda-inline-client-search{ grid-template-columns:minmax(0,1fr)!important; gap:var(--hs-ds-space-3)!important; } .agenda-inline-client-search input{ border-radius:var(--hs-ds-radius-control)!important; } .agenda-inline-new-client{ justify-self:end; min-height:var(--hs-ds-control-height-sm)!important; padding:0 var(--hs-ds-space-3)!important; border:0!important; background:transparent!important; color:var(--hs-ds-color-accent)!important; box-shadow:var(--hs-ds-shadow-none,none)!important; font-weight:600!important; } .agenda-inline-client-row{ min-height:var(--hs-ds-control-height-mobile)!important; padding: var(--hs-ds-space-4) var(--hs-ds-space-2)!important; } .agenda-inline-client-row > div{ gap:var(--hs-ds-space-1); } /* HS CLIENT SEARCH POLISH V2 */ /* Backdrop Agenda: attenuazione pulita, niente blur pesante */ /* Azione secondaria riconoscibile */ .agenda-inline-new-client{ min-height: var(--hs-ds-control-height-sm)!important; padding: 0 var(--hs-ds-space-5)!important; border-radius: var(--hs-ds-radius-pill)!important; background: var(--hs-ds-color-surface-deep)!important; color: var(--hs-ds-color-ink)!important; font-size: var(--hs-ds-text-md)!important; font-weight: 600!important; } /* Lista clienti coerente e compatta */ .agenda-inline-client-results:has( .agenda-inline-client-row ){ overflow:hidden; border: 1px solid var(--hs-ds-color-line); border-radius: var(--hs-ds-radius-md); background: var(--hs-ds-color-surface); } .agenda-inline-client-row{ min-height: var(--hs-ds-control-height-mobile)!important; padding: var(--hs-ds-space-5) var(--hs-ds-space-6)!important; border: 0!important; border-radius: 0!important; background: transparent!important; box-shadow: var(--hs-ds-shadow-none,none)!important; } .agenda-inline-client-row + .agenda-inline-client-row{ border-top: 1px solid var(--hs-ds-color-line)!important; } .agenda-inline-client-row > span:last-child{ flex:none; color: var(--hs-ds-color-muted); font-size: var(--hs-ds-text-xl); line-height: 1; } /* Desktop / tablet: il pannello Clienti segue il contenuto */ /* iPhone: conserva il foglio ampio e comodo con tastiera */ /* --------------------------------------------------------- VISTA AGENDA · CANONICAL --------------------------------------------------------- */ /* Persone */ body.agenda-mode .agenda-inline-view-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: var(--hs-ds-space-3)!important; margin:0!important; } body.agenda-mode .agenda-inline-view-grid::before{ content:"Agenda"; grid-column:1 / -1; margin: 0 0 var(--hs-ds-space-2)!important; color: var(--hs-ds-color-muted); font-size: var(--hs-ds-text-md); font-weight: 500; } /* Periodo */ body.agenda-mode .agenda-inline-period-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: var(--hs-ds-space-3)!important; margin: var(--hs-ds-space-8) 0 0!important; } body.agenda-mode .agenda-inline-period-grid::before{ content:"Periodo"; grid-column:1 / -1; margin: 0 0 var(--hs-ds-space-2)!important; color: var(--hs-ds-color-muted); font-size: var(--hs-ds-text-md); font-weight: 500; } /* Bottoni Vista */ body.agenda-mode .agenda-inline-view-grid button, body.agenda-mode .agenda-inline-period-grid button{ min-height: var(--hs-ds-control-height-mobile)!important; margin:0!important; padding: 0 var(--hs-ds-space-6)!important; border: 1px solid var(--hs-ds-color-line)!important; border-radius: var(--hs-ds-radius-control)!important; background: var(--hs-ds-color-surface)!important; color: var(--hs-ds-color-ink)!important; box-shadow: var(--hs-ds-shadow-none,none)!important; font-family: var(--hs-ds-font-sans)!important; font-size: var(--hs-ds-text-base)!important; font-weight: 500!important; text-align:center!important; } /* Stato selezionato */ body.agenda-mode .agenda-inline-view-grid button.active, body.agenda-mode .agenda-inline-period-grid button.active{ border-color: var(--hs-ds-color-ink)!important; background: var(--hs-ds-color-ink)!important; color: var(--hs-ds-color-surface)!important; font-weight: 600!important; } /* Mobile */ @media(max-width:700px){ body.agenda-mode .agenda-inline-view-grid, body.agenda-mode .agenda-inline-period-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } } /* --------------------------------------------------------- CARD · priorità al cliente --------------------------------------------------------- */ /* --------------------------------------------------------- MOBILE · la nota non ruba spazio Il dot sul nome continua a indicarne la presenza. --------------------------------------------------------- */ /* --------------------------------------------------------- CARD CORTE · non alteriamo durata o posizione --------------------------------------------------------- */ /* HS AGENDA CARD HIERARCHY V1 */ /* * Prima riga: * ORARIO · NOME CLIENTE * * Seconda riga: * SERVIZIO * * La nota resta segnalata dal dot accanto al nome, * ma non occupa più spazio nella card. */ /* Anche le card corte mantengono le due righe */ /* Mobile */ /* ========================================================= VISTA AGENDA · contenuto ========================================================= */ /* Etichette sezione */ body.agenda-mode .agenda-inline-view-grid::before{ content:"Agenda"!important; grid-column: 1 / -1!important; margin: 0 0 var(--hs-ds-space-2)!important; color: var(--hs-ds-color-muted)!important; font-family: var(--hs-ds-font-sans)!important; font-size: var(--hs-ds-text-xs)!important; font-weight: 600!important; letter-spacing: .04em!important; text-transform: uppercase!important; } body.agenda-mode .agenda-inline-period-grid::before{ content:"Periodo"!important; grid-column: 1 / -1!important; margin: 0 0 var(--hs-ds-space-2)!important; color: var(--hs-ds-color-muted)!important; font-family: var(--hs-ds-font-sans)!important; font-size: var(--hs-ds-text-xs)!important; font-weight: 600!important; letter-spacing: .04em!important; text-transform: uppercase!important; } /* Collaboratori */ body.agenda-mode .agenda-inline-view-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: var(--hs-ds-space-3)!important; } /* Periodo */ body.agenda-mode .agenda-inline-period-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: var(--hs-ds-space-3)!important; margin-top: var(--hs-ds-space-8)!important; } /* Se esiste solo Giorno, prende tutta la larghezza */ body.agenda-mode .agenda-inline-period-grid:has( > button:only-child ){ grid-template-columns: minmax(0,1fr)!important; } /* Tutti i controlli Vista */ body.agenda-mode .agenda-inline-view-grid button, body.agenda-mode .agenda-inline-period-grid button{ min-height: var(--hs-ds-control-height-mobile)!important; padding: 0 var(--hs-ds-space-5)!important; border: 1px solid var(--hs-ds-color-line)!important; border-radius: var(--hs-ds-radius-control)!important; background: var(--hs-ds-color-surface)!important; color: var(--hs-ds-color-ink)!important; box-shadow: var(--hs-ds-shadow-none,none)!important; font-size: var(--hs-ds-text-md)!important; font-weight: 500!important; letter-spacing: 0!important; text-align: center!important; } /* Selezione */ body.agenda-mode .agenda-inline-view-grid button.active, body.agenda-mode .agenda-inline-period-grid button.active{ border-color: var(--hs-ds-color-ink)!important; background: var(--hs-ds-color-ink)!important; color: var(--hs-ds-color-surface)!important; font-weight: 600!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ body.agenda-mode .agenda-inline-view-grid, body.agenda-mode .agenda-inline-period-grid{ gap: var(--hs-ds-space-3)!important; } } /* ===== HS FINAL REMINDER PROPORTIONS V1 ===== */ /* ========================================================= HS APPOINTMENT UX V2C ========================================================= */ /* CARD AGENDA · cliente > servizio */ /* ========================================================= HS EDIT APPOINTMENT UX V1 ========================================================= */ /* * Modifica appuntamento usa lo stesso linguaggio * visivo di Nuovo appuntamento. */ /* * Microcopy azioni: * Sposta · Annulla · Duplica · Salva. * Non forziamo più Salva su una riga separata. */ /* ========================================================= HS AGENDA COMPACT CARDS FINAL 15/30 min: solo nome cliente, una riga. ========================================================= */ /* * Le classi short/tiny corrispondono agli appuntamenti * sotto i 45 minuti nel sistema attuale. */ /* ========================================================= HAIRCUT STUDIO · GLOBAL UI CONTRACT V2 Contratto finale UI runtime ========================================================= */ :root{ --hs-layer-popover:8000; --hs-layer-panel:30000; --hs-layer-modal:56000; --hs-layer-picker:58000; --hs-layer-drag:60000; --hs-layer-toast:65000; --hs-layer-gate:100000; } /* ========================================================= LAYERS ========================================================= */ html body .home-menu-backdrop, html body .agenda-more-backdrop, html body .agenda-view-backdrop{ z-index:var(--hs-layer-popover)!important; } html body .hs-ui-modal-backdrop{ z-index:var(--hs-layer-panel)!important; } html body .waitlist-create-backdrop{ z-index:var(--hs-layer-modal)!important; } html body .agenda-drag-preview{ z-index:var(--hs-layer-drag)!important; } html body #toast{ z-index:var(--hs-layer-toast)!important; } html body #gate{ z-index:var(--hs-layer-gate)!important; } /* ========================================================= MODAL / TAB ========================================================= */ /* Header sempre sopra il contenuto della propria tab */ /* Footer azioni uniforme */ /* ========================================================= BUTTON CONTRACT ========================================================= */ html body .btn{ -webkit-text-fill-color:currentColor!important; } /* primario */ html body .btn.primary, html body button.btn.primary{ background: var(--hs-ds-color-ink)!important; border-color: var(--hs-ds-color-ink)!important; color: var(--hs-ds-color-surface)!important; -webkit-text-fill-color: var(--hs-ds-color-surface)!important; } /* secondario */ html body .btn.secondary{ background: var(--hs-ds-color-control-secondary)!important; color: var(--hs-ds-color-body-ink)!important; -webkit-text-fill-color: var(--hs-ds-color-body-ink)!important; } /* danger */ html body .btn.danger{ background: var(--hs-ds-color-danger)!important; color: var(--hs-ds-color-surface)!important; -webkit-text-fill-color: var(--hs-ds-color-surface)!important; } /* disabled globale */ html body button:disabled, html body .btn:disabled, html body button[aria-disabled="true"], html body .btn[aria-disabled="true"]{ opacity:1!important; cursor:not-allowed!important; background: var(--hs-ds-color-surface-deep)!important; border-color: var(--hs-ds-color-line)!important; color: var(--hs-ds-color-muted)!important; -webkit-text-fill-color: var(--hs-ds-color-muted)!important; box-shadow:none!important; } /* ========================================================= WAITLIST ========================================================= */ /* * Corregge la vecchia regola ZERO BLU che forza * il testo scuro anche sui bottoni primari. */ html body .waitlist-create-v2 .btn.primary:not(:disabled){ background: var(--hs-ds-color-ink)!important; color: var(--hs-ds-color-surface)!important; -webkit-text-fill-color: var(--hs-ds-color-surface)!important; } html body .waitlist-create-v2 .btn.primary:disabled{ background: var(--hs-ds-color-surface-deep)!important; color: var(--hs-ds-color-muted)!important; -webkit-text-fill-color: var(--hs-ds-color-muted)!important; } /* struttura più compatta */ html body .waitlist-create-v2{ width: min( 680px, calc(100vw - 32px) )!important; max-width:680px!important; } html body .waitlist-create-v2 .waitlist-v2-section{ gap:var(--hs-ds-space-4)!important; margin-top: var(--hs-ds-space-4)!important; padding: var(--hs-ds-space-6)!important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ html body .waitlist-create-backdrop{ align-items:flex-end!important; padding:0!important; } html body .waitlist-create-v2{ width:100%!important; max-width:none!important; max-height:94dvh!important; margin:0!important; border-bottom-left-radius:0!important; border-bottom-right-radius:0!important; } html body .waitlist-create-v2 .waitlist-v2-section{ padding: var(--hs-ds-space-5)!important; } } /* ========================================================= HS WAITLIST SAVE BUTTON CONTRAST V1 Il bottone reale usa data-waitlist-create-save. Deve vincere sulla vecchia regola WAITLIST ZERO BLU. ========================================================= */ html body .waitlist-create-v2 [data-waitlist-create-save]:not(:disabled){ background: var(--hs-ds-color-ink)!important; border-color: var(--hs-ds-color-ink)!important; color: var(--hs-ds-color-surface)!important; -webkit-text-fill-color: var(--hs-ds-color-surface)!important; } html body .waitlist-create-v2 [data-waitlist-create-save]:disabled{ background: var(--hs-ds-color-surface-deep)!important; border-color: var(--hs-ds-color-line)!important; color: var(--hs-ds-color-muted)!important; -webkit-text-fill-color: var(--hs-ds-color-muted)!important; opacity:1!important; } /* ========================================================= HAIRCUT STUDIO · UI CONTRACT HARDENING V1 Nessuna regola legacy viene rimossa. Questo blocco consolida: - gerarchia superfici - modal HS UI - dimensioni canoniche future - focus tastiera ========================================================= */ :root{ --hs-layer-ui-modal:57000; --hs-modal-width-sm:460px; --hs-modal-width-md:640px; --hs-modal-width-lg:820px; --hs-modal-width-xl:1100px; --hs-modal-max-height:88dvh; --hs-modal-max-height-mobile:94dvh; } /* ========================================================= 1 · LAYER HARDENING ========================================================= */ /* * .hs-ui-modal-backdrop è semanticamente una modal, * non un panel. * * 56000 = modal canonica * 57000 = HS UI modal * 58000 = datepicker * 60000 = drag preview */ html body .hs-ui-modal-backdrop{ z-index: var(--hs-layer-ui-modal)!important; } /* ========================================================= 2 · HS UI MODAL CONTRACT ========================================================= */ html body .hs-ui-modal-backdrop{ position:fixed!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; overflow:hidden!important; overscroll-behavior:contain!important; } html body .hs-ui-modal{ box-sizing:border-box!important; width: min( var(--hs-modal-width-sm), calc(100vw - 32px) )!important; max-width:100%!important; max-height: var(--hs-modal-max-height)!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } /* ========================================================= 3 · MODAL SIZE CONTRACT Classi future / opt-in. Non cambiano automaticamente le modal legacy. ========================================================= */ html body .hs-ui-modal.hs-modal-sm{ width: min( var(--hs-modal-width-sm), calc(100vw - 32px) )!important; max-width: var(--hs-modal-width-sm)!important; } html body .hs-ui-modal.hs-modal-md{ width: min( var(--hs-modal-width-md), calc(100vw - 32px) )!important; max-width: var(--hs-modal-width-md)!important; } html body .hs-ui-modal.hs-modal-lg{ width: min( var(--hs-modal-width-lg), calc(100vw - 32px) )!important; max-width: var(--hs-modal-width-lg)!important; } html body .hs-ui-modal.hs-modal-xl{ width: min( var(--hs-modal-width-xl), calc(100vw - 32px) )!important; max-width: var(--hs-modal-width-xl)!important; } /* ========================================================= 4 · FORM / CONTROL WIDTH SAFETY ========================================================= */ /* ========================================================= 5 · FOCUS VISIBLE CONTRACT ========================================================= */ html body :is( button, a, input, select, textarea, [role="button"], [tabindex] ):focus-visible{ outline: 3px solid var(--hs-ds-color-field-ring)!important; outline-offset: 2px!important; } /* * Mouse/touch non deve mostrare un secondo anello * se il browser supporta :focus-visible. */ html body :is( button, a, input, select, textarea, [role="button"], [tabindex] ):focus:not(:focus-visible){ outline:none; } /* ========================================================= 6 · MOBILE ========================================================= */ @media(max-width:700px){ html body .hs-ui-modal-backdrop{ align-items:flex-end!important; padding:0!important; } html body .hs-ui-modal{ width:100%!important; max-width:none!important; max-height: var(--hs-modal-max-height-mobile)!important; margin:0!important; border-bottom-left-radius: var(--hs-ds-radius-none,0)!important; border-bottom-right-radius: var(--hs-ds-radius-none,0)!important; } } /* ========================================================= HS AGENDA NAV ARROWS V1 Controlli navigazione più leggibili e coerenti. Solo presentazione: nessuna logica JS modificata. ========================================================= */ @media(min-width:901px){ html body.agenda-mode .agenda-side-arrow{ display:grid!important; place-items:center!important; width:48px!important; min-width:48px!important; height:48px!important; min-height:48px!important; padding:0!important; border: 1px solid color-mix( in srgb, var(--hs-ds-color-ink) 10%, transparent ); border-radius: var(--hs-ds-radius-circle); background: color-mix( in srgb, var(--hs-ds-color-surface) 96%, transparent ); color: var(--hs-ds-color-ink); box-shadow: 0 8px 24px color-mix( in srgb, var(--hs-ds-color-ink) 12%, transparent ); font-size:30px!important; font-weight:300!important; line-height:1!important; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease!important; } html body.agenda-mode .agenda-side-prev{ left:4px!important; } html body.agenda-mode .agenda-side-next{ right:4px!important; } html body.agenda-mode .agenda-side-arrow:hover{ background: var(--hs-ds-color-surface-soft); box-shadow: 0 10px 28px color-mix( in srgb, var(--hs-ds-color-ink) 16%, transparent ); } html body.agenda-mode .agenda-side-arrow:active{ transform: translateY(-50%) scale(.94)!important; } } /* ========================================================= HS GLOBAL BACK V1 Un solo controllo Indietro coerente per tutte le pagine. Nessuna modifica alla logica di navigazione. ========================================================= */ html body:not(.agenda-mode) .hs-ui-back{ display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; gap:var(--hs-ds-space-3)!important; min-height:42px!important; margin:0!important; padding: 0 var(--hs-ds-space-4) 0 var(--hs-ds-space-2)!important; border:0!important; border-radius: var(--hs-ds-radius-pill)!important; background: transparent!important; color: var(--hs-ds-color-ink)!important; font-family: var(--hs-ds-font-sans)!important; font-size: var(--hs-ds-text-base)!important; font-weight:600!important; line-height:1!important; cursor:pointer!important; transition: background 150ms ease, transform 150ms ease!important; } html body:not(.agenda-mode) .hs-ui-back span{ display:grid!important; place-items:center!important; width:32px!important; min-width:32px!important; height:32px!important; min-height:32px!important; margin:0!important; border-radius: var(--hs-ds-radius-circle)!important; background: var(--hs-ds-color-surface-soft)!important; color: var(--hs-ds-color-ink)!important; font-size:27px!important; font-weight:300!important; line-height:1!important; } html body:not(.agenda-mode) .hs-ui-back:hover{ background: var(--hs-ds-color-surface-soft)!important; } html body:not(.agenda-mode) .hs-ui-back:active{ transform:scale(.97)!important; } html body:not(.agenda-mode) .hs-ui-back:hover span{ background: var(--hs-ds-color-surface-deep)!important; } @media(max-width:700px){ html body:not(.agenda-mode) .hs-ui-back{ min-height:44px!important; padding-right: var(--hs-ds-space-5)!important; } html body:not(.agenda-mode) .hs-ui-back span{ width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; font-size:28px!important; } } /* ========================================================= HS MEDIA UPLOAD V1 Miniature e upload per Pagina online. ========================================================= */ .hs-media-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--hs-ds-space-3); margin-top:var(--hs-ds-space-2); } .hs-media-item, .hs-media-loading, .hs-media-add{ position:relative; margin:0; aspect-ratio:3/4; border-radius:var(--hs-ds-radius-md,14px); overflow:hidden; } .hs-media-item{ background:var(--hs-ds-color-surface-soft); } .hs-media-item img{ display:block; width:100%; height:100%; object-fit:cover; } .hs-media-index{ position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:var(--hs-ds-radius-pill); background:color-mix(in srgb,var(--hs-ds-color-ink) 72%,transparent); color:white; font-size:11px; font-weight:600; letter-spacing:.04em; } .hs-media-actions{ position:absolute; left:6px; right:6px; bottom:6px; display:flex; gap:6px; } .hs-media-mini{ flex:1; min-height:34px; border:0; border-radius:var(--hs-ds-radius-pill); background:color-mix(in srgb,var(--hs-ds-color-surface-soft) 94%,transparent); color:var(--hs-ds-color-ink); font-size:15px; font-weight:600; cursor:pointer; } .hs-media-mini:disabled{ opacity:.35; cursor:default; } .hs-media-loading{ display:grid; place-items:center; background:var(--hs-ds-color-surface-soft); color:var(--hs-ds-color-ink); font-size:12px; animation:hsMediaPulse 1.2s ease-in-out infinite; } .hs-media-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1.5px dashed color-mix(in srgb,var(--hs-ds-color-ink) 18%,transparent); background:transparent; color:var(--hs-ds-color-ink); font:inherit; cursor:pointer; } .hs-media-add span{ font-size:30px; font-weight:300; line-height:1; } .hs-media-single{ display:flex; align-items:center; gap:var(--hs-ds-space-3); } .hs-media-thumb{ display:grid; place-items:center; flex:none; width:72px; height:96px; border-radius:var(--hs-ds-radius-md,14px); overflow:hidden; background:var(--hs-ds-color-surface-soft); color:var(--hs-ds-color-ink); font-size:11px; text-align:center; } .hs-media-thumb img{ width:100%; height:100%; object-fit:cover; } .hs-media-thumb.is-busy{ animation:hsMediaPulse 1.2s ease-in-out infinite; } .hs-media-buttons{ display:flex; flex-wrap:wrap; gap:var(--hs-ds-space-2); } .hs-media-btn{ min-height:42px; padding:0 var(--hs-ds-space-4); border:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 18%,transparent); border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface,white); font:inherit; font-weight:600; cursor:pointer; } .hs-media-btn-quiet{ background:transparent; color:var(--hs-ds-color-ink); } .hs-media-btn:disabled{ opacity:.5; } @keyframes hsMediaPulse{ 50%{opacity:.55} } @media(prefers-reduced-motion:reduce){ .hs-media-loading, .hs-media-thumb.is-busy{ animation:none; } } /* ========================================================= HS ONLINE CMS V2 Schede, anteprima sempre vicina, barra salva fissa. ========================================================= */ .online-cms .eyebrow, .online-cms .online-panel-head small, .online-cms .online-panel-head > span{ display:none; } .online-cms .online-panel-head h3{ margin:0 0 var(--hs-ds-space-4); font-size:var(--hs-ds-text-xl,22px); } .online-cms .online-cms-nav [data-online-nav]{ display:flex; align-items:center; min-height:42px; padding:0 var(--hs-ds-space-4); border:0; border-radius:var(--hs-ds-radius-pill); background:transparent; color:var(--hs-ds-color-ink); font-weight:600; text-align:left; white-space:nowrap; cursor:pointer; } .online-cms .online-cms-nav [data-online-nav][hidden]{ display:none; } .online-cms .online-cms-nav [data-online-nav].active{ background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface,white); } .online-cms-editor[data-hs-tabs] .online-editor-panel{ display:none; } .online-cms-editor[data-hs-tabs] .online-editor-panel.hs-active{ display:block; } .hs-cms-extra{ margin:0 0 var(--hs-ds-space-5); padding:var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-md,14px); background:var(--hs-ds-color-surface-soft); } .hs-cms-extra h4{ margin:0 0 var(--hs-ds-space-3); font-size:var(--hs-ds-text-base); } .hs-cms-note{ display:block; color:var(--hs-ds-color-muted,currentColor); opacity:.75; font-size:13px; } .online-cms .online-save-bar{ position:sticky; bottom:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-3); margin-top:var(--hs-ds-space-5); padding:var(--hs-ds-space-3) var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-md,14px); background:var(--hs-ds-color-surface,white); box-shadow:0 -8px 24px color-mix(in srgb,var(--hs-ds-color-ink) 10%,transparent); } .hs-cms-preview-close{ display:none; } @media(min-width:1100px){ .online-cms .online-cms-layout{ display:grid; grid-template-columns:190px minmax(0,1fr) minmax(360px,440px); gap:var(--hs-ds-space-5); align-items:start; } .online-cms .online-cms-nav{ position:sticky; top:var(--hs-ds-space-4); display:flex; flex-direction:column; gap:4px; } .online-cms .online-cms-preview{ position:sticky; top:var(--hs-ds-space-4); display:flex; flex-direction:column; height:calc(100vh - 40px); } .online-cms .online-preview-stage{ flex:1; min-height:0; } .online-cms .online-preview-stage iframe{ width:100%; height:100%; border:0; border-radius:var(--hs-ds-radius-md,14px); } .hs-cms-preview-toggle{ display:none; } } @media(max-width:1099px){ .online-cms .online-cms-layout{ display:block; } .online-cms .online-cms-nav{ position:static; display:flex; gap:6px; margin:0 0 var(--hs-ds-space-4); padding:var(--hs-ds-space-2) 0; overflow-x:auto; background:var(--hs-ds-color-surface,white); scrollbar-width:none; } .online-cms .online-cms-nav::-webkit-scrollbar{ display:none; } .online-cms .online-cms-preview{ display:none; } .online-cms.hs-preview-open .online-cms-preview{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px); background:var(--hs-ds-color-surface-soft); } .online-cms.hs-preview-open .online-preview-stage{ flex:1; min-height:0; } .online-cms.hs-preview-open .online-preview-stage iframe{ width:100%; height:100%; border:0; border-radius:var(--hs-ds-radius-md,14px); } .online-cms .online-preview-devices{ display:none; } .hs-cms-preview-close{ display:inline-flex; align-items:center; min-height:40px; padding:0 var(--hs-ds-space-4); border:0; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface,white); font-weight:600; } .hs-cms-preview-toggle{ position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 90px); z-index:150; min-height:48px; padding:0 var(--hs-ds-space-5); border:0; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface,white); font-weight:600; box-shadow:0 10px 26px color-mix(in srgb,var(--hs-ds-color-ink) 25%,transparent); } } /* ========================================================= HS ONLINE CMS V3 · schede testi ========================================================= */ .online-cms .hs-cms-search{ width:100%; min-height:46px; margin:var(--hs-ds-space-3) 0 var(--hs-ds-space-5); } .online-cms .hs-cms-group{ margin:0 0 var(--hs-ds-space-6,24px); } .online-cms .hs-cms-group h4{ margin:0 0 var(--hs-ds-space-3); font-size:var(--hs-ds-text-base); } .online-cms .hs-cms-text-row label{ font-weight:500; opacity:.8; } .online-cms .hs-cms-group[hidden], .online-cms .hs-cms-text-row[hidden]{ display:none; } /* ========================================================= HS ONLINE CMS V4 · aree, regole, recensioni ========================================================= */ .online-cms .hs-cms-modes{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--hs-ds-space-5); padding:6px; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface-soft); } .online-cms .hs-cms-modes button{ flex:1; min-height:46px; padding:0 var(--hs-ds-space-4); border:0; border-radius:var(--hs-ds-radius-pill); background:transparent; color:var(--hs-ds-color-ink); font-weight:600; white-space:nowrap; cursor:pointer; } .online-cms .hs-cms-modes button.active{ background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface,white); } .online-cms .hs-cms-search{ width:100%; min-height:46px; margin:var(--hs-ds-space-3) 0 var(--hs-ds-space-5); } .online-cms .hs-cms-group{ margin:0 0 var(--hs-ds-space-6,24px); } .online-cms .hs-cms-group h4{ margin:0 0 var(--hs-ds-space-3); font-size:var(--hs-ds-text-base); } .online-cms .hs-cms-text-row label{ font-weight:500; opacity:.8; } .online-cms .hs-cms-group[hidden], .online-cms .hs-cms-text-row[hidden]{ display:none; } .online-cms .hs-cms-links{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--hs-ds-space-3); margin-top:var(--hs-ds-space-4); } .online-cms .hs-rev-row{ padding:var(--hs-ds-space-4) 0; border-top:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 12%,transparent); } .online-cms [data-hs-rev-add]{ margin-top:var(--hs-ds-space-3); } /* ========================================================= HS SETTINGS UNIFORM V1 Stesso aspetto per tutte le pagine Impostazioni. Solo presentazione: nessun salvataggio toccato. ========================================================= */ /* via etichette maiuscole e numeri 01/02 */ html body :is( .agenda-setting-section, .settings-index, .services-shell ) :is(.eyebrow,.section-eyebrow){ display:none; } html body .settings-block-head > span, html body .settings-block-head small{ display:none; } html body .settings-block-head strong{ font-size:var(--hs-ds-text-lg,19px); font-weight:700; } /* intestazione pagina */ html body .agenda-setting-section .section-intro{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--hs-ds-space-3); margin:0 0 var(--hs-ds-space-5); } html body .agenda-setting-section .section-intro h2{ margin:0; } html body .agenda-setting-section .section-intro p{ margin:var(--hs-ds-space-1,4px) 0 0; } /* schede tutte uguali */ html body :is( .booking-settings-card, .notification-settings-card, .hours-week-card, .hours-exceptions-card, .hs-online-card, .live-settings-card, .team-permission-card ){ padding:var(--hs-ds-space-5); border:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 10%,transparent); border-radius:var(--hs-ds-radius-lg,20px); background:var(--hs-ds-color-surface,white); box-shadow:none; } html body :is(.booking-settings-grid,.notification-settings-grid,.hours-settings-layout){ gap:var(--hs-ds-space-4); } /* righe interruttore leggibili */ html body .team-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-4); padding:var(--hs-ds-space-3) 0; border-top:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 8%,transparent); } html body .team-toggle-row:first-of-type{ border-top:0; } html body .team-toggle-row strong{ display:block; font-weight:600; } html body .team-toggle-row span{ display:block; opacity:.75; font-size:var(--hs-ds-text-sm,14px); line-height:1.4; } /* barra Salva sempre visibile */ html body :is(.settings-save-bar,.hours-save-row){ position:sticky; bottom:0; z-index:6; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-3); margin-top:var(--hs-ds-space-5); padding:var(--hs-ds-space-3) var(--hs-ds-space-4); border-radius:var(--hs-ds-radius-md,14px); background:var(--hs-ds-color-surface,white); box-shadow:0 -8px 24px color-mix(in srgb,var(--hs-ds-color-ink) 10%,transparent); } html body :is(.settings-save-bar,.hours-save-row) > span{ opacity:.75; font-size:var(--hs-ds-text-sm,14px); } /* indice Impostazioni */ html body .settings-index-section{ margin:0 0 var(--hs-ds-space-5); } html body .settings-index-section h3{ margin:0 0 var(--hs-ds-space-2); font-size:var(--hs-ds-text-sm,14px); font-weight:600; letter-spacing:0; text-transform:none; opacity:.7; } html body .settings-index-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-3); width:100%; min-height:64px; padding:var(--hs-ds-space-3) var(--hs-ds-space-4); border:0; border-top:1px solid color-mix(in srgb,var(--hs-ds-color-ink) 8%,transparent); background:transparent; text-align:left; cursor:pointer; } html body .settings-index-row strong{ display:block; font-weight:600; } html body .settings-index-row span span, html body .settings-index-row small{ display:block; opacity:.7; font-size:var(--hs-ds-text-sm,14px); } /* ========================================================= HS ONLINE AVAILABILITY V1 + COMMISSION PEOPLE V1 ========================================================= */ html body .hs-online-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--hs-ds-space-3); padding:var(--hs-ds-space-3) 0; border-top:thin solid color-mix(in srgb,var(--hs-ds-color-ink) 8%,transparent); } html body .hs-online-row strong{ display:block; font-weight:600; } html body .hs-online-row small{ display:block; opacity:.7; } html body :is(.hs-online-row,.hs-cp-switch) label, html body .hs-cp-switch{ display:inline-flex; align-items:center; gap:var(--hs-ds-space-2); min-height:2.75rem; padding:0 .875rem; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-surface-soft); white-space:nowrap; cursor:pointer; } html body :is(.hs-online-row,.hs-cp-switch) input[type=checkbox]{ -webkit-appearance:checkbox; appearance:auto; flex:none; width:1.25rem; height:1.25rem; margin:0; accent-color:var(--hs-ds-color-ink); } @media(max-width:35em){ html body .hs-online-row{ grid-template-columns:1fr 1fr; } html body .hs-online-row > div{ grid-column:1 / -1; } } html body .hs-cp-row{ padding:var(--hs-ds-space-4) 0; border-top:thin solid color-mix(in srgb,var(--hs-ds-color-ink) 8%,transparent); } html body .hs-cp-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-3); } html body .hs-cp-head strong, html body .hs-cp-head small{ display:block; } html body .hs-cp-tiers{ display:grid; gap:var(--hs-ds-space-3); margin-top:var(--hs-ds-space-3); } html body .hs-cp-tiers[hidden]{ display:none; } html body .hs-cp-tiers label{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hs-ds-space-2); } html body .hs-cp-tiers input{ width:5.25rem; min-height:2.75rem; } /* ========================================================= HS AGENDA SKIN V1 Stesso linguaggio di /prenota: toni caldi, vetro, comandi stile iOS. SOLO aspetto: nessuna posizione o altezza toccata (drag & drop, swipe e viste invariati). ========================================================= */ html body.agenda-mode{ --ag-bg:hsl(38 33% 92%); --ag-paper:hsl(40 38% 96%); --ag-ink:hsl(36 14% 16%); --ag-soft:hsl(36 9% 36%); --ag-faint:hsl(36 9% 52%); --ag-line:hsl(36 18% 85%); --ag-gold:hsl(36 39% 47%); --ag-gold-soft:hsl(38 45% 88%); --ag-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --ag-ease:cubic-bezier(.16,1,.3,1); --ag-glass:saturate(1.6) blur(1.25rem); background:var(--ag-bg); color:var(--ag-ink); } html body.agenda-mode #app .agenda-side-arrow{ background:var(--ag-paper); border:thin solid var(--ag-line); border-radius:50%; color:var(--ag-soft); box-shadow:0 .5rem 1.25rem -.75rem color-mix(in srgb,var(--ag-ink) 30%,transparent); } /* ---------- selettori stile iOS (vista, persone, giorno/settimana) ---------- */ html body.agenda-mode #app :is(.agenda-view-switch,.agenda-staff-filter-tabs,.agenda-personal-range-tabs){ background:color-mix(in srgb,var(--ag-ink) 6%,transparent); border:0; border-radius:.75rem; padding:.1875rem; box-shadow:none; } html body.agenda-mode #app :is(.agenda-view-switch,.agenda-staff-filter-tabs,.agenda-personal-range-tabs) button{ background:transparent; border:0; border-radius:.625rem; color:var(--ag-soft); font-weight:600; box-shadow:none; transition:background .35s var(--ag-ease),color .25s,box-shadow .35s var(--ag-ease); } html body.agenda-mode #app :is(.agenda-view-switch,.agenda-staff-filter-tabs,.agenda-personal-range-tabs) button.active{ background:var(--ag-paper); color:var(--ag-ink); box-shadow:0 .125rem .375rem color-mix(in srgb,var(--ag-ink) 14%,transparent); } /* ---------- intestazione team ---------- */ html body.agenda-mode #app .agenda-staff-head{ background:color-mix(in srgb,var(--ag-paper) 84%,transparent); -webkit-backdrop-filter:var(--ag-glass); backdrop-filter:var(--ag-glass); border-bottom:thin solid var(--ag-line); box-shadow:none; } html body.agenda-mode #app .agenda-person strong{ font-family:var(--ag-display); font-weight:700; letter-spacing:0; color:var(--ag-ink); } html body.agenda-mode #app .agenda-person span{ color:var(--ag-faint); font-variant-numeric:tabular-nums; } /* ---------- colonne ---------- */ html body.agenda-mode #app :is(.agenda-lane,.agenda-week-lane){ background: repeating-linear-gradient(135deg,transparent 0 .4375rem,color-mix(in srgb,var(--ag-ink) 3.5%,transparent) .4375rem .5rem), var(--ag-paper); border-color:var(--ag-line); } html body.agenda-mode #app .agenda-working-window{ background:color-mix(in srgb,var(--agenda-team-color,var(--ag-gold)) 5%,var(--ag-paper)); border:0; box-shadow:none; } html body.agenda-mode #app .agenda-45-slot{ background:transparent; border:0; border-top:thin solid color-mix(in srgb,var(--agenda-team-color,var(--ag-gold)) 10%,var(--ag-line)); border-radius:0; box-shadow:none; transition:background .25s; } html body.agenda-mode #app .agenda-45-slot:hover{ background:color-mix(in srgb,var(--agenda-team-color,var(--ag-gold)) 7%,transparent); } html body.agenda-mode #app .agenda-slot-time{ color:var(--ag-faint); font-weight:500; font-variant-numeric:tabular-nums; } html body.agenda-mode #app .agenda-unavailable-block{ background:repeating-linear-gradient(135deg,transparent 0 .4375rem,color-mix(in srgb,var(--agenda-team-color,var(--ag-ink)) 10%,transparent) .4375rem .5rem); border:0; box-shadow:none; } html body.agenda-mode #app .agenda-unavailable-block span{ background:var(--ag-paper); border:thin solid var(--ag-line); border-radius:999rem; color:var(--ag-soft); font-variant-numeric:tabular-nums; } /* ---------- appuntamenti ---------- */ html body.agenda-mode #app .agenda-appointment.agenda-selected{ box-shadow: inset .1875rem 0 0 var(--agenda-team-color,var(--ag-gold)), 0 0 0 .125rem var(--ag-gold); } /* ---------- vista settimana ---------- */ html body.agenda-mode #app .agenda-week-day-head{ background:color-mix(in srgb,var(--ag-paper) 84%,transparent); -webkit-backdrop-filter:var(--ag-glass); backdrop-filter:var(--ag-glass); border-color:var(--ag-line); } html body.agenda-mode #app .agenda-week-day-head small{ color:var(--ag-faint); font-weight:600; text-transform:capitalize; } html body.agenda-mode #app .agenda-week-day-head strong{ font-family:var(--ag-display); font-weight:700; letter-spacing:0; color:var(--ag-ink); } html body.agenda-mode #app .agenda-week-day-head.today strong{ color:var(--ag-gold); } html body.agenda-mode #app .agenda-week-day-head span{ color:var(--ag-faint); font-variant-numeric:tabular-nums; } html body.agenda-mode #app .agenda-time-axis span{ color:var(--ag-faint); font-variant-numeric:tabular-nums; } /* ---------- barra in basso ---------- */ html body.agenda-mode #app #nav{ background:color-mix(in srgb,var(--ag-bg) 82%,transparent); -webkit-backdrop-filter:var(--ag-glass); backdrop-filter:var(--ag-glass); border-top:thin solid var(--ag-line); box-shadow:none; } html body.agenda-mode #app #nav button{ color:var(--ag-faint); transition:color .25s,transform .15s var(--ag-ease); } html body.agenda-mode #app #nav button:active{ transform:scale(.94); } html body.agenda-mode #app #nav button.active{ color:var(--ag-ink); } html body.agenda-mode #app #nav button.active .ui-nav-icon{ color:var(--ag-gold); } @media (prefers-reduced-motion:reduce){ html body.agenda-mode #app *{transition:none} } /* ========================================================= HS AGENDA CARD RESPONSIVE V2 Priorità: cliente > servizio. La tipografia reagisce alla larghezza reale della card, non soltanto alla larghezza del viewport. ========================================================= */ /* Cliente: sempre la prima informazione leggibile */ /* Servizio: seconda priorità */ /* * Card stretta: * il nome resta, il servizio viene sacrificato. */ /* * Card molto stretta: * preserviamo ogni pixel disponibile per il cliente. */ /* HS AGENDA ADD MENU AIR V2 */ html body .agenda-add-menu{ padding-bottom: max( 1.75rem, calc( 1.25rem + env(safe-area-inset-bottom,0rem) ) ) !important; } html body .agenda-add-menu > :last-child{ margin-bottom:.25rem; } /* ========================================================= HS SHEET V1 - bottom sheet nativo (Vista Agenda / Calendario) Componente isolato: vive in document.body tramite portal. ========================================================= */ @keyframes hsSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes hsSheetFade{from{opacity:0}to{opacity:1}} /* HS SHEET V2 */ /* HS LONG PRESS V1 */ [data-agenda-appointment]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} [data-agenda-appointment].agenda-hold-armed{ transform:scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.18); transition:transform .15s ease,box-shadow .15s ease;z-index:6; } /* HS SHEETS SYSTEM V1 - pannelli agenda (Aggiungi, Generale, Attesa...) su telefono */ /* ========================================================= HS SHEET V4 - sfondo solido, spazio in fondo, titolo centrato, PC al centro ========================================================= */ /* ========================================================= HS TOPBAR V1 - barra agenda nitida + chip con badge centrato ========================================================= */ /* niente velo sopra la barra: il gradiente dell'header creava la sfocatura */ html body.agenda-mode #app > header{ background:transparent!important;background-image:none!important; } /* ========================================================= HS TOPBAR V2 - disposizione mobile pulita riga 1: ricerca | data centrata | selezione riga 2: utente, Oggi, Attesa ........ persona ========================================================= */ @media (max-width:820px){ html body.agenda-mode #app .agenda-command-shell-v6.agenda-command-shell-v6 .agenda-v6-popover-host{grid-column:1 / -1!important} } /* ========================================================= HS TOPBAR V3 - via ogni velo/vetro dalla parte alta ========================================================= */ html body.agenda-mode #app > header, html body.agenda-mode #app > header::before, html body.agenda-mode #app > header::after { backdrop-filter:none!important;-webkit-backdrop-filter:none!important; -webkit-mask-image:none!important;mask-image:none!important;background-image:none!important; } /* Aggiungi e pannelli agenda: spazio in fondo sul pannello intero */ /* ========================================================= HS POLISH V1 ========================================================= */ /* 1) qualsiasi pannello della pila: ultima voce mai sotto la barra home */ /* 2) testo della barra sempre nitido: nessun livello grafico congelato a riposo */ html body.agenda-mode #view{ animation-fill-mode:none!important;will-change:auto!important; } /* ========================================================= COMPONENTE: BARRA AGENDA - unica definizione, senza priorita forzate Qualsiasi regola sulla barra va scritta SOLO qui. ========================================================= */ #app .agenda-command-shell-v6{ --tb-paper:var(--hs-ds-color-app-bg);--tb-line:var(--hs-ds-color-line);--tb-ink:var(--hs-ds-color-ink);--tb-muted:var(--hs-ds-color-muted); --tb-accent:var(--hs-ds-color-accent);--tb-accent-soft:color-mix(in srgb,var(--hs-ds-color-accent) 14%,var(--hs-ds-color-surface)); position:relative;z-index:1000;display:grid;align-items:center; background:var(--tb-paper);border-bottom:1px solid var(--tb-line); } #app .agenda-command-shell-v6 :is(.agenda-v6-actions-row,.agenda-v6-navigation-row,.agenda-v6-actions-left,.agenda-v6-actions-right){display:contents} #app .agenda-command-shell-v6 .agenda-v6-title{display:none} /* chip: Oggi, Attesa, persona, utente - stessi angoli e altezza minima del resto dell'app (.btn) */ #app .agenda-command-shell-v6 :is(.agenda-v6-action,.agenda-v6-view,.agenda-v6-user){ display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box; height:44px;margin:0;border:1px solid var(--tb-line);border-radius:12px; background:var(--tb-paper);color:var(--tb-ink);white-space:nowrap;text-align:center;letter-spacing:normal; } #app .agenda-command-shell-v6 :is(.agenda-v6-action,.agenda-v6-view) > *{letter-spacing:normal} #app .agenda-command-shell-v6 .agenda-v6-action{font-family:"Avenir Next", Avenir, -apple-system, "system-ui", "Segoe UI", sans-serif;padding:0 14px;font-size:13px;font-weight:600;line-height:1} #app .agenda-command-shell-v6 .agenda-v6-action > span{display:block;line-height:1} #app .agenda-command-shell-v6 .agenda-v6-action > strong{ display:flex;align-items:center;justify-content:center;box-sizing:border-box; min-width:20px;height:20px;padding:0 6px;border-radius:999px; background:var(--tb-accent);color:var(--tb-paper); font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums; } #app .agenda-command-shell-v6 .agenda-v6-view{font-family:"Avenir Next", Avenir, -apple-system, "system-ui", "Segoe UI", sans-serif;padding:0 8px;font-size:13px;font-weight:600;line-height:1.4} #app .agenda-command-shell-v6 .agenda-v6-view > span{display:block} #app .agenda-command-shell-v6 .agenda-v6-view > i{display:block;margin-left:2px;font-size:11px;font-style:normal;opacity:.55} #app .agenda-command-shell-v6 .agenda-v6-user{font-family:"Avenir Next", Avenir, -apple-system, "system-ui", "Segoe UI", sans-serif;padding:0 8px;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.045em} #app .agenda-command-shell-v6 .agenda-v6-user > i{display:block;width:6px;height:6px;border-radius:50%;background:#35a45c;box-shadow:0 0 0 2px rgba(53,164,92,.12)} #app .agenda-command-shell-v6 .agenda-v6-user > span{display:block;overflow:hidden;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:normal;color:#101c17} #app .agenda-command-shell-v6 :is(.agenda-v6-action,.agenda-v6-view,.agenda-v6-icon).active{background:var(--tb-accent-soft);border-color:var(--tb-accent)} /* icone ricerca / selezione - stessi angoli e altezza minima del resto dell'app (.btn) */ #app .agenda-command-shell-v6 .agenda-v6-icon{ font-family:"Avenir Next", Avenir, -apple-system, "system-ui", "Segoe UI", sans-serif;display:grid;place-items:center;justify-content:center;align-content:center; box-sizing:border-box;width:44px;height:44px;margin:0;padding:0; border:1px solid var(--tb-line);border-radius:12px;background:var(--tb-paper);color:var(--tb-ink); font-size:22px;line-height:1;letter-spacing:-.008em; } #app .agenda-command-shell-v6 .agenda-v6-icon .ui-icon{display:block;width:19px;height:19px} /* data */ #app .agenda-command-shell-v6 .agenda-v6-date{display:flex;align-items:center;justify-content:center;justify-self:center;gap:2px;min-width:0;margin:0} #app .agenda-command-shell-v6 .agenda-v6-date-arrow{ font-family:"Avenir Next", Avenir, -apple-system, "system-ui", "Segoe UI", sans-serif;display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:0;border-radius:50%; background:none;color:var(--tb-muted);font-size:22px;font-weight:900;line-height:1;letter-spacing:-.008em; } #app .agenda-command-shell-v6 .agenda-v6-date-title{ font-family:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;display:block;min-width:0;padding:4px 6px;border:0;border-radius:10px;background:none;color:var(--tb-ink); font-size:clamp(18px,5.2vw,22px);font-weight:600;line-height:1.1;letter-spacing:normal; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; -webkit-font-smoothing:antialiased;font-synthesis:none; } @media (hover:hover){ #app .agenda-command-shell-v6 :is(.agenda-v6-action,.agenda-v6-view,.agenda-v6-user,.agenda-v6-icon,.agenda-v6-date-arrow):hover{background:#f2ece3} } /* telefono: ricerca | data | selezione / utente, Oggi, Attesa ... persona */ @media (max-width:820px){ #app .agenda-command-shell-v6{ grid-template-columns:44px auto auto minmax(0,1fr) auto 44px; grid-template-areas:"search date date date date select" "user user today wait view view"; gap:10px 8px;padding:10px 14px 12px; } #app .agenda-command-shell-v6.no-wait{ grid-template-areas:"search date date date date select" "user user today today view view"; } #app .agenda-command-shell-v6 .agenda-v6-search{grid-area:search;justify-self:start} #app .agenda-command-shell-v6 .agenda-v6-select{grid-area:select;justify-self:end} #app .agenda-command-shell-v6 .agenda-v6-date{grid-area:date} #app .agenda-command-shell-v6 .agenda-v6-user{grid-area:user;justify-self:start} #app .agenda-command-shell-v6 .agenda-v6-action:not(.agenda-v6-waitlist){grid-area:today} #app .agenda-command-shell-v6 .agenda-v6-waitlist{grid-area:wait;justify-self:start} #app .agenda-command-shell-v6 .agenda-v6-view{grid-area:view;justify-self:end} } /* PC: utente, data ........ Oggi, Attesa, persona, ricerca, selezione */ @media (min-width:821px){ #app .agenda-command-shell-v6{ grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto auto; grid-template-areas:"user date . today waitlist view search select" "pop pop pop pop pop pop pop pop"; gap:0 6px;padding:8px 12px; } #app .agenda-command-shell-v6.no-wait{ grid-template-areas:"user date . today today view search select" "pop pop pop pop pop pop pop pop"; } #app .agenda-command-shell-v6 .agenda-v6-user{grid-area:user;padding:0 10px} #app .agenda-command-shell-v6 .agenda-v6-user > i{width:7px;height:7px} #app .agenda-command-shell-v6 .agenda-v6-date{grid-area:date;gap:4px} #app .agenda-command-shell-v6 .agenda-v6-date-arrow{flex:0 0 22px;width:22px;height:28px} #app .agenda-command-shell-v6 .agenda-v6-date-title{font-size:18px;padding:4px 5px;overflow:visible;text-overflow:clip} #app .agenda-command-shell-v6 .agenda-v6-action:not(.agenda-v6-waitlist){grid-area:today} #app .agenda-command-shell-v6 .agenda-v6-waitlist{grid-area:waitlist} #app .agenda-command-shell-v6 .agenda-v6-view{grid-area:view;padding:0 10px} #app .agenda-command-shell-v6 .agenda-v6-search{grid-area:search} #app .agenda-command-shell-v6 .agenda-v6-select{grid-area:select} #app .agenda-command-shell-v6 .agenda-v6-icon{width:36px;height:36px} } /* ========================================================= COMPONENTE: CARD APPUNTAMENTO - aspetto unico e leggibile La posizione (top/altezza/colonna) resta gestita dalla griglia agenda. ========================================================= */ #app .agenda-appointment{ --card-c:var(--agenda-team-color,#a78149); display:flex;flex-direction:column;justify-content:flex-start; box-sizing:border-box;padding:7px 10px 7px 12px;border:0;border-radius:12px; background:color-mix(in srgb,var(--card-c) 13%,#fbf9f5); box-shadow:inset 3px 0 0 var(--card-c); color:#1f1b16;text-align:left;overflow:hidden; container-type:inline-size; -webkit-font-smoothing:antialiased; } #app .agenda-appointment:active{filter:brightness(.97)} #app .agenda-appointment-layout{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%} #app .agenda-appointment-copy{display:flex;flex-direction:column;gap:2px;min-width:0} #app .agenda-appointment-name{ display:flex;align-items:center;gap:6px;min-width:0;margin:0; font-size:15px;font-weight:650;line-height:1.2;letter-spacing:-.01em;color:#1f1b16; } #app .agenda-appointment-name > span{ display:block;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; } #app .agenda-note-dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--card-c)} #app .agenda-appointment-meta{ display:block;min-width:0;font-size:13px;font-weight:500;line-height:1.25; color:rgba(31,27,22,.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #app .agenda-appointment-note{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-top:2px;font-size:12px;line-height:1.3;color:rgba(31,27,22,.6); } /* card corte: una riga sola, solo il nome */ #app :is(.agenda-appointment-short,.agenda-appointment-tiny){justify-content:center;padding-top:2px;padding-bottom:2px} #app :is(.agenda-appointment-short,.agenda-appointment-tiny) :is(.agenda-appointment-meta,.agenda-appointment-note){display:none} #app .agenda-appointment-short .agenda-appointment-name{font-size:14px} #app .agenda-appointment-tiny .agenda-appointment-name{font-size:13px} /* card strette: priorita al nome */ @container (max-width:8rem){ #app .agenda-appointment-meta, #app .agenda-appointment-note{display:none} #app .agenda-appointment-name{font-size:13px} } @container (max-width:6rem){ #app .agenda-appointment-name{font-size:12px} #app .agenda-note-dot{display:none} } /* HS: tasti scheda appuntamento - Annulla e Duplica affiancati, Salva sotto a tutta larghezza */ /* ========================================================= HS AGENDA PIU ALTA: 65px ogni 45 minuti (prima 50px) ========================================================= */ html body.agenda-mode .agenda-lanes, html body.agenda-mode .agenda-lane{height:1130px!important;min-height:1130px!important} /* COMPONENTE CARD - tre righe: orario / nome / servizio */ #app .agenda-appointment{padding:6px 10px 6px 12px} #app .agenda-appointment-time{ display:block;font-size:12px;font-weight:600;line-height:1.2; color:rgba(31,27,22,.6);font-variant-numeric:tabular-nums;white-space:nowrap; } #app .agenda-appointment-copy{gap:1px} #app .agenda-appointment-meta{white-space:nowrap} #app :is(.agenda-appointment-short,.agenda-appointment-tiny) .agenda-appointment-copy{flex-direction:row;align-items:baseline;gap:6px} #app :is(.agenda-appointment-short,.agenda-appointment-tiny) .agenda-appointment-time{font-size:11px} @container (max-width:8rem){ #app .agenda-appointment-meta{display:block;font-size:12px} #app .agenda-appointment-name{font-size:14px} #app .agenda-appointment-time{font-size:11px} } @container (max-width:5.5rem){ #app .agenda-appointment-meta, #app .agenda-appointment-note{display:none} } /* HS: tasti scheda appuntamento - Elimina | Duplica, Salva grande sotto */ /* COMPONENTE CARD - testi: orario semplice / NOME / servizio */ #app .agenda-appointment-time{font-size:12px;font-weight:400;color:rgba(31,27,22,.55)} #app .agenda-appointment-name{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em} #app .agenda-appointment-meta{font-size:12px;font-weight:600;color:rgba(31,27,22,.55)} @container (max-width:8rem){ #app .agenda-appointment-name{font-size:13px} #app .agenda-appointment-meta{font-size:11.5px} } @container (max-width:5.5rem){ #app .agenda-appointment-meta, #app .agenda-appointment-note{display:none} } /* HS: barra tasti scheda appuntamento allineata ai campi */ /* HS GIORNO V1: calendario sempre sopra tutto */ /* HS ALERT V1 */ /* ========================================================= HS PROMEMORIA V1 - avviso discreto in alto, l'app resta usabile ========================================================= */ @keyframes hsBannerIn{from{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}} /* HS CONFIRM V1 */ /* ========================================================= HS RIFINITURE MOBILE V2 ========================================================= */ @media (max-width:820px){ /* Inventario: nome a sinistra, disponibilita e -1 a destra */ html body .inventory-product.inventory-product{ display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important;gap:12px!important;text-align:left!important;padding:12px 4px!important; } html body .inventory-product.inventory-product .inventory-product-info{text-align:left!important;min-width:0!important;margin:0!important} html body .inventory-product.inventory-product > *:not(.inventory-product-info){justify-self:end!important;text-align:right!important;margin:0!important} html body .inventory-product.inventory-product .inventory-actions{display:flex!important;gap:6px!important;justify-content:flex-end!important;width:auto!important;margin:0!important} /* Aggiungi dallo slot: pannello intero e spazio sotto la barra home */ } /* HS RIFINITURE MOBILE V3: Aggiungi/Evento dallo slot piu alto */ @media (max-width:820px){ html body .agenda-stack-add.agenda-stack-add.agenda-stack-add{ min-height:48vh!important;min-height:48dvh!important;top:auto!important;bottom:0!important; justify-content:flex-start!important;box-sizing:border-box!important; padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 22px))!important; } } /* ========================================================= COMPONENTE: PANNELLI - una definizione per elemento (Aggiungi, Generale, Vista, Calendario) ========================================================= */ @media(max-width:700px){ .agenda-inline-panel{ width:100%; margin-top:7px; border:1px solid var(--line); border-radius:11px; background:var(--hs-ds-color-surface); overflow:hidden; } .agenda-inline-panel-head{ min-height:38px; padding:var(--hs-ds-space-3) var(--hs-ds-space-5); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .agenda-inline-panel-head strong{ font-size:10px; } .agenda-inline-panel-head button{ width:25px; height:25px; border:0; border-radius:var(--hs-ds-radius-circle); background:#eeeae1; } .agenda-inline-panel-body{ max-height:260px; overflow:auto; padding:var(--hs-ds-space-4) var(--hs-ds-space-5); } .agenda-inline-panel .agenda-month-strip{ width:100%; max-width:none; margin:0; border:0; box-shadow:none; } .agenda-inline-panel-v4{ margin-top:5px; border-radius:9px; box-shadow:0 10px 26px var(--hs-ds-color-field-ring); } .agenda-inline-panel-v4 .agenda-inline-panel-head{ min-height:33px; padding:var(--hs-ds-space-2) 9px; } .agenda-inline-panel-v4 .agenda-inline-panel-body{ max-height:330px; padding:7px 9px; } } @media(max-width:700px){ @media(max-width:600px){ .agenda-inline-panel-v4{ width:100%; max-width:none; } } } @media(max-width:700px){ .agenda-stack-panel.is-top{ z-index:20; pointer-events:auto; } .agenda-stack-panel.is-behind{ opacity:.96; } .agenda-stack-head strong{ font-size:var(--hs-ds-text-xs); text-align:center; } } @media(max-width:700px){ @media(min-width:701px){ .agenda-stack-panel{ top:0!important; left:calc( var(--stack-index) * (100% + 9px) )!important; transform:none!important; } .agenda-popover-root-spotlight .agenda-stack-panel, .agenda-popover-root-add .agenda-stack-panel{ left:auto!important; right:calc( var(--stack-index) * (100% + 9px) )!important; } } } @media(max-width:700px){ .agenda-popover-stack *{ pointer-events:auto; } .agenda-stack-spotlight .agenda-stack-head{ display:grid!important; } .agenda-popover-stack button, .agenda-popover-stack span{ color:var(--hs-ds-color-ui-strong); } .agenda-popover-stack small, .agenda-popover-stack .muted{ color:var(--hs-ds-color-ui-muted)!important; } .agenda-stack-panel{ position:absolute; top:0; left:0; border:1px solid var(--line); border-radius:var(--hs-ds-radius-sm); overflow:hidden; box-shadow:0 16px 42px var(--hs-ds-color-field-border); transform:translate( calc(var(--stack-index) * 16px), calc(var(--stack-index) * 7px) ); pointer-events:none; color:var(--hs-ds-color-ui-strong)!important; width:100%!important; max-height:min( 520px, calc(100dvh - 130px) )!important; background:var(--hs-ds-color-surface)!important; } .agenda-stack-head{ display:grid; align-items:center; border-bottom:1px solid var(--line); background:var(--hs-ds-color-surface)!important; min-height:48px!important; padding:var(--hs-ds-space-3) var(--hs-ds-space-5)!important; grid-template-columns:32px minmax(0,1fr) 32px!important; } .agenda-stack-head > strong{ letter-spacing:0!important; font-size:var(--hs-ds-text-lg)!important; line-height:1.15!important; font-weight:700!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-stack-head button{ padding:0; border:0; border-radius:7px; background:transparent; width:30px!important; height:30px!important; font-size:var(--hs-ds-text-lg)!important; font-weight:400!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-stack-body{ overflow:auto; overscroll-behavior:contain; color:var(--hs-ds-color-ui-strong)!important; max-height:calc(100dvh - 190px)!important; padding:var(--hs-ds-space-5) var(--hs-ds-space-6)!important; font-size:var(--hs-ds-text-md)!important; line-height:1.35!important; } .agenda-stack-body small, .agenda-stack-body .muted{ font-size:var(--hs-ds-text-label)!important; line-height:1.25!important; font-weight:400!important; color:#5d625f!important; } .agenda-stack-body label{ font-size:12px!important; font-weight:600!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-stack-body input, .agenda-stack-body select, .agenda-stack-body textarea{ font-size:var(--hs-ds-text-md)!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-stack-body .btn{ font-size:15px; } .agenda-stack-body button{ font-size:var(--hs-ui-text)!important; } .agenda-stack-body .btn.small, .agenda-stack-body .agenda-quick-add-last{ font-size:15px!important; } .agenda-popover-stack{ position:absolute; top:calc(100% + 5px); left:0; height:0; pointer-events:auto; font-weight:400!important; width:min( 420px, calc(100vw - 24px) )!important; z-index:9000!important; color:var(--hs-ds-color-ui-strong)!important; } .agenda-popover-stack input, .agenda-popover-stack select, .agenda-popover-stack textarea, .agenda-popover-stack label, .agenda-popover-stack strong{ color:var(--hs-ds-color-ui-strong)!important; } .agenda-popover-stack .btn:not(.secondary):not(.danger), .agenda-popover-stack .btn:not(.secondary):not(.danger) *{ color:var(--hs-ds-color-surface)!important; } .agenda-popover-stack .btn.secondary{ color:var(--hs-ds-color-ui-strong)!important; } body:has(.modal-backdrop) .agenda-popover-stack{ visibility:hidden!important; pointer-events:none!important; } } @media(max-width:700px){ @media(min-width:1101px){ .agenda-stack-panel{ top:0!important; left:calc( var(--stack-index) * (100% + 10px) )!important; transform:none!important; } .agenda-popover-root-spotlight .agenda-stack-panel, .agenda-popover-root-add .agenda-stack-panel{ left:auto!important; right:calc( var(--stack-index) * (100% + 10px) )!important; } } } @media(max-width:700px){ @media(min-width:701px) and (max-width:1100px){ .agenda-popover-stack{ width:min( 390px, calc(100vw - 24px) )!important; } .agenda-stack-panel{ left:0!important; right:auto!important; transform:none!important; } .agenda-stack-panel.is-behind{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } } } @media(max-width:700px){ @media(max-width:700px){ .agenda-popover-stack{ width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important; } .agenda-stack-panel{ left:0!important; right:0!important; width:100%!important; transform:none!important; max-height:calc(100dvh - 110px)!important; } .agenda-stack-panel.is-behind{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } .agenda-stack-body{ max-height:calc(100dvh - 170px)!important; padding:var(--hs-ds-space-5)!important; } .agenda-stack-head > strong{ font-size:17px!important; } } } @media(max-width:700px){ .agenda-stack-spotlight .agenda-stack-body{ padding:var(--hs-ds-space-5) var(--hs-ds-space-6)!important; min-height:120px; } } .agenda-stack-spotlight .agenda-stack-body{ contain:layout paint; scroll-behavior:auto!important; } @media(min-width:1101px){ .agenda-popover-stack[data-stack-depth="1"]{ width:min( 420px, calc(100vw - 24px) )!important; } .agenda-popover-stack[data-stack-depth="2"]{ width:min( 420px, calc((100vw - 34px) / 2) )!important; } .agenda-popover-stack[data-stack-depth="3"]{ width:min( 390px, calc((100vw - 44px) / 3) )!important; } .agenda-popover-stack[data-stack-depth="4"], .agenda-popover-stack[data-stack-depth="5"], .agenda-popover-stack[data-stack-depth="6"], .agenda-popover-stack[data-stack-depth="7"], .agenda-popover-stack[data-stack-depth="8"]{ width:min( 460px, calc(100vw - 24px) )!important; } .agenda-popover-stack[data-stack-depth="4"] .agenda-stack-panel, .agenda-popover-stack[data-stack-depth="5"] .agenda-stack-panel, .agenda-popover-stack[data-stack-depth="6"] .agenda-stack-panel, .agenda-popover-stack[data-stack-depth="7"] .agenda-stack-panel, .agenda-popover-stack[data-stack-depth="8"] .agenda-stack-panel{ left:0!important; right:auto!important; transform:none!important; } .agenda-popover-stack[data-stack-depth="4"] .agenda-stack-panel.is-behind, .agenda-popover-stack[data-stack-depth="5"] .agenda-stack-panel.is-behind, .agenda-popover-stack[data-stack-depth="6"] .agenda-stack-panel.is-behind, .agenda-popover-stack[data-stack-depth="7"] .agenda-stack-panel.is-behind, .agenda-popover-stack[data-stack-depth="8"] .agenda-stack-panel.is-behind{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } } @media(max-width:1100px){ .agenda-popover-stack .agenda-stack-panel{ left:0!important; right:auto!important; transform:none!important; } .agenda-popover-stack .agenda-stack-panel.is-behind{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } } .agenda-stack-body button:active{ transform:none; } .agenda-stack-head strong{ font-weight:750; letter-spacing:-.02em; } .agenda-stack-body strong{ letter-spacing:-.012em; } .agenda-stack-body .muted{ letter-spacing:-.002em; } @media(max-width:700px){ input:not( .agenda-stack-body input ), select:not( .agenda-stack-body select ), textarea:not( .agenda-stack-body textarea ){ font-size:16px; } } .agenda-stack-panel{ transition:opacity var(--hs-motion-normal) ease, transform var(--hs-motion-normal) var(--hs-motion-spring), visibility var(--hs-motion-normal) ease; } .agenda-stack-body{ -webkit-overflow-scrolling:touch; } .agenda-stack-panel button{ -webkit-tap-highlight-color:transparent; } .agenda-v6-popover-host .agenda-inline-panel{ position:absolute!important; top:4px; width:min(390px,calc(100vw - 14px)); max-height:min(70vh,560px); overflow:auto; margin:0!important; border:1px solid rgba(16,28,23,.12); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); box-shadow:0 14px 38px var(--hs-ds-color-field-border); z-index:5001; } .agenda-v6-popover-host > div:not(.agenda-inline-panel):not(:empty){ max-height:min(70vh,560px); } .agenda-v6-popover-today .agenda-inline-panel{ left:38px!important; right:auto!important; } .agenda-v6-popover-waitlist .agenda-inline-panel{ left:92px!important; right:auto!important; } .agenda-v6-popover-menu .agenda-inline-panel{ left:6px!important; right:auto!important; } .agenda-v6-popover-spotlight .agenda-inline-panel{ left:auto!important; right:72px!important; } .agenda-v6-popover-add .agenda-inline-panel{ left:auto!important; right:5px!important; } .agenda-v6-popover-calendar .agenda-inline-panel{ left:50%!important; right:auto!important; transform:translateX(-50%); } .agenda-v6-popover-view .agenda-inline-panel{ left:auto!important; right:5px!important; } @media(max-width:700px){ .agenda-v6-popover-host .agenda-inline-panel{ width:calc(100vw - 12px); max-height:68vh; border-radius:11px; } .agenda-v6-popover-today .agenda-inline-panel, .agenda-v6-popover-waitlist .agenda-inline-panel, .agenda-v6-popover-spotlight .agenda-inline-panel, .agenda-v6-popover-calendar .agenda-inline-panel{ left:6px!important; right:auto!important; transform:none!important; } .agenda-v6-popover-add .agenda-inline-panel, .agenda-v6-popover-view .agenda-inline-panel{ left:auto!important; right:6px!important; } } @media(min-width:701px){ .agenda-v6-popover-host .agenda-inline-panel{ position:absolute!important; left:50%!important; right:auto!important; top:0!important; width:min( 720px, calc(100vw - 64px) )!important; max-width:720px!important; max-height:calc( 100dvh - 130px )!important; transform:translateX(-50%)!important; margin:0!important; overflow:auto!important; pointer-events:auto!important; } } .agenda-v6-popover-host.agenda-v6-popover-add .agenda-stack-panel{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; width:100%!important; max-width:none!important; margin:0!important; transform:none!important; pointer-events:auto!important; } .agenda-v6-popover-add .agenda-stack-panel{ border:1px solid rgba(255,255,255,.55)!important; border-radius:var(--hs-ds-radius-xl)!important; background:rgba(250,249,246,.965)!important; box-shadow:var(--hs-shadow-sheet)!important; -webkit-backdrop-filter:blur(26px) saturate(125%); backdrop-filter:blur(26px) saturate(125%); } .agenda-v6-popover-add .agenda-stack-panel:not(.is-behind)::before{ content:''; width:36px; height:4px; display:block; margin:7px auto 10px; border-radius:var(--hs-ds-radius-pill); background:rgba(16,28,23,.18); } .agenda-v6-popover-add .agenda-stack-head{ border-bottom:1px solid var(--hs-hairline-soft)!important; } .agenda-v6-popover-add .agenda-stack-body{ padding:var(--hs-ds-space-3) 8px 10px!important; } .agenda-stack-body input:not([type="checkbox"]):not([type="radio"]), .agenda-stack-body select, .agenda-stack-body textarea{ border:1px solid transparent!important; border-radius:var(--hs-ds-radius-control)!important; background:var(--hs-surface-soft)!important; box-shadow:inset 0 0 0 1px rgba(16,28,23,.035)!important; color:var(--hs-ink)!important; transition:background-color 150ms ease, box-shadow 150ms ease!important; } .agenda-stack-body input:focus, .agenda-stack-body select:focus, .agenda-stack-body textarea:focus{ outline:none!important; background:var(--hs-ds-color-surface)!important; box-shadow:inset 0 0 0 1.5px rgba(70,89,78,.34), 0 0 0 3px rgba(116,136,124,.08)!important; } .agenda-stack-body .btn{ min-height:44px; border-radius:var(--hs-ds-radius-control)!important; font-weight:700!important; transition:filter 130ms ease, opacity 130ms ease!important; } @media(hover:hover){ .agenda-stack-body .btn:hover{ filter:brightness(.97); } } @media(hover:none){ .agenda-stack-body button:active{ opacity:.72!important; } } @media(max-width:700px){ .agenda-v6-popover-add .agenda-stack-panel{ border-radius:var(--hs-ds-radius-xl)!important; } } @media(prefers-reduced-motion:reduce){ .agenda-stack-body button{ transition:none!important; } } @media(max-width:700px){ body.agenda-mode .agenda-popover-stack{ overscroll-behavior:contain!important; touch-action:pan-y!important; } body.agenda-mode:has( .agenda-popover-stack ) .agenda-calendar-pro, body.agenda-mode:has( .agenda-popover-stack ) .agenda-person-week-scroll{ overscroll-behavior:none!important; } } body.agenda-mode .agenda-popover-stack{ z-index:30000!important; } body.agenda-mode .agenda-stack-panel{ border:1px solid rgba(16,28,23,.075)!important; border-radius:22px!important; background:rgba(255,255,255,.985)!important; box-shadow:0 20px 60px rgba(16,28,23,.13)!important; } body.agenda-mode .agenda-stack-head{ min-height:58px!important; padding:var(--hs-ds-space-4) var(--hs-ds-space-6)!important; display:grid!important; grid-template-columns:38px minmax(0,1fr) 38px!important; align-items:center!important; background:rgba(255,255,255,.98)!important; border-bottom:1px solid rgba(16,28,23,.06)!important; } body.agenda-mode .agenda-stack-head > strong{ font-size:16px!important; line-height:1.15!important; font-weight:750!important; letter-spacing:-.02em!important; text-align:center!important; } body.agenda-mode .agenda-stack-head button{ width:36px!important; height:36px!important; padding:0!important; display:grid!important; place-items:center!important; border-radius:var(--hs-ds-radius-pill)!important; font-size:var(--hs-ds-text-xl)!important; } body.agenda-mode .agenda-stack-body{ padding:var(--hs-ds-space-6)!important; overflow-y:auto!important; overscroll-behavior:contain!important; } @media(min-width:701px){ body.agenda-mode .agenda-popover-stack[data-stack-depth="1"]:not( .agenda-popover-root-spotlight ){ position:fixed!important; top:clamp( 92px, 14vh, 150px )!important; left:50%!important; right:auto!important; width:min( 430px, calc(100vw - 48px) )!important; height:0!important; transform:translateX(-50%)!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="1"]:not( .agenda-popover-root-spotlight ) .agenda-stack-panel{ left:0!important; right:auto!important; top:0!important; width:100%!important; transform:none!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="2"]:not( .agenda-popover-root-spotlight ), body.agenda-mode .agenda-popover-stack[data-stack-depth="3"]:not( .agenda-popover-root-spotlight ), body.agenda-mode .agenda-popover-stack[data-stack-depth="4"]:not( .agenda-popover-root-spotlight ), body.agenda-mode .agenda-popover-stack[data-stack-depth="5"]:not( .agenda-popover-root-spotlight ){ position:fixed!important; top:clamp( 92px, 14vh, 150px )!important; left:16px!important; right:auto!important; height:0!important; transform:none!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="2"]{ width:min( 430px, calc( (100vw - 44px) / 2 ) )!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="3"]{ width:min( 410px, calc( (100vw - 56px) / 3 ) )!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="4"]{ width:min( 360px, calc( (100vw - 68px) / 4 ) )!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="5"]{ width:min( 320px, calc( (100vw - 80px) / 5 ) )!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="2"] .agenda-stack-panel, body.agenda-mode .agenda-popover-stack[data-stack-depth="3"] .agenda-stack-panel, body.agenda-mode .agenda-popover-stack[data-stack-depth="4"] .agenda-stack-panel, body.agenda-mode .agenda-popover-stack[data-stack-depth="5"] .agenda-stack-panel{ top:0!important; left:calc( var(--stack-index) * (100% + 12px) )!important; right:auto!important; width:100%!important; max-height:min( 76dvh, 760px )!important; transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body.agenda-mode .agenda-popover-stack[data-stack-depth="2"] .agenda-stack-body, body.agenda-mode .agenda-popover-stack[data-stack-depth="3"] .agenda-stack-body, body.agenda-mode .agenda-popover-stack[data-stack-depth="4"] .agenda-stack-body, body.agenda-mode .agenda-popover-stack[data-stack-depth="5"] .agenda-stack-body{ max-height:calc( min(76dvh,760px) - 58px )!important; } } @media(max-width:700px){ body.agenda-mode .agenda-popover-stack:not( .agenda-popover-root-spotlight ){ position:fixed!important; top:max( 8px, env(safe-area-inset-top) )!important; left:8px!important; right:8px!important; bottom:calc( 56px + env(safe-area-inset-bottom) )!important; width:auto!important; height:auto!important; max-height:none!important; margin:0!important; transform:none!important; overflow:visible!important; pointer-events:auto!important; z-index:30000!important; } body.agenda-mode .agenda-popover-stack:not( .agenda-popover-root-spotlight ) .agenda-stack-panel{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; transform:none!important; overflow:hidden!important; border-radius:var(--hs-ds-radius-xl)!important; } body.agenda-mode .agenda-stack-panel.is-behind{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } body.agenda-mode .agenda-stack-panel.is-top{ max-height:calc( 100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom) )!important; overflow:hidden!important; overscroll-behavior:contain!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; z-index:30002!important; } body.agenda-mode .agenda-stack-head{ min-height:64px!important; padding:var(--hs-ds-space-5) 13px!important; grid-template-columns:40px minmax(0,1fr) 40px!important; } body.agenda-mode .agenda-stack-head > strong{ line-height:1.15!important; font-weight:750!important; letter-spacing:-.02em!important; font-size:var(--hs-ds-text-lg)!important; } body.agenda-mode .agenda-stack-head button{ width:40px!important; height:40px!important; } body.agenda-mode .agenda-stack-body{ overscroll-behavior:contain!important; touch-action:pan-y!important; height:calc( 100% - 64px )!important; max-height:none!important; padding:var(--hs-ds-space-7)!important; overflow-x:hidden!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } } body.agenda-mode .agenda-single-panel-stack .agenda-single-panel{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; border:1px solid var(--hs-ds-color-field-ring)!important; border-radius:var(--hs-ds-radius-xl)!important; background:rgba(255,255,255,.985)!important; box-shadow:0 28px 90px rgba(16,28,23,.18)!important; } body.agenda-mode .agenda-single-panel .agenda-stack-head{ flex:0 0 auto!important; min-height:64px!important; padding:var(--hs-ds-space-5) var(--hs-ds-space-7)!important; display:grid!important; grid-template-columns:42px minmax(0,1fr) 42px!important; align-items:center!important; border-bottom:1px solid rgba(16,28,23,.06)!important; background:var(--hs-ds-color-surface)!important; } body.agenda-mode .agenda-single-panel .agenda-stack-head > strong{ font-size:20px!important; line-height:1.1!important; font-weight:750!important; letter-spacing:-.03em!important; text-align:center!important; } body.agenda-mode .agenda-single-panel .agenda-stack-head button{ width:40px!important; height:40px!important; display:grid!important; place-items:center!important; padding:0!important; border:0!important; border-radius:var(--hs-ds-radius-pill)!important; background:transparent!important; color:var(--hs-ink,var(--hs-ds-color-ink))!important; font-size:24px!important; } body.agenda-mode .agenda-single-panel .agenda-stack-body{ flex:1 1 auto!important; min-height:0!important; width:100%!important; height:auto!important; max-height:none!important; padding:var(--hs-ds-space-8)!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } body.agenda-mode .agenda-single-panel .agenda-tree-menu{ width:100%!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row{ width:100%!important; min-height:64px!important; margin:0!important; padding:var(--hs-ds-space-6) 14px!important; border:0!important; border-radius:13px!important; background:transparent!important; color:var(--hs-ink,var(--hs-ds-color-ink))!important; box-shadow:none!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row + .agenda-tree-row{ border-top:1px solid rgba(16,28,23,.055)!important; border-top-left-radius:0!important; border-top-right-radius:0!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row strong{ font-size:var(--hs-ds-text-base)!important; line-height:1.2!important; font-weight:720!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row small{ margin-top:3px!important; font-size:12px!important; line-height:1.3!important; opacity:.56!important; } body.agenda-mode .agenda-popover-stack.agenda-single-panel-stack .agenda-stack-panel{ left:0!important; right:0!important; top:0!important; bottom:0!important; } body.agenda-mode .agenda-single-panel ::before{ pointer-events:none; } @media(max-width:700px){ body.agenda-mode .agenda-single-panel{ border-radius:var(--hs-ds-radius-xl)!important; } body.agenda-mode .agenda-single-panel .agenda-stack-head{ min-height:64px!important; grid-template-columns:42px minmax(0,1fr) 42px!important; } body.agenda-mode .agenda-single-panel .agenda-stack-head > strong{ font-size:19px!important; } body.agenda-mode .agenda-single-panel .agenda-stack-body{ padding:var(--hs-ds-space-6)!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row{ min-height:68px!important; padding:13px 12px!important; } body.agenda-mode .agenda-single-panel .agenda-tree-row strong{ font-size:15.5px!important; } } body > .agenda-panel-portal-root{ position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; margin:0!important; padding:0!important; z-index:50000!important; pointer-events:none!important; transform:none!important; overflow:hidden!important; } body > .agenda-panel-portal-root .agenda-panel-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; z-index:1!important; pointer-events:auto!important; transform:none!important; overflow:hidden!important; } body > .agenda-panel-portal-root .agenda-panel-backdrop{ position:absolute!important; inset:0!important; z-index:1!important; background:rgba(247,245,239,.34)!important; -webkit-backdrop-filter:blur(2px)!important; backdrop-filter:blur(2px)!important; pointer-events:auto!important; touch-action:none!important; } body > .agenda-panel-portal-root .agenda-single-panel-stack{ position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width:min( 580px, calc(100vw - 40px) )!important; height:min( 680px, calc(100dvh - 120px) )!important; max-width:none!important; max-height:none!important; margin:0!important; transform:translate(-50%,-50%)!important; z-index:2!important; pointer-events:auto!important; } body > .agenda-panel-portal-root .agenda-single-panel{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; background:var(--hs-ds-color-surface)!important; border:1px solid rgba(16,28,23,.08)!important; border-radius:22px!important; box-shadow:0 28px 90px rgba(16,28,23,.18)!important; } body > .agenda-panel-portal-root .agenda-stack-head{ flex:0 0 58px!important; min-height:58px!important; padding:var(--hs-ds-space-4) var(--hs-ds-space-6)!important; display:grid!important; grid-template-columns:40px minmax(0,1fr) 40px!important; align-items:center!important; background:var(--hs-ds-color-surface)!important; border-bottom:1px solid rgba(16,28,23,.06)!important; } body > .agenda-panel-portal-root .agenda-stack-body{ flex:1 1 auto!important; min-height:0!important; width:100%!important; height:auto!important; max-height:none!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; } body.agenda-mode .agenda-v6-popover-host .agenda-panel-layer{ display:none!important; } @media(max-width:700px){ body > .agenda-panel-portal-root .agenda-single-panel-stack{ top:calc( env(safe-area-inset-top,0px) + 68px )!important; left:8px!important; right:8px!important; bottom:calc( env(safe-area-inset-bottom,0px) + 70px )!important; width:auto!important; height:auto!important; transform:none!important; } body > .agenda-panel-portal-root .agenda-single-panel{ border-radius:22px!important; } } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth ]{ position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width:min( 580px, calc(100vw - 40px) )!important; height:min( 680px, calc(100dvh - 120px) )!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; transform:translate(-50%,-50%)!important; opacity:1!important; visibility:visible!important; overflow:visible!important; pointer-events:auto!important; z-index:2!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="1" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="2" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="3" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="4" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="5" ]{ height:min( 680px, calc(100dvh - 120px) )!important; width:min( 580px, calc(100vw - 40px) )!important; left:50%!important; right:auto!important; top:50%!important; bottom:auto!important; transform:translate(-50%,-50%)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack .agenda-stack-panel.agenda-single-panel.is-top{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; display:flex!important; flex-direction:column!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; overflow:hidden!important; z-index:3!important; background:var(--hs-ds-color-surface)!important; border:1px solid rgba(16,28,23,.08)!important; border-radius:22px!important; box-shadow:0 28px 90px rgba(16,28,23,.18)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack .agenda-stack-panel.agenda-single-panel.is-top .agenda-stack-body{ flex:1 1 auto!important; min-height:0!important; height:auto!important; max-height:none!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; pointer-events:auto!important; touch-action:pan-y!important; -webkit-overflow-scrolling:touch!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-panel-backdrop{ z-index:1!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } @media(max-width:700px){ body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth ]{ top:calc( env(safe-area-inset-top,0px) + 68px )!important; left:8px!important; right:8px!important; bottom:calc( env(safe-area-inset-bottom,0px) + 70px )!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; transform:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="1" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="2" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="3" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="4" ], body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-stack.agenda-single-panel-stack[ data-stack-depth="5" ]{ top:calc( env(safe-area-inset-top,0px) + 68px )!important; left:8px!important; right:8px!important; bottom:calc( env(safe-area-inset-bottom,0px) + 70px )!important; width:auto!important; height:auto!important; transform:none!important; } } .agenda-stack-body small{ letter-spacing:-.002em; font-size:var(--hs-text-secondary-size)!important; line-height:var(--hs-text-secondary-line)!important; } .agenda-inline-panel small{ font-size:var(--hs-text-secondary-size)!important; line-height:var(--hs-text-secondary-line)!important; } .agenda-stack-head > strong, .agenda-inline-panel-head > strong{ font-size:var(--hs-title-size)!important; line-height:1.1!important; font-weight:750!important; letter-spacing:-.025em!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-v4{ width:min( 720px, calc(100vw - 56px) )!important; max-width:none!important; max-height:min( 720px, calc(100dvh - 120px) )!important; border:1px solid rgba(16,28,23,.08)!important; border-radius:22px!important; background:var(--hs-ds-color-surface)!important; box-shadow:0 26px 80px var(--hs-ds-color-field-border)!important; overflow:hidden!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-head{ min-height:58px!important; padding:var(--hs-ds-space-4) var(--hs-ds-space-7)!important; display:grid!important; grid-template-columns:40px minmax(0,1fr) 40px!important; align-items:center!important; border-bottom:1px solid rgba(16,28,23,.06)!important; background:var(--hs-ds-color-surface)!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-head > strong{ grid-column:2!important; text-align:center!important; font-size:var(--hs-title-size)!important; font-weight:750!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-head > button{ grid-column:3!important; width:38px!important; height:38px!important; padding:0!important; display:grid!important; place-items:center!important; justify-self:end!important; border:0!important; border-radius:var(--hs-ds-radius-pill)!important; background:transparent!important; font-size:var(--hs-ds-text-xl)!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-body{ max-height:calc(100dvh - 190px)!important; padding:var(--hs-ds-space-7)!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-body button{ min-height:44px!important; font-size:var(--hs-ds-text-control)!important; border-radius:11px!important; } @media(max-width:700px){ body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-v4{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; border-radius:22px!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-head{ flex:0 0 58px!important; min-height:58px!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-head > strong{ font-size:var(--hs-title-mobile-size)!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-body{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; padding:var(--hs-ds-space-6)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } body.agenda-mode .agenda-v6-popover-host .agenda-inline-panel-body button{ min-height:48px!important; font-size:var(--hs-ds-text-base)!important; } } body.agenda-mode .agenda-v6-popover-calendar .agenda-inline-panel-v4{ width:min( 840px, calc(100vw - 64px) )!important; height:auto!important; max-height:min( 500px, calc(100dvh - 130px) )!important; } body.agenda-mode .agenda-v6-popover-calendar .agenda-inline-panel-body{ padding:var(--hs-ds-space-5) 18px var(--hs-ds-space-8)!important; height:auto!important; max-height:none!important; } body.agenda-mode .agenda-v6-popover-calendar .agenda-inline-panel-body > strong{ font-size:16px!important; } @media(max-width:700px){ body.agenda-mode .agenda-v6-popover-calendar .agenda-inline-panel-v4{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; max-height:calc( 100dvh - env(safe-area-inset-top,0px) - 160px )!important; margin:0!important; } body.agenda-mode .agenda-v6-popover-calendar .agenda-inline-panel-body{ padding:var(--hs-ds-space-5) var(--hs-ds-space-5) var(--hs-ds-space-7)!important; } } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-single-panel-stack, body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-add{ width:min( 590px, calc(100vw - 40px) )!important; height:min( 680px, calc(100dvh - 120px) )!important; max-width:none!important; max-height:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-head{ flex:0 0 60px!important; min-height:60px!important; padding:var(--hs-ds-space-4) var(--hs-ds-space-6)!important; display:grid!important; grid-template-columns:42px minmax(0,1fr) 42px!important; align-items:center!important; border-bottom:1px solid var(--hs-ds-color-hairline)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-head > strong{ font-size:var(--hs-ds-text-lg)!important; line-height:1.15!important; font-weight:750!important; letter-spacing:-.025em!important; text-align:center!important; } body.agenda-mode > .agenda-panel-portal-root [data-agenda-stack-back], body.agenda-mode > .agenda-panel-portal-root [data-agenda-inline-close]{ width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:var(--hs-ds-radius-pill)!important; background:transparent!important; font-size:20px!important; line-height:1!important; color:var(--hs-ds-color-ink)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-menu{ display:block!important; width:100%!important; margin:0!important; padding:var(--hs-ds-space-4) var(--hs-ds-space-8)!important; background:transparent!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row{ width:100%!important; min-height:54px!important; margin:0!important; padding:0 var(--hs-ds-space-2)!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:var(--hs-ds-space-7)!important; border:0!important; border-bottom:1px solid var(--hs-ds-color-hairline)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--hs-ds-color-ink)!important; text-align:left!important; font-size:var(--hs-ds-text-base)!important; line-height:1.25!important; font-weight:500!important; cursor:pointer!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row:last-child{ border-bottom:0!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-main{ min-width:0!important; display:flex!important; align-items:center!important; gap:var(--hs-ds-space-5)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-label{ min-width:0!important; font-size:var(--hs-ds-text-base)!important; line-height:1.25!important; font-weight:500!important; letter-spacing:-.01em!important; text-align:left!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row small{ display:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row.is-create .agenda-tree-label{ font-weight:650!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-plus{ width:18px!important; flex:0 0 18px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; font-size:21px!important; line-height:1!important; font-weight:650!important; color:var(--hs-ds-color-ink)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-side{ flex:0 0 auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:var(--hs-ds-space-5)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-side > i{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:16px!important; font-style:normal!important; font-size:var(--hs-ds-text-lg)!important; line-height:1!important; font-weight:400!important; color:var(--hs-ds-color-field-border-focus)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-badge{ min-width:23px!important; height:23px!important; padding:0 7px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border-radius:var(--hs-ds-radius-pill)!important; background:var(--hs-ds-color-ink)!important; color:var(--hs-ds-color-surface)!important; font-size:10.5px!important; line-height:1!important; font-weight:750!important; } @media(hover:hover){ body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row:hover{ background:rgba(16,28,23,.035)!important; } } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row:active{ background:rgba(16,28,23,.055)!important; } @media(max-width:700px){ body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-single-panel-stack, body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-add{ top:calc( env(safe-area-inset-top,0px) + 68px )!important; left:8px!important; right:8px!important; bottom:calc( env(safe-area-inset-bottom,0px) + 70px )!important; width:auto!important; height:auto!important; max-width:none!important; max-height:none!important; transform:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-head{ flex-basis:58px!important; min-height:58px!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-head > strong{ font-size:var(--hs-ds-text-lg)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-menu{ padding:var(--hs-ds-space-3) var(--hs-ds-space-7)!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-row{ min-height:56px!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-tree-label{ font-size:15.5px!important; } } .agenda-popover-root-spotlight .agenda-stack-body, .agenda-popover-root-today .agenda-stack-body, .agenda-popover-root-staff-todo .agenda-stack-body{ padding:var(--hs-ds-space-6) var(--hs-ds-space-7) var(--hs-ds-space-8)!important; } body.agenda-mode > .agenda-panel-portal-root, body.agenda-mode > .agenda-panel-portal-root > .agenda-panel-layer{ pointer-events:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-popover-stack.agenda-single-panel-stack{ pointer-events:auto!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-panel.agenda-single-panel.is-top{ display:flex!important; flex-direction:column!important; width:100%!important; height:100%!important; border-radius:22px!important; overflow:hidden!important; pointer-events:auto!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-panel.agenda-single-panel.is-top *{ pointer-events:auto!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-stack-body{ overscroll-behavior:contain!important; flex:1 1 auto!important; min-height:0!important; padding:0!important; overflow-x:hidden!important; overflow-y:auto!important; touch-action:pan-y!important; -webkit-overflow-scrolling:touch!important; } .agenda-stack-body:has(> .hs-ui-grouped){ background:var(--hs-ds-color-surface-soft); } html body .agenda-stack-panel .agenda-stack-body{ padding:var(--hs-ds-space-8)!important; background:var(--hs-ds-color-surface-soft)!important; font-family:var(--hs-ds-font-sans); color:var(--hs-ds-color-ink); } :where(.agenda-stack-body) button{ font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-base); font-weight:500; color:var(--hs-ds-color-ink); margin:0; padding:var(--hs-ds-space-5) var(--hs-ds-space-8); border:0; border-radius:var(--hs-ds-radius-sm); background:var(--hs-ds-color-surface); box-shadow:var(--hs-ds-shadow-card); text-align:left; cursor:pointer; transition:background var(--hs-ds-motion-fast) ease,transform var(--hs-ds-motion-fast) var(--hs-ds-motion-spring); } :where(.agenda-stack-body) button:hover{ background:var(--hs-ds-color-surface-deep); } :where(.agenda-stack-body) button:active{ transform:scale(.98); } :where(.agenda-stack-body) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), :where(.agenda-stack-body) textarea, :where(.agenda-stack-body) select{ box-sizing:border-box; width:100%; min-height:var(--hs-ds-control-height); margin:0; padding:var(--hs-ds-space-4) var(--hs-ds-space-6); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-control); background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-base); } :where(.agenda-stack-body) input:focus, :where(.agenda-stack-body) textarea:focus, :where(.agenda-stack-body) select:focus{ outline:3px solid var(--hs-ds-color-field-ring); outline-offset:0; border-color:var(--hs-ds-color-field-border-focus); } :where(.agenda-stack-body) strong{ font-weight:600; } :where(.agenda-stack-body) small{ color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-md); } html body .agenda-stack-body .agenda-monitor-clear, html body .agenda-stack-body .agenda-spotlight-empty{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:var(--hs-ds-space-4)!important; margin:0!important; padding:var(--hs-ds-space-11) var(--hs-ds-space-8)!important; border:0!important; background:transparent!important; text-align:center!important; } html body .agenda-stack-body .agenda-monitor-clear > span:first-child{ display:grid!important; place-items:center!important; width:52px!important; height:52px!important; border-radius:var(--hs-ds-radius-circle)!important; background:color-mix(in srgb,var(--hs-ds-color-success) 14%,var(--hs-ds-color-surface))!important; color:var(--hs-ds-color-success)!important; font-size:var(--hs-ds-text-xl)!important; font-weight:600!important; } html body .agenda-stack-body .agenda-monitor-clear strong, html body .agenda-stack-body .agenda-spotlight-empty strong{ display:block!important; color:var(--hs-ds-color-ink)!important; font-size:var(--hs-ds-text-lg)!important; font-weight:600!important; } html body .agenda-stack-body .agenda-monitor-clear small, html body .agenda-stack-body .agenda-spotlight-empty small{ display:block!important; margin-top:var(--hs-ds-space-2)!important; color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-md)!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list){ display:flex!important; flex-direction:column!important; gap:0!important; margin:0 0 var(--hs-ds-space-8)!important; padding:0!important; overflow:hidden!important; border:1px solid var(--hs-ds-color-line)!important; border-radius:var(--hs-ds-radius-md)!important; background:var(--hs-ds-color-surface)!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list) > *{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:var(--hs-ds-space-6)!important; margin:0!important; padding:var(--hs-ds-space-5) var(--hs-ds-space-8)!important; border:0!important; border-radius:var(--hs-ds-radius-none,0)!important; background:transparent!important; box-shadow:var(--hs-ds-shadow-none,none)!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list) > * + *{ border-top:1px solid var(--hs-ds-color-line)!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list) > * > div{ display:flex!important; flex-direction:column!important; gap:var(--hs-ds-space-1)!important; min-width:0!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list) strong{ color:var(--hs-ds-color-ink)!important; font-size:var(--hs-ds-text-base)!important; font-weight:600!important; } html body .agenda-stack-body :is(.agenda-stack-list,.agenda-product-use-list) small{ color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-md)!important; } html body .agenda-stack-body .agenda-product-use-search{ margin-bottom:var(--hs-ds-space-6)!important; } @media(max-width:700px){ body.agenda-mode > .agenda-panel-portal-root .agenda-panel-backdrop{ background:var(--hs-ds-color-field-border-hover)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-backdrop{ pointer-events:none!important; touch-action:auto!important; background:color-mix( in srgb, var(--hs-ds-color-ink) 18%, transparent )!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } @media(min-width:701px){ body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-single-panel-stack{ height:auto!important; max-height:min( 680px, calc(100dvh - 120px) )!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-stack-panel.agenda-single-panel.is-top{ position:relative!important; inset:auto!important; height:auto!important; max-height:min( 680px, calc(100dvh - 120px) )!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-stack-body{ flex:0 1 auto!important; min-height:0!important; max-height:calc( min( 680px, calc(100dvh - 120px) ) - 60px )!important; } } @media(max-width:700px){ body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-single-panel-stack{ height:auto!important; max-height:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-stack-panel.agenda-single-panel.is-top{ position:absolute!important; inset:0!important; height:100%!important; max-height:none!important; } body.agenda-mode > .agenda-panel-portal-root .agenda-panel-layer .agenda-popover-root-clients .agenda-stack-body{ flex:1 1 auto!important; max-height:none!important; } } body.agenda-mode .agenda-inline-panel-v4 .agenda-inline-panel-body{ padding:var(--hs-ds-space-7)!important; } @media(max-width:700px){ body.agenda-mode .agenda-inline-panel-v4 .agenda-inline-panel-body{ padding:var(--hs-ds-space-6)!important; } } html body .agenda-panel-backdrop{ z-index:var(--hs-layer-panel)!important; } .agenda-panel-portal-root.hs-sheet-portal{ position:fixed!important; inset:0!important; z-index:2147483000!important; display:block!important; pointer-events:auto!important; transform:none!important; background:none!important; padding:0!important; margin:0!important; } .hs-sheet-backdrop{ position:absolute; inset:0; background:rgba(20,18,15,.3); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:hsSheetFade .22s ease-out; } .hs-sheet-grabber{ width:38px; height:5px; border-radius:3px; background:rgba(0,0,0,.18); margin:8px auto 0; } .hs-sheet .agenda-inline-panel{ position:static!important; inset:auto!important; transform:none!important; width:100%!important; max-width:none!important; max-height:none!important; min-height:0!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; animation:none!important; overflow:visible!important; pointer-events:auto!important; opacity:1!important; visibility:visible!important; } @media (min-width:900px) and (min-height:600px){ .hs-sheet{ bottom:auto; top:50%; left:50%; right:auto; transform:translate(-50%,-50%); border-radius:22px; max-height:80vh; animation:hsSheetFade .2s ease-out; } .hs-sheet-grabber{ display:none; } } .hs-sheet-portal .hs-sheet-backdrop{ pointer-events:auto!important; cursor:pointer; } .hs-sheet-portal .hs-sheet{ pointer-events:auto!important; } .hs-sheet-static .hs-sheet, .hs-sheet-static .hs-sheet-backdrop{ animation:none!important; } @media (max-width:820px){ body > .agenda-panel-portal-root .agenda-stack-panel.is-top{ top:auto!important; bottom:0!important; height:auto!important; min-height:0!important; max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - 12px)!important; display:flex!important; flex-direction:column!important; } } body > .agenda-panel-portal-root.hs-sheet-portal > .hs-sheet-backdrop{ position:absolute!important; inset:0!important; display:block!important; z-index:0!important; background:rgba(20,18,15,.32)!important; pointer-events:auto!important; opacity:1!important; visibility:visible!important; } body > .agenda-panel-portal-root.hs-sheet-portal > .hs-sheet{ z-index:1!important; display:block!important; } .hs-sheet{ position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:100%; max-width:560px; max-height:min(86dvh,760px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; background:#fbfaf7; border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.18); animation:hsSheetUp .34s cubic-bezier(.22,.8,.28,1); padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))!important; } .hs-sheet .agenda-inline-panel-head{ display:grid!important; grid-template-columns:40px 1fr 40px!important; align-items:center!important; gap:0!important; padding:10px 14px 12px!important; border-bottom:1px solid rgba(0,0,0,.06)!important; } .hs-sheet .agenda-inline-panel-head > strong{ grid-column:2!important; text-align:center!important; font-size:17px!important; font-weight:600!important; margin:0!important; } .hs-sheet .agenda-inline-panel-head > button{ grid-column:3!important; justify-self:end!important; position:static!important; width:32px!important; height:32px!important; padding:0!important; border:0!important; border-radius:50%!important; display:grid!important; place-items:center!important; background:rgba(0,0,0,.06)!important; color:inherit!important; font-size:18px!important; line-height:1!important; } .hs-sheet .agenda-inline-panel-body{ padding:14px 16px 0!important; } @media (min-width:900px) and (hover:hover){ .hs-sheet{ bottom:auto!important; top:50%!important; left:50%!important; right:auto!important; transform:translate(-50%,-50%)!important; border-radius:22px!important; max-height:80vh!important; animation:hsSheetFade .2s ease-out!important; padding-bottom:20px!important; } .hs-sheet-static .hs-sheet{ animation:none!important; } .hs-sheet-grabber{ display:none!important; } } @media (max-width:820px){ body > .agenda-panel-portal-root .agenda-stack-panel.is-top .agenda-stack-body{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))!important; } body > .agenda-panel-portal-root .agenda-stack-panel{ padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))!important; box-sizing:border-box!important; } html body > .agenda-panel-portal-root :is(.agenda-stack-panel,.agenda-single-panel).agenda-stack-panel{ padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))!important; box-sizing:border-box!important; } html body > .agenda-panel-portal-root .agenda-stack-body > :last-child{ margin-bottom:max(10px,env(safe-area-inset-bottom))!important; } html body .agenda-panel-portal-root .agenda-stack-panel.agenda-stack-add.agenda-stack-add.agenda-stack-add{ top:auto!important; bottom:0!important; height:auto!important; max-height:calc(100dvh - 70px)!important; overflow-y:auto!important; box-sizing:border-box!important; padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 22px))!important; } } /* ========================================================= COMPONENTE: FINESTRE - schede, scheda appuntamento, conferme, calendario, promemoria ========================================================= */ .modal-backdrop{ place-items:center; } .modal-head{ display:flex; justify-content:space-between; gap:var(--hs-ds-space-6); } .modal-actions{ display:flex; justify-content:flex-end; gap:var(--hs-ds-space-4); margin-top:20px; } .modal-actions .btn{ width:auto; margin:0; } .modal-eyebrow{ display:block; margin-bottom:3px; } @media(max-width:700px){ .modal-backdrop{ width:100vw; height:100dvh; } .team-profile-modal .modal-actions{ position:sticky; bottom:0; z-index:4; margin-left:-14px; margin-right:-14px; margin-bottom:calc(-1 * max(22px,env(safe-area-inset-bottom))); padding:var(--hs-ds-space-5) var(--hs-ds-space-7) max(var(--hs-ds-space-7),env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); } .team-profile-modal .modal-actions .btn{ flex:1; } .team-profile-modal .modal-actions .btn.secondary{ flex:0 0 auto; } .service-editor-modal .modal-actions{ position:sticky; bottom:0; margin:18px -14px -14px; padding:var(--hs-ds-space-5) var(--hs-ds-space-7) max(var(--hs-ds-space-7),env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); } } .modal-card{ color:var(--hs-ds-color-body-ink); } .modal-card .form-group:first-of-type{ margin-top:17px; } .modal-eyebrow{ color:var(--hs-ds-color-accent); font-size:8px; font-weight:850; } .agenda-add-menu .modal-head{ margin-bottom:11px; } .agenda-appointment-modal{ width:min( 560px, 100% ); max-height:calc( 100dvh - 32px ); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; scroll-padding-top:80px; scroll-padding-bottom:120px; } .agenda-appointment-modal .modal-actions{ position:sticky; bottom:-20px; z-index:12; margin-left:-20px; margin-right:-20px; margin-bottom:-20px; padding:var(--hs-ds-space-6) var(--hs-ds-space-9) max( 12px, env( safe-area-inset-bottom ) ); background:rgba( 255, 253, 248, .96 ); border-top:1px solid var(--line); backdrop-filter:blur(12px); } @media(max-width:700px){ .modal-backdrop{ overflow:hidden; } .agenda-appointment-modal{ border:0; overflow-x:hidden; scroll-padding-top:90px; scroll-padding-bottom:150px; } .agenda-appointment-modal .modal-head{ position:sticky; top:calc( -1 * max( 14px, env( safe-area-inset-top ) ) ); z-index:14; margin:calc( -1 * max( 14px, env( safe-area-inset-top ) ) ) -14px 6px; padding:max( 14px, env( safe-area-inset-top ) ) 14px 10px; background:rgba( 255, 253, 248, .97 ); border-bottom:1px solid rgba( 16, 28, 23, .06 ); backdrop-filter:blur(14px); } .agenda-appointment-modal .modal-actions{ bottom:0; margin-left:-14px; margin-right:-14px; margin-bottom:0; padding:var(--hs-ds-space-5) 14px max( 12px, env( safe-area-inset-bottom ) ); flex-wrap:wrap; } .agenda-appointment-modal .modal-actions .btn{ flex:1 1 130px; min-height:46px; } } .modal-card{ overflow:auto; padding:22px; } .modal-head{ min-height:44px; align-items:flex-start; } .modal-head h2{ margin:2px 0 0!important; font-size:23px; line-height:1.12; } .modal-close{ width:42px!important; height:42px!important; flex:0 0 42px; display:grid!important; place-items:center!important; padding:0!important; color:var(--forest)!important; font-size:24px!important; line-height:1!important; } .agenda-view-sheet button:not(.modal-close){ width:100%; min-height:72px; display:flex; align-items:center; gap:13px; padding:13px var(--hs-ds-space-7)!important; border:1px solid var(--line)!important; border-radius:15px!important; background:var(--hs-ds-color-surface)!important; color:var(--ink)!important; text-align:left!important; } @media( min-width:701px ) and ( max-width:1100px ){ .modal-card{ width:min( 760px, calc(100vw - 40px) ); } } @media(max-width:700px){ .modal-backdrop{ display:flex!important; background:rgba(16,28,23,.40)!important; backdrop-filter:blur(4px)!important; } .modal-card{ border-left:0!important; border-right:0!important; border-bottom:0!important; border-radius:22px 22px 0 0!important; } .agenda-view-sheet button:not(.modal-close){ min-height:68px; } } .ui-more-sheet .modal-close{ width:44px!important; height:44px!important; flex:0 0 44px!important; display:grid!important; place-items:center!important; padding:0!important; border:1px solid var(--line)!important; border-radius:var(--hs-ds-radius-circle)!important; background:#efede6!important; color:var(--forest)!important; font-size:25px!important; font-weight:400!important; line-height:1!important; } @media(max-width:700px){ .ui-more-sheet .modal-close{ width:40px!important; height:40px!important; flex-basis:40px!important; } } .modal-eyebrow{ letter-spacing:.14em; } .modal-card p{ line-height:1.45; } @media(max-width:700px){ .modal-head h2{ font-size:21px; line-height:1.12; } } .modal-close{ min-width:44px; min-height:44px; } @media(min-width:701px){ .modal-backdrop{ animation:hsBackdropIn var(--hs-motion-normal) ease both; } .modal-card{ animation:hsModalIn var(--hs-motion-normal) var(--hs-motion-spring) both; transform-origin:center; } } @media(max-width:700px){ .modal-backdrop{ animation:hsBackdropIn var(--hs-motion-normal) ease both; } .modal-card{ animation:hsSheetIn 260ms var(--hs-motion-spring) both; } .modal-card::before{ content:""; display:block; width:36px; height:5px; margin:-7px auto 11px; border-radius:var(--hs-ds-radius-pill); background:rgba(16,28,23,.18); } } .hs-datepicker-backdrop{ position:fixed; inset:0; display:grid; place-items:center; padding:var(--hs-ds-space-6); background:rgba( 10, 18, 15, .18 ); backdrop-filter:blur(5px); z-index:58000; } .hs-datepicker{ width:min( 360px, calc(100vw - 24px) ); padding:var(--hs-ds-space-8); border:1px solid rgba(16,28,23,.10); border-radius:18px; background:var(--hs-ds-color-surface); box-shadow:0 24px 70px rgba(0,0,0,.20); } .hs-datepicker-head{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; margin-bottom:12px; } .hs-datepicker-head strong{ text-align:center; font-size:var(--hs-ds-text-label); font-weight:850; letter-spacing:.055em; } .hs-datepicker-head button{ width:38px; height:38px; border:0; border-radius:var(--hs-ds-radius-pill); background:#f3f2ed; font-size:var(--hs-ds-text-xl); font-weight:300; } .hs-datepicker-weekdays, .hs-datepicker-grid{ display:grid; grid-template-columns:repeat( 7, 1fr ); gap:var(--hs-ds-space-2); } .hs-datepicker-weekdays{ margin-bottom:4px; } .hs-datepicker-weekdays span{ padding:5px 0; text-align:center; font-size:var(--hs-ds-text-xs); font-weight:850; opacity:.42; } .hs-datepicker-day{ aspect-ratio:1; border:0; border-radius:var(--hs-ds-radius-pill); background:transparent; color:var(--forest); font-size:12px; font-weight:650; } .hs-datepicker-day:hover{ background:#f1f0eb; } .hs-datepicker-day.today{ box-shadow:inset 0 0 0 1px rgba(16,28,23,.26); } .hs-datepicker-day.selected{ background:var(--forest); color:var(--hs-ds-color-surface); } .hs-datepicker-empty{ aspect-ratio:1; } .hs-datepicker-actions{ display:flex; justify-content:flex-end; gap:7px; margin-top:13px; } @media(max-width:700px){ .hs-datepicker{ width:min( 360px, calc( 100vw - 16px ) ); } } .modal-head{ border-bottom-color:var(--hs-hairline-soft)!important; } .modal-head h2{ font-weight:750!important; letter-spacing:-.035em!important; } .modal-close{ border:0!important; border-radius:var(--hs-ds-radius-pill)!important; background:var(--hs-surface-deep)!important; box-shadow:none!important; } .modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea{ border:1px solid transparent!important; border-radius:var(--hs-ds-radius-control)!important; background:var(--hs-surface-soft)!important; box-shadow:inset 0 0 0 1px rgba(16,28,23,.035)!important; color:var(--hs-ink)!important; transition:background-color 150ms ease, box-shadow 150ms ease!important; } .modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus{ outline:none!important; background:var(--hs-ds-color-surface)!important; box-shadow:inset 0 0 0 1.5px rgba(70,89,78,.34), 0 0 0 3px rgba(116,136,124,.08)!important; } .modal-card .btn{ min-height:44px; border-radius:var(--hs-ds-radius-control)!important; font-weight:700!important; transition:filter 130ms ease, opacity 130ms ease!important; } @media(hover:hover){ .modal-card .btn:hover{ filter:brightness(.97); } } @media(hover:none){ .modal-card .btn:active{ opacity:.72!important; } } .hs-iphone-reminder-list{ display:grid; gap:var(--hs-ds-space-4); margin-top:16px; } .hs-iphone-reminder-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--hs-ds-space-7); padding:13px; border:1px solid rgba(16,28,23,.08); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-app-bg); } .hs-iphone-reminder-row > div{ display:grid; gap:3px; } .hs-iphone-reminder-row small{ font-size:var(--hs-ds-text-xs); font-weight:800; letter-spacing:.06em; color:var(--hs-ds-color-field-border-focus); } .hs-iphone-reminder-row strong{ font-size:var(--hs-ds-text-control); } .hs-iphone-reminder-row > span{ max-width:180px; text-align:right; font-size:10px; line-height:1.3; color:rgba(16,28,23,.52); } .hs-iphone-reminder-note{ margin-top:12px; color:rgba(16,28,23,.58); font-size:12px; line-height:1.45; } .hs-iphone-reminder-done{ width:100%; margin-top:15px; } @media(max-width:700px){ .hs-iphone-reminder-row{ align-items:flex-start; flex-direction:column; } .hs-iphone-reminder-row > span{ max-width:none; text-align:left; } .modal-card, .agenda-appointment-modal, .hs-iphone-reminder-modal{ padding:18px 16px!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } } .modal-card{ width:min( 680px, calc(100vw - 40px) )!important; } .modal-backdrop{ position:fixed!important; inset:0!important; z-index:56000!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:var(--hs-ds-space-9)!important; overflow:hidden!important; overscroll-behavior:contain!important; background:var(--hs-ds-color-field-border-hover)!important; -webkit-backdrop-filter:blur(9px)!important; backdrop-filter:blur(9px)!important; } .modal-card{ position:relative!important; max-width:calc(100vw - 40px)!important; max-height:calc(100dvh - 40px)!important; margin:auto!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; scrollbar-gutter:stable!important; border:1px solid rgba(255,255,255,.64)!important; border-radius:22px!important; background:rgba(252,251,248,.99)!important; box-shadow:0 28px 80px rgba(16,28,23,.18)!important; } .modal-card .modal-head{ position:sticky!important; top:0!important; z-index:8!important; display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:var(--hs-ds-space-8)!important; min-height:52px!important; margin:-2px 0 18px!important; padding:var(--hs-ds-space-1) 0 var(--hs-ds-space-7)!important; border-bottom:1px solid var(--hs-ds-color-field-ring)!important; background:rgba(252,251,248,.97)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important; } .modal-card .modal-head > div{ min-width:0!important; flex:1 1 auto!important; } .modal-card .modal-eyebrow{ display:block!important; margin:0 0 3px!important; color:rgba(16,28,23,.54)!important; font-size:9.5px!important; line-height:1.1!important; font-weight:750!important; letter-spacing:.075em!important; text-transform:uppercase!important; } .modal-card .modal-head h2{ margin:0!important; color:var(--hs-ds-color-ink)!important; font-size:21px!important; line-height:1.1!important; font-weight:750!important; letter-spacing:-.03em!important; } .modal-card .modal-head .muted{ margin:6px 0 0!important; font-size:12px!important; line-height:1.35!important; color:rgba(16,28,23,.55)!important; } .modal-card .modal-close{ flex:0 0 38px!important; width:38px!important; min-width:38px!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; border:0!important; border-radius:var(--hs-ds-radius-pill)!important; background:rgba(16,28,23,.055)!important; box-shadow:none!important; color:var(--hs-ds-color-ink)!important; font-size:20px!important; line-height:1!important; font-weight:450!important; cursor:pointer!important; } .modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select{ max-width:100%!important; } .modal-card textarea{ max-width:100%!important; resize:vertical!important; } .modal-card .actions, .modal-card .modal-actions, .modal-card .form-actions{ max-width:100%!important; } @media(hover:hover){ .modal-card .modal-close:hover{ background:rgba(16,28,23,.095)!important; } } @media(max-width:700px){ .modal-backdrop{ align-items:center!important; justify-content:center!important; padding:max( 8px, env(safe-area-inset-top,0px) ) 8px max( 8px, env(safe-area-inset-bottom,0px) )!important; } .modal-card{ width:calc(100vw - 16px)!important; max-width:none!important; height:auto!important; max-height:calc( 100dvh - max( 16px, env(safe-area-inset-top,0px) ) - max( 16px, env(safe-area-inset-bottom,0px) ) )!important; margin:auto!important; } .agenda-appointment-modal{ width:calc(100vw - 16px)!important; max-width:none!important; height:auto!important; max-height:calc( 100dvh - max( 16px, env(safe-area-inset-top,0px) ) - max( 16px, env(safe-area-inset-bottom,0px) ) )!important; margin:auto!important; border-radius:var(--hs-ds-radius-lg); } .hs-iphone-reminder-modal{ height:auto!important; max-height:calc( 100dvh - max( 16px, env(safe-area-inset-top,0px) ) - max( 16px, env(safe-area-inset-bottom,0px) ) )!important; margin:auto!important; border-radius:var(--hs-ds-radius-lg); } .modal-card .modal-head{ min-height:50px!important; margin-bottom:14px!important; padding-bottom:var(--hs-ds-space-6)!important; } .modal-card .modal-head h2{ font-size:19px!important; } .modal-card .modal-head .muted{ font-size:var(--hs-ds-text-sm)!important; } .modal-card .modal-close{ flex-basis:36px!important; width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; } } @media(max-width:390px){ .modal-backdrop{ padding:max( 5px, env(safe-area-inset-top,0px) ) 5px max( 5px, env(safe-area-inset-bottom,0px) )!important; } .modal-card{ width:calc(100vw - 10px)!important; border-radius:18px!important; } } @media (max-width:700px){ } html body .modal-backdrop{ display:flex!important; align-items:center!important; justify-content:center!important; padding:var(--hs-ds-space-8)!important; background:color-mix(in srgb,var(--hs-ds-color-ink) 30%,transparent)!important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } html body .modal-backdrop > .modal-card{ display:block!important; max-height:88dvh!important; margin:0!important; padding:0 var(--hs-ds-space-10)!important; border:0!important; border-radius:var(--hs-ds-radius-xl)!important; background:var(--hs-ds-color-surface)!important; box-shadow:var(--hs-ds-shadow-lift)!important; animation:hsSheetIn 280ms var(--hs-ds-motion-spring); } html body .modal-backdrop > .modal-card:not(.hs-bulk-sheet):not(.client-merge-preview-modal):not(.client-quality-modal):not(.client-import-modal){ width:min(640px,94vw)!important; } html body .modal-backdrop > .modal-card > .modal-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:var(--hs-ds-space-6)!important; margin:0 calc(var(--hs-ds-space-10) * -1) var(--hs-ds-space-8)!important; padding:var(--hs-ds-space-9) var(--hs-ds-space-10) var(--hs-ds-space-6)!important; border-bottom:1px solid var(--hs-ds-color-line)!important; } html body .modal-backdrop .modal-head h2{ margin:0!important; color:var(--hs-ds-color-ink)!important; font-family:var(--hs-ds-font-sans)!important; font-size:var(--hs-ds-text-xl)!important; font-weight:600!important; letter-spacing:-.01em!important; } html body .modal-backdrop .modal-eyebrow{ display:block!important; margin-bottom:var(--hs-ds-space-1)!important; color:var(--hs-ds-color-muted)!important; font-size:var(--hs-ds-text-sm)!important; font-weight:600!important; letter-spacing:.04em!important; text-transform:lowercase!important; } html body .modal-backdrop .modal-eyebrow::first-letter{ text-transform:uppercase; } html body .modal-backdrop .modal-close{ display:grid!important; place-items:center!important; flex:none!important; width:var(--hs-ds-control-height-sm)!important; height:var(--hs-ds-control-height-sm)!important; padding:0!important; border:0!important; border-radius:var(--hs-ds-radius-circle)!important; background:var(--hs-ds-color-surface-soft)!important; color:var(--hs-ds-color-ink)!important; font-size:var(--hs-ds-text-xl)!important; line-height:1!important; } html body .modal-backdrop > .modal-card > .modal-actions{ margin:var(--hs-ds-space-9) calc(var(--hs-ds-space-10) * -1) 0!important; padding:var(--hs-ds-space-6) var(--hs-ds-space-10) max(var(--hs-ds-space-6),env(safe-area-inset-bottom))!important; border-top:1px solid var(--hs-ds-color-line)!important; } html body .modal-backdrop .modal-card label{ color:var(--hs-ds-color-muted)!important; font-family:var(--hs-ds-font-sans)!important; font-size:var(--hs-ds-text-md)!important; font-weight:500!important; letter-spacing:0!important; text-transform:none!important; } html body .modal-backdrop .modal-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea){ box-sizing:border-box!important; min-height:var(--hs-ds-control-height-form)!important; border:1px solid var(--hs-ds-color-field-border)!important; border-radius:var(--hs-ds-radius-control)!important; background:var(--hs-ds-color-surface-soft)!important; color:var(--hs-ds-color-ink)!important; font-family:var(--hs-ds-font-sans)!important; font-size:var(--hs-ds-text-base)!important; } html body .modal-backdrop .modal-card :is(input,select,textarea):focus{ outline:3px solid var(--hs-ds-color-field-ring)!important; outline-offset:0!important; border-color:var(--hs-ds-color-field-border-focus)!important; background:var(--hs-ds-color-surface)!important; } @media (max-width:700px){ html body .modal-backdrop{ align-items:flex-end!important; padding:0!important; } html body .modal-backdrop > .modal-card{ width:100%!important; max-width:none!important; max-height:92dvh!important; padding:0 var(--hs-ds-space-8)!important; border-bottom-left-radius:var(--hs-ds-radius-none,0)!important; border-bottom-right-radius:var(--hs-ds-radius-none,0)!important; } html body .modal-backdrop > .modal-card:not(.hs-bulk-sheet):not(.client-merge-preview-modal):not(.client-quality-modal):not(.client-import-modal){ width:100%!important; } html body .modal-backdrop > .modal-card > .modal-head{ margin:0 calc(var(--hs-ds-space-8) * -1) var(--hs-ds-space-8)!important; padding:var(--hs-ds-space-10) var(--hs-ds-space-8) var(--hs-ds-space-6)!important; } html body .modal-backdrop > .modal-card > .modal-head::before{ content:""; position:absolute; top:var(--hs-ds-space-3); left:50%; width:36px; height:5px; border-radius:var(--hs-ds-radius-pill); background:var(--hs-ds-color-line); transform:translateX(-50%); } html body .modal-backdrop > .modal-card > .modal-actions{ margin:var(--hs-ds-space-9) calc(var(--hs-ds-space-8) * -1) 0!important; padding:var(--hs-ds-space-6) var(--hs-ds-space-8) max(var(--hs-ds-space-6),env(safe-area-inset-bottom))!important; } html body .modal-backdrop > .modal-card > .modal-actions .btn{ flex:1!important; } } @media (prefers-reduced-motion:reduce){ html body .modal-backdrop > .modal-card{ animation:none; } } .hs-iphone-reminder-modal{ width:min( 520px, calc(100vw - 32px) )!important; max-width:520px!important; } .hs-iphone-reminder-modal .modal-head{ padding:var(--hs-ds-space-6) var(--hs-ds-space-7) var(--hs-ds-space-5)!important; } .hs-iphone-reminder-modal .modal-head h2{ margin-top:var(--hs-ds-space-1)!important; } .hs-iphone-reminder-modal .modal-head .muted{ margin-top:var(--hs-ds-space-2)!important; } .hs-iphone-reminder-modal .modal-close{ width:38px!important; height:38px!important; min-width:38px!important; } .hs-iphone-reminder-modal .hs-reminder-clean-card{ margin:var(--hs-ds-space-5) var(--hs-ds-space-7) 0!important; padding:var(--hs-ds-space-6)!important; gap:var(--hs-ds-space-2)!important; border-radius:var(--hs-ds-radius-md)!important; } .hs-iphone-reminder-modal .hs-reminder-clean-card strong{ font-size:var(--hs-ds-text-lg)!important; } .hs-iphone-reminder-modal .hs-iphone-reminder-done{ width:calc(100% - (2 * var(--hs-ds-space-7)))!important; min-height:40px!important; margin:var(--hs-ds-space-5) var(--hs-ds-space-7) var(--hs-ds-space-6)!important; } @media(max-width:700px){ .hs-iphone-reminder-modal{ width:calc(100vw - 24px)!important; max-width:520px!important; } .hs-iphone-reminder-modal .modal-head{ padding:var(--hs-ds-space-6)!important; } .hs-iphone-reminder-modal .hs-reminder-clean-card{ margin:var(--hs-ds-space-4) var(--hs-ds-space-6) 0!important; padding:var(--hs-ds-space-5)!important; } .hs-iphone-reminder-modal .hs-iphone-reminder-done{ width:calc(100% - (2 * var(--hs-ds-space-6)))!important; margin:var(--hs-ds-space-4) var(--hs-ds-space-6) var(--hs-ds-space-6)!important; } } .agenda-appointment-modal .hs-agenda-service-row{ grid-template-columns:minmax(0,1fr) minmax(0,.42fr); } .agenda-appointment-modal .hs-agenda-staff-date-row{ grid-template-columns:minmax(0,1fr); } .agenda-appointment-modal .hs-agenda-time-native{ display:none!important; } .agenda-appointment-modal .hs-agenda-time-slots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--hs-ds-space-2); margin-top:var(--hs-ds-space-2); } .agenda-appointment-modal .hs-agenda-time-choice{ width:100%; padding:var(--hs-ds-space-3) var(--hs-ds-space-2); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-md); background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); font-family:var(--hs-ds-font-sans); font-size:var(--hs-ds-text-sm); font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; } .agenda-appointment-modal .hs-agenda-time-choice:hover{ border-color:var(--hs-ds-color-ink); } .agenda-appointment-modal .hs-agenda-time-choice.is-selected{ background:var(--hs-ds-color-ink); border-color:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); } .agenda-appointment-modal .hs-agenda-time-empty{ grid-column:1 / -1; padding:var(--hs-ds-space-4); border:1px solid var(--hs-ds-color-line); border-radius:var(--hs-ds-radius-md); color:var(--hs-ds-color-muted); font-size:var(--hs-ds-text-sm); text-align:center; } @media(max-width:700px){ .agenda-appointment-modal .hs-agenda-time-slots{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .agenda-appointment-modal [data-edit-time-slots] .hs-agenda-time-choice:disabled{ cursor:default; opacity:.72; } @media(max-width:700px){ .agenda-edit-actions [data-agenda-update]{ flex-basis:auto!important; } } html body .modal-backdrop{ z-index:var(--hs-layer-modal)!important; } html body .hs-datepicker-backdrop{ z-index:var(--hs-layer-picker)!important; } html body .modal-backdrop > .modal-card{ box-sizing:border-box!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } html body .modal-backdrop > .modal-card > .modal-head{ position:sticky!important; top:0!important; z-index:3!important; background:var(--hs-ds-color-surface)!important; } html body .modal-backdrop > .modal-card > .modal-actions{ position:sticky!important; bottom:0!important; z-index:3!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-wrap:wrap!important; gap:var(--hs-ds-space-3)!important; background:var(--hs-ds-color-surface)!important; } html body .waitlist-create-v2 .modal-head + .waitlist-v2-section{ margin-top:0!important; } html body .waitlist-create-v2 > .modal-actions{ margin-top:var(--hs-ds-space-5)!important; } @media(max-width:700px){ html body .modal-backdrop > .modal-card{ max-height:94dvh!important; } html body .modal-backdrop > .modal-card > .modal-actions .btn{ flex:1 1 120px!important; } } html body .modal-card.hs-modal-sm{ width:min( var(--hs-modal-width-sm), calc(100vw - 32px) )!important; max-width:var(--hs-modal-width-sm)!important; } html body .modal-card.hs-modal-md{ width:min( var(--hs-modal-width-md), calc(100vw - 32px) )!important; max-width:var(--hs-modal-width-md)!important; } html body .modal-card.hs-modal-lg{ width:min( var(--hs-modal-width-lg), calc(100vw - 32px) )!important; max-width:var(--hs-modal-width-lg)!important; } html body .modal-card.hs-modal-xl{ width:min( var(--hs-modal-width-xl), calc(100vw - 32px) )!important; max-width:var(--hs-modal-width-xl)!important; } html body :is(.modal-card,.hs-ui-modal) :is( input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea ){ box-sizing:border-box!important; max-width:100%!important; } @media(max-width:700px){ html body :is( .modal-card.hs-modal-sm, .modal-card.hs-modal-md, .modal-card.hs-modal-lg, .modal-card.hs-modal-xl, .hs-ui-modal.hs-modal-sm, .hs-ui-modal.hs-modal-md, .hs-ui-modal.hs-modal-lg, .hs-ui-modal.hs-modal-xl ){ width:100%!important; max-width:none!important; } } .modal-actions:has(> [data-agenda-update]){ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .modal-actions:has(> [data-agenda-update]) > *{ width:auto!important; margin:0!important; } .modal-actions:has(> [data-agenda-update]) > [data-agenda-update]{ grid-column:1 / -1!important; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions > *{ width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; flex:none!important; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions > [data-agenda-delete]{ order:1; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions > [data-agenda-duplicate]{ order:2; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions > [data-agenda-update]{ order:3; grid-column:1 / -1!important; } html body .modal-actions.agenda-edit-actions.agenda-edit-actions{ box-sizing:border-box!important; width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; left:0!important; right:0!important; padding-left:14px!important; padding-right:14px!important; } html body .hs-datepicker-backdrop{ position:fixed!important; inset:0!important; pointer-events:auto!important; } html body .hs-datepicker-backdrop .hs-datepicker{ position:relative!important; z-index:1!important; pointer-events:auto!important; } html body .hs-alert-backdrop .hs-alert-card{ display:flex!important; flex-direction:column!important; gap:16px!important; padding:22px 18px max(18px,env(safe-area-inset-bottom))!important; } html body .hs-alert-text{ margin:0!important; font-size:16px!important; line-height:1.4!important; text-align:center!important; white-space:pre-line; } html body .hs-alert-ok{ width:100%!important; min-height:48px!important; font-size:16px!important; font-weight:600!important; } html body .modal-backdrop.hs-iphone-reminder-backdrop{ inset:auto 0 auto 0!important; top:max(10px,env(safe-area-inset-top))!important; bottom:auto!important; height:auto!important; min-height:0!important; padding:0 12px!important; display:flex!important; justify-content:center!important; align-items:flex-start!important; background:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; pointer-events:none!important; } html body .hs-iphone-reminder-backdrop .hs-iphone-reminder-modal{ pointer-events:auto!important; width:min(560px,100%)!important; max-height:45vh!important; overflow-y:auto!important; margin:0!important; padding:12px 14px!important; border-radius:18px!important; box-shadow:0 12px 32px rgba(0,0,0,.18)!important; transform:none!important; animation:hsBannerIn .32s cubic-bezier(.22,.8,.28,1)!important; } html body .hs-confirm-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; } html body .hs-confirm-actions .btn{ width:100%!important; min-height:48px!important; font-size:16px!important; font-weight:600!important; margin:0!important; } /* ========================================================= HS INVENTARIO V3: nome a sinistra, disponibilita e -1/+1 a destra ========================================================= */ html body .inventory-product.hs-inv-row.hs-inv-row{ display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;align-items:center!important;gap:8px!important; padding:12px 4px!important;text-align:left!important; } html body .inventory-product.hs-inv-row .hs-inv-main{ display:block!important;flex:1 1 0!important;width:0!important;min-width:0!important;margin:0!important; padding:0!important;text-align:left!important;background:none!important;border:0!important; overflow-wrap:anywhere!important;word-break:normal!important; } html body .inventory-product.hs-inv-row .hs-inv-main *{text-align:left!important} html body .inventory-product.hs-inv-row .hs-inv-stock{ display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:center!important; min-width:56px!important;margin:0!important;text-align:center!important;line-height:1.1!important; } html body .inventory-product.hs-inv-row .hs-inv-stock b{font-size:18px!important} html body .inventory-product.hs-inv-row .hs-inv-stock small{font-size:13px!important} html body .inventory-product.hs-inv-row :is(.hs-inv-use,.hs-inv-add){ flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;padding:0!important; border-radius:50%!important;display:grid!important;place-items:center!important;font-size:15px!important;font-weight:700!important; } /* HS SETTIMANA: card con piu spazio per il testo nelle colonne strette */ #app .agenda-week-lane .agenda-appointment{padding:4px 6px 4px 9px} #app .hs-week-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px} /* ========================================================= COMPONENTE: MAGAZZINO Schede Inventario | Ordine | Storico, pagina Ordine, intestazioni sticky della Modifica rapida. ========================================================= */ .hs-tabs{ display:flex; gap:6px; margin:0 0 12px; padding:4px; border-radius:12px; background:var(--hs-ds-color-surface-soft); } .hs-tab{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; border:0; border-radius:9px; background:transparent; color:var(--hs-ds-color-ink); font:inherit; font-weight:600; } .hs-tab.is-active{ background:var(--hs-ds-color-surface); box-shadow:0 1px 3px rgba(0,0,0,.15); } .hs-tab-badge{ min-width:20px; padding:0 6px; border-radius:10px; background:#d33; color:#fff; font-size:12px; line-height:20px; text-align:center; } /* 4 o piu schede (es. Comunicazioni): larghezza secondo il testo, sempre su una riga */ .hs-tabs.is-dense{ gap:2px; } .hs-tabs.is-dense .hs-tab{ flex:1 1 auto; min-width:0; padding:0 4px; gap:4px; white-space:nowrap; } @media (max-width:374px){ body:not(.agenda-mode) #view .hs-tabs.is-dense .hs-tab{ font-size:15px; padding:0 2px; } .hs-tabs.is-dense .hs-tab-badge{ min-width:18px; padding:0 4px; line-height:18px; } } @media (max-width:339px){ body:not(.agenda-mode) #view .hs-tabs.is-dense .hs-tab{ font-size:13px; } } .hs-ord-head{ display:flex; flex-direction:column; gap:2px; margin:0 0 10px; } .hs-ord-head small{ color:var(--hs-ds-color-muted); letter-spacing:.06em; } .hs-ord-list{ padding:0; overflow:hidden; } .hs-ord-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--hs-ds-color-line); } .hs-ord-row:last-child{ border-bottom:0; } .hs-ord-name{ flex:1; min-width:0; display:flex; flex-direction:column; } .hs-ord-name small{ color:var(--hs-ds-color-muted); } .hs-ord-stepper{ display:flex; align-items:center; gap:6px; } .hs-ord-stepper b{ min-width:28px; text-align:center; } .hs-ord-stepper button, .hs-ord-remove{ width:36px; height:36px; border:1px solid var(--hs-ds-color-line); border-radius:50%; background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); font:inherit; font-size:18px; } .hs-ord-remove{ border-color:transparent; color:var(--hs-ds-color-muted); } .hs-ord-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .hs-ord-cancel, .hs-ord-manual{ margin-top:10px; width:100%; } .hs-ord-diff{ display:block; font-weight:400; color:var(--hs-ds-color-muted); } .hs-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; } .hs-toolbar .btn{ flex:1 1 calc(50% - 4px); min-width:0; margin:0; } /* Modifica rapida: la tabella scorre dentro il suo riquadro, cosi le intestazioni (th sticky) restano ferme */ /* ========================================================= COMPONENTE: BARRA PAGINA Barra in alto delle pagine interne: una sola riga a dimensioni fisse (indietro | titolo con puntini | azione). Nessun cambio di layout durante lo scroll. ========================================================= */ body:not(.agenda-mode) #app > header{ box-sizing:border-box; height:calc(52px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--hs-ds-space-8) 0; gap:var(--hs-ds-space-4); overflow:hidden; } body:not(.agenda-mode) #app > header > div:first-child{ flex:1 1 0; min-width:0; flex-direction:row; align-items:center; gap:var(--hs-ds-space-4); } body:not(.agenda-mode) #app > header .hs-ui-back{ flex:none; white-space:nowrap; } body:not(.agenda-mode) #app > header h1{ flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--hs-ds-text-xl); } body:not(.agenda-mode) #app > header > .hs-ui-header-right{ flex:none; align-self:center; margin-left:0; } body:not(.agenda-mode) #app > header .hs-ui-pill-button{ white-space:nowrap; } /* la barra resta in alto: #app non deve diventare un contenitore di scorrimento */ body:not(.agenda-mode), body:not(.agenda-mode) #app{ overflow-x:clip; overflow-y:visible; } /* ========================================================= COMPONENTE: LEGGIBILITA PAGINE Stessa scala di testo e di tasti su Inventario, Clienti, Vendite, Da fare, Comunicazioni, Registro attivita. Testo principale 16-17px, secondario 15px, etichette 13px, tasti da 44px, righe allineate a sinistra. ========================================================= */ body:not(.agenda-mode) #view{ --hs-text-secondary-size:15px; --hs-ds-text-sm:15px; --hs-ds-text-label:15px; --hs-ds-text-xs:13px; font-size:16px; line-height:1.4; text-align:left; } body:not(.agenda-mode) #view .muted, body:not(.agenda-mode) #view small, body:not(.agenda-mode) #view .hs-inv-sub, body:not(.agenda-mode) #view .clients-search-status, body:not(.agenda-mode) #view p.muted{ font-size:15px; line-height:1.4; } body:not(.agenda-mode) #view .hs-inv-stock small, body:not(.agenda-mode) #view .eyebrow, body:not(.agenda-mode) #view .pill, body:not(.agenda-mode) #view .staff-count{ font-size:13px; line-height:1.3; } body:not(.agenda-mode) #view .row, body:not(.agenda-mode) #view .order-history-summary, body:not(.agenda-mode) #view .client-row{ min-height:56px; padding-top:12px; padding-bottom:12px; text-align:left; } body:not(.agenda-mode) #view .row strong, body:not(.agenda-mode) #view .client-row strong, body:not(.agenda-mode) #view .hs-inv-name{ font-size:17px; } body:not(.agenda-mode) #view .btn, body:not(.agenda-mode) #view .btn.small, body:not(.agenda-mode) #view .clients-actions-trigger, body:not(.agenda-mode) #view .hs-tab{ min-height:44px; font-size:16px; } body:not(.agenda-mode) #view .hs-ui-icon-button{ min-width:44px; min-height:44px; } body:not(.agenda-mode) #view .hs-inv-main{ min-height:44px; } body:not(.agenda-mode) #view .card.clients-search-card{ padding:0; border:0; background:transparent; box-shadow:none; } body:not(.agenda-mode) #view .chart-months span, body:not(.agenda-mode) #view .chart-months small{ font-size:12px; } /* barra: se la pagina ha un tasto d'azione, "Indietro" resta solo la freccia per lasciare spazio al titolo */ body:not(.agenda-mode) #app > header .hs-ui-back-label{ font-style:normal; } body:not(.agenda-mode) #app > header.has-action .hs-ui-back-label{ display:none; } /* ========================================================= COMPONENTE: SCHELETRI Blocchi grigi con riflesso al posto di spinner e pagine vuote. ========================================================= */ .hs-skel{ display:flex; flex-direction:column; gap:12px; padding:4px 0; } .hs-skel-row{ display:flex; align-items:center; gap:14px; min-height:56px; padding:12px 14px; border-radius:var(--hs-ds-radius-lg,16px); background:var(--hs-ds-color-surface,#fff); border:1px solid var(--hs-ds-color-line,#e8e4dc); } .hs-skel-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; } .hs-skel-block{ display:block; border-radius:8px; background:linear-gradient(90deg,#e9e6df 25%,#f4f2ed 50%,#e9e6df 75%); background-size:200% 100%; animation:hsSkelShimmer 1.3s ease-in-out infinite; } .hs-skel-avatar{ flex:none; width:40px; height:40px; border-radius:50%; } .hs-skel-line{ height:14px; } .hs-skel-line.is-short{ height:11px; } @keyframes hsSkelShimmer{ from{background-position:200% 0} to{background-position:-200% 0} } @media (prefers-reduced-motion:reduce){ .hs-skel-block{ animation:none; } } /* ========================================================= COMPONENTE: TRANSIZIONI PAGINE Entrata e uscita delle pagine interne: scorrimento come iOS, dissolvenza per le schede. La pagina che esce e una copia ferma (hs-exit-clone) che non reagisce ai tocchi. ========================================================= */ @keyframes hsEnterFade{ from{opacity:0} to{opacity:1} } @keyframes hsExitForward{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(-28px)} } @keyframes hsExitBack{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(40px)} } @keyframes hsExitFade{ from{opacity:1} to{opacity:0} } body:not(.agenda-mode) #view.hs-enter-fade{ animation:hsEnterFade 220ms ease-out; } .hs-exit-clone{ position:fixed; z-index:10; margin:0; overflow:hidden; pointer-events:none; will-change:transform,opacity; } .hs-exit-clone.hs-exit-forward{ animation:hsExitForward 240ms ease-in forwards; } .hs-exit-clone.hs-exit-back{ animation:hsExitBack 240ms ease-in forwards; } .hs-exit-clone.hs-exit-fade{ animation:hsExitFade 180ms ease-in forwards; } @media (prefers-reduced-motion:reduce){ body:not(.agenda-mode) #view.hs-enter-fade, .hs-exit-clone{ animation:none; } } .hs-copy-fallback{ width:100%; box-sizing:border-box; margin:0 0 12px; padding:12px; border:1px solid var(--hs-ds-color-line); border-radius:12px; background:var(--hs-ds-color-surface); color:var(--hs-ds-color-ink); font:16px/1.4 inherit; } /* ========================================================= COMPONENTE: TASTO Un solo tasto per tutta l'app: primario (scuro), secondario (beige), pericolo (rosso). Altezza minima 44px, angoli 12px, testo normale (mai tutto maiuscolo). "small" cambia solo la larghezza interna, non l'altezza. ========================================================= */ body .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; min-height:44px; padding:0 20px; border:0; border-radius:12px; background:var(--hs-ds-color-ink); color:var(--hs-ds-color-surface); font-family:var(--hs-ds-font-sans); font-size:16px; font-weight:600; line-height:1.2; letter-spacing:0; text-transform:none; } body .btn.secondary{ background:var(--hs-ds-color-control-secondary); color:var(--hs-ds-color-ink); } body .btn.danger{ background:var(--hs-ds-color-danger); color:var(--hs-ds-color-surface); } body .btn.small{ min-height:44px; padding:0 16px; border-radius:12px; font-size:15px; } body .btn.primary{ width:100%; } body .btn:disabled{ opacity:.5; } /* altri tasti d'azione che avevano una forma propria: stessa altezza e angoli */ body :is(.hs-ui-pill-button,.hs-media-btn,.hs-cms-preview-toggle,.hs-iphone-reminder-done,.notification-enable-button,.agenda-quick-checklist-manage){ min-height:44px; border-radius:12px; font-size:16px; font-weight:600; text-transform:none; } body .agenda-quick-checklist-manage{ background:var(--hs-ds-color-control-secondary); color:var(--hs-ds-color-ink); } /* schede e interruttori a segmenti: stessa altezza minima dei tasti */ body:not(.agenda-mode) #view :is(.hs-ui-segmented,[class*="-tabs"],.online-cms-nav) button{ min-height:44px; } /* riga Inventario: nome · formato sulla prima riga, min/ideale sotto in piccolo */ #view .hs-inv-name, #view .hs-inv-sub{ display:block; } /* ========================================================= COMPONENTE: RIGA LISTA Riga standard di tutte le liste: testo a sinistra (titolo + dettaglio piccolo), azioni o freccia a destra. Min 56px. Si usa dentro
. ========================================================= */ .hs-list{ padding:0; overflow:hidden; } .hs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; box-sizing:border-box; width:100%; min-height:56px; margin:0; padding:12px 16px; border:0; border-bottom:1px solid var(--hs-ds-color-line); border-radius:0; background:transparent; color:var(--hs-ds-color-ink); font:inherit; text-align:left; cursor:pointer; } .hs-row:last-child{ border-bottom:0; } .hs-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; } .hs-row-main strong{ font-size:17px; font-weight:600; } .hs-row-main small{ font-size:15px; color:var(--hs-ds-color-muted); } .hs-row-chevron{ flex:none; color:var(--hs-ds-color-muted); font-size:20px; } /* riga solo da leggere e gruppo apribile (details > summary) */ div.hs-row{ cursor:default; } summary.hs-row{ list-style:none; } summary.hs-row::-webkit-details-marker{ display:none; } details:not([open]) > summary.hs-row{ border-bottom:0; } details[open] > summary.hs-row .hs-row-chevron{ transform:rotate(90deg); } /* HS SETUP TIP POPUP (consiglio al primo apertura agenda, dopo il wizard - vedi app.js hsMaybeShowSetupTipPopup). Stile minimo, appoggiato alle classi generiche .modal-card/.btn gia' esistenti. */ .hs-setup-tip-list{ display:flex; flex-direction:column; gap:12px; margin:18px 0; } .hs-setup-tip-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; } .hs-setup-tip-row span{ font-size:14px; } .hs-setup-tip-row .btn{ width:auto; flex-shrink:0; margin:0; } .hs-setup-tip-done{ width:100%; margin-top:18px; } .staff-prep-materials{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } .staff-prep-materials-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }