/* Stile base minimal per VetRoom 2 */


/* Base reset per evitare overflow e "salti" layout */
*, *::before, *::after { box-sizing: border-box; }

/* Runtime CSS vars (JS can update these for mobile keyboard safe-area handling) */
:root{
    --vr-keyboard-offset: 0px;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f4f6;
    color: #111827;
    overflow-x: hidden;
}

a {
    color: #0f766e;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Login */

.vr-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vr-login-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-width: 400px;
    width: 100%;
}

.vr-login-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.vr-login-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* Layout principale */

.vr-header {
    background: #0f766e;
    color: #ecfeff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
}

.vr-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vr-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.vr-header-user {
    font-weight: 500;
}

.vr-logo-img {
    height: 42px;
    width: auto;
}

.vr-logo-title {
    font-weight: 700;
    font-size: 15px;
}

.vr-logo-sub {
    font-size: 12px;
    opacity: 0.9;
}

.vr-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.vr-sidebar {
    width: 210px;
    background: #0f172a;
    padding: 12px 10px;
}

/* Sidebar groups (collapsible) */

.vr-nav-group {
    margin-bottom: 10px;
}

.vr-nav-group-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
}

.vr-nav-group-title:hover {
    background: #111827;
    color: #e5e7eb;
}

.vr-nav-group-chevron {
    opacity: 0.9;
    transition: transform 120ms ease;
}

.vr-nav-group.collapsed .vr-nav-group-chevron {
    transform: rotate(-90deg);
}

.vr-nav-group-items {
    margin-top: 4px;
}

.vr-nav-group.collapsed .vr-nav-group-items {
    display: none;
}

.vr-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 4px;
}

.vr-nav-icon{
    width: 28px;
    height: 28px;
    border-radius: 18px;
    border: 2px solid rgba(0,0,0,0.65);
    background: #fff;
    padding: 2px;
    object-fit: contain;
    flex: 0 0 auto;
    display: none; /* shown on mobile/tablet */
}

.vr-nav-label{ display: inline; }

.vr-nav-item:hover {
    background: #111827;
    text-decoration: none;
}

.vr-nav-item.active {
    background: #f97316;
    color: #111827;
    overflow-x: hidden;
    font-weight: 600;
}

.vr-main {
    flex: 1;
    padding: 16px;
}

/* Carte e tabelle */

.vr-page-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.vr-page-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 10px;
}

.vr-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.vr-card-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #0f172a;
}

.vr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vr-table th,
.vr-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 4px;
    text-align: left;
    /* Prevent long tokens (emails, CF, IDs) from breaking mobile layouts */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vr-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

/* Form */

.vr-form-row {
    margin-bottom: 8px;
}

.vr-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #374151;
}

.vr-input,
.vr-select,
.vr-textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    padding: 6px 7px;
    box-sizing: border-box;
}

.vr-input:focus,
.vr-select:focus,
.vr-textarea:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.2);
}

.vr-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Buttons: consistent, readable, mobile-friendly */
.vr-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    background: #0f766e;
    color: #ecfeff;
    text-decoration: none;
    user-select: none;
}

.vr-button:hover{ background: #115e59; }

.vr-button:disabled,
.vr-button[disabled]{
    opacity: .55;
    cursor: not-allowed;
}

.vr-button-secondary{
    background: #ffffff;
    color: #0f172a;
    border-color: #e5e7eb;
}

.vr-button-secondary:hover{ background: #f8fafc; }

.vr-alert {
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

.vr-alert-error {
    background: #fee2e2;
    color: #b91c1c;
}

.vr-alert-success {
    background: #dcfce7;
    color: #166534;
}

.vr-link {
    color: #e0f2fe;
    font-size: 13px;
}

/* Vari */

.vr-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.vr-kpi {
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 140px;
}

.vr-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.vr-kpi-value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 3px;
}

.vr-checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.vr-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 12px 0;
}

.vr-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
}

