@charset "UTF-8";
/* TrilùTable · Impostazioni del locale (settings module, prefix st-) */
.st-page { --st-line: #2a2d32; --st-panel: #15171a; --st-soft: #99a0aa; --st-orange: var(--accent, #ff833f); --st-orange-soft: #ffb27f; color: var(--text, #f1f2f4); width: 100%; min-width: 0; }
.st-page h1, .st-page h2, .st-page h3, .st-page p { margin-top: 0; }

.st-heading { margin-bottom: 22px; }
.st-heading .eyebrow { font-size: 9px; letter-spacing: .18em; color: #d7a07a; margin-bottom: 10px; }
.st-heading h1 { font-size: clamp(27px, 2.6vw, 38px); letter-spacing: -.04em; margin: 0 0 8px; }
.st-heading p { color: var(--st-soft); font-size: 13px; margin: 0; }
.st-serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; color: var(--st-orange-soft); font-size: 1.08em; }

.st-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.st-column { min-width: 0; }
.st-column-wide { grid-column: 1 / -1; }
.st-card { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 0; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-panel); }
.st-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.st-card-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #5a3a24; border-radius: 10px; background: #2a1d15; color: var(--st-orange-soft); }
.st-card-title { flex: 1; min-width: 0; }
.st-card-title h2 { font-size: 17px; letter-spacing: -.02em; margin: 2px 0 5px; }
.st-card-title p { font-size: 11.5px; color: var(--st-soft); margin: 0; line-height: 1.55; }
.st-dirty { flex-shrink: 0; margin-top: 3px; }

