@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg: #F5F8FB;
    --surface: #FFFFFF;
    --border-c: #DCE4EC;
    --ink: #10182B;
    --muted: #4E5A6B;
    --accent: #1D3E63;
    --accent-hover: #16304E;
    --accent-soft: #E7EDF4;
    --status-pagato: #0E9F6E;
    --status-incorso: #2E5A8C;
    --status-dafare: #545B72;
    --status-incassare: #E2382B;
    --status-absence: #EF8B0E;
    --status-pagato-tint: #E4F7EF;
    --status-incorso-tint: #E7EDF4;
    --status-dafare-tint: #F0F1F5;
    --status-incassare-tint: #FCEAE9;
    --navbar-grad: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 8%, #CFE0F2 18%, #2E5A8C 28%, #0B1B2E 45%, #0B1B2E 100%);
    --navbar-text: #FFFFFF;
    --navbar-text-muted: rgba(240,244,249,0.72);
    --navbar-brand-caption: #213A54;
    --today-tint: #E7EDF4;
    --modal-header-grad: linear-gradient(120deg, #2E5A8C 0%, #12263D 100%);
    --modal-footer-bg: #0E6E7C;
    --font-heading: "Avenir Next", "Century Gothic", "Segoe UI Semibold", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

[data-bs-theme="dark"] {
    --bg: #0C1420;
    --surface: #16202E;
    --border-c: #263447;
    --ink: #E7EDF4;
    --muted: #93A1B5;
    --accent: #5A85B0;
    --accent-hover: #7098C0;
    --accent-soft: rgba(90, 133, 176, 0.16);
    --status-pagato: #22C58B;
    --status-incorso: #6E93BF;
    --status-dafare: #93A1B5;
    --status-incassare: #FF5A4E;
    --status-absence: #FFA733;
    --status-pagato-tint: rgba(34, 197, 139, 0.16);
    --status-incorso-tint: rgba(110, 147, 191, 0.18);
    --status-dafare-tint: rgba(147, 161, 181, 0.12);
    --status-incassare-tint: rgba(255, 90, 78, 0.16);
    --navbar-grad: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 8%, #B9D3EC 18%, #21456B 28%, #060E18 45%, #060E18 100%);
    --navbar-text: #EAF2F9;
    --navbar-text-muted: rgba(234,242,249,0.65);
    --navbar-brand-caption: #213A54;
    --today-tint: rgba(90, 133, 176, 0.14);
    --modal-header-grad: linear-gradient(120deg, #21456B 0%, #081420 100%);
    --modal-footer-bg: #0A4E56;
}

* { scrollbar-color: var(--border-c) transparent; }

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--bg);
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .modal-title, .fc-toolbar-title {
    font-family: var(--font-heading);
}

/* Navbar */
.navbar {
    box-shadow: 0 2px 14px rgba(14, 42, 66, 0.28);
    border-bottom: none;
    background-image: var(--navbar-grad) !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: none;
    padding: 0;
    border-radius: 0;
}
.navbar-brand img { display: block; }
.navbar-brand-caption {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navbar-brand-caption);
    opacity: 0.85;
}
.nav-link {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--navbar-text-muted) !important;
    padding: 6px 12px !important;
    border-radius: 20px;
    border-bottom: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
    color: var(--navbar-text) !important;
    background-color: rgba(255,255,255,0.12);
}
.nav-link.active {
    color: var(--accent) !important;
    background-color: var(--navbar-text);
    font-weight: 700;
}
.navbar .text-muted { color: var(--navbar-text-muted) !important; }
.navbar .btn-outline-danger {
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}
.navbar .btn-outline-danger:hover {
    background-color: #fff;
    color: var(--status-incassare);
    border-color: #fff;
}

/* Cards / containers */
.calendar-container {
    background-color: var(--surface);
    border-radius: 10px;
    box-shadow: none;
    padding: 24px;
    margin-top: 20px;
    border: 1px solid var(--border-c);
}
.bg-body {
    background-color: var(--surface) !important;
}
.card {
    background-color: var(--surface);
    border-color: var(--border-c);
}

