:root { --green-light: #e4efe1; --green-mid: #c9dcc3; --green-dark: #2f4f3a; --text-dark: #22291f; --border: #b9c9b1; --danger: #a5372c; --white: #ffffff; } /* User-chosen appearance (Impostazioni > Aspetto). Applied on so the font-size change scales every rem-based size in the app, and the theme colors just override the same tokens everything else already reads from. */ html.font-small { font-size: 87.5%; } html.font-large { font-size: 112.5%; } html.theme-blue { --green-dark: #1f4e6b; --green-light: #dcebf2; --green-mid: #a9cbdc; } html.theme-purple { --green-dark: #4a3a6b; --green-light: #e8e1f2; --green-mid: #c7b8dc; } html.theme-teal { --green-dark: #1f5f5c; --green-light: #dcefee; --green-mid: #a8d4d1; } html.theme-graphite { --green-dark: #3a3f47; --green-light: #e6e8ea; --green-mid: #c3c8cd; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text-dark); background: #f4f6f2; } body.login-page { background: #e8ffd1; } .container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; } .topbar { background: var(--green-dark); color: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; flex-wrap: wrap; gap: 10px; } .topbar-left { display: flex; align-items: center; gap: 8px; } .topbar-brand { font-weight: 700; font-size: 1.1rem; text-align: center; } .topbar-brand-accent { color: #ffd400; } .topbar-settings-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--white); opacity: 0.85; } .topbar-settings-link .icon { width: 18px; height: 18px; } .topbar-settings-link:hover { opacity: 1; } .topbar-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topbar-nav a { color: var(--white); text-decoration: none; } .topbar-nav a.btn-inline { color: var(--text-dark); } @media (max-width: 640px) { .topbar { flex-direction: column; align-items: flex-start; } .topbar-nav { width: 100%; gap: 12px; } } .topbar-nav a:hover { text-decoration: underline; } .logout-form button { background: none; border: none; color: var(--white); cursor: pointer; font: inherit; } .flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; } .flash-success { background: var(--green-light); border: 1px solid var(--green-mid); } .flash-error { background: #fbe4e1; border: 1px solid var(--danger); color: var(--danger); } h1 { margin-top: 0; } .auth-brand { font-weight: 700; font-size: 1.6rem; margin-bottom: 20px; color: var(--text-dark); } .auth-tagline { max-width: 480px; margin: -12px 0 20px; color: #55604e; font-size: 0.95rem; } .auth-card, .form-card, .detail-card { background: var(--green-light); border: 1px solid var(--border); border-radius: 10px; padding: 24px; max-width: 480px; } .form-card, .detail-card { max-width: 600px; } .detail-card + .form-card, .detail-card + .detail-card, .form-card + .form-card, .form-card + form { margin-top: 16px; } .swap-hint { font-size: 0.85rem; color: #55604e; margin: -4px 0 14px; } .group-bookings-list { list-style: none; padding: 0; margin: 0 0 14px; } .group-bookings-list li { padding: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .group-bookings-current { color: #55604e; font-size: 0.85rem; } .payment-total { margin-top: 12px; } .payment-balance { font-size: 1.05rem; } .payment-balance.is-due + form { margin-bottom: 16px; } .payment-balance.is-due { color: var(--danger); } .payment-balance.is-settled { color: var(--green-dark); } .payment-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .btn-inline-danger { display: inline-block; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--danger); background: var(--white); color: var(--danger); font-size: 0.8rem; cursor: pointer; } .btn-inline-danger:hover { background: var(--danger); color: var(--white); } .form-card-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dark); margin: 0 0 12px; } label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; } input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; font-family: inherit; } .form-row { display: flex; gap: 16px; } .form-row label { flex: 1; min-width: 0; } @media (max-width: 640px) { .form-row { flex-direction: column; gap: 0; } } .btn-primary { display: inline-block; background: var(--green-dark); color: var(--white); border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-size: 1rem; text-decoration: none; } .btn-primary:hover { opacity: 0.9; } .btn-danger { background: var(--danger); color: var(--white); border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; } .btn-inline { display: inline-block; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--white); color: var(--text-dark); text-decoration: none; font-size: 0.9rem; cursor: pointer; } .btn-inline:hover { background: var(--green-light); } .btn-icon { display: inline-flex; align-items: center; gap: 6px; } .btn-icon .icon { width: 16px; height: 16px; flex-shrink: 0; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-dark); text-decoration: none; font-weight: 600; font-size: 0.9rem; margin-bottom: 14px; } .back-link .icon { width: 16px; height: 16px; } .back-link:hover { text-decoration: underline; } .auth-switch { margin-top: 14px; font-size: 0.9rem; } .form-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .form-section:last-of-type { border-bottom: none; } .form-section h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dark); margin: 0 0 12px; } .days-count { font-weight: 600; } .prolongation { display: flex; gap: 10px; } .color-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .color-swatch-option { cursor: pointer; } .color-swatch-option input { position: absolute; opacity: 0; width: 0; height: 0; } .color-swatch { display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border); } .color-swatch-option input:checked + .color-swatch { box-shadow: 0 0 0 2px var(--text-dark); } .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-header h1 { margin: 0; } .table-scroll { overflow-x: auto; } @media (max-width: 640px) { .table-scroll { margin: 0 -16px; } } .simple-table { width: 100%; border-collapse: collapse; background: var(--white); } .simple-table th, .simple-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: 0.9rem; } .simple-table th { background: var(--green-light); } /* The month calendar uses CSS grid rather than a — position: sticky on table cells (needed to freeze the date row and each vehicle's heading while scrolling) is unreliable across browsers, especially with colspan cells repeated across many tbody groups. Grid gives the same visual grid with dependable sticky behavior. */ .calendar-grid { display: grid; grid-template-columns: repeat(var(--day-count), var(--col-width, 52px)); background: var(--white); } .grid-day-header, .grid-cell, .resource-heading { border: 1px solid var(--border); padding: 8px 10px; font-size: 0.9rem; box-sizing: border-box; } .grid-day-header { text-align: center; height: 48px; background: var(--green-light); position: sticky; top: 0; z-index: 3; } .grid-day-header.is-today { background: var(--green-dark); color: var(--white); } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; background: var(--green-mid); } .badge-cancelled, .badge-maintenance { background: #fbe4e1; color: var(--danger); } .identifier-cell { display: inline-flex; align-items: center; gap: 8px; } .icon-edit { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--green-dark); flex-shrink: 0; } .icon-edit .icon { width: 16px; height: 16px; } .icon-edit:hover { background: var(--green-light); } .share-link-box { background: var(--green-light); border: 1px solid var(--green-mid); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } .share-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .share-link-row input[type="text"] { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font-family: monospace; font-size: 0.85rem; } .share-expiry-note { color: var(--green-dark); font-size: 0.9rem; } .availability-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .availability-day { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--border); } .availability-day:last-child { border-bottom: none; } .month-nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 10px; margin-bottom: 16px; } .month-nav-controls { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 10px; } .month-label { font-weight: 700; font-size: 1.1rem; min-width: 10ch; } .calendar-zoom { display: none; gap: 4px; } .calendar-zoom .btn-icon-square[disabled] { opacity: 0.4; cursor: default; } #toggleCompactBtn { margin-left: auto; } .calendar-page.is-compact .month-nav-controls { display: none; } .calendar-page.is-compact .calendar-zoom { display: flex; } /* Full-screen focus mode: hide the site nav too and let the calendar use the whole viewport, not just its own section of the page. Works even where the native Fullscreen API isn't available (e.g. iOS Safari). */ body.calendar-fullscreen { background: var(--white); } body.calendar-fullscreen .topbar { display: none; } body.calendar-fullscreen .container { max-width: 100%; padding: 8px; } body.calendar-fullscreen .month-nav { margin-bottom: 6px; } body.calendar-fullscreen .calendar-page.is-compact .calendar-scroll { max-height: calc(100vh - 50px); } .btn-icon-square { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--border); background: var(--white); color: var(--text-dark); flex-shrink: 0; } .btn-icon-square .icon { width: 18px; height: 18px; } .btn-icon-square:hover { background: var(--green-light); } .btn-icon-square.is-active { background: var(--green-dark); color: var(--white); } #installAppBtn { display: none; } #installAppBtn.is-visible { display: inline-block; } .calendar-scroll { overflow: auto; max-height: 65vh; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--green-mid) transparent; } .calendar-scroll.is-dragging { cursor: grabbing; user-select: none; } .calendar-scroll::-webkit-scrollbar { height: 8px; } .calendar-scroll::-webkit-scrollbar-thumb { background: var(--green-mid); border-radius: 4px; } @media (max-width: 640px) { .calendar-scroll { margin: 0 -16px; } body.calendar-fullscreen .calendar-scroll { margin: 0 -8px; } } .resource-heading { grid-column: 1 / -1; min-height: 34px; background: var(--row-bg); border-left: 4px solid var(--row-color); } /* The vehicle-name label is a separate, non-spanning element sticky-pinned to the left edge, nested inside the full-width heading bar. Position: sticky on an element that itself spans every grid column (like the bar) does not clamp on that same axis in any current browser — the element has to be narrower than the row it sits in for horizontal stickiness to have any effect, so the "stuck" part has to be this inner span, not the full-width bar. */ .resource-heading-label { position: sticky; left: 14px; display: inline-flex; align-items: center; min-height: 34px; font-weight: 600; font-size: 0.85rem; } /* A single persistent bar (kept in sync by JS, not by relying on N separate sticky elements — position: sticky repeated across many grid rows is unreliable across browsers and produced overlapping stuck headers). */ .current-resource-bar { grid-column: 1 / -1; display: none; min-height: 34px; background: var(--row-bg); border-left: 4px solid var(--row-color); position: sticky; top: 48px; z-index: 2; } .current-resource-bar.is-visible { display: block; } /* One per entry in src/data/resourceColors.js — chosen by the customer/staff when adding a vehicle, not auto-cycled. */ .resource-color-0 { --row-color: #c0392b; --row-bg: #f8d9d5; } .resource-color-1 { --row-color: #2f6fab; --row-bg: #d8e6f2; } .resource-color-2 { --row-color: #3f8b52; --row-bg: #dcefdf; } .resource-color-3 { --row-color: #c8791f; --row-bg: #f5e3cc; } .resource-color-4 { --row-color: #7a5aa3; --row-bg: #e6ddf2; } .resource-color-5 { --row-color: #2c8f8a; --row-bg: #d7ece9; } .resource-color-6 { --row-color: #a67c0c; --row-bg: #f2e7c3; } .resource-color-7 { --row-color: #c0527a; --row-bg: #f6dbe6; } .resource-color-8 { --row-color: #8a5a34; --row-bg: #ecdfd0; } .resource-color-9 { --row-color: #5b6670; --row-bg: #dde3e6; } .resource-color-10 { --row-color: #6b9b1f; --row-bg: #e6f0d2; } .resource-color-11 { --row-color: #4a4a9e; --row-bg: #dcdcf0; } .cell-empty a { color: var(--border); text-decoration: none; display: block; text-align: center; } .cell-empty a:hover { color: var(--green-dark); } .cell-booking { background: var(--row-bg); border-top: 3px solid var(--row-color); position: relative; } .cell-booking a { color: var(--text-dark); text-decoration: none; font-size: 0.85rem; } .cell-booking.status-pending { background: #f3e6b8; border-top-color: #c8a53a; } .cell-booking.status-cancelled { background: #e6e6e6; border-top-color: #999; text-decoration: line-through; } /* A day with more than one booking for the same resource (e.g. rented out twice in one day to different customers) — stack them instead of only showing whichever one happened to be found first. */ .cell-multi { background: var(--row-bg); border-top: 3px solid var(--row-color); display: flex; flex-direction: column; gap: 2px; padding: 4px; } .cell-multi-entry { display: block; position: relative; color: var(--text-dark); text-decoration: none; font-size: 0.78rem; line-height: 1.25; padding: 3px 4px; border-radius: 4px; background: var(--white); } .cell-multi-entry.status-pending { background: #f3e6b8; } .cell-multi-entry.status-cancelled { background: #e6e6e6; text-decoration: line-through; } .paid-badge { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--green-dark); color: var(--white); font-size: 9px; line-height: 14px; text-align: center; font-weight: 700; }