.st-grid { display: grid; gap: 4px 14px; }
.st-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; }
.st-label { font-size: 11px; font-weight: 600; color: #c9ced7; }
.st-help { font-size: 10.5px; color: #868e99; line-height: 1.55; }
.st-help b { color: #ffcba7; font-weight: 600; overflow-wrap: anywhere; }
.st-counter { align-self: flex-end; }
.st-field .input, .st-field .select { min-height: 44px; }
.st-field .textarea { min-height: 70px; }

/* Switch */
.st-switch { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid #2f343b; border-radius: 12px; background: #111316; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch-track { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: #353a42; transition: background .18s; }
.st-switch-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c9ced6; transition: transform .18s, background .18s; }
.st-switch input:checked + .st-switch-track { background: var(--st-orange); }
.st-switch input:checked + .st-switch-track i { transform: translateX(20px); background: #1b120c; }
.st-switch input:focus-visible + .st-switch-track { outline: 2px solid var(--st-orange); outline-offset: 3px; }
.st-switch-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-switch-copy strong { font-size: 13px; font-weight: 600; }
.st-switch-copy small { font-size: 11px; color: #8e96a1; line-height: 1.5; }

/* Card footer */
.st-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 6px -24px 0; padding: 14px 24px; border-top: 1px solid var(--st-line); background: #121417; border-radius: 0 0 14px 14px; }
.st-card-foot > div { display: flex; gap: 8px; margin-left: auto; }
.st-card-foot .btn { min-height: 44px; }
.st-foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #7f8893; }
.st-error { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid #74423a; border-radius: 8px; background: #3b2220; color: #f1b3a4; font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.st-error svg { flex-shrink: 0; margin-top: 1px; }

/* Services */
.st-services { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.st-service { padding: 14px 14px 12px; border: 1px solid #2b3038; border-radius: 12px; background: #111316; }
.st-service.is-invalid { border-color: #74423a; }
.st-service-top { display: grid; grid-template-columns: minmax(0, 1fr) 128px 128px 44px; gap: 10px; align-items: end; }
.st-service .st-field { margin-bottom: 0; }
.st-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #343b45; border-radius: 9px; background: #171a1e; color: #b7bec9; cursor: pointer; }
.st-icon-button:hover:not(:disabled) { border-color: #8c4a3f; color: #ffb4aa; background: #2a1a18; }
.st-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.st-day { min-width: 46px; min-height: 40px; padding: 6px 9px; border: 1px solid #343b45; border-radius: 9px; background: #171a1e; color: #8e96a1; font-size: 12px; font-weight: 600; cursor: pointer; }
.st-day[aria-pressed="true"] { border-color: #8c5a39; background: #35241a; color: #ffcba7; }
.st-day:hover { border-color: #8c5a39; }
.st-row-error { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: #f1b3a4; }
.st-add { align-self: flex-start; min-height: 44px; margin-bottom: 18px; }

/* Contacts */
.st-venue { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border: 1px dashed #343b45; border-radius: 12px; background: #111316; }
.st-venue dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; flex: 1 1 280px; min-width: 0; }
.st-venue dt { font-size: 9.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #7d8691; margin-bottom: 3px; }
.st-venue dd { margin: 0; font-size: 12.5px; color: #d7dbe0; overflow-wrap: anywhere; }
.st-venue .btn { min-height: 44px; }
.st-venue .st-help { margin: 0; flex: 1 1 200px; }

/* Booking page & QR */
.st-warning { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid #6a4126; border-radius: 9px; background: #2b1f16; color: #ffcba7; font-size: 11.5px; line-height: 1.5; }
.st-warning svg { flex-shrink: 0; margin-top: 1px; color: var(--st-orange); }
.st-warning b { color: #fff; }
.st-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; margin-bottom: 14px; }
.st-page-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.st-url { padding: 12px 14px; border: 1px solid #343b45; border-radius: 9px; background: #0f1215; }
.st-url-text { display: block; font-size: 12.5px; color: #ffcba7; font-weight: 600; overflow-wrap: anywhere; }
.st-url-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.st-url-actions .btn { min-height: 44px; }
.st-slug-field { margin-bottom: 4px; }
.st-slug { display: flex; align-items: stretch; min-width: 0; }
.st-slug-prefix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #343b45; border-right: 0; border-radius: 7px 0 0 7px; background: #1b1e22; color: #8e96a1; font-size: 12px; white-space: nowrap; }
.st-slug .input { border-radius: 0 7px 7px 0; }
.st-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 14px; border: 1px solid #3a2a20; border-radius: 14px; background: linear-gradient(160deg, #2a1d15, #171412 70%); }
.st-qr-frame { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 196px; padding: 8px; border-radius: 10px; background: #fff; }
.st-qr-image { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.st-qr-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; color: #6a5a4f; font-size: 11px; text-align: center; }
.st-qr-state.is-error { color: #9b451c; }
.st-qr figcaption { font-family: Georgia, serif; font-style: italic; color: #ffcba7; font-size: 14px; }
.st-qr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.st-qr-actions .btn { min-height: 44px; padding: 8px 11px; font-size: 11.5px; }
.st-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* Agent */
.st-agent-status { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #2f343b; border-radius: 12px; background: #111316; }
.st-agent-status > i { flex-shrink: 0; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #5a6069; box-shadow: 0 0 0 4px #2a2e34; }
.st-agent-status strong { display: block; font-size: 13px; margin-bottom: 3px; }
.st-agent-status p { margin: 0; font-size: 11.5px; color: #8e96a1; line-height: 1.55; }
.st-agent-status.is-on { border-color: #30533d; background: #13201a; }
.st-agent-status.is-on > i { background: #86bc98; box-shadow: 0 0 0 4px #86bc9826; }
.st-agent-status.is-paused > i { background: var(--st-orange); box-shadow: 0 0 0 4px #ff833f26; }
.st-key-reveal { margin-bottom: 16px; padding: 16px; border: 1px solid var(--st-orange); border-radius: 12px; background: #2b1f16; }
.st-key-reveal .st-field { margin-bottom: 10px; }
.st-key-row { display: flex; gap: 8px; min-width: 0; }
.st-key-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .02em; color: #ffe1cc !important; }
.st-key-row .btn { min-height: 44px; flex-shrink: 0; }
.st-key-warning { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px; font-size: 11.5px; color: #ffcba7; line-height: 1.5; }
.st-key-warning svg { flex-shrink: 0; margin-top: 2px; }
.st-key-reveal .btn-ghost { min-height: 44px; color: #ffcba7; }
.st-agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.st-agent-actions .btn { min-height: 44px; }
.st-danger { color: #e39b91; }
.st-danger:hover { background: #352120; color: #ffb4aa; }
.st-howto { margin-bottom: 18px; border: 1px solid #2b3038; border-radius: 12px; background: #111316; }
.st-howto summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-size: 12.5px; font-weight: 600; color: #d7dbe0; cursor: pointer; list-style: none; }
.st-howto summary::-webkit-details-marker { display: none; }
.st-howto summary svg { transition: transform .18s; color: var(--st-orange-soft); }
.st-howto[open] summary svg { transform: rotate(180deg); }
.st-howto-body { padding: 0 16px 16px; }
.st-howto-body > p { font-size: 12px; color: #aab1bb; line-height: 1.65; margin: 0 0 14px; max-width: 860px; }
.st-howto-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.st-howto-meta div { min-width: 0; padding: 10px 12px; border: 1px solid #2b3038; border-radius: 9px; background: #0f1215; }
.st-howto-meta dt { font-size: 9.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #7d8691; margin-bottom: 4px; }
.st-howto-meta dd { margin: 0; font-size: 11.5px; color: #c9ced6; overflow-wrap: anywhere; }
.st-page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: #ffcba7; overflow-wrap: anywhere; }
.st-endpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-endpoints li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid #2b3038; border-radius: 9px; background: #0f1215; }
.st-endpoints li > div { min-width: 0; }
.st-endpoints p { margin: 4px 0 0; font-size: 11px; color: #8e96a1; line-height: 1.5; }
.st-method { flex-shrink: 0; min-width: 48px; padding: 3px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; text-align: center; letter-spacing: .04em; }
.st-method-get { background: #1b2a44; color: #8fb6ff; }
.st-method-post { background: #3a2416; color: #ffb27f; }

/* Read-only note (staff) */
.st-readonly-note { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; padding: 20px 22px; border: 1px solid #46382f; border-radius: 12px; background: #211b18; color: #cbae94; }
.st-readonly-note svg { flex-shrink: 0; margin-top: 2px; }
.st-readonly-note strong { display: block; font-size: 14px; color: #f1e2d6; margin-bottom: 6px; }
.st-readonly-note p { font-size: 12px; line-height: 1.7; margin: 0 0 8px; color: #b9a596; }
.st-readonly-note a { color: #ffcba7; text-decoration: underline; overflow-wrap: anywhere; }

@media (max-width: 1240px) { .st-page-grid { grid-template-columns: minmax(0, 1fr); } .st-qr { flex-direction: row; flex-wrap: wrap; justify-content: center; } .st-qr-frame { max-width: 170px; } }
@media (max-width: 1100px) { .st-layout { grid-template-columns: minmax(0, 1fr); } .st-column-wide { grid-column: auto; } .st-page-grid { grid-template-columns: minmax(0, 1fr) 210px; } .st-qr { flex-direction: column; } }
@media (max-width: 760px) {
  .st-card { padding: 18px 16px 0; }
  .st-card-foot { margin: 6px -16px 0; padding: 12px 16px; }
  .st-card-head { flex-wrap: wrap; gap: 12px; }
  .st-dirty { order: 3; }
  .st-page-grid { grid-template-columns: minmax(0, 1fr); }
  .st-howto-meta { grid-template-columns: minmax(0, 1fr); }
  .st-service-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .st-service-name { grid-column: 1 / -1; }
  .st-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .st-day { min-height: 44px; min-width: 0; padding: 6px 2px; }
}
@media (max-width: 600px) {
  .st-grid-2, .st-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .st-card-foot > div { width: 100%; }
  .st-card-foot .btn-primary { flex: 1; }
  .st-venue dl { grid-template-columns: minmax(0, 1fr); }
  .st-key-row { flex-direction: column; }
  .st-slug-prefix { padding: 0 7px; font-size: 11px; }
  .st-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .st-switch-track, .st-switch-track i, .st-howto summary svg { transition: none; } }