:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #667085;
    --line: #dce3ee;
    --primary: #155eef;
    --primary-dark: #004eeb;
    --nav: #0f172a;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
body { margin: 0; min-width: 1100px; }
a { color: #155eef; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { height: 68px; background: var(--nav); color: white; display: flex; align-items: center; gap: 28px; padding: 0 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.brand { color: white; display: flex; align-items: center; gap: 10px; min-width: 220px; }
.brand:hover { text-decoration: none; }
.brand-mark, .login-logo { display: grid; place-items: center; background: linear-gradient(135deg, #2e90fa, #155eef); color: white; font-weight: 800; border-radius: 12px; }
.brand-mark { width: 40px; height: 40px; }
.brand small { display: block; color: #98a2b3; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 8px; flex: 1; }
.main-nav a { color: #d0d5dd; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.main-nav a:hover { color: white; background: rgba(255,255,255,.08); text-decoration: none; }
.user-menu { display: flex; align-items: center; gap: 14px; color: #d0d5dd; font-size: 14px; }
.user-menu form { margin: 0; }
.link-button { border: 0; background: transparent; color: #84adff; cursor: pointer; font: inherit; padding: 0; }
.page-shell { padding: 24px; max-width: 1900px; margin: auto; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #dbeafe, #f8fafc 55%); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.page-header.compact { margin-bottom: 16px; }
.page-header h1 { margin: 3px 0 0; font-size: 28px; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: #155eef; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.header-actions, .toolbar-group { display: flex; align-items: center; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 10px 15px; font-weight: 700; cursor: pointer; font-size: 14px; line-height: 1; min-height: 38px; }
.button:hover { text-decoration: none; }
.button.primary { color: white; background: var(--primary); border-color: var(--primary); }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { color: #344054; background: white; border-color: #d0d5dd; }
.button.small { min-height: 32px; padding: 7px 11px; }
.button.wide { width: 100%; }
.icon-button { border: 1px solid #d0d5dd; background: white; width: 34px; height: 34px; border-radius: 8px; font-size: 22px; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(160px,1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: white; border: 1px solid #e4e7ec; border-radius: 12px; padding: 15px 17px; box-shadow: 0 3px 12px rgba(16,24,40,.03); }
.stat-card span { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-card strong { display: block; margin-top: 7px; font-size: 27px; }
.stat-card.warning { border-left: 4px solid #f79009; }
.calendar-card, .table-card, .form-card { background: white; border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: var(--shadow); }
.calendar-card { overflow: hidden; }
.calendar-toolbar { min-height: 60px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.calendar-toolbar select, .calendar-toolbar input, .filter-bar input, .filter-bar select { border: 1px solid #d0d5dd; border-radius: 8px; min-height: 38px; padding: 8px 10px; background: white; color: var(--text); }
.search-inline { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.search-inline input { width: 260px; }
.legend { display: flex; gap: 20px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--legend); }
.timeline { overflow: auto; max-height: calc(100vh - 315px); min-height: 420px; position: relative; }
.timeline-loading, .timeline-empty { padding: 60px; text-align: center; color: var(--muted); }
.timeline-table { min-width: 1300px; position: relative; }
.timeline-header, .timeline-row { display: grid; grid-template-columns: 260px minmax(1040px, 1fr); }
.timeline-header { position: sticky; top: 0; z-index: 20; background: #f8fafc; border-bottom: 1px solid #cfd8e6; }
.resource-head { padding: 12px 14px; font-size: 12px; font-weight: 800; color: #475467; border-right: 1px solid #cfd8e6; position: sticky; left: 0; z-index: 25; background: #f8fafc; }
.days-head { display: grid; }
.day-head { padding: 8px 4px; text-align: center; border-right: 1px solid #e4e7ec; font-size: 12px; min-width: 74px; }
.day-head strong { display: block; font-size: 13px; }
.day-head.today { background: #eff6ff; color: #155eef; }
.timeline-row { min-height: 62px; border-bottom: 1px solid #e4e7ec; }
.timeline-row:hover .resource-cell, .timeline-row:hover .track { background-color: #fbfdff; }
.resource-cell { padding: 10px 14px; border-right: 1px solid #cfd8e6; background: white; position: sticky; left: 0; z-index: 12; }
.resource-cell strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-cell small { display: block; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track { position: relative; background-color: white; background-image: linear-gradient(to right, #e4e7ec 1px, transparent 1px); background-size: calc(100% / var(--days)) 100%; min-width: 1040px; }
.track.today-column::after { content: ""; pointer-events: none; position: absolute; inset: 0 auto 0 var(--today-left); width: calc(100% / var(--days)); background: rgba(21,94,239,.035); }
.timeline-event { position: absolute; top: 9px; height: 42px; border-radius: 7px; padding: 6px 8px; color: white; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.16); z-index: 5; border-left: 4px solid rgba(0,0,0,.2); min-width: 28px; }
.timeline-event:hover { filter: brightness(.96); text-decoration: none; z-index: 10; }
.timeline-event strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.timeline-event span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .88; font-size: 10px; margin-top: 2px; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; }
.filter-bar input { min-width: 380px; }
.table-card { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: #475467; background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
th, td { padding: 13px 14px; border-bottom: 1px solid #eaecf0; white-space: nowrap; }
tbody tr:hover { background: #f9fbff; }
.empty-cell { text-align: center; padding: 50px; color: var(--muted); }
.status-pill { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; background: #f2f4f7; color: #344054; }
.status-available, .success, .reservation-rented { background: #dcfae6; color: #067647; }
.status-maintenance, .reservation-hold { background: #fef0c7; color: #b54708; }
.status-out_of_service, .danger, .reservation-cancelled, .reservation-no_show { background: #fee4e2; color: #b42318; }
.reservation-confirmed { background: #d1e9ff; color: #175cd3; }
.reservation-ready { background: #cff9fe; color: #0e7090; }
.reservation-completed { background: #e4e7ec; color: #344054; }
.form-card { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(250px,1fr)); gap: 18px; }
.form-field { min-width: 0; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.form-field label b { color: #d92d20; margin-left: 3px; }
.form-field input:not([type=checkbox]), .form-field select, .form-field textarea { width: 100%; border: 1px solid #d0d5dd; border-radius: 8px; padding: 9px 10px; min-height: 40px; background: white; font: inherit; }
.form-field input[type=checkbox] { width: 19px; height: 19px; }
.form-field small { display: block; color: var(--muted); margin-top: 5px; }
.field-error, .form-error { color: #b42318; background: #fff1f0; border: 1px solid #fecdca; border-radius: 7px; padding: 8px 10px; margin-top: 5px; font-size: 13px; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #eaecf0; }
.messages { margin-bottom: 14px; }
.message { border-radius: 8px; padding: 11px 14px; background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 18px; color: var(--muted); }
.login-card { width: 420px; background: white; padding: 35px; border-radius: 18px; box-shadow: 0 24px 70px rgba(16,24,40,.16); text-align: center; }
.login-logo { width: 58px; height: 58px; margin: 0 auto 14px; font-size: 20px; }
.login-card h1 { margin: 0; }
.login-card p { color: var(--muted); margin: 6px 0 24px; }
.stack-form { display: grid; gap: 14px; text-align: left; }
.stack-form label { font-size: 13px; font-weight: 700; }
.stack-form input { display: block; width: 100%; margin-top: 6px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 11px; }
@media (max-width: 1300px) { .form-grid { grid-template-columns: repeat(2,minmax(240px,1fr)); } }

/* Calendar v1.1 */
.calendar-card-v2 { overflow: hidden; }
.calendar-toolbar-v2 { gap: 14px; }
.calendar-toolbar-primary { min-height: 64px; }
.calendar-toolbar-secondary { min-height: 66px; background: #f8fafc; }
.calendar-toolbar-secondary label,
.date-range-controls label,
.calendar-settings label { display: inline-flex; align-items: center; gap: 7px; color: #475467; font-size: 12px; font-weight: 700; white-space: nowrap; }
.calendar-toolbar-secondary select,
.date-range-controls input { min-height: 36px; }
.toolbar-navigation { min-width: 410px; }
.toolbar-navigation #period-title { font-size: 15px; color: #344054; margin-left: 4px; }
.date-range-controls input { width: 142px; }
.calendar-filters { flex-wrap: wrap; }
.calendar-settings { justify-content: flex-end; flex-wrap: wrap; }
.checkbox-inline { cursor: pointer; }
.checkbox-inline input { width: 17px; height: 17px; accent-color: var(--primary); }
.calendar-helpbar { display: flex; align-items: center; gap: 24px; padding: 8px 16px; color: #475467; font-size: 11px; background: #fffcf5; border-top: 1px solid #fef0c7; border-bottom: 1px solid #fef0c7; }
.calendar-helpbar b { color: #344054; }
.legend-expanded { flex-wrap: wrap; gap: 8px 17px; padding-top: 9px; padding-bottom: 9px; }
.legend-expanded span { white-space: nowrap; }
.timeline-v2 { max-height: calc(100vh - 390px); min-height: 470px; background: #f8fafc; }
.timeline-table-v2 { min-width: max-content; position: relative; background: white; }
.timeline-header-v2,
.timeline-row-v2,
.timeline-group-row { display: grid; width: max-content; }
.timeline-header-v2 { min-height: 56px; }
.timeline-header-v2 .resource-head { width: 288px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.timeline-header-v2 .resource-head small { color: #98a2b3; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.time-header { overflow: hidden; background: #f8fafc; }
.time-slot-band { display: grid; }
.day-slot-band { height: 56px; }
.time-slot-head { min-width: 0; border-right: 1px solid #dce3ee; display: flex; align-items: center; justify-content: center; color: #667085; font-size: 10px; }
.day-slot-band .time-slot-head { flex-direction: column; gap: 2px; }
.day-slot-band .time-slot-head strong { color: #344054; font-size: 13px; }
.time-slot-head.today,
.time-day-head.today { background: #eaf2ff; color: #155eef; }
.time-day-band { display: grid; height: 28px; border-bottom: 1px solid #cfd8e6; }
.time-day-head { display: flex; align-items: center; justify-content: center; border-right: 1px solid #cfd8e6; color: #344054; font-size: 11px; font-weight: 800; }
.hour-slot-band { height: 28px; }
.hour-slot-band .time-slot-head { font-variant-numeric: tabular-nums; }
.timeline-group-row { min-height: 31px; border-bottom: 1px solid #d0d5dd; background: #eef2f6; position: relative; z-index: 9; }
.group-resource { position: sticky; left: 0; z-index: 13; background: #eef2f6; border-right: 1px solid #cfd8e6; padding: 7px 14px; color: #344054; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.group-resource b { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: #d0d5dd; color: #344054; font-size: 10px; }
.group-track { background: #eef2f6; }
.timeline-row-v2 { min-height: 70px; }
.resource-cell-v2 { width: 288px; min-height: 70px; padding: 10px 14px; }
.resource-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.resource-main strong { flex: 1; }
.asset-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #98a2b3; box-shadow: 0 0 0 3px rgba(152,162,179,.14); }
.asset-status-dot.status-available { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.14); }
.asset-status-dot.status-reserved { background: #2e90fa; box-shadow: 0 0 0 3px rgba(46,144,250,.14); }
.asset-status-dot.status-rented { background: #039855; box-shadow: 0 0 0 3px rgba(3,152,85,.14); }
.asset-status-dot.status-maintenance,
.asset-status-dot.status-out_of_service { background: #f04438; box-shadow: 0 0 0 3px rgba(240,68,56,.14); }
.asset-status-dot.status-cleaning,
.asset-status-dot.status-charging,
.asset-status-dot.status-inspection { background: #f79009; box-shadow: 0 0 0 3px rgba(247,144,9,.14); }
.resource-cell-v2 em { display: inline-block; margin-top: 4px; color: #667085; font-size: 10px; font-style: normal; font-weight: 700; }
.track-v2 { min-width: 0; min-height: 70px; background-color: white; background-image: linear-gradient(to right, #e4e7ec 1px, transparent 1px); position: relative; user-select: none; touch-action: none; }
.timeline-row-v2:nth-of-type(even) .track-v2,
.timeline-row-v2:nth-of-type(even) .resource-cell-v2 { background-color: #fcfdff; }
.track-v2.drop-target { background-color: #eff8ff !important; box-shadow: inset 0 0 0 2px #2e90fa; }
.today-guide { position: absolute; top: 0; bottom: 0; background: rgba(21,94,239,.045); border-left: 1px solid rgba(21,94,239,.35); border-right: 1px solid rgba(21,94,239,.12); pointer-events: none; z-index: 1; }
.timeline-event-v2 { top: 12px; height: 46px; border-radius: 8px; padding: 0; border: 0; border-left: 4px solid rgba(0,0,0,.22); display: flex; align-items: stretch; cursor: grab; touch-action: none; transition: box-shadow .12s ease, filter .12s ease, opacity .12s ease; }
.timeline-event-v2:hover { box-shadow: 0 5px 14px rgba(16,24,40,.25); filter: brightness(1.02); }
.timeline-event-v2.event-block { cursor: pointer; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.13), rgba(255,255,255,.13) 7px, transparent 7px, transparent 14px); }
.timeline-event-v2.is-dragging,
.timeline-event-v2.is-resizing { z-index: 80; opacity: .86; cursor: grabbing; box-shadow: 0 10px 28px rgba(16,24,40,.34); }
.event-content { flex: 1; min-width: 0; padding: 6px 8px; pointer-events: none; }
.timeline-event-v2 .event-content strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; }
.timeline-event-v2 .event-content span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; font-size: 9px; margin-top: 2px; }
.timeline-event-v2 .event-content small { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; font-size: 8px; margin-top: 1px; }
.timeline-event-v2[style*="width: 2"] .event-content span { display: none; }
.resize-handle { width: 7px; flex: 0 0 7px; cursor: ew-resize; position: relative; z-index: 6; }
.resize-handle::after { content: ""; position: absolute; top: 13px; bottom: 13px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.75); }
.resize-left::after { left: 2px; }
.resize-right::after { right: 2px; }
.timeline-selection { position: absolute; top: 5px; bottom: 5px; z-index: 60; background: rgba(21,94,239,.18); border: 2px solid #155eef; border-radius: 8px; pointer-events: none; }
.calendar-interacting, .calendar-interacting * { cursor: grabbing !important; }
.calendar-drawer-backdrop { position: fixed; inset: 0; z-index: 180; background: rgba(15,23,42,.2); opacity: 0; transition: opacity .18s ease; }
.calendar-drawer-backdrop.visible { opacity: 1; }
.calendar-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 94vw); z-index: 190; background: white; box-shadow: -20px 0 55px rgba(15,23,42,.22); transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; }
.calendar-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 23px 24px 18px; border-bottom: 1px solid #eaecf0; }
.drawer-header h2 { margin: 3px 0 0; font-size: 23px; }
.drawer-close { border: 0; background: #f2f4f7; color: #475467; width: 36px; height: 36px; border-radius: 9px; font-size: 26px; line-height: 1; cursor: pointer; }
.drawer-body { flex: 1; overflow: auto; padding: 22px 24px; }
.drawer-actions { display: flex; gap: 10px; padding: 17px 24px; border-top: 1px solid #eaecf0; background: #f9fafb; }
.drawer-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; margin-bottom: 18px; border-radius: 999px; background: color-mix(in srgb, var(--drawer-status) 12%, white); color: var(--drawer-status); font-size: 12px; font-weight: 800; }
.drawer-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--drawer-status); }
.drawer-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.drawer-details > div { padding: 12px; border: 1px solid #eaecf0; border-radius: 10px; background: #fcfcfd; min-width: 0; }
.drawer-details > div.wide { grid-column: 1 / -1; }
.drawer-details dt { color: #667085; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.drawer-details dd { margin: 5px 0 0; color: #1d2939; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.drawer-details dd small { display: block; margin-top: 4px; color: #667085; font-weight: 500; }
.drawer-intro { margin: 0 0 18px; color: #475467; font-size: 13px; line-height: 1.55; }
.calendar-toast { position: fixed; right: 24px; bottom: 24px; z-index: 210; max-width: 430px; padding: 12px 16px; border-radius: 10px; background: #067647; color: white; box-shadow: 0 12px 32px rgba(16,24,40,.25); font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease; }
.calendar-toast.error { background: #b42318; }
.calendar-toast.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1450px) {
    .calendar-toolbar { align-items: flex-start; gap: 12px; }
    .calendar-toolbar-secondary { flex-direction: column; }
    .calendar-settings { justify-content: flex-start; }
    .timeline-v2 { max-height: calc(100vh - 450px); }
}

/* Back Office Dashboard & Calendar v1.2 */
:root {
    --sidebar-width: 292px;
    --sidebar-collapsed-width: 78px;
    --calendar-row-height: 64px;
    --app-bg: #eef3f8;
    --sidebar-bg: #101828;
    --sidebar-soft: #1d2939;
}
body { min-width: 0; background: var(--app-bg); }
.app-layout { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); transition: grid-template-columns .2s ease; }
.app-layout.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-width) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg,#101828 0%,#0b1220 100%); color: white; z-index: 300; box-shadow: 6px 0 20px rgba(15,23,42,.12); }
.sidebar-brand-row { min-height: 76px; padding: 15px 13px 13px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar .brand { min-width: 0; flex: 1; overflow: hidden; }
.sidebar .brand-copy { white-space: nowrap; transition: opacity .15s ease; }
.sidebar .brand-copy strong { display: block; font-size: 15px; }
.sidebar .brand-copy small { color: #98a2b3; font-size: 9px; letter-spacing: .08em; }
.sidebar-collapse-button { border: 0; color: #d0d5dd; background: rgba(255,255,255,.07); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; }
.sidebar-quick-actions { display: grid; gap: 7px; padding: 13px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-quick-actions a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 9px; color: white; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.sidebar-quick-actions a:hover { text-decoration: none; }
.sidebar-primary-action { background: #155eef; }
.sidebar-primary-action:hover { background: #004eeb; }
.sidebar-secondary-action { background: rgba(255,255,255,.08); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 9px; scrollbar-width: thin; }
.sidebar-link, .sidebar-group summary { min-height: 40px; display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 0 11px; border-radius: 8px; color: #d0d5dd; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.sidebar-link span, .sidebar-group summary > span { flex: 0 0 22px; width: 22px; text-align: center; font-size: 15px; }
.sidebar-link b, .sidebar-group summary b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.sidebar-link em { margin-left: auto; padding: 2px 5px; border-radius: 5px; color: #84adff; background: rgba(21,94,239,.18); font-size: 8px; font-style: normal; text-transform: uppercase; }
.sidebar-link:hover, .sidebar-link.active, .sidebar-group summary:hover { color: white; text-decoration: none; background: rgba(255,255,255,.075); }
.sidebar-link.active { background: #155eef; box-shadow: 0 6px 16px rgba(21,94,239,.2); }
.sidebar-group { margin: 2px 0; }
.sidebar-group summary { list-style: none; }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary i { margin-left: auto; font-size: 10px; transition: transform .15s ease; }
.sidebar-group[open] summary i { transform: rotate(180deg); }
.sidebar-group > div { display: grid; gap: 1px; margin: 1px 0 5px 33px; padding-left: 9px; border-left: 1px solid rgba(255,255,255,.1); }
.sidebar-group > div a { padding: 7px 8px; color: #98a2b3; border-radius: 6px; font-size: 10px; line-height: 1.25; }
.sidebar-group > div a:hover { color: white; background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar-user { min-height: 67px; padding: 11px 13px; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12); }
.user-avatar { flex: 0 0 36px; height: 36px; display: grid; place-items: center; background: #344054; border-radius: 50%; font-weight: 800; }
.sidebar-user-copy { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; }
.sidebar-user-copy strong, .sidebar-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-copy strong { font-size: 11px; }.sidebar-user-copy small { margin-top: 2px; color: #98a2b3; font-size: 9px; }
.logout-button { border: 0; background: transparent; color: #98a2b3; cursor: pointer; font-size: 18px; }
.app-layout.sidebar-collapsed .brand-copy, .app-layout.sidebar-collapsed .sidebar-quick-actions b, .app-layout.sidebar-collapsed .sidebar-link b, .app-layout.sidebar-collapsed .sidebar-link em, .app-layout.sidebar-collapsed .sidebar-group summary b, .app-layout.sidebar-collapsed .sidebar-group summary i, .app-layout.sidebar-collapsed .sidebar-group > div, .app-layout.sidebar-collapsed .sidebar-user-copy { display: none; }
.app-layout.sidebar-collapsed .sidebar-brand-row { padding-left: 13px; }.app-layout.sidebar-collapsed .brand { flex: 0 0 40px; }.app-layout.sidebar-collapsed .sidebar-collapse-button { margin-left: auto; width: 25px; }
.app-layout.sidebar-collapsed .sidebar-quick-actions a, .app-layout.sidebar-collapsed .sidebar-link, .app-layout.sidebar-collapsed .sidebar-group summary { justify-content: center; padding: 0; }.app-layout.sidebar-collapsed .sidebar-quick-actions span { font-size: 18px; }
.app-main { min-width: 0; }
.page-shell { max-width: none; padding: 20px; }
.mobile-topbar { display: none; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.dashboard-heading h1 { margin: 4px 0 3px; font-size: clamp(24px,2vw,32px); letter-spacing: -.035em; }.dashboard-heading > div > p:last-child { margin: 0; color: #667085; font-size: 13px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(6,minmax(140px,1fr)); gap: 10px; margin-bottom: 13px; }
.metric-card { position: relative; overflow: hidden; min-height: 104px; padding: 14px 15px; text-align: left; border: 1px solid #e4e7ec; border-radius: 13px; background: white; box-shadow: 0 4px 14px rgba(16,24,40,.04); cursor: pointer; }
.metric-card::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:#98a2b3; }.metric-card.success::after{background:#12b76a}.metric-card.rental::after{background:#eab308}.metric-card.pickup::after{background:#2e90fa}.metric-card.return::after{background:#14b8a6}.metric-card.danger::after{background:#f04438}
.metric-card span { color:#667085; font-size:11px; font-weight:750; }.metric-card strong { display:block; margin-top:6px; color:#101828; font-size:28px; }.metric-card small { display:block; margin-top:2px; color:#98a2b3; font-size:9px; }
.metric-card:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(16,24,40,.08); }
.dashboard-overview-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.overview-panel { min-height:210px; padding:15px; background:white; border:1px solid #e4e7ec; border-radius:13px; box-shadow:0 4px 15px rgba(16,24,40,.04); }
.panel-title { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }.panel-title h2 { margin:0; font-size:15px; }.panel-title p { margin:3px 0 0; color:#98a2b3; font-size:10px; }.panel-count { display:grid; place-items:center; min-width:31px; height:31px; padding:0 7px; border-radius:9px; background:#eff4ff; color:#155eef; font-weight:800; }.panel-count.warning{background:#fff4ed;color:#e04f16}
.compact-schedule-list { display:grid; gap:5px; }.compact-schedule-list a { display:grid; grid-template-columns:43px minmax(0,1fr) 15px; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; color:#344054; background:#f9fafb; }.compact-schedule-list a:hover{background:#eff8ff;text-decoration:none}.compact-schedule-list time{font-size:11px;font-weight:800;color:#155eef}.compact-schedule-list strong,.compact-schedule-list small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-schedule-list strong{font-size:11px}.compact-schedule-list small{margin-top:2px;color:#98a2b3;font-size:9px}.compact-empty{padding:28px;text-align:center;color:#98a2b3;font-size:11px}
.alerts-panel { display:grid; align-content:start; }.alert-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; padding:8px 0; color:#344054; border-top:1px solid #f2f4f7; }.alert-row:hover{text-decoration:none}.alert-row>span{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#fff4ed;color:#e04f16;font-weight:800}.alert-row strong,.alert-row small{display:block}.alert-row strong{font-size:10px}.alert-row small{margin-top:2px;color:#98a2b3;font-size:9px}
.calendar-card-v3 { border-radius:15px; overflow:hidden; }
.calendar-titlebar { min-height:66px; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid #e4e7ec; }.calendar-titlebar h2{margin:3px 0 0;font-size:18px}
.calendar-toolbar-primary,.calendar-toolbar-secondary { gap:15px; flex-wrap:wrap; }.calendar-toolbar-secondary{background:#f8fafc}.calendar-settings-inline{margin-left:auto;flex-wrap:wrap}.calendar-toolbar label{display:inline-flex;align-items:center;gap:6px;color:#475467;font-size:10px;font-weight:750;white-space:nowrap}.calendar-toolbar select,.calendar-toolbar input{min-height:33px;padding:5px 8px;font-size:11px}.calendar-toolbar .search-inline input{width:220px}
.timeline-v3 { min-height:480px; max-height:calc(100vh - 350px); overflow:auto; background:#f8fafc; }
.timeline-table-v3 { position:relative; min-width:max-content; background:white; }
.timeline-header-v3,.timeline-row-v3,.timeline-group-row-v3 { display:grid; width:max-content; }
.timeline-header-v3 { position:sticky; top:0; z-index:60; min-height:67px; background:#f8fafc; border-bottom:1px solid #cfd8e6; }
.resource-head-v3 { width:310px; position:sticky; left:0; z-index:65; padding:13px 14px; display:flex; flex-direction:column; justify-content:center; background:#f8fafc; border-right:1px solid #cfd8e6; }.resource-head-v3 strong{font-size:10px;letter-spacing:.07em;color:#475467}.resource-head-v3 small{margin-top:3px;color:#98a2b3;font-size:9px}
.time-header-v3 { position:relative; overflow:hidden; }.time-day-band-v3,.time-slot-band-v3{display:grid}.time-day-band-v3{height:39px;border-bottom:1px solid #dce3ee}.time-day-head-v3{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;border-right:1px solid #cfd8e6;font-size:10px;color:#344054}.time-day-head-v3 strong{text-transform:uppercase}.time-day-head-v3.today{background:#eaf2ff;color:#155eef}.time-day-head-v3 em{position:absolute;right:5px;top:4px;padding:2px 4px;border-radius:4px;background:#155eef;color:white;font-size:6px;font-style:normal}
.time-slot-band-v3{height:28px}.day-internal-slots{display:flex;align-items:center;justify-content:space-between;padding:0 5px;border-right:1px solid #cfd8e6;background-image:linear-gradient(to right,rgba(152,162,179,.2) 1px,transparent 1px);background-size:25% 100%;color:#98a2b3;font-size:7px}.day-internal-slots.hour,.day-internal-slots.six-hours{padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.day-internal-slots.hour span,.day-internal-slots.six-hours span{height:100%;display:flex;align-items:center;justify-content:center;border-right:1px solid #e4e7ec;font-size:7px}
.timeline-group-row-v3 { min-height:34px; padding:0; border:0; text-align:left; background:#eef2f6; border-bottom:1px solid #d0d5dd; cursor:pointer; }.group-resource-v3{width:310px;position:sticky;left:0;z-index:35;display:flex;align-items:center;gap:7px;padding:7px 13px;background:#eef2f6;border-right:1px solid #cfd8e6;color:#344054}.group-resource-v3>span{font-size:14px;font-weight:800}.group-resource-v3 strong{font-size:10px;text-transform:uppercase;letter-spacing:.04em}.group-resource-v3 b{padding:2px 5px;border-radius:999px;background:#d0d5dd;font-size:8px}.group-resource-v3 em{margin-left:auto;color:#667085;font-size:8px;font-style:normal}.group-track-v3{position:relative;background:#eef2f6}
.timeline-row-v3 { min-height:var(--calendar-row-height); border-bottom:1px solid #e4e7ec; }.resource-cell-v3{width:310px;min-height:var(--calendar-row-height);position:sticky;left:0;z-index:30;padding:9px 13px;background:white;border-right:1px solid #cfd8e6}.timeline-row-v3:nth-child(even) .resource-cell-v3{background:#fcfdff}.resource-cell-v3 .resource-main{display:flex;align-items:center;gap:8px}.resource-cell-v3 strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-cell-v3 small,.resource-cell-v3 em{display:block;margin-top:3px;color:#667085;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-cell-v3 em{font-style:normal;color:#98a2b3}
.track-v3{position:relative;min-height:var(--calendar-row-height);background-color:white;background-image:linear-gradient(to right,#e4e7ec 1px,transparent 1px);background-size:var(--day-width) 100%;user-select:none;touch-action:none}.track-v3.drop-target{background-color:#eff8ff;box-shadow:inset 0 0 0 2px #2e90fa}.track-day{position:absolute;top:0;bottom:0;border-right:1px solid #e4e7ec;background-image:linear-gradient(to right,transparent 24%,rgba(152,162,179,.12) 25%,transparent 26%,transparent 49%,rgba(152,162,179,.12) 50%,transparent 51%,transparent 74%,rgba(152,162,179,.12) 75%,transparent 76%);pointer-events:none}.track-day.today{background-color:rgba(21,94,239,.04)}
.timeline-event-v3{position:absolute;top:10px;height:calc(var(--calendar-row-height) - 20px);min-height:34px;border-radius:8px;display:flex;align-items:stretch;color:white;z-index:10;box-shadow:0 2px 7px rgba(16,24,40,.18);cursor:grab;touch-action:none;overflow:visible;border-left:3px solid rgba(0,0,0,.18)}.timeline-event-v3:hover{z-index:25;filter:brightness(1.02);box-shadow:0 7px 17px rgba(16,24,40,.27)}.timeline-event-v3.event-block{cursor:pointer;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.18),rgba(255,255,255,.18) 7px,transparent 7px,transparent 14px)}.timeline-event-v3.overdue{animation:warningPulse 1.8s infinite}.timeline-event-v3.is-dragging,.timeline-event-v3.is-resizing{z-index:80;opacity:.87;box-shadow:0 13px 28px rgba(16,24,40,.35)}@keyframes warningPulse{50%{box-shadow:0 0 0 4px rgba(220,38,38,.22)}}
.event-content{flex:1;min-width:0;padding:6px 7px;pointer-events:none;overflow:hidden}.event-content strong,.event-content span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-content strong{font-size:9px}.event-content span{margin-top:3px;font-size:7px;opacity:.92}.resize-handle{width:6px;flex:0 0 6px;cursor:ew-resize}.preparation-buffer{position:absolute;left:100%;top:5px;bottom:5px;border:1px dashed rgba(71,84,103,.55);background:repeating-linear-gradient(-45deg,rgba(71,84,103,.18),rgba(71,84,103,.18) 4px,rgba(255,255,255,.2) 4px,rgba(255,255,255,.2) 8px);border-radius:0 5px 5px 0;pointer-events:none}.timeline-selection{position:absolute;top:5px;bottom:5px;z-index:70;background:rgba(21,94,239,.17);border:2px solid #155eef;border-radius:8px;pointer-events:none}.current-time-line{position:absolute;top:0;bottom:0;width:2px;background:#f04438;z-index:22;pointer-events:none}.current-time-line::before{content:"";position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:#f04438}
.calendar-tooltip{position:fixed;z-index:500;width:350px;max-height:380px;overflow:auto;padding:13px 14px;border:1px solid #d0d5dd;border-radius:11px;background:#101828;color:white;box-shadow:0 15px 38px rgba(15,23,42,.32);pointer-events:none}.calendar-tooltip>strong{font-size:12px}.calendar-tooltip dl{display:grid;gap:6px;margin:10px 0 0}.calendar-tooltip dl>div{display:grid;grid-template-columns:82px 1fr;gap:8px}.calendar-tooltip dt{color:#98a2b3;font-size:8px;text-transform:uppercase}.calendar-tooltip dd{margin:0;font-size:9px;line-height:1.4}.calendar-tooltip p{margin:7px 0 0;color:#d0d5dd;font-size:10px}
.calendar-context-menu{position:fixed;z-index:510;width:225px;padding:5px;border:1px solid #d0d5dd;border-radius:10px;background:white;box-shadow:0 15px 38px rgba(15,23,42,.25)}.calendar-context-menu header{padding:8px 9px;color:#667085;border-bottom:1px solid #eaecf0;font-size:9px;font-weight:800}.calendar-context-menu button{width:100%;padding:8px 9px;text-align:left;border:0;border-radius:6px;background:transparent;color:#344054;font-size:10px;cursor:pointer}.calendar-context-menu button:hover{background:#f2f4f7}.calendar-context-menu button.danger{color:#b42318}
.warning-button{color:white;background:#f97316;border-color:#f97316}.drawer-actions{flex-wrap:wrap}
.modal-backdrop{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.52)}.settings-modal{width:min(880px,96vw);max-height:92vh;overflow:auto;background:white;border-radius:16px;box-shadow:0 30px 80px rgba(15,23,42,.35)}.settings-modal>header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 23px;border-bottom:1px solid #eaecf0}.settings-modal h2{margin:4px 0 0}.settings-modal>header button{border:0;background:#f2f4f7;width:36px;height:36px;border-radius:9px;font-size:24px;cursor:pointer}.settings-modal form{padding:20px 23px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.settings-grid label,.color-settings-grid label{display:grid;gap:5px;color:#344054;font-size:10px;font-weight:750}.settings-grid input,.settings-grid select{width:100%;min-height:38px;border:1px solid #d0d5dd;border-radius:8px;padding:7px 9px}.settings-grid small{color:#98a2b3;font-size:8px}.settings-switches{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0;padding:13px;border-radius:10px;background:#f8fafc}.settings-switches label{font-size:10px;font-weight:700}.settings-modal h3{font-size:13px}.color-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.color-settings-grid input{width:100%;height:36px;padding:3px;border:1px solid #d0d5dd;border-radius:8px}.settings-modal footer{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid #eaecf0}
.placeholder-card{min-height:350px;display:grid;place-items:center;align-content:center;padding:40px;text-align:center;background:white;border:1px solid #e4e7ec;border-radius:15px;box-shadow:var(--shadow)}.placeholder-icon{width:65px;height:65px;display:grid;place-items:center;border-radius:18px;background:#eff4ff;color:#155eef;font-size:27px}.placeholder-card h2{margin:17px 0 5px}.placeholder-card p{max-width:650px;margin:5px;color:#667085}
@media (max-width: 1500px){.dashboard-metrics{grid-template-columns:repeat(3,1fr)}.dashboard-overview-grid{grid-template-columns:repeat(2,1fr)}.alerts-panel{grid-column:1/-1}.calendar-toolbar-secondary{align-items:flex-start;flex-direction:column}.calendar-settings-inline{margin-left:0}.timeline-v3{max-height:calc(100vh - 430px)}}
@media (max-width: 1100px){.app-layout{display:block}.sidebar{position:fixed;left:0;transform:translateX(-105%);width:292px;transition:transform .2s ease}.app-layout.sidebar-mobile-open .sidebar{transform:translateX(0)}.mobile-topbar{position:sticky;top:0;z-index:250;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#101828;color:white}.mobile-topbar button{border:0;background:transparent;color:white;font-size:21px}.mobile-topbar a{color:white;font-size:11px}.page-shell{padding:13px}.dashboard-heading{align-items:flex-start;flex-direction:column}.dashboard-overview-grid{grid-template-columns:1fr}.alerts-panel{grid-column:auto}.timeline-v3{max-height:650px}}
@media (max-width: 720px){.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.header-actions{width:100%;flex-wrap:wrap}.calendar-titlebar,.calendar-toolbar{align-items:flex-start;flex-direction:column}.toolbar-group{flex-wrap:wrap}.date-range-controls{width:100%}.dashboard-heading h1{font-size:23px}.settings-grid,.color-settings-grid{grid-template-columns:1fr}.calendar-tooltip{width:min(340px,90vw)}}
.metric-card.active { outline: 2px solid #155eef; outline-offset: 1px; background: #f5f8ff; }

/* Dashboard / reservation calendar split and zoom buttons v1.2.2 */
.dashboard-metrics-information .metric-card { display:block; color:inherit; text-decoration:none; text-align:left; }
.dashboard-metrics-information .metric-card:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.10); }
.dashboard-information-grid { margin-bottom:14px; }
.dashboard-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid #d0d5dd; border-radius:15px; background:linear-gradient(135deg,#ffffff,#eef6ff); box-shadow:var(--shadow); }
.dashboard-callout h2 { margin:5px 0 8px; font-size:22px; }
.dashboard-callout p:last-child { margin:0; color:#667085; }
.calendar-page-shell { padding:14px 16px 16px; width:100%; max-width:none; }
.calendar-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.calendar-page-heading h1 { margin:4px 0 3px; font-size:clamp(25px,2vw,34px); letter-spacing:-.035em; }
.calendar-page-heading > div > p:last-child { margin:0; color:#667085; font-size:13px; }
.calendar-card-standalone { min-height:calc(100vh - 118px); display:flex; flex-direction:column; }
.calendar-titlebar-standalone { flex:0 0 auto; }
.timeline-standalone { flex:1 1 auto; max-height:none; min-height:520px; height:calc(100vh - 355px); }
.calendar-zoom-toolbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:#f8fafc; }
.calendar-zoom-toolbar > span { color:#475467; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.calendar-view-buttons { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.calendar-view-buttons button { min-height:34px; padding:7px 13px; border:1px solid #d0d5dd; border-radius:8px; color:#344054; background:white; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.calendar-view-buttons button:hover { border-color:#84adff; color:#155eef; background:#f5f8ff; }
.calendar-view-buttons button.active { border-color:#155eef; color:white; background:#155eef; box-shadow:0 5px 13px rgba(21,94,239,.20); }
.calendar-hidden-controls { display:none !important; }
input[type="time"], input[type="datetime-local"] { font-variant-numeric:tabular-nums; }
@media (max-width:1100px) {
    .calendar-page-shell { padding:10px; }
    .calendar-page-heading { align-items:flex-start; flex-direction:column; }
    .calendar-card-standalone { min-height:calc(100vh - 170px); }
    .timeline-standalone { height:620px; }
}
@media (max-width:720px) {
    .dashboard-callout { align-items:flex-start; flex-direction:column; }
    .calendar-zoom-toolbar { align-items:flex-start; flex-direction:column; }
}