* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #0f172a;
    --primary-hover: #1e293b;
    --secondary-color: #0284c7;
    --secondary-hover: #0369a1;
    --accent-color: #38bdf8;
    --success-color: #16a34a;
    --success-bg: #dcfce7;
    --danger-color: #dc2626;
    --danger-bg: #fee2e2;
    --warning-color: #d97706;
    --warning-bg: #fef3c7;
    --purple-color: #7c3aed;
    --purple-bg: #ede9fe;
    --light-bg: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --border-dark: #cbd5e1;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 80% 20%, #1e293b 0%, #0f172a 100%);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 18px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.6);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    max-height: 52px;
    max-width: 150px;
    object-fit: contain;
}

.header-title-box h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title-box p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    font-family: inherit;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

.btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
}
.btn-success:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.btn-secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-icon-badge {
    position: relative;
    padding: 10px 14px;
}

.badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid white;
}

.btn-nav {
    background: white;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--primary-color);
    font-weight: 700;
}

.btn-nav:hover {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

/* Calendar Main Area */
.main-content {
    display: block;
    width: 100%;
}

.calendar-area {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.calendar-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

/* Legend */
.legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 12px 18px;
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.legend-color {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.legend-color.free { background: #ffffff; border: 1.5px dashed #cbd5e1; }
.legend-color.booked { background: #0284c7; }
.legend-color.collective { background: #7c3aed; }
.legend-color.other { background: #f59e0b; }

/* Grid Calendar Layout */
.calendar-scroll-container {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: white;
}

.calendar-scroll-wrapper {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.days-header {
    display: grid;
    gap: 0;
    background: var(--border-color);
    border: 2px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    box-sizing: border-box;
}

.day-header-cell {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    padding: 10px 6px;
    text-align: center;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 0;
    box-sizing: border-box;
}

.day-header-cell.instructor-label {
    position: sticky;
    left: 0;
    z-index: 10;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-right: 2px solid var(--border-color);
    box-shadow: 2px 0 5px rgba(0,0,0,0.15);
    box-sizing: border-box;
}

.day-header-cell .day-name {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

.day-header-cell .day-number {
    font-size: 18px;
    font-weight: 800;
}

.hours-header {
    display: grid;
    gap: 0;
    background: #1e293b;
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

.hours-header-instructor-spacer {
    position: sticky;
    left: 0;
    z-index: 9;
    background: #1e293b;
    border-right: 2px solid var(--border-color);
    box-shadow: 2px 0 5px rgba(0,0,0,0.15);
    box-sizing: border-box;
}

.hour-group {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 0;
    border-right: 1px solid var(--border-color);
    min-width: 0;
    box-sizing: border-box;
}

.hour-cell.half {
    font-weight: 500;
    font-size: 10px;
    color: #64748b;
}

.hour-cell {
    background: #1e293b;
    color: #94a3b8;
    padding: 6px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.hour-cell:last-child {
    border-right: none;
}

.instructor-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.instructor-row {
    display: grid;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

.instructor-row:last-child {
    border-bottom: none;
}

.instructor-cell {
    position: sticky;
    left: 0;
    z-index: 8;
    background: #f8fafc;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 6px solid #0284c7;
    border-right: 2px solid var(--border-color);
    min-height: 100px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.instructor-cell .instructor-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instructor-cell .instructor-flags {
    font-size: 13px;
    margin-top: 3px;
}

.day-column {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 0;
    border-right: 1px solid var(--border-color);
    min-width: 0;
    box-sizing: border-box;
}

.day-column:last-child {
    border-right: none;
}

/* SQUARES / SLOTS */
.hour-slot {
    background: white;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    min-height: 70px;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    user-select: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.hour-slot:hover {
    background: #f8fafc;
    z-index: 5;
    box-shadow: inset 0 0 0 2px #0284c7;
}

.hour-slot.free {
    background: white;
}

.hour-slot.free:hover::after {
    content: '+';
    font-size: 16px;
    color: #0284c7;
    font-weight: 700;
}

/* Drag & Drop Visual Feedback */
.hour-slot.draggable-booking {
    cursor: grab;
}
.hour-slot.draggable-booking:active {
    cursor: grabbing;
}
.hour-slot.is-dragging {
    opacity: 0.35;
    transform: scale(0.96);
}
.hour-slot.drag-hover {
    background: #e0f2fe !important;
    outline: 2px dashed #0284c7 !important;
    outline-offset: -2px;
    z-index: 10;
}

/* Multi-Hour Spanned Booking Blocks */
.hour-slot.booked-block {
    margin: 1px;
    height: calc(100% - 2px);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    transition: all 0.15s ease;
    overflow: hidden;
    padding: 0;
}

.hour-slot.booked-block:hover {
    filter: brightness(0.97);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    z-index: 5;
}

/* 1. Corsi Collettivi (Viola) */
.hour-slot.booked-block.collective {
    background: #ede9fe;
    border: 2px solid #7c3aed;
    color: #6d28d9;
}

/* 2. Lezioni Pagate (Blu) */
.hour-slot.booked-block.paid {
    background: #e0f2fe;
    border: 2px solid #0284c7;
    color: #0369a1;
}

/* 3. Lezioni Da Pagare (Rosso) */
.hour-slot.booked-block.unpaid {
    background: #fee2e2;
    border: 2px solid #dc2626;
    color: #b91c1c;
}

/* 4. Impegni / Assenze (Ambra) */
.hour-slot.booked-block.other {
    background: #fef3c7;
    border: 2px solid #d97706;
    color: #b45309;
}

.slot-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
}

.client-initial {
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.client-name-span {
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    line-height: 1.1;
    text-align: center;
}

.slot-badge-collective {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 3px;
    background: #7c3aed;
    color: white;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.1;
    display: inline-block;
    flex-shrink: 0;
}

.slot-capacity-pill {
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 3px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.1;
    background: #f3e8ff;
    color: #6b21a8;
    display: inline-block;
    flex-shrink: 0;
}

.slot-capacity-pill.full {
    background: #fee2e2;
    color: #dc2626;
}

.slot-collective-title {
    font-size: 9.5px;
    font-weight: 700;
    color: #581c87;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
    line-height: 1.1;
    text-align: center;
    margin-top: 1px;
}

.payment-icon {
    font-size: 9px;
    line-height: 1;
    margin-top: 2px;
}
.payment-icon.paid { color: #16a34a; }
.payment-icon.unpaid { color: #dc2626; }

/* Tooltips */
.tooltip {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    box-shadow: var(--shadow-lg);
    line-height: 1.4;
}

.hour-slot:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: scaleUp 0.25s ease-out;
}

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.close {
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close:hover {
    color: var(--danger-color);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-dark);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--secondary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    user-select: none;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s;
    width: fit-content;
}

.checkbox-label:hover {
    border-color: #0284c7;
    background: #f0f9ff;
}

.checkbox-label input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    accent-color: #16a34a;
    flex-shrink: 0;
}

/* Collective Course Schedule Table / Builder */
.schedule-builder-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.schedule-builder-table th {
    background: #e2e8f0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: left;
}

.schedule-builder-table td {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    vertical-align: middle;
}

.schedule-builder-table input[type="time"],
.schedule-builder-table input[type="number"] {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}

.slot-capacity-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 2px;
    display: inline-block;
    letter-spacing: 0.3px;
}

/* Notification Popups & Messenger Drawer */
.drawer-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 3000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.drawer-panel.open {
    right: 0;
}

.drawer-header {
    padding: 20px;
    background: #0f172a;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.drawer-footer {
    padding: 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge.success { background: var(--success-bg); color: var(--success-color); }
.badge.danger { background: var(--danger-bg); color: var(--danger-color); }
.badge.warning { background: var(--warning-bg); color: var(--warning-color); }
.badge.info { background: #e0f2fe; color: #0284c7; }
.badge.collective { background: var(--purple-bg); color: var(--purple-color); }

/* View Switch Tabs (1 Giorno, 4 Giorni, Settimana, Mese) */
.view-switch-tabs {
    display: flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 10px;
    gap: 3px;
}

.btn-view-tab {
    border: none;
    background: transparent;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-view-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.btn-view-tab.active {
    background: white;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Month Grid Layout */
.month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    background: #f8fafc;
    padding: 14px;
    border-radius: var(--radius);
    border: 2px solid var(--border-color);
}

.month-day-header {
    text-align: center;
    font-weight: 800;
    font-size: 12px;
    color: #475569;
    text-transform: uppercase;
    padding: 10px 4px;
    background: #e2e8f0;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

.month-day-cell {
    background: white;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    min-height: 120px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.month-day-cell:hover {
    border-color: #0284c7;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.15);
    transform: translateY(-2px);
    z-index: 2;
}

.month-day-cell.other-month {
    background: #f8fafc;
    opacity: 0.45;
}

.month-day-cell.today {
    border: 2px solid #0284c7;
    background: #f0f9ff;
}

.month-day-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.month-day-num {
    font-weight: 800;
    font-size: 15px;
    color: #1e293b;
}

.month-day-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
}

.month-events-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 90px;
    font-size: 11px;
}

.month-event-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 6px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Vista giorno: righe guida ogni ora (piena) e mezz'ora (tratteggiata) */
.day-column.day-mode .hour-slot.free.on-hour { border-left: 1px solid #cbd5e1; }
.day-column.day-mode .hour-slot.free.on-half { border-left: 1px dashed #e2e8f0; }


/* Filtri calendario per tipologia */
.calendar-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; }
.calendar-filters-label { font-size:12px; font-weight:700; color:#64748b; margin-right:2px; }
.filter-chip { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.filter-chip:hover { border-color:#0284c7; color:#0284c7; }
.filter-chip.active { background:#0284c7; border-color:#0284c7; color:#fff; }
.filter-count { display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:#f59e0b; color:#fff; font-size:10px; line-height:18px; text-align:center; }
.filter-count:empty { display:none; }
.hour-slot.filtered-out { opacity:.12; filter:grayscale(1); pointer-events:none; }
.calendar-scroll-container.filter-active .hour-slot.booked-block:not(.filtered-out) { box-shadow:0 0 0 2px #0284c7, 0 4px 10px rgba(2,132,199,.35); z-index:3; }
.calendar-scroll-container.filter-active .hour-slot.free { opacity:.45; }
.hour-slot.booked-block.pending-web { outline:2px dashed #f59e0b; outline-offset:-3px; }


/* Navigazione periodo: barra evidenziata sopra il calendario */
.calendar-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: linear-gradient(135deg, #0f172a, #0369a1); border-radius: 14px;
    padding: 10px 12px; margin: 14px 0 12px; border: none !important;
    box-shadow: 0 4px 14px rgba(3, 105, 161, 0.25);
}
.calendar-header h2 { color: #fff; margin: 0; font-size: 20px; font-weight: 800; text-align: center; flex: 1; }
.calendar-header .btn-nav {
    background: #0284c7; color: #fff; border: 2px solid rgba(255, 255, 255, 0.35);
    padding: 11px 22px; font-size: 15px; font-weight: 800; border-radius: 12px;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.calendar-header .btn-nav:hover { background: #fff; color: #0369a1; border-color: #fff; }
.calendar-header .btn-nav:active { transform: scale(0.97); }
@media (max-width: 700px) {
    .calendar-header .btn-nav span { display: none; }
    .calendar-header .btn-nav { padding: 11px 16px; }
    .calendar-header h2 { font-size: 16px; }
}


/* ===== Calendario: layout con menu laterale (proposta A) ===== */
body.cal-body { background:#f1f5f9; margin:0; }
.cal-shell { display:flex; min-height:100vh; }
.cal-side { width:250px; flex:none; background:#0f172a; color:#cbd5e1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60; }
.cal-brand { padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.cal-brand img { max-height:44px; max-width:180px; display:block; background:#fff; padding:6px 10px; border-radius:10px; }
.cal-brand-text { color:#fff; font-weight:800; font-size:18px; text-decoration:none; }
.cal-brand small { display:block; margin-top:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#64748b; }
.cal-nav-menu { flex:1; overflow-y:auto; padding:10px 12px; }
.cal-group { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748b; padding:16px 10px 6px; }
.cal-link { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:#cbd5e1; text-decoration:none; font-size:14px; font-weight:500; position:relative; margin-bottom:2px; }
.cal-link i { width:18px; text-align:center; color:#64748b; font-size:15px; }
.cal-link span { flex:1; }
.cal-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.cal-link.active { background:rgba(2,132,199,.22); color:#fff; }
.cal-link.active i { color:#38bdf8; }
.cal-link.active::before { content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:#38bdf8; }
.cal-dot { font-style:normal; font-size:11px; font-weight:800; background:#ef4444; color:#fff; padding:2px 8px; border-radius:999px; }
.cal-side-foot { border-top:1px solid rgba(255,255,255,.08); padding:12px; font-size:13px; }
.cal-side-foot a, .cal-user { display:flex; align-items:center; gap:10px; padding:7px 10px; color:#94a3b8; text-decoration:none; border-radius:8px; }
.cal-side-foot a:hover { color:#fff; background:rgba(255,255,255,.06); }
.cal-user { color:#e2e8f0; font-weight:700; }
.cal-main { flex:1; min-width:0; }
.cal-top { position:sticky; top:0; z-index:40; background:rgba(241,245,249,.93); backdrop-filter:blur(8px); border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:14px; padding:12px 28px; }
.cal-top h1 { margin:0; font-size:20px; font-weight:800; color:#0f172a; }
.cal-top-right { margin-left:auto; display:flex; gap:10px; align-items:center; }
.cal-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; color:#64748b; min-width:260px; font-size:13px; margin:0; }
.cal-search input { border:0; outline:0; background:transparent; font-family:inherit; font-size:13px; width:100%; color:#0f172a; padding:0; }
.cal-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1px solid #e2e8f0; background:#fff; color:#334155; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; }
.cal-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.cal-btn.pri { background:#0284c7; border-color:#0284c7; color:#fff; }
.cal-btn.pri:hover { background:#0369a1; }
.cal-burger { display:none; background:#fff; border:1px solid #e2e8f0; border-radius:10px; width:40px; height:40px; cursor:pointer; color:#334155; }
.cal-scrim { display:none; }
.cal-content { padding:22px 28px 50px; }
.cal-today { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cal-pill { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.cal-pill i { font-size:18px; }
.cal-pill b { display:block; font-size:20px; line-height:1.1; color:#0f172a; }
.cal-pill span { font-size:12px; color:#64748b; }
.cal-tool { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:12px 16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.cal-tool-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cal-tool .calendar-filters { margin:12px 0 0; padding-top:12px; border-top:1px solid #f1f5f9; }
.cal-period { display:flex; align-items:center; gap:10px; }
.cal-period h2 { margin:0; font-size:17px; font-weight:800; color:#0f172a; min-width:220px; text-align:center; }
.cal-arrow { width:40px; height:40px; border-radius:10px; border:0; background:#0284c7; color:#fff; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cal-arrow:hover { background:#0369a1; }
.cal-content .calendar-scroll-container { border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05); }
.cal-content .legend { margin:14px 0 0; background:transparent; border:0; box-shadow:none; padding:0; }
@media (max-width: 980px) {
    .cal-side { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; }
    .cal-side.open { transform:none; }
    .cal-scrim.open { display:block; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:55; }
    .cal-burger { display:inline-flex; align-items:center; justify-content:center; }
    .cal-top { padding:10px 14px; }
    .cal-search { display:none; }
    .cal-top-right .cal-btn span { display:none; }
    .cal-content { padding:14px 12px 40px; }
    .cal-period h2 { min-width:0; font-size:15px; }
}


/* ===== Calendario: menu ridotto e dispositivi ===== */
.cal-collapse { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; margin-top:6px; border:0; border-top:1px solid rgba(255,255,255,.08); background:none; color:#94a3b8; font-size:13px; cursor:pointer; font-family:inherit; }
.cal-collapse:hover { color:#fff; }
.cal-collapse i { width:18px; text-align:center; transition:transform .2s; }
.cal-side { transition:width .18s; }
.cal-shell.collapsed .cal-side { width:76px; }
.cal-shell.collapsed .cal-link span, .cal-shell.collapsed .cal-link em, .cal-shell.collapsed .cal-group,
.cal-shell.collapsed .cal-brand small, .cal-shell.collapsed .cal-side-foot span, .cal-shell.collapsed .cal-collapse span { display:none; }
.cal-shell.collapsed .cal-link { justify-content:center; padding:11px 0; }
.cal-shell.collapsed .cal-side-foot a, .cal-shell.collapsed .cal-collapse, .cal-shell.collapsed .cal-user { justify-content:center; }
.cal-shell.collapsed .cal-brand { padding:14px 8px; text-align:center; }
.cal-shell.collapsed .cal-brand img { max-width:52px; padding:4px 5px; }
.cal-shell.collapsed .cal-collapse i { transform:rotate(180deg); }
.cal-shell.collapsed .cal-group { display:block; height:1px; padding:0; margin:10px 14px; background:rgba(255,255,255,.1); font-size:0; }
@media (max-width: 1100px) {
    .cal-content { padding:18px 18px 44px; } .cal-top { padding:10px 18px; }
    .cal-search { min-width:180px; }
}
@media (max-width: 768px) {
    .cal-shell .cal-side { position:fixed; left:0; top:0; width:250px; transform:translateX(-100%); transition:transform .2s; }
    .cal-shell.collapsed .cal-side { width:250px; }
    .cal-shell.collapsed .cal-link span, .cal-shell.collapsed .cal-link em, .cal-shell.collapsed .cal-side-foot span, .cal-shell.collapsed .cal-collapse span { display:inline; }
    .cal-shell.collapsed .cal-brand small { display:block; }
    .cal-shell.collapsed .cal-group { height:auto; padding:16px 10px 6px; margin:0; background:none; font-size:11px; }
    .cal-shell.collapsed .cal-link { justify-content:flex-start; padding:9px 12px; }
    .cal-side.open { transform:none !important; }
    .cal-collapse { display:none; }
    .cal-tool-row { gap:10px; } .cal-tool { padding:10px 12px; }
    .cal-period { width:100%; justify-content:space-between; }
    .cal-period h2 { font-size:15px; min-width:0; flex:1; }
    .view-switch-tabs { width:100%; } .view-switch-tabs .btn-view-tab { flex:1; padding:8px 4px; font-size:11px; }
    .cal-today { gap:8px; } .cal-pill { flex:1 1 140px; padding:8px 12px; }
    .cal-content .calendar-scroll-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .modal-content { width:96vw !important; max-width:96vw !important; padding:16px !important; }
    .form-row { flex-direction:column; gap:0; }
}


/* ===== Scheda ordine (popup dalla notifica) ===== */
.om-modal { max-width:760px !important; padding:0 !important; overflow:hidden; display:flex; flex-direction:column; max-height:92vh; border-radius:20px; }
.om-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 24px 14px; border-bottom:1px solid #eef2f7; background:linear-gradient(180deg,#f8fafc,#fff); }
.om-head h3 { margin:8px 0 4px; font-size:21px; font-weight:800; color:#0f172a; }
.om-head p { margin:0; font-size:13px; color:#64748b; }
.om-status { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.om-status.ok { background:#dcfce7; color:#15803d; } .om-status.warn { background:#fef3c7; color:#b45309; } .om-status.mute { background:#f1f5f9; color:#64748b; }
.om-x { width:38px; height:38px; border-radius:50%; border:0; background:#f1f5f9; color:#475569; cursor:pointer; font-size:16px; flex:none; }
.om-x:hover { background:#e2e8f0; }
.om-body { padding:6px 24px 4px; overflow-y:auto; flex:1; }
.om-sec { padding:16px 0; border-bottom:1px solid #f1f5f9; }
.om-sec:last-child { border-bottom:0; }
.om-sec h4 { margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#475569; }
.om-sec h4 i { color:#0284c7; margin-right:6px; }
.om-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.om-wide { grid-column:1 / -1; }
.om-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.om-field label { font-size:12px; font-weight:700; color:#64748b; }
.om-input { width:100%; box-sizing:border-box; height:42px; padding:0 12px; border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; font-family:inherit; color:#0f172a; background:#fff; transition:border-color .15s, box-shadow .15s; }
.om-input:hover { border-color:#94a3b8; }
.om-input:focus { outline:0; border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,.15); }
.om-input:disabled { background:#f1f5f9; color:#64748b; cursor:not-allowed; }
select.om-input { appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.om-note { margin-top:12px; padding:10px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; font-size:13px; color:#475569; }
.om-note.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.om-item { display:flex; gap:14px; justify-content:space-between; padding:14px; border:1px solid #e2e8f0; border-radius:14px; margin-bottom:10px; background:#fff; }
.om-item-main { min-width:0; flex:1; }
.om-item-title { font-size:15px; font-weight:800; color:#0f172a; margin-bottom:4px; }
.om-line { font-size:12.5px; color:#64748b; margin-top:3px; }
.om-line i { width:14px; color:#94a3b8; margin-right:4px; }
.om-students { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.om-students span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }
.om-students em { font-style:normal; font-size:12px; background:#ede9fe; color:#5b21b6; padding:3px 9px; border-radius:999px; }
.om-item-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.om-price { font-size:17px; font-weight:800; color:#0f172a; white-space:nowrap; }
.om-total { display:flex; align-items:baseline; justify-content:flex-end; gap:14px; padding:6px 4px 0; font-size:14px; color:#475569; }
.om-total b { font-size:24px; color:#0284c7; font-weight:800; }
.om-disc { color:#15803d; font-weight:700; margin-right:auto; }
.om-foot { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding:14px 24px; border-top:1px solid #e2e8f0; background:#f8fafc; }
@media (max-width: 640px) {
    .om-modal { max-height:100vh; border-radius:0; width:100vw !important; max-width:100vw !important; height:100vh; }
    .om-head, .om-body, .om-foot { padding-left:16px; padding-right:16px; }
    .om-grid { grid-template-columns:1fr; }
    .om-item { flex-direction:column; } .om-item-side { flex-direction:row; align-items:center; justify-content:space-between; }
    .om-foot .btn { flex:1 1 140px; justify-content:center; }
}


/* ===== Calendario per telefono (proposta B): colonne per maestro, solo <= 700px ===== */
.mob-only { display:none; }
@media (max-width: 700px) {
    .mob-only { display:block; }
    body.mob-cal-on .view-switch-tabs, body.mob-cal-on .cal-today, body.mob-cal-on .legend,
    body.mob-cal-on .calendar-filters-label { display:none !important; }
    body.mob-cal-on .cal-content { padding:8px 8px 24px; }
    body.mob-cal-on .cal-tool { padding:8px; border-radius:14px; }
    body.mob-cal-on .cal-tool-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .mob-seg { display:flex !important; order:1; flex:1; background:#e2e8f0; border-radius:10px; padding:3px; }
    .mob-seg button { flex:1; border:0; background:none; padding:8px 0; border-radius:8px; font-size:13px; font-weight:700; color:#64748b; font-family:inherit; cursor:pointer; }
    .mob-seg button.active { background:#fff; color:#0f172a; box-shadow:0 1px 3px rgba(0,0,0,.12); }
    body.mob-cal-on .cal-tool-row > .cal-btn { order:2; padding:9px 12px; }
    body.mob-cal-on .cal-period { order:3; width:100%; background:#0f172a; border-radius:12px; padding:0; gap:0; justify-content:space-between; }
    body.mob-cal-on .cal-period .cal-arrow { background:transparent; border-radius:12px; width:46px; height:42px; }
    body.mob-cal-on .cal-period h2 { color:#fff; font-size:14.5px; text-align:center; }
    body.mob-cal-on .cal-tool .calendar-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:8px -8px 0; padding:8px 8px 0; }
    body.mob-cal-on .calendar-filters::-webkit-scrollbar { display:none; }
    body.mob-cal-on .filter-chip { flex:none; white-space:nowrap; }
    body.mob-cal-on #filterResult { flex:none; white-space:nowrap; margin-left:2px; }

    .mc-wrap { overflow:auto; -webkit-overflow-scrolling:touch; max-height:calc(100vh - 230px); max-height:calc(100dvh - 230px); min-height:380px; background:#fff; border-radius:14px; border:1px solid #e2e8f0; position:relative; }
    .mc-grid { display:grid; width:max-content; min-width:100%; }
    .mc-h { position:sticky; top:0; z-index:6; background:#fff; border-bottom:2px solid #e2e8f0; padding:8px 6px; display:flex; align-items:center; gap:7px; font-weight:800; font-size:13px; }
    .mc-h i { width:26px; height:26px; border-radius:50%; font-style:normal; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
    .mc-h small { display:block; font-weight:600; color:#64748b; font-size:10.5px; }
    .mc-h.mc-corner { left:0; z-index:8; border-right:1px solid #e2e8f0; padding:0; }
    .mc-hours { position:sticky; left:0; z-index:5; background:#f8fafc; border-right:1px solid #e2e8f0; }
    .mc-hours div { height:88px; font-size:11px; font-weight:700; color:#94a3b8; text-align:center; padding-top:6px; border-top:1px solid #eef2f7; }
    .mc-nowl { position:absolute; left:0; width:44px; z-index:7; background:#ef4444; color:#fff; font-size:10px; font-weight:800; text-align:center; border-radius:0 6px 6px 0; transform:translateY(-8px); padding:1px 0; }
    .mc-col { position:relative; border-left:1px solid #eef2f7; background-image:linear-gradient(#eef2f7 1px, transparent 1px); background-size:100% 88px; }
    .mc-cell { position:absolute; left:0; right:0; height:88px; border:0; background:none; color:#cbd5e1; font-size:16px; text-align:center; padding-top:20px; opacity:0; cursor:pointer; z-index:1; }
    .mc-cell:active { opacity:1; background:#f0f9ff; }
    .mc-ev { position:absolute; left:4px; right:4px; z-index:2; border:0; border-radius:12px; padding:6px 8px; text-align:left; overflow:hidden; background:var(--c); color:#fff; box-shadow:0 3px 8px rgba(15,23,42,.18); font-family:inherit; cursor:pointer; }
    .mc-k { font-size:9.5px; font-weight:800; text-transform:uppercase; opacity:.85; letter-spacing:.04em; }
    .mc-ev h3 { margin:1px 0 0; font-size:13px; line-height:1.2; font-weight:800; }
    .mc-ev p { margin:2px 0 0; font-size:11px; opacity:.92; line-height:1.25; }
    .mc-ev.mc-collective { background:repeating-linear-gradient(135deg, var(--c), var(--c) 10px, rgba(0,0,0,.14) 10px, rgba(0,0,0,.14) 20px); background-blend-mode:multiply; }
    .mc-ev.mc-other { background:#fff; color:#92400e; border:2px solid #fbbf24; box-shadow:none; }
    .mc-ev.mc-web { background:#fff; color:#0f172a; border:2px dashed var(--c); box-shadow:none; }
    .mc-ev.mc-web .mc-k { color:#d97706; }
    .mc-ev.mc-dim { opacity:.18; }
    .mc-bd { position:absolute; right:6px; top:6px; min-width:18px; height:18px; border-radius:99px; background:rgba(255,255,255,.95); font-size:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-weight:800; }
    .mc-ok { color:#059669; } .mc-no { color:#dc2626; } .mc-w { color:#d97706; } .mc-cap { color:#6d28d9; }
    .mc-now { position:absolute; left:0; right:0; height:2px; background:#ef4444; z-index:4; pointer-events:none; }
    .mc-empty { padding:22px; text-align:center; color:#94a3b8; font-size:13px; background:#fff; border-radius:14px; }

    .mc-month { background:#f1f5f9; }
    .mc-mh { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; font-weight:700; color:#64748b; margin-bottom:6px; }
    .mc-mg { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
    .mc-md { aspect-ratio:1/1.1; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:5px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; font-family:inherit; cursor:pointer; min-width:0; }
    .mc-md b { font-size:13px; } .mc-md.mc-out { opacity:.35; border-style:dashed; cursor:default; }
    .mc-md.mc-today { border-color:#0284c7; box-shadow:inset 0 0 0 1px #0284c7; }
    .mc-md.mc-sel { background:#0284c7; color:#fff; border-color:#0284c7; }
    .mc-md i { display:flex; gap:2px; flex-wrap:wrap; } .mc-md i u { width:6px; height:6px; border-radius:50%; }
    .mc-md small { font-size:9.5px; color:#64748b; font-weight:700; } .mc-md.mc-sel small { color:#e0f2fe; }
    .mc-list { margin-top:14px; } .mc-lh { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .mc-lh h4 { margin:0; font-size:14px; } .mc-open { border:0; background:none; color:#0284c7; font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer; }
    .mc-li { display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:#fff; border:1px solid #e2e8f0; border-left:5px solid var(--c); border-radius:14px; padding:10px 12px; margin-bottom:8px; font-family:inherit; cursor:pointer; position:relative; }
    .mc-li time { font-weight:800; font-size:13px; min-width:44px; }
    .mc-li b { font-size:13.5px; display:block; } .mc-li span { display:block; font-size:12px; color:#64748b; }
    .mc-li .mc-bd { position:static; margin-left:auto; flex:none; background:#f1f5f9; }
}


/* Separatore tra i gruppi del menu del calendario */
.cal-sep { height:1px; background:rgba(255,255,255,.1); margin:10px 10px; }
.cal-shell.collapsed .cal-sep { margin:10px 14px; }


/* ===== Popup "Dettagli e partecipanti del corso" su telefono ===== */
@media (max-width: 700px) {
    #viewParticipantsModal .modal-content { padding:14px !important; border-radius:16px; }
    #viewParticipantsModal .modal-header h2 { font-size:17px; }
    .cd-top { grid-template-columns:1fr !important; gap:12px !important; }
    .cd-top > div { padding:14px !important; }
    .cd-head { flex-direction:column; }
    .cd-head .btn { width:100%; justify-content:center; align-self:stretch !important; }
    .cd-cap { font-size:13px; }
    .cd-tablewrap { overflow:visible !important; }
    .cd-table { min-width:0 !important; display:block; }
    .cd-table thead { display:none; }
    .cd-table tbody { display:block; }
    .cd-table tr { display:block; background:#fff; border:1px solid #e2e8f0 !important; border-radius:14px; margin-bottom:12px; padding:4px 0; box-shadow:0 1px 3px rgba(15,23,42,.05); }
    .cd-table td { display:block; padding:8px 14px !important; border:0 !important; text-align:left !important; white-space:normal !important; }
    .cd-table td + td { border-top:1px solid #f1f5f9 !important; }
    .cd-table td[data-label]:not([data-label=""])::before { content:attr(data-label); display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:3px; }
    .cd-table td.cd-actions { display:flex; flex-wrap:wrap; gap:8px; }
    .cd-table td.cd-actions .btn { flex:1 1 auto; justify-content:center; padding:9px 12px !important; font-size:12.5px !important; }
    .cd-foot { flex-direction:column-reverse; }
    .cd-foot .btn { width:100%; justify-content:center; }
}


/* ===== Tabelle adattabili (tablet e telefono): ogni riga diventa una scheda ===== */
@media (max-width: 900px) {
    table.rt { display:block; width:100% !important; min-width:0 !important; border:0 !important; }
    table.rt thead { display:none; }
    table.rt tbody { display:block; }
    table.rt tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; background:#fff; border:1px solid #e2e8f0 !important; border-radius:14px; margin:0 0 12px; padding:8px 14px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
    table.rt tbody tr:hover { background:#fff; }
    table.rt td { display:block; padding:7px 0 !important; border:0 !important; text-align:left !important; white-space:normal !important; width:auto !important; min-width:0; overflow-wrap:anywhere; font-size:13.5px; }
    table.rt td[data-label]::before { content:attr(data-label); display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:2px; }
    table.rt td.rt-first { grid-column:1 / -1; font-size:15px; font-weight:800; color:#0f172a; padding-bottom:9px !important; margin-bottom:4px; border-bottom:1px solid #f1f5f9 !important; }
    table.rt td.rt-first::before { display:none; }
    table.rt td.rt-wide { grid-column:1 / -1; }
    table.rt td.rt-act, table.rt td.rt-span { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; padding-top:10px !important; border-top:1px solid #f1f5f9 !important; }
    table.rt td.rt-act form { display:contents; }
    table.rt td.rt-act .btn, table.rt td.rt-act button, table.rt td.rt-act a.btn { flex:1 1 auto; justify-content:center; text-align:center; }
    table.rt td.rt-span { justify-content:center; color:#94a3b8; }
    table.rt td:empty { display:none; }
    /* contenitori che prima facevano scorrere la tabella */
    .config-card:has(table.rt), div:has(> table.rt) { overflow-x:visible !important; }
    /* campi che sbordavano (es. date delle stagioni) */
    .config-card input[type="date"], .config-card input[type="time"], .config-card .form-control-modern { max-width:100%; min-width:0; }
    .date-pair { display:flex; gap:8px; }
    .date-pair > div { min-width:0; flex:1 1 0; }
}
@media (max-width: 560px) {
    table.rt tbody tr { padding:6px 12px; column-gap:12px; }
}


/* ===== Admin: altri adattamenti per tablet e telefono ===== */
@media (max-width: 900px) {
    .ov-grid { grid-template-columns:minmax(0,1fr) !important; }
    .ov-kpis { grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr)) !important; }
    .ov-grid .adm-card, .ov-kpis > * { min-width:0; overflow:hidden; }
    .adm-main [style*="px 1fr"][style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; gap:20px !important; }
    .adm-main div[style*="justify-content: space-between"], .adm-main div[style*="justify-content:space-between"] { flex-wrap:wrap; gap:10px; }
    .adm-main div[style*="display:flex"]:not(.date-pair), .adm-main div[style*="display: flex"]:not(.date-pair) { flex-wrap:wrap; }
}

@media (max-width: 700px) {
    .adm-main [style*="grid-template-columns: 1fr 1fr; gap: 30px"] { grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
}

/* Etichetta d'orario dentro i blocchi del calendario (es. "9:30 – 11:30") */
.slot-time { display:block; font-size:9px; font-weight:700; line-height:1.1; opacity:.85; white-space:nowrap; text-align:center; width:100%; }
.hour-slot.booked-block .slot-content > span.slot-time { flex-basis:100%; }
/* vista giorno: il contenuto e in colonna, l'orario non deve occupare tutta l'altezza (spazio vuoto prima degli allievi) */
.day-column.day-mode .hour-slot.booked-block .slot-content > span.slot-time { flex: 0 0 auto; }
.cal-shell.collapsed .ql-side .ql span { display:none; }
.cal-shell.collapsed .ql-side { padding:8px 10px; }
.cal-shell.collapsed .ql-side .ql { justify-content:center; padding:11px 0; }

@media(max-width:1100px){.ql-cal .ql span{display:none}.ql-cal .ql{padding:10px 12px}}

/* ---- Popup Nuova prenotazione / Modifica (largo, a due colonne) ---- */
.modal-content.bk-modal { max-width: 1040px; width: 96%; }
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.bk-cols.single { grid-template-columns: 1fr; }
.bk-sec { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px 6px; margin-bottom: 14px; background: #fcfdff; }
.bk-cols .bk-sec { margin-bottom: 0; }
.bk-sec h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #0369a1; }
.bk-sec h3 i { margin-right: 6px; }
.bk-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.bk-price-cell { display: flex; flex-direction: column; gap: 4px; }
.bk-price-cell span { font-size: 12px; font-weight: 700; color: #0369a1; }
.bk-price-cell b { font-size: 18px; color: #0f172a; }
.bk-price-cell.tot b { font-size: 24px; font-weight: 800; color: #0284c7; }
.bk-price-cell input { height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; font: inherit; }
.bk-price-cell small { font-size: 11px; color: #64748b; font-style: italic; }
.bk-st-row { display: grid; grid-template-columns: 24px 1fr 1fr 110px 160px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bk-st-row b { color: #0284c7; }
.bk-st-row input, .bk-st-row select { padding: 9px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 13px; width: 100%; box-sizing: border-box; font-family: inherit; background: #fff; }
@media (max-width: 860px) {
    .bk-cols { grid-template-columns: 1fr; }
    .bk-price { grid-template-columns: 1fr; }
    .bk-st-row { grid-template-columns: 24px 1fr 1fr; }
    .bk-st-row input.st-y, .bk-st-row select.st-v { grid-column: span 1; }
}

/* ---- Popup Nuova prenotazione / Modifica (largo, a due colonne) ---- */
.modal-content.bk-modal { max-width: 1040px; width: 96%; }
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.bk-cols.single { grid-template-columns: 1fr; }
.bk-sec { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px 6px; margin-bottom: 14px; background: #fcfdff; }
.bk-cols .bk-sec { margin-bottom: 0; }
.bk-sec h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #0369a1; }
.bk-sec h3 i { margin-right: 6px; }
.bk-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.bk-price-cell { display: flex; flex-direction: column; gap: 4px; }
.bk-price-cell span { font-size: 12px; font-weight: 700; color: #0369a1; }
.bk-price-cell b { font-size: 18px; color: #0f172a; }
.bk-price-cell.tot b { font-size: 24px; font-weight: 800; color: #0284c7; }
.bk-price-cell input { height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; font: inherit; }
.bk-price-cell small { font-size: 11px; color: #64748b; font-style: italic; }
.bk-st-row { display: grid; grid-template-columns: 24px 1fr 1fr 110px 160px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bk-st-row b { color: #0284c7; }
.bk-st-row input, .bk-st-row select { padding: 9px 10px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 13px; width: 100%; box-sizing: border-box; font-family: inherit; background: #fff; }
.form-row.bk-r-street { grid-template-columns: 3fr 1fr; }
.form-row.bk-r-city { grid-template-columns: 1fr 2fr 1fr; }
@media (max-width: 860px) {
    .bk-cols { grid-template-columns: 1fr; }
    .bk-price { grid-template-columns: 1fr; }
    .bk-st-row { grid-template-columns: 24px 1fr 1fr; }
}
@media (max-width: 520px) { .form-row.bk-r-street, .form-row.bk-r-city { grid-template-columns: 1fr 1fr; } }

/* Vista giornaliera: allievi e luogo di ritrovo dentro il blocco */
.slot-extra { display:block; width:100%; box-sizing:border-box; padding:0 4px; font-size:9.5px; line-height:1.2; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; opacity:.92; }
.slot-extra i { font-size:8.5px; margin-right:2px; opacity:.8; }

/* Allievi nel popup prenotazione: pulsante togli / aggiungi */
.bk-st-row { grid-template-columns: 24px 1fr 1fr 110px 160px 34px; }
.bk-st-del { height:34px; width:34px; border:1px solid #fecaca; background:#fff; color:#dc2626; border-radius:8px; cursor:pointer; }
.bk-st-del:hover:not(:disabled) { background:#fee2e2; }
.bk-st-del:disabled { opacity:.35; cursor:default; }
.bk-st-add { margin:2px 0 12px; }
.form-row.bk-r-city { grid-template-columns: 1fr 1.5fr 1.6fr; }
@media (max-width: 860px) { .bk-st-row { grid-template-columns: 24px 1fr 1fr 34px; } .bk-st-row input.st-y, .bk-st-row select.st-v { grid-column: 2 / span 2; } }

/* Calendario telefono: righe di dettaglio nella scheda (allievi, luogo) */
.mc-ev p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-ev p i { font-size:9.5px; margin-right:3px; opacity:.85; }