/* FullCalendar */
.fc {
    font-family: 'Inter', sans-serif;
}
.fc-timegrid-slot {
    height: 4em !important;
}
.fc-theme-standard td, .fc-theme-standard th {
    border-color: var(--border-c);
}
.fc .fc-toolbar-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
}
.fc .fc-button-primary {
    background-color: var(--surface);
    border-color: var(--border-c);
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: 0.82rem;
    text-transform: capitalize;
    box-shadow: none;
}
.fc .fc-button-primary:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--navbar-grad);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
}
.fc-daygrid-day-number {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Horizontal header (weekday row) + vertical header (time axis column): flat, no gradient -- just an accent rule */
.fc-col-header-cell {
    background-color: var(--surface);
    border-bottom: 3px solid var(--accent) !important;
}
.fc-timegrid-axis {
    background-color: var(--surface);
    border-right: 3px solid var(--accent) !important;
}
.fc-col-header-cell-cushion {
    padding: 9px 4px;
    font-weight: 700;
    color: var(--ink);
}
.fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 0.75rem;
}
.fc-day-today .fc-col-header-cell-cushion {
    color: var(--accent);
    font-weight: 800;
}
.fc-day-today .fc-daygrid-day-number {
    color: var(--accent);
    font-weight: 700;
}
.fc-day-today {
    background-color: var(--today-tint) !important;
}
.fc-daygrid-day-frame {
    min-height: 96px;
}
.fc-daygrid-day-events {
    margin-top: 2px;
}
.fc-daygrid-event-harness {
    margin-bottom: 4px;
}

/* Event Styling */
.fc-event:not(.absence-event) {
    background: transparent !important;
}
.fc-event {
    border: 1px solid var(--border-c) !important;
    border-radius: 6px;
    box-shadow: none;
}

.fc-timegrid-event {
    overflow: visible !important;
}
.fc-timegrid-event .fc-event-main {
    background-color: transparent !important;
    height: max-content;
    min-height: 100%;
    padding: 0;
    color: var(--ink) !important;
    text-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: visible;
}

.fc-daygrid-event .fc-event-main {
    background-color: transparent !important;
    color: var(--ink) !important;
    padding: 0;
    text-shadow: none;
}

/* Custom Event Content */
.custom-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.76rem;
    line-height: 1.25;
    height: calc(100% - 4px);
    margin-bottom: 4px;
    box-sizing: border-box;
    border-left: 3px solid var(--muted);
    background: var(--status-dafare-tint);
    border-radius: 5px;
    padding: 3px 6px;
}

.custom-event .task-time {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}
.custom-event .task-line {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink);
}
.custom-event .task-line i {
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 0.68rem;
}
.custom-event .task-line.client {
    font-weight: 700;
}
.custom-event .task-line.status-ok {
    color: var(--status-pagato);
    font-weight: 700;
}
.custom-event .task-line.status-no {
    color: var(--status-incassare);
    font-weight: 700;
}
.custom-event .task-line.status-free {
    color: var(--accent);
    font-weight: 700;
}