.vr-badge-amber {
    background: #fef3c7;
    color: #92400e;
}

/* --------------------------------------------------------------------------
   Visit form field library (Vet -> Opzioni -> Moduli visite)
--------------------------------------------------------------------------- */
.vr-field-lib-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 900px) {
    .vr-field-lib-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.vr-field-lib-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.vr-field-lib-item.is-selected {
    border-color: #c7d2fe;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.vr-field-lib-item input[type="checkbox"] {
    margin-top: 3px;
}

.vr-field-lib-title {
    font-weight: 600;
    font-size: 13px;
}

.vr-field-lib-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.vr-field-lib-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.vr-field-lib-required {
    font-size: 12px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Visit form wizard (mobile-first)
--------------------------------------------------------------------------- */

/* Small helper used across the app */
.vr-muted{ color:#6b7280; font-size:13px; }

/* Utility: lock body scroll when overlays are open (sheet, admin drawer, etc.) */
body.vr-no-scroll{ overflow:hidden; }

.vr-forms-list{ display:flex; flex-direction:column; gap:10px; }

.vr-form-rowcard{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
}

.vr-form-rowcard-main{ min-width:0; flex:1; }
.vr-form-rowcard-title{ font-weight:700; font-size:13px; }
.vr-form-rowcard-sub{ margin-top:4px; font-size:12px; color:#6b7280; }
.vr-form-rowcard-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.vr-form-rowcard-actions form{ margin:0; }

.vr-wiz-form{ position:relative; }
.vr-wiz-steps{ padding-bottom: 92px; }
.vr-wiz-step{ display:none; }
.vr-wiz-step.is-active{ display:block; }

.vr-wiz-title{ font-weight:800; font-size:14px; margin-top:2px; }
.vr-wiz-sub{ color:#6b7280; font-size:13px; margin-top:6px; line-height:1.35; }
.vr-wiz-hint{ color:#6b7280; font-size:13px; margin-top:10px; }

.vr-wiz-preset-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
}

@media (min-width: 900px){
    .vr-wiz-preset-grid{ grid-template-columns:1fr 1fr; }
}

.vr-wiz-preset{
    text-align:left;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    background:#fff;
    cursor:pointer;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.vr-wiz-preset:hover{ transform: translateY(-1px); box-shadow:0 10px 26px rgba(2,6,23,.06); }
.vr-wiz-preset.is-selected{ border-color:#0ea5e9; box-shadow:0 12px 30px rgba(2,132,199,.14); }
.vr-wiz-preset-title{ font-weight:800; font-size:13px; }
.vr-wiz-preset-desc{ margin-top:6px; color:#6b7280; font-size:12px; }

.vr-wiz-topbar{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.vr-wiz-topbar .vr-input{ flex:1; min-width: 220px; }

.vr-wiz-chips{ display:flex; gap:8px; overflow-x:auto; padding:10px 2px 6px; -webkit-overflow-scrolling:touch; }
.vr-wiz-chips::-webkit-scrollbar{ display:none; }

.vr-chip{
    flex:0 0 auto;
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    cursor:pointer;
}
.vr-chip.is-active{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

.vr-wiz-selectedbar{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.vr-wiz-pill{
    border:1px solid #c7d2fe;
    background:#eef2ff;
    color:#1f2937;
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
}
.vr-wiz-muted{ color:#6b7280; font-size:12px; }

.vr-wiz-field-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.vr-wiz-field{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
}
.vr-wiz-field.is-selected{ border-color:#c7d2fe; box-shadow:0 1px 0 rgba(0,0,0,.03); }
.vr-wiz-field-main{ min-width:0; flex:1; }
.vr-wiz-field-title{ font-weight:800; font-size:13px; }
.vr-wiz-field-meta{ margin-top:4px; color:#6b7280; font-size:12px; }

/* Switch (mobile-friendly) */
.vr-switch{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
.vr-switch input{ opacity:0; width:0; height:0; }
.vr-switch span{ position:absolute; inset:0; background:#e5e7eb; border-radius:999px; transition: .18s ease; }
.vr-switch span:before{ content:''; position:absolute; width:22px; height:22px; left:2px; top:2px; background:#fff; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.18); transition: .18s ease; }
.vr-switch input:checked + span{ background:#0f766e; }
.vr-switch input:checked + span:before{ transform: translateX(18px); }

.vr-wiz-error{ background:#fee2e2; color:#b91c1c; border-radius:14px; padding:10px 12px; margin-top:10px; font-size:13px; }

.vr-wiz-layout-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
@media (min-width: 900px){
    .vr-wiz-layout-grid{ grid-template-columns:1fr 1fr 1fr; }
}

.vr-wiz-layout{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    cursor:pointer;
}
.vr-wiz-layout input{ margin-top:3px; }
.vr-wiz-layout-title{ font-weight:800; font-size:13px; }
.vr-wiz-layout-desc{ margin-top:4px; color:#6b7280; font-size:12px; }

.vr-wiz-summary{ border:1px dashed #e5e7eb; border-radius:16px; padding:12px; background:#fafafa; }
.vr-wiz-summary-note{ margin-top:4px; color:#6b7280; font-size:12px; }

/* CTA bar: fixed above the bottom dock and keyboard */
.vr-wiz-cta{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--vr-dock-h, 0px) + env(safe-area-inset-bottom) + var(--vr-keyboard-offset, 0px) + 10px);
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    padding:10px;
    border-radius:18px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229,231,235,.9);
    box-shadow: 0 14px 40px rgba(2,6,23,.14);
    z-index: 260;
}
.vr-wiz-cta-mid{ color:#6b7280; font-size:12px; font-weight:700; }

@media (min-width: 1025px){
    /* Align with the fixed desktop sidebar (210px) + main padding */
    .vr-wiz-cta{ left: calc(210px + 20px); right: 20px; bottom: 20px; }
}

/* Bottom sheet */
.vr-sheet-overlay{ position: fixed; inset: 0; background: rgba(15,23,42,.55); display:none; z-index: 500; }
.vr-sheet-overlay.is-open{ display:block; }

.vr-sheet{
    position:absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--vr-keyboard-offset, 0px));
    background:#fff;
    border-radius:18px 18px 0 0;
    max-height: calc(86vh - var(--vr-keyboard-offset, 0px));
    overflow:auto;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

.vr-sheet-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid #e5e7eb; }
.vr-sheet-title{ font-weight:800; font-size:14px; }
.vr-sheet-sub{ color:#6b7280; font-size:13px; margin:10px 2px; line-height:1.35; }

.vr-sheet-list{ display:flex; flex-direction:column; gap:10px; }
.vr-sheet-item{ display:flex; gap:10px; align-items:flex-start; border:1px solid #e5e7eb; border-radius:16px; padding:12px; }
.vr-sheet-item-main{ min-width:0; flex:1; }
.vr-sheet-item-title{ font-weight:800; font-size:13px; }
.vr-sheet-item-meta{ margin-top:4px; color:#6b7280; font-size:12px; }
.vr-sheet-item-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.vr-sheet-item-req{ display:flex; gap:6px; align-items:center; font-size:12px; color:#374151; white-space:nowrap; }

.vr-sheet-footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }


/* ===== Mobile helpers (used by list tables in "Proprietari" / "Animali") ===== */
.vr-only-mobile{ display:none; }
.vr-hide-mobile{ display:table-cell; }

.vr-row-meta{
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* Responsive */

@media (max-width: 1024px) {
    /* Layout becomes vertical */
    .vr-layout { flex-direction: column; }
    /* Tablet icon bar height (slightly larger to avoid clipped icons) */
    :root{ --vr-mobile-bar-h: 96px; }


    /* Header: compact + readable */
    .vr-header{
        display: grid;
        grid-template-columns: 132px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
    }
    .vr-header-left{
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        grid-column: 1 / span 2;
    }
    .vr-logo-img{
        width: 132px;
        height: auto;
        max-height: 46px;
        object-fit: contain;
    }
    .vr-logo-title{
        font-size: 14px;
        line-height: 1.15;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
    }
    .vr-logo-sub{
        font-size: 12px;
        line-height: 1.15;
        opacity: 0.9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
    }
    /* Hide long identifiers on mobile/tablet */
    .vr-sub-piva,
    .vr-sub-albo{ display: none; }

    .vr-header-right{
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
        min-width: 0;
        grid-column: 3;
    }
    .vr-header-user{
        font-size: 12px;
        opacity: 0.95;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
    }

    /* Very small screens: keep header compact */
    @media (max-width: 480px){
        .vr-header-user{ display:none; }
        .vr-header-right{ gap: 8px; }
    }

    /* =========================================
       Mobile/Tablet NAV: single clean grid (4 per row)
       - fixes horizontal overflow and "jumping" layout
       ========================================= */

    .vr-sidebar{
    width: 100%;
    /* Make the icon bar height match the header (landscape: 1 row / portrait: 2 rows) */
    padding: 4px 6px;
    display: grid;
    /* Portrait (9:16): 2 rows of 5 icons */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: calc(var(--vr-mobile-bar-h, 66px) - 8px);
    gap: 4px;
    background: #0f172a;
    overflow-x: hidden;
}

/* Hide group headers; flatten groups into the grid (APP sidebar only) */
    .vr-sidebar .vr-nav-group-title{ display: none; }
    .vr-sidebar .vr-nav-group{ display: contents; margin: 0; }
    .vr-sidebar .vr-nav-group-items{ display: contents; margin: 0; }

    .vr-sidebar .vr-nav-item{
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 1px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display: grid;
    place-items: center;
    /* Compact: no giant squares on tablet */
    aspect-ratio: auto;
    height: calc(var(--vr-mobile-bar-h, 66px) - 8px);
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 6px 16px rgba(0,0,0,0.22);
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.vr-sidebar .vr-nav-item:hover{
        background: rgba(255,255,255,0.10);
        text-decoration: none;
    }

    .vr-sidebar .vr-nav-item:active{ transform: scale(0.985); }

    .vr-sidebar .vr-nav-item.active{
        background: #f97316;
        color: #111827;
    overflow-x: hidden;
        border-color: rgba(0,0,0,0.22);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.22),
          0 12px 30px rgba(249,115,22,0.36);
    }

    /* Icon-only navigation */
    .vr-sidebar .vr-nav-icon{
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 13px;
    border: 1px solid rgba(0,0,0,0.60);
    background: #fff;
    padding: 4px;
    object-fit: contain;
    /* Avoid clipped drop shadows (nav items are overflow:hidden). */
    filter: none;
}

.vr-sidebar .vr-nav-label{ display: none; }

    /* Main area tighter */
    .vr-main{ padding: 12px; }
}

/* Small screens: keep tables readable without breaking the viewport */
@media (max-width: 900px){
    .vr-only-mobile{ display:block; }
    .vr-hide-mobile{ display:none !important; }

    .vr-table{ table-layout: fixed; }
    .vr-table th,
    .vr-table td{ padding: 8px 6px; font-size: 12px; vertical-align: top; }
}


/* Schede appuntamenti giorno */

.vr-appointments-day {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-appointment-card {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 8px 10px;
    font-size: 12px;
}

.vr-appointment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 2px;
}

.vr-appointment-time {
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
}

.vr-appointment-pet {
    margin-left: 8px;
}

.vr-appointment-owner {
    font-size: 11px;
    color: #4b5563;
}

.vr-appointment-type {
    font-size: 11px;
    margin-top: 2px;
    color: #0f766e;
}

.vr-appointment-notes {
    font-size: 11px;
    margin-top: 4px;
    color: #374151;
}


.vr-appointment-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.vr-button-xs{
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 12px;
    font-weight: 700;
}

.vr-input-xs {
    padding: 2px 4px;
    font-size: 11px;
}

.vr-button-danger{
    background: #dc2626;
    color: #ffffff;
    border-color: transparent;
}
.vr-button-danger:hover{ background:#b91c1c; }

/* ===== Settings sub-navigation (Opzioni) ===== */

.vr-settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px 0;
}

.vr-settings-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    overflow-x: hidden;
    font-size: 13px;
    font-weight: 500;
}

.vr-settings-nav-item:hover {
    border-color: #0f766e;
}

.vr-settings-nav-item.active {
    background: #0f766e;
    border-color: #0f766e;
    color: #ecfeff;
}

.vr-settings-section {
    /* wrapper used to show/hide per tab */
}

/* ===== Visual Template Editor (modal) ===== */

.vr-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.vr-modal-content {
    width: min(1200px, 96vw);
    height: min(92vh, 980px);
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.vr-modal-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vr-modal-title {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
    overflow-x: hidden;
}

.vr-modal-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.vr-editor-canvas-wrap {
    flex: 1;
    background: #f3f4f6;
    display: flex;
    /*
     * IMPORTANT:
     * Do NOT center the stage vertically inside a scroll container.
     * With overflow:auto + flex centering, the top of the A4 page can become
     * hard (or impossible) to reach on some browsers/devices.
     *
     * We keep the stage aligned to the top/left and rely on zoom + scroll.
     */
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    padding: 16px;
}

.vr-editor-stage {
    position: relative;
    width: 720px;
    /* Allow zoom > 100% (horizontal scroll is handled by the canvas container) */
    max-width: none;
    /* Center horizontally when it fits, but keep top aligned */
    margin: 0 auto;
}

.vr-editor-stage img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.vr-editor-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.vr-tpl-box {
    position: absolute;
    border: 1px dashed rgba(15, 118, 110, 0.95);
    background: rgba(15, 118, 110, 0.10);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
}

.vr-tpl-box.selected {
    border-style: solid;
    background: rgba(15, 118, 110, 0.18);
}

.vr-tpl-box-label {
    font-size: 11px;
    padding: 2px 6px;
    color: #0f766e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vr-tpl-box-resizer {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #0f766e;
    border: 2px solid #ffffff;
    cursor: se-resize;
}

.vr-editor-panel {
    width: min(380px, 44vw);
    border-left: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
}

.vr-editor-panel-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.vr-editor-panel-title {
    font-weight: 700;
    font-size: 13px;
}

.vr-editor-panel-sub {
    font-size: 12px;
    color: #6b7280;
}

.vr-editor-field-list {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: auto;
    padding: 6px;
    max-height: 240px;
}

.vr-editor-field {
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #111827;
    overflow-x: hidden;
}

.vr-editor-field:hover {
    background: #f3f4f6;
}

.vr-editor-field.selected {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-weight: 600;
}

.vr-editor-props {
    margin-top: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.vr-editor-props-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.vr-editor-prop-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.vr-editor-prop-row label {
    font-size: 12px;
    color: #374151;
}

.vr-editor-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vr-editor-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 900px) {
    .vr-modal-body {
        flex-direction: column;
    }
    .vr-editor-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        max-height: 44vh;
    }
}


/* === UX01: icon buttons + collapsible cards + rounder corners === */
:root{
  --vr-radius-lg: 18px;
  --vr-radius-md: 14px;
  --vr-radius-sm: 12px;
}

.vr-card{ border-radius: var(--vr-radius-lg); }
.vr-login-card{ border-radius: var(--vr-radius-lg); }
.vr-input, .vr-select, .vr-textarea{ border-radius: var(--vr-radius-sm); }
.vr-alert{ border-radius: var(--vr-radius-md); }
.vr-table{ border-radius: var(--vr-radius-md); overflow:hidden; }

.vr-card-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.vr-card-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.vr-icon-btn{
  width:34px;
  height:34px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.vr-icon-btn:hover{ background:#f8fafc; }

.vr-action-icon{
  width:24px;
  height:24px;
  display:inline-block;
  object-fit:contain;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.65);
  background: #fff;
  padding: 2px;
}

.vr-button.vr-icon-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 999px;
}

/* Buttons with optional icons: keep them textual on mobile too */
.vr-button.vr-icon-submit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
}

/* We keep the icon markup for future use, but default to text buttons everywhere */
.vr-icon-submit .vr-btn-ico{ display:none; }
.vr-icon-submit .vr-action-icon{ display:none; }
.vr-icon-submit .vr-btn-label{ display:inline; }


.vr-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* collapsible behavior */
.vr-collapsible .vr-card-body{ display:block; }
.vr-collapsible.is-collapsed .vr-card-body{ display:none; }
.vr-collapsible.is-closed{ display:none; }

/* Admin UX01: sidebar layout */
.vr-admin-layout{
  display:flex;
  min-height: 100vh;
  background:#f3f4f6;
}
.vr-admin-sidebar{
  width: 240px;
  padding: 14px;
  background:#ffffff;
  border-right:1px solid #e5e7eb;
}
.vr-admin-sidebar .vr-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--vr-radius-md);
  color:#0f172a;
  text-decoration:none;
  margin-bottom:6px;
}
.vr-admin-sidebar .vr-nav-item:hover{ background:#f8fafc; }
.vr-admin-sidebar .vr-nav-item.active{
  background:#ecfeff;
  color:#0f766e;
}
.vr-admin-main{
  flex:1;
  padding: 16px;
}

/* Platform (admin) mobile drawer */
.vr-admin-topbar{ display:none; }
.vr-admin-overlay{ display:none; }

.vr-admin-page-title{ margin:0 0 6px; }
.vr-admin-page-sub{ opacity:.8; margin:0 0 12px; }

@media (max-width: 980px){
  /* Main layout becomes full-width; sidebar becomes an off-canvas drawer */
  .vr-admin-layout{ display:block; }
  .vr-admin-main{ padding: 0 12px 14px; }

  .vr-admin-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 150;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
  }

  .vr-admin-menu-btn{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background:#ffffff;
    cursor:pointer;
    display:grid;
    place-items:center;
    font-size: 18px;
    line-height: 1;
  }

  .vr-admin-topbar-title{ min-width:0; display:flex; flex-direction:column; gap:2px; }
  .vr-admin-topbar-brand{ font-weight: 850; font-size: 14px; line-height: 1.1; }
  .vr-admin-topbar-sub{
    font-size: 12px;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }

  .vr-admin-topbar-logout{
    margin-left:auto;
    font-weight: 700;
    text-decoration:none;
    color:#0f172a;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background:#ffffff;
  }
  .vr-admin-topbar-logout:hover{ background:#f8fafc; }

  /* Avoid duplicated titles on mobile (topbar already shows them) */
  .vr-admin-page-title,
  .vr-admin-page-sub{ display:none; }

  .vr-admin-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    transform: translateX(-105%);
    transition: transform 180ms ease;
    z-index: 200;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vr-admin-layout.is-sidebar-open .vr-admin-sidebar{ transform: translateX(0); }

  /* Overlay is placed right after .vr-admin-layout in DOM */
  .vr-admin-layout.is-sidebar-open + .vr-admin-overlay{ display:block; }
  .vr-admin-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(2px);
    z-index: 180;
  }

  body.vr-no-scroll{ overflow:hidden; }

  /* Better tap targets inside the drawer */
  .vr-admin-sidebar .vr-nav-item{
    padding: 12px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
  }
}


/* platform.php legacy button compat */
.vr-btn{display:inline-block;border-radius:999px;border:none;padding:8px 14px;font-size:13px;background:#0f766e;color:#fff;text-decoration:none;cursor:pointer}
.vr-btn-secondary{background:#e5e7eb;color:#111827}
.vr-btn-primary{background:#0f766e;color:#fff}
.vr-btn-danger{background:#ef4444;color:#fff}



/* Phone/Tablet portrait: bottom "thumb" dock (scrollable carousel)
   - fixed at bottom (does NOT scroll)
   - keyboard-aware via --vr-keyboard-offset (set by ux.js)
*/
@media (max-width: 1024px) and (orientation: portrait){
    :root{ --vr-dock-h: 86px; }

    /* Make room for the fixed dock (and the on-screen keyboard when open) */
    .vr-main{
        padding-bottom: calc(var(--vr-dock-h) + 16px + env(safe-area-inset-bottom) + var(--vr-keyboard-offset, 0px));
    }

    .vr-sidebar{
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--vr-keyboard-offset, 0px));
        width: 100%;
        height: calc(var(--vr-dock-h) + env(safe-area-inset-bottom));
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        background: #0f172a;
        border-top: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.35);
        z-index: 250;

        /* override tablet grid */
        grid-template-columns: none;
        grid-auto-rows: unset;
    }

    .vr-sidebar::-webkit-scrollbar{ display: none; }
    .vr-sidebar{ scrollbar-width: none; }

    .vr-sidebar .vr-nav-item{
        flex: 0 0 auto;
        width: 72px;
        height: 72px;
        padding: 2px;
        border-radius: 18px;
        scroll-snap-align: start;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.12),
          0 8px 18px rgba(0,0,0,0.25);
    }

    .vr-sidebar .vr-nav-icon{
        border-radius: 16px;
        padding: 4px;
        filter: none; /* avoid clipped drop-shadows on small icons */
    }
}


/* Extra-tight phones */
@media (max-width: 560px){
    /* Header: stack actions below the title to avoid overlaps with the language flag */
    .vr-header{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        align-items: start;
        row-gap: 8px;
        padding: 12px 12px 10px;
    }

    .vr-header-left{
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .vr-header-right{
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    /* Remove inline margins used in desktop header-right */
    .vr-header-right > div{ margin-right: 0 !important; }
    .vr-header-right form{ margin-right: 0 !important; }

    /* Slightly smaller logo to keep the header compact */
    .vr-logo-img{ width: 110px; max-height: 42px; }

    /* Allow wrapping (max 2 lines) so long clinic names never collide with actions */
    .vr-logo-title{
        max-width: none;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .vr-logo-sub{
        max-width: none;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* On very small screens the user label is redundant and causes crowding */
    .vr-header-user{ display: none; }

    /* Language button: slightly smaller to fit better on phones */
    .vr-lang-summary{ width: 38px; height: 32px; }
}

/* Mobile landscape (16:9): 1 row of 10 icons (height = header) */
@media (max-width: 1024px) and (orientation: landscape) {
    .vr-sidebar{
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}


/* Affiliation status dot (vet/admin UI) */
.vr-dot{width:10px;height:10px;border-radius:999px;display:inline-block;background:#9ca3af;vertical-align:middle;}
.vr-dot.is-green{background:#10b981;}
.vr-dot.is-yellow{background:#f59e0b;}
.vr-dot.is-red{background:#ef4444;}
.vr-dot.is-gray{background:#9ca3af;}


/* ===== Agenda settings (weekly schedule) ===== */
.vr-sched-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 900px){ .vr-sched-grid{ grid-template-columns:1fr 1fr; } }

.vr-sched-day{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:12px;
  background:#ffffff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.vr-sched-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.vr-sched-name{ font-weight:800; font-size:13px; }

.vr-sched-toggles{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.vr-sched-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#374151;
  white-space:nowrap;
}

.vr-sched-sub{ font-size:12px; color:#6b7280; font-weight:700; margin-top:8px; }

.vr-sched-range{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}

@media (max-width: 420px){
  .vr-sched-range{ grid-template-columns:1fr; }
}

/* ===== Mobile nav: bigger icons + text under (phone/tablet) ===== */
@media (max-width: 1024px){
  .vr-sidebar .vr-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 6px;
  }

  .vr-sidebar .vr-nav-icon{
    display:block;
    width:46px;
    height:46px;
    border-radius:16px;
    padding:4px;
  }

  .vr-sidebar .vr-nav-label{
    display:block;
    width:100%;
    padding:0 4px;
    font-size:12px;
    font-weight:800;
    line-height:1.05;
    text-align:center;
    /* allow up to 2 lines for long labels (+ Appuntamento, etc.) */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 1024px) and (orientation: portrait){
  /* Taller dock to make room for larger icons + labels */
  :root{ --vr-dock-h: 112px; }

  .vr-sidebar .vr-nav-item{
    width: 88px;
    height: 88px;
    border-radius: 20px;
  }
}

/* -------------------------------------------------------------------------
   Language selector (flag based)
   ------------------------------------------------------------------------- */
.vr-lang-picker{position:relative;display:inline-block;line-height:1;}
.vr-lang-picker .fi{display:inline-block;border-radius:6px;box-shadow:0 0 0 1px rgba(15,23,42,0.15);}
.vr-lang-single .fi{cursor:default;}
.vr-lang-picker summary{list-style:none;}
.vr-lang-summary{cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:34px;padding:0;border-radius:10px;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.10);}
.vr-lang-summary::-webkit-details-marker{display:none;}
.vr-lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:#0f172a;border:1px solid #e5e7eb;border-radius:12px;min-width:170px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,0.15);z-index:9999;}
.vr-lang-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit;}
.vr-lang-item:hover{background:#f3f4f6;}
.vr-lang-item.is-active{background:#e2e8f0;}
.vr-lang-name{font-size:14px;}

@media (max-width: 1024px){
  /* Keep the selector compact in the vets mobile header */
  .vr-lang-summary{width:38px;height:32px;}
}


/* -------------------------------------------------------------------------
   Booking requests (dashboard) - responsive
   - Portrait (mobile): cards with tap-to-expand
   - Landscape / desktop: table (scrollable on small widths)
   ------------------------------------------------------------------------- */
.vr-only-portrait{ display:none; }
.vr-hide-portrait{ display:block; }

.vr-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.vr-table-scroll .vr-table{ min-width: 720px; }

@media (max-width: 900px){
  /* Override the global fixed table layout for wide tables (prevents vertical letters) */
  .vr-table-scroll .vr-table{ table-layout: auto !important; }
  .vr-table-scroll .vr-table th,
  .vr-table-scroll .vr-table td{ white-space: nowrap; }
}

@media (max-width: 900px) and (orientation: portrait){
  .vr-only-portrait{ display:block; }
  .vr-hide-portrait{ display:none !important; }

  .vr-req-cards{ display:flex; flex-direction:column; gap:10px; }
  .vr-req-card{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; overflow:hidden; }

  .vr-req-summary{ list-style:none; cursor:pointer; display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:12px; }
  .vr-req-summary::-webkit-details-marker{ display:none; }
  .vr-req-summary::marker{ content:''; }
  .vr-req-summary::after{ content:'▾'; display:inline-block; margin-left:6px; color:#6b7280; font-size:18px; line-height:1; transition: transform 160ms ease; }
  .vr-req-card[open] > .vr-req-summary::after{ transform: rotate(180deg); }

  .vr-req-summary-main{ min-width:0; flex:1; }
  .vr-req-summary-title{ font-weight:800; font-size:13px; }
  .vr-req-summary-meta{ margin-top:4px; font-size:12px; color:#6b7280; line-height:1.25; }

  .vr-req-body{ padding:12px; border-top:1px solid #e5e7eb; }
  .vr-req-grid{ display:flex; flex-direction:column; gap:8px; }
  .vr-req-field{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
  .vr-req-label{ color:#6b7280; }
  .vr-req-field > span{ min-width:0; }
  .vr-req-field > span:last-child{ text-align:right; font-weight:600; word-break: break-word; }

  .vr-req-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
}