/* ═══════════════════════════════════════════════════════
   DNAMED APP — DESIGN SYSTEM v2
   Font: Inter (caricato da Google Fonts in base.html)
   ═══════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────── */
:root {
    --app-primary:        #c0183f;
    --app-primary-dark:   #9c1232;
    --app-primary-light:  #f9e4ea;
    --app-accent:         #ff4d79;

    --app-surface:        #ffffff;
    --app-surface-2:      #f6f8fb;
    --app-surface-3:      #eef1f7;

    --app-text:           #1a1d23;
    --app-text-2:         #4b5563;
    --app-text-3:         #9ca3af;

    --app-border:         #e5e9f0;
    --app-border-focus:   #c0183f;

    --app-sidebar-bg:     #181c2e;
    --app-sidebar-hover:  #252a42;
    --app-sidebar-active: rgba(192, 24, 63, 0.18);
    --app-sidebar-text:   #c8cce0;

    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  26px;

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:  0 6px 24px rgba(0,0,0,0.09);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.14);
    --shadow-pop: 0 8px 28px rgba(192,24,63,0.22);

    --transition: 0.18s ease;
}

/* ── Base typography ───────────────────────────────── */
body,
.content-wrapper,
.modal,
.card,
input, select, textarea, button
{
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ── Background ────────────────────────────────────── */
body
{
    background: var(--app-surface-2) !important;
    position: relative;
}

/* ── Sidebar ───────────────────────────────────────── */
.main-sidebar,
.main-sidebar .sidebar
{
    background: var(--app-sidebar-bg) !important;
}

.brand-link
{
    background: rgba(0,0,0,0.25) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 14px 16px !important;
}

.brand-text
{
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    color: #fff !important;
    letter-spacing: 0.01em;
}

.sidebar .nav-sidebar > .nav-item > .nav-link,
.sidebar .pers-gestionale,
.sidebar .pers-terapista > .btn,
.sidebar .pers-gruppo-luogo > .btn
{
    color: var(--app-sidebar-text) !important;
    border-radius: var(--r-md) !important;
    margin: 2px 8px !important;
    transition: background var(--transition), color var(--transition) !important;
}

.sidebar .pers-gestionale:hover,
.sidebar .pers-gestionale.active,
.sidebar .pers-terapista > .btn:hover,
.sidebar .pers-gruppo-luogo > .btn:hover
{
    background: var(--app-sidebar-hover) !important;
    color: #fff !important;
}

.sidebar .pers-gestionale.active
{
    background: var(--app-sidebar-active) !important;
    color: var(--app-accent) !important;
    font-weight: 600;
}

.sidebar .nav-treeview
{
    padding: 0 !important;
}

.sidebar-label
{
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(200,204,224,0.45);
    padding: 14px 16px 4px;
}

/* ── Navbar top ────────────────────────────────────── */
.main-header.navbar
{
    background: #fff !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: var(--shadow-sm) !important;
    min-height: 54px;
    padding: 0 12px;
}

.main-header.navbar .nav-link
{
    color: var(--app-text-2) !important;
    border-radius: var(--r-sm) !important;
    padding: 0.42rem 0.72rem !important;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}

.main-header.navbar .nav-link:hover
{
    background: var(--app-surface-3) !important;
    color: var(--app-primary) !important;
}

/* ── Cards ─────────────────────────────────────────── */
.card
{
    border: 1px solid var(--app-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--app-surface) !important;
}

.card-header
{
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    background: var(--app-surface) !important;
    padding: 14px 18px !important;
    font-weight: 600;
    font-size: 0.92rem;
}

.card-primary > .card-header,
.card-primary:not(.card-outline) > .card-header
{
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.card-dark > .card-header
{
    background: var(--app-sidebar-bg) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.card-secondary > .card-header
{
    background: var(--app-surface-3) !important;
    color: var(--app-text) !important;
}

.card.card-primary
{
    border-color: transparent !important;
    box-shadow: var(--shadow-md) !important;
}

/* ── Buttons ───────────────────────────────────────── */
.btn
{
    border-radius: var(--r-md) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.52rem 1.15rem !important;
    transition: all var(--transition) !important;
    letter-spacing: 0.01em;
}

.btn-success
{
    background: #16a34a !important;
    border-color: #16a34a !important;
}
.btn-success:hover
{
    background: #15803d !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 16px rgba(22,163,74,0.3) !important;
    transform: translateY(-1px);
}

.btn-danger
{
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
.btn-danger:hover
{
    background: var(--app-primary-dark) !important;
    border-color: var(--app-primary-dark) !important;
    box-shadow: var(--shadow-pop) !important;
    transform: translateY(-1px);
}

.btn-primary
{
    background: #2563eb !important;
    border-color: #2563eb !important;
}
.btn-primary:hover
{
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 16px rgba(37,99,235,0.3) !important;
    transform: translateY(-1px);
}

.btn-secondary
{
    background: var(--app-surface-3) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-2) !important;
}
.btn-secondary:hover
{
    background: #e2e6ef !important;
    color: var(--app-text) !important;
}

.btn-outline-primary
{
    border-color: #2563eb !important;
    color: #2563eb !important;
}
.btn-outline-primary:hover
{
    background: #2563eb !important;
    color: #fff !important;
}

.btn-outline-success
{
    border-color: #16a34a !important;
    color: #16a34a !important;
}
.btn-outline-success:hover
{
    background: #16a34a !important;
    color: #fff !important;
}

.btn-outline-danger
{
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
}
.btn-outline-danger:hover
{
    background: var(--app-primary) !important;
    color: #fff !important;
}

.btn-outline-secondary
{
    border-color: var(--app-border) !important;
    color: var(--app-text-2) !important;
}
.btn-outline-secondary:hover
{
    background: var(--app-surface-3) !important;
    color: var(--app-text) !important;
}

.btn-outline-dark
{
    border-color: var(--app-sidebar-bg) !important;
    color: var(--app-sidebar-bg) !important;
}
.btn-outline-dark:hover
{
    background: var(--app-sidebar-bg) !important;
    color: #fff !important;
}

.btn-light
{
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
.btn-light:hover
{
    background: rgba(255,255,255,0.25) !important;
}

/* ── Forms ─────────────────────────────────────────── */
.form-control,
.form-control:focus
{
    border-radius: var(--r-md) !important;
    border: 1.5px solid var(--app-border) !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.9rem !important;
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus
{
    border-color: var(--app-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(192,24,63,0.12) !important;
}

textarea.form-control
{
    min-height: 80px !important;
    height: auto !important;
    resize: vertical;
}

label,
.control-label
{
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    color: var(--app-text-2) !important;
    margin-bottom: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.input-group .input-group-text
{
    background: var(--app-surface-3) !important;
    border: 1.5px solid var(--app-border) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0 !important;
    color: var(--app-text-3) !important;
}

.input-group .form-control
{
    border-right: 0 !important;
    border-radius: var(--r-md) 0 0 var(--r-md) !important;
}

.input-group .input-group-append .btn
{
    border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}

/* ── Select2 ───────────────────────────────────────── */
.select2-container--bootstrap4 .select2-selection
{
    border: 1.5px solid var(--app-border) !important;
    border-radius: var(--r-md) !important;
    min-height: 44px !important;
}

.select2-container--bootstrap4 .select2-selection--single
{
    height: 44px !important;
    padding: 0.55rem 0.9rem !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection
{
    border-color: var(--app-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(192,24,63,0.12) !important;
}

.select2-results__option[aria-disabled="true"]
{
    background-color: var(--app-surface-3);
    color: var(--app-text-3);
}

.select2-dropdown
{
    border-radius: var(--r-md) !important;
    border: 1.5px solid var(--app-border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ── Modals ────────────────────────────────────────── */
.modal-content
{
    border-radius: var(--r-xl) !important;
    border: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.modal-header
{
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title
{
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--app-text) !important;
}

.modal-header .close
{
    color: var(--app-text-3) !important;
    opacity: 1 !important;
    font-size: 1.4rem !important;
    padding: 4px 8px !important;
    border-radius: var(--r-sm) !important;
    transition: background var(--transition);
}
.modal-header .close:hover
{
    background: var(--app-surface-3) !important;
    color: var(--app-text) !important;
}

.modal-body
{
    padding: 20px !important;
    background: var(--app-surface) !important;
}

.modal-footer
{
    background: var(--app-surface-2) !important;
    border-top: 1px solid var(--app-border) !important;
    padding: 12px 20px !important;
    gap: 8px;
}

/* ── Section headers inside modals ────────────────── */
.modal-body .text-danger h5
{
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--app-primary) !important;
    margin-bottom: 0;
}

/* ── Form-group spacing ────────────────────────────── */
.form-group
{
    margin-bottom: 1rem !important;
}

/* ── Badges ────────────────────────────────────────── */
.badge
{
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
}

.badge-success  { background: #dcfce7 !important; color: #15803d !important; }
.badge-secondary { background: var(--app-surface-3) !important; color: var(--app-text-2) !important; }
.badge-primary  { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge-danger   { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-warning  { background: #fef9c3 !important; color: #854d0e !important; }

/* ── Table ─────────────────────────────────────────── */
.table th
{
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-3) !important;
    font-weight: 600 !important;
    border-top: 0 !important;
    padding: 12px 14px !important;
}

.table td
{
    font-size: 0.88rem !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.thead-light th
{
    background: var(--app-surface-2) !important;
    border-bottom: 2px solid var(--app-border) !important;
}

.table-hover tbody tr:hover
{
    background: var(--app-surface-2) !important;
}

/* ── Loading spinner ───────────────────────────────── */
#icona-caricamento-wrapper
{
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
}

#icona-caricamento-wrapper.d-none
{
    display: none !important;
}

#icona-caricamento
{
    color: var(--app-primary);
    animation: ruota 0.9s linear infinite;
    filter: drop-shadow(0 4px 12px rgba(192,24,63,0.35));
}

/* ── FullCalendar ──────────────────────────────────── */
.fc .fc-toolbar.fc-header-toolbar
{
    padding: 7px 10px;
    border-radius: 0 !important;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    box-shadow: none;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    gap: 4px;
}

.fc-toolbar-title
{
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.fc-header-toolbar
{
    margin-bottom: 0 !important;
}

/* Evento: clip del testo per evitare sovrapposizioni */
.fc-event
{
    cursor: pointer !important;
    border-width: 0 0 0 3px !important;
    border-radius: 3px !important;
    padding: 1px 4px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
}

.fc-event .fc-event-main,
.fc-timegrid-event .fc-event-main
{
    overflow: hidden !important;
}

.fc-event-title,
.fc-event-time
{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Contenitore custom eventContent */
.fc-event .fc-event-main > div
{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.fc .fc-toolbar .fc-button
{
    border-radius: 4px !important;
    padding: 0.28rem 0.6rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    background: var(--app-surface-3) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
    transition: all var(--transition) !important;
}

.fc .fc-toolbar .fc-button:hover,
.fc .fc-toolbar .fc-button.fc-button-active
{
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

.fc-toolbar-chunk
{
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.fc-toolbar-chunk > .btn-group,
.fc-today-button,
.fc-toolbar-title
{
    margin-top: 0 !important;
}

/* Slot orari più compatti */
.fc-timegrid-slot
{
    height: 26px !important;
}

.fc-timegrid-slot-label
{
    font-size: 0.68rem !important;
    color: var(--app-text-3) !important;
    vertical-align: top !important;
}

/* Griglia: ora corrente più visibile */
.fc-timegrid-now-indicator-line
{
    border-color: var(--app-primary) !important;
    border-width: 2px !important;
}

.fc-timegrid-now-indicator-arrow
{
    border-top-color: var(--app-primary) !important;
    border-bottom-color: var(--app-primary) !important;
}

/* ── Wrapper calendario full-height ────────────────── */
#calendario-wrapper
{
    margin: 0 !important;
    padding: 0 !important;
}

#calendario-wrapper .card
{
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* ── Login ─────────────────────────────────────────── */
.login-app-shell
{
    max-width: 440px;
    padding-bottom: 32px;
}

.login-app-card
{
    border-radius: var(--r-xl) !important;
    overflow: hidden;
    box-shadow: var(--shadow-lg) !important;
    border: 0 !important;
}

.login-app-card .card-header
{
    font-weight: 700;
    text-align: center;
    font-size: 1.1rem;
    padding: 20px 24px 18px;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.login-app-card .card-body
{
    padding: 28px 28px 20px !important;
}

/* ── Utility ───────────────────────────────────────── */
.opacity-50    { opacity: 0.5 !important; }

.max-width-50  { max-width: 50px  !important; }
.max-width-100 { max-width: 100px !important; }
.max-width-150 { max-width: 150px !important; }
.max-width-200 { max-width: 200px !important; }
.max-width-250 { max-width: 250px !important; }
.max-width-300 { max-width: 300px !important; }
.max-width-350 { max-width: 350px !important; }
.max-width-400 { max-width: 400px !important; }
.max-width-450 { max-width: 450px !important; }
.max-width-500 { max-width: 500px !important; }

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 767.98px)
{
    body
    {
        background: var(--app-surface-2) !important;
    }

    .main-header.navbar
    {
        position: sticky;
        top: 0;
        z-index: 1035;
    }

    /* Bottom-sheet modals su mobile */
    .modal.show .modal-dialog
    {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .modal .modal-content
    {
        border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
    }

    /* Handle drag indicator */
    .modal-header::before
    {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--app-border);
        border-radius: 2px;
        margin: 0 auto 10px;
    }

    .modal.modal-dialog-centered .modal-dialog,
    .modal .modal-dialog.modal-dialog-centered
    {
        position: relative !important;
        bottom: auto !important;
        margin: auto !important;
        max-width: 96% !important;
    }

    .modal.modal-dialog-centered .modal-content
    {
        border-radius: var(--r-xl) !important;
        max-height: 86dvh;
    }

    .fc .fc-toolbar.fc-header-toolbar
    {
        padding: 5px 6px;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    .fc-toolbar-title
    {
        font-size: 0.82rem !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fc .fc-toolbar .fc-button
    {
        padding: 0.22rem 0.45rem !important;
        font-size: 0.7rem !important;
    }

    .fc .fc-toolbar .fc-button-group
    {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
    }

    .fc .fc-toolbar-chunk
    {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        min-width: 0;
    }

    .fc .fc-toolbar-chunk:nth-child(1)
    {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fc .fc-toolbar-chunk:nth-child(1)::-webkit-scrollbar
    {
        display: none;
    }

    .fc-timegrid-slot
    {
        height: 22px !important;
    }

    .fc-timegrid-slot-label
    {
        font-size: 0.62rem !important;
    }

    .fc-event
    {
        font-size: 0.68rem !important;
        padding: 1px 3px !important;
    }

    /* Su mobile i pulsanti del calendario NON devono avere min-height 44px */
    .fc .fc-toolbar .fc-button
    {
        min-height: unset !important;
    }

    .btn
    {
        min-height: 44px !important;
    }

    .form-control,
    .select2-container--bootstrap4 .select2-selection--single
    {
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    label, .control-label
    {
        font-size: 0.78rem !important;
    }

    .card
    {
        border-radius: var(--r-md) !important;
    }

    .modal-body
    {
        padding: 16px !important;
    }

    /* Aumenta spazio tap sui link sidebar */
    .sidebar .pers-gestionale,
    .sidebar .pers-terapista > .btn,
    .sidebar .pers-gruppo-luogo > .btn
    {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

@media (max-width: 480px)
{
    .login-app-card .card-body
    {
        padding: 20px 16px 16px !important;
    }
}

/* ── Animate ───────────────────────────────────────── */
@keyframes ruota
{
    100% { transform: rotate(360deg); }
}

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

.card,
.modal-content
{
    animation: fadeSlideUp 0.22s ease both;
}

/* ── Datepicker widget: sopra il modal backdrop (z 1040) e il modal (z 1050) ── */
.bootstrap-datetimepicker-widget
{
    z-index: 1060 !important;
}

/* ── Datepicker: ripristina il padding Bootstrap .table-sm sovrascritto da .table td ── */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th
{
    padding: 0.3rem !important;
}