/* List view ("Elenco") */
.fc-list {
    border-color: var(--border-c) !important;
}
.fc-list-day-cushion {
    background-color: var(--accent-soft) !important;
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
}
.fc-list-event {
    border-color: var(--border-c) !important;
    cursor: pointer;
}
.fc-list-event:hover td {
    background-color: transparent !important;
}
.fc-list-event-time {
    font-family: var(--font-mono);
    color: var(--muted);
    white-space: nowrap;
}
.fc-list-event-dot {
    display: none !important;
}
.fc-list-event-title {
    padding: 6px 10px !important;
}
.list-row-content {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.list-row-content .lr-tech,
.list-row-content .lr-client,
.list-row-content .lr-service,
.list-row-content .lr-pay {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
}
.list-row-content i {
    opacity: 0.6;
    font-size: 0.8rem;
}
.list-row-content .lr-client {
    font-weight: 700;
    min-width: 130px;
}
.list-row-content .lr-tech {
    min-width: 110px;
    color: var(--muted);
}
.list-row-content .lr-service {
    color: var(--muted);
    flex: 1;
}
.list-row-content .lr-pay {
    font-weight: 700;
    margin-left: auto;
}
.list-row-content .lr-pay.status-ok { color: var(--status-pagato); }
.list-row-content .lr-pay.status-no { color: var(--status-incassare); }
.list-row-content .lr-pay.status-free { color: var(--accent); }
.fc-list-empty {
    background-color: var(--surface) !important;
    color: var(--muted);
}

/* Absence events */
.fc-event.absence-event {
    border: none !important;
    border-radius: 4px;
    margin: 0 2px;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18) 6px, transparent 6px, transparent 12px);
    cursor: pointer;
}
.fc-event.absence-event:hover {
    border: none !important;
}
.fc-daygrid-event.absence-event .fc-event-main,
.fc-timegrid-event.absence-event .fc-event-main {
    background-color: inherit !important;
    color: #fff !important;
    padding: 3px 6px;
}
.absence-event-content {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.absence-event-content i {
    margin-right: 3px;
}

/* Buttons */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
.btn-outline-secondary {
    color: var(--muted);
    border-color: var(--border-c);
}
.btn-outline-secondary:hover {
    background-color: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-danger {
    color: var(--status-incassare);
    border-color: var(--status-incassare);
}
.btn-outline-danger:hover {
    background-color: var(--status-incassare);
    border-color: var(--status-incassare);
}

/* Forms */
.form-control, .form-select {
    border-radius: 6px;
    border-color: var(--border-c);
    background-color: var(--surface);
    color: var(--ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}
.form-label {
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    background-color: var(--surface);
    border-color: var(--border-c);
    color: var(--ink);
}

/* Tom Select (searchable dropdowns) */
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    border-radius: 6px !important;
    border-color: var(--border-c) !important;
    background-color: var(--surface) !important;
    color: var(--ink) !important;
}
.ts-wrapper .ts-control input {
    color: var(--ink) !important;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.2rem var(--accent-soft) !important;
}
.ts-dropdown {
    border-color: var(--border-c) !important;
    background-color: var(--surface) !important;
    color: var(--ink) !important;
}
.ts-dropdown .option {
    color: var(--ink);
}
.ts-dropdown .option.active {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.ts-wrapper.single .ts-control::after {
    border-top-color: var(--muted) !important;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Modals */
.modal-content {
    background-color: var(--surface);
    border: 1px solid var(--border-c);
    border-radius: 10px;
    overflow: hidden;
}
.modal-header {
    background-image: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 40%), var(--modal-header-grad);
    border-bottom: none !important;
    padding: 1rem 1.5rem !important;
}
.modal-title {
    font-weight: 700;
    color: #fff;
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}
.modal-header .btn-close:hover {
    opacity: 1;
}
.modal-body {
    background-color: var(--surface);
}
.modal-footer {
    background-color: var(--modal-footer-bg);
    border-top: none !important;
    padding: 0.85rem 1.5rem !important;
}
.modal-footer .btn-light {
    background-color: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.modal-footer .btn-light:hover {
    background-color: rgba(255,255,255,0.24);
    color: #fff;
}
.modal-footer .btn-primary {
    background-color: #fff;
    border-color: #fff;
    color: var(--modal-footer-bg);
}
.modal-footer .btn-primary:hover {
    background-color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.88);
    color: var(--modal-footer-bg);
}
.modal-footer .btn-outline-danger {
    color: #FFD3CE;
    border-color: rgba(255,211,206,0.55);
}
.modal-footer .btn-outline-danger:hover {
    background-color: var(--status-incassare);
    border-color: var(--status-incassare);
    color: #fff;
}

/* List group (admin tabs) */
.list-group-item.active {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.list-group-item {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--border-c);
}

/* Tables */
.table {
    color: var(--ink);
}
.table-light, thead.table-light th {
    background-color: var(--bg);
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Badges */
.badge.bg-secondary {
    background-color: var(--muted) !important;
}

/* Brand accent utilities */
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }

/* Toasts */
.toast.text-bg-success { background-color: var(--status-pagato) !important; }
.toast.text-bg-danger { background-color: var(--status-incassare) !important; }
.toast.text-bg-warning { background-color: var(--status-absence) !important; color: #fff !important; }
.toast.text-bg-primary { background-color: var(--accent) !important; }

/* Footer */
.site-footer {
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border-c);
    margin-top: 40px;
}

/* Login page */
.login-page {
    background-image: radial-gradient(circle at 15% 15%, rgba(255,255,255,0.08), transparent 45%), var(--navbar-grad);
}
.login-card {
    background-color: var(--surface);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(8, 20, 32, 0.35);
    padding: 2.25rem 2rem;
    border-top: 4px solid var(--accent);
}
.login-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
}
.login-card .input-group-text {
    background-color: var(--bg);
    border-color: var(--border-c);
    color: var(--muted);
}
.login-footer {
    color: var(--navbar-text-muted);
    border-top: 1px solid rgba(255,255,255,0.15);
}