:root { color-scheme: light; font-family: "Noto Sans", "Liberation Sans", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #7694e6; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .58; }
.read-only .actual-staff { display: none; }
a { color: #3157c8; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { position: relative; min-height: 64px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #172033; color: white; }
.brand { color: white; font-weight: 800; letter-spacing: .02em; }
.brand-block { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.deployment-badge { display: inline-flex; max-width: 210px; align-items: center; gap: 6px; border: 1px solid #7894dc; border-radius: 999px; padding: 3px 8px; background: #263b70; color: #edf2ff; font-size: .68rem; line-height: 1.2; }
.deployment-badge strong { letter-spacing: .06em; }
.deployment-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-deployment { width: fit-content; margin: 0 0 14px; }
.topbar-main, .nav { display: flex; align-items: center; gap: 24px; }
.topbar-main { min-width: 0; }
.global-search { width: 230px; display: flex; flex: 0 1 230px; margin: 0; }
.global-search input { min-width: 0; border: 1px solid #44516d; border-radius: 9px 0 0 9px; padding: 8px 10px; background: #253049; color: white; font-size: .84rem; }
.global-search input::placeholder { color: #aeb8cc; }
.global-search input:focus { outline: 2px solid #7694e6; border-color: #7694e6; }
.global-search button { border: 0; border-radius: 0 9px 9px 0; padding: 0 11px; background: #3157c8; color: white; font-weight: 800; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.nav { gap: 16px; }
.nav a { color: #bfc8da; font-size: .92rem; font-weight: 700; }
.nav a.active, .nav a:hover { color: white; text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-actions form { margin: 0; }
.topbar-create { border-radius: 9px; padding: 8px 12px; background: #3157c8; color: white; font-size: .86rem; font-weight: 800; white-space: nowrap; }
.topbar-create:hover { background: #4168d8; text-decoration: none; }
.nav-more { position: relative; color: #bfc8da; font-size: .92rem; font-weight: 700; }
.nav-more summary { cursor: pointer; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " ▾"; font-size: .7rem; }
.nav-more.active, .nav-more[open], .nav-more:hover { color: white; }
.nav-more-menu { position: absolute; z-index: 20; top: calc(100% + 16px); right: 0; width: 230px; display: grid; gap: 2px; border: 1px solid #dfe5ef; border-radius: 12px; padding: 8px; background: white; box-shadow: 0 16px 40px rgba(23, 32, 51, .18); }
.nav-more-menu a { border-radius: 8px; padding: 10px 12px; color: #26334f; }
.nav-more-menu a:hover { background: #eef3ff; color: #2447ad; }
.muted { margin: 0; color: #63708b; }
.container { width: min(1120px, 90vw); margin: 48px auto; }
.narrow { width: min(720px, 90vw); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { margin: 4px 0 16px; font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.25; overflow-wrap: anywhere; }
h2 { margin-top: 0; }
.eyebrow { margin: 0; color: #63708b; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; border: 0; border-radius: 10px; padding: 11px 18px; background: #3157c8; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.button:hover { background: #2447ad; text-decoration: none; }
.button.secondary { background: #e8edf8; color: #26334f; }
.button.compact { justify-content: center; padding: 8px 11px; font-size: .82rem; white-space: nowrap; }
.link-button { border: 0; background: transparent; color: white; cursor: pointer; }
.card, .table-wrap, .empty { background: white; border: 1px solid #e1e6ef; border-radius: 16px; box-shadow: 0 8px 30px rgba(32, 46, 78, .06); }
.empty { padding: 48px; text-align: center; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 18px; border-bottom: 1px solid #edf0f5; text-align: left; white-space: nowrap; }
th { color: #63708b; font-size: .8rem; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; border-radius: 999px; padding: 6px 10px; background: #eaf0ff; color: #284aa7; font-size: .82rem; font-weight: 700; }
.badge.inactive { background: #eef0f3; color: #667085; }
.form { padding: 28px; display: grid; gap: 20px; }
label { display: grid; gap: 7px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #cfd7e6; border-radius: 9px; padding: 11px 12px; background: white; color: inherit; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid #dbe5ff; border-color: #3157c8; }
.error { color: #b42318; font-size: .85rem; font-weight: 500; }
.actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.back { display: inline-block; margin-bottom: 24px; }
.details { padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.details div { min-width: 0; }
.details .full { grid-column: 1 / -1; }
dt { color: #63708b; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
dd { margin: 6px 0 0; }
.note { white-space: pre-wrap; }
@media (max-width: 700px) { .page-heading { align-items: flex-start; flex-direction: column; } .details { grid-template-columns: 1fr; } .details .full { grid-column: auto; } }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkbox { display: flex; align-items: center; gap: 10px; }
.checkbox input { width: auto; }
.flash { border: 1px solid #abd7be; border-radius: 10px; padding: 12px 16px; background: #ecfdf3; color: #11683b; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
.summary { display: grid; gap: 8px; padding: 20px; }
.summary span { color: #63708b; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.summary strong { font-size: 1.25rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 36px 0 16px; }
.section-heading h2, .add-component h2 { margin: 4px 0 0; }
.read-only-note { margin: -8px 0 24px; border: 1px solid #d8dee9; border-radius: 10px; padding: 11px 14px; background: #f8f9fb; color: #52607a; }
.read-only-note strong { color: #26334f; }
.package-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.empty-actions { justify-content: center; margin-top: 18px; }
.empty.compact { padding: 28px; }
.empty.compact > span { display: block; margin-top: 6px; }
.add-component { margin-top: 24px; }
.text-button { border: 0; padding: 0; background: transparent; color: #3157c8; cursor: pointer; font: inherit; }
.text-button.danger { color: #b42318; }
@media (max-width: 900px) { .topbar { align-items: flex-start; flex-direction: column; padding-top: 14px; padding-bottom: 14px; } .topbar-main { width: 100%; align-items: flex-start; flex-direction: column; gap: 12px; } .global-search { width: min(420px, 100%); flex-basis: auto; } .nav { width: 100%; flex-wrap: wrap; padding: 0 140px 4px 0; } .topbar-actions { position: absolute; top: 14px; right: 5vw; } .nav-more-menu { left: 0; right: auto; } }
@media (max-width: 900px) { .package-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .topbar-create { padding: 7px 10px; } .field-row, .field-row.three, .summary-grid, .package-summary-grid { grid-template-columns: 1fr; } .section-heading, .actions { align-items: stretch; flex-direction: column; gap: 12px; } .actions > .button, .actions > form, .actions > button { width: 100%; } .actions > .button, .actions > form > button, .actions > button { justify-content: center; } }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 24px; }
.subnav a { border-radius: 999px; padding: 8px 13px; background: #e8edf8; color: #485674; font-size: .88rem; font-weight: 700; }
.subnav a.active, .subnav a:hover { background: #3157c8; color: white; text-decoration: none; }
.availability-filter { margin-bottom: 32px; }
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.slot { padding: 22px; }
.slot[hidden] { display: none; }
.slot.recommended { border-color: #7da1ef; box-shadow: 0 10px 28px rgba(49, 87, 200, .12); }
.slot-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 18px; color: #63708b; font-size: .88rem; font-weight: 700; }
.slot-filter button { border: 1px solid #d9e0ed; border-radius: 999px; padding: 7px 12px; background: white; color: #485674; font: inherit; cursor: pointer; }
.slot-filter button.active, .slot-filter button:hover { border-color: #3157c8; background: #3157c8; color: white; }
.slot-recommendation { margin: 10px 0 -2px; color: #1e5a9f; font-size: .86rem; font-weight: 650; }
.slot-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.slot-title > strong { font-size: 1.4rem; }
.route { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.route li { display: grid; grid-template-columns: 94px 1fr; gap: 12px; align-items: baseline; padding-top: 10px; border-top: 1px solid #edf0f5; }
.route li span { color: #63708b; font-variant-numeric: tabular-nums; }
.schedule-note { margin-top: 18px; }
@media (max-width: 700px) { .slot-grid { grid-template-columns: 1fr; } }
.error-flash { border-color: #f3b6b2; background: #fff0ef; color: #9f241b; }
.slot-action { justify-content: center; width: 100%; margin-top: 20px; }
.hold-preview { margin-bottom: 20px; padding: 24px; }
.hold-preview h2 { margin: 16px 0 6px; }
.hold-expiration { margin-bottom: 24px; padding: 16px 20px; background: #fff8dd; border-color: #efd77b; }
.booking-command-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 24px; }
.booking-command-bar a { display: grid; gap: 4px; border: 1px solid #dfe5ef; border-radius: 12px; padding: 13px 15px; background: white; color: #172033; }
.booking-command-bar a:hover { border-color: #9db4ef; text-decoration: none; transform: translateY(-1px); }
.booking-command-bar a.danger { border-color: #efc1bd; background: #fffafa; color: #8f251e; }
.booking-command-bar span { color: #63708b; font-size: .78rem; }
.booking-next-step { display: grid; gap: 18px; margin: 24px 0 32px; padding: 24px; border-color: #9db4ef; background: #f7f9ff; }
.booking-next-step.terminal { border-color: #d8dee9; background: white; }
.booking-next-heading h2 { margin: 4px 0 0; }
.booking-next-body, .booking-next-copy { display: grid; gap: 8px; }
.booking-next-copy strong { font-size: 1.18rem; }
.booking-next-copy p { margin: 0; color: #52607a; }
.booking-next-statuses, .booking-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.booking-next-actions form { margin: 0; }
.booking-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.event-checklist { min-width: 0; margin: 0; padding: 16px; border: 1px solid #dfe5ef; border-radius: 12px; }
.event-checklist legend { padding: 0 6px; color: #485674; font-size: .9rem; font-weight: 700; }
.event-checklist-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.event-checklist .checkbox { padding: 14px; border: 1px solid #dfe5ef; border-radius: 10px; background: #f8faff; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.event-checklist .checkbox:has(input:checked) { border-color: #9bcbb1; background: #ecfdf3; }
.event-checklist input { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #3157c8; }
.danger-button { background: #b42318; }
.danger-button:hover { background: #921d15; }
.incident-panel { display: grid; gap: 18px; margin-top: 32px; padding: 24px; border-color: #efc1bd; background: #fffdfd; }
.incident-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.incident-heading h2 { margin: 4px 0 7px; }
.incident-heading > span { border-radius: 999px; padding: 7px 11px; background: #fff0ef; color: #9f241b; font-size: .76rem; font-weight: 750; }
.incident-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.incident-options > article, .cancellation-workflow { border: 1px solid #e5dfe3; border-radius: 12px; padding: 17px; background: white; }
.incident-options article { display: grid; align-content: start; gap: 9px; }
.incident-options article p { margin: 0; color: #63708b; }
.incident-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 5px; }
.incident-actions form { margin: 0; }
.cancellation-workflow.full { grid-column: 1 / -1; }
.cancellation-workflow summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.cancellation-workflow summary span { color: #3157c8; font-size: .82rem; }
.cancellation-workflow form { display: grid; gap: 15px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0f5; }
.consequence-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding-left: 18px; color: #63708b; font-size: .84rem; }
.refund-warning { margin: 0; border-radius: 9px; padding: 10px 12px; background: #fff0d5; color: #8a4b08; font-weight: 700; }
.immutable-warning { margin: 0; border-radius: 9px; padding: 11px 13px; background: #fff8dd; color: #694b00; }
.custom-visit-container { width: min(1380px, 94vw); }
.custom-visit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.custom-visit-main { display: grid; gap: 20px; }
.custom-visit-main h2, .custom-visit-result h2 { margin: 4px 0 0; }
.step-label { margin: 0; color: #3157c8; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.inline-heading { margin: 0; align-items: center; }
.route-editor { display: grid; gap: 12px; }
.route-editor-row { display: grid; grid-template-columns: 28px minmax(150px, 2fr) minmax(80px, .7fr) minmax(100px, .8fr) auto; gap: 10px; align-items: end; border: 1px solid #dfe5ef; border-radius: 12px; padding: 14px; }
.route-editor-row.with-equipment { grid-template-columns: 28px minmax(130px, 2fr) minmax(75px, .7fr) minmax(85px, .8fr) minmax(110px, 1fr) auto; }
.route-editor-row input, .route-editor-row select { min-width: 0; }
.route-editor-number { align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf0ff; color: #284aa7; font-weight: 800; }
.route-editor-row label { font-size: .92rem; }
.route-editor-row .remove-step { align-self: center; }
.custom-visit-result { position: sticky; top: 18px; padding: 24px; }
.result-room { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #edf0f5; margin-top: 18px; padding-top: 16px; }
.result-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #dfe5ef; margin-top: 18px; padding-top: 18px; }
.result-total strong { font-size: 1.45rem; }
@media (max-width: 1150px) { .custom-visit-layout { grid-template-columns: 1fr; } .custom-visit-result { position: static; } .route-editor-row, .route-editor-row.with-equipment { grid-template-columns: 32px repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .route-editor-row, .route-editor-row.with-equipment { grid-template-columns: 28px 1fr; } .route-editor-row label, .route-editor-row .remove-step { grid-column: 2; } .inline-heading { align-items: stretch; } }
.session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.session-card { display: grid; gap: 10px; padding: 22px; }
.session-card h2, .session-card p { margin: 0; }
.consent-details { border: 1px solid #dfe5ef; border-radius: 12px; background: #fafbfe; }
.consent-details summary { cursor: pointer; padding: 15px 17px; font-weight: 800; }
.consent-details[open] summary { border-bottom: 1px solid #dfe5ef; }
@media (max-width: 700px) { .booking-next-actions { align-items: stretch; flex-direction: column; } .booking-next-actions .button, .booking-next-actions form, .booking-next-actions button { width: 100%; justify-content: center; } }
.calendar-container { width: min(1380px, 94vw); }
.calendar-toolbar { display: flex; align-items: end; justify-content: center; gap: 12px; padding: 18px; margin-bottom: 20px; }
.calendar-toolbar label { width: 190px; }
.calendar-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
.calendar-summary div { display: grid; gap: 4px; }
.calendar-summary span { color: #63708b; font-size: .88rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; color: #63708b; font-size: .86rem; }
.calendar-legend span { display: flex; align-items: center; gap: 7px; }
.calendar-legend i { width: 13px; height: 13px; border-radius: 4px; }
.calendar-legend .hold { background: #f6c94c; }
.calendar-legend .confirmed { background: #5a7ee0; }
.calendar-legend .block { background: #d7655c; }
.calendar-scroll { overflow-x: auto; }
.calendar-board { display: grid; grid-template-columns: 180px minmax(1000px, 1fr); min-width: 1180px; }
.calendar-corner, .calendar-axis { height: 48px; border-bottom: 1px solid #dfe5ef; background: #f9fafc; }
.calendar-corner { padding: 16px 18px; color: #63708b; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.calendar-axis { position: relative; margin-right: 20px; }
.calendar-axis span { position: absolute; bottom: 12px; transform: translateX(-50%); color: #63708b; font-size: .75rem; font-variant-numeric: tabular-nums; }
.calendar-resource { min-height: 82px; padding: 20px 18px; border-bottom: 1px solid #edf0f5; display: grid; align-content: center; gap: 3px; }
.calendar-resource span { color: #63708b; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-track { position: relative; min-height: 82px; margin-right: 20px; border-bottom: 1px solid #edf0f5; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--calendar-step) - 1px), #edf0f5 calc(var(--calendar-step) - 1px), #edf0f5 var(--calendar-step)); }
.calendar-event { position: absolute; z-index: 1; top: 9px; height: 64px; min-width: 4px; overflow: hidden; border-radius: 8px; padding: 7px 9px; color: #172033; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-size: .76rem; line-height: 1.25; }
.calendar-event:hover { z-index: 3; text-decoration: none; filter: brightness(.97); overflow: visible; min-width: 150px; }
.calendar-event strong, .calendar-event span, .calendar-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event small { margin-top: 2px; opacity: .75; }
.calendar-event.hold { background: #ffe69b; }
.calendar-event.confirmed { background: #dce6ff; color: #183679; }
.calendar-event.block { z-index: 2; top: 4px; height: 24px; padding: 4px 8px; background: #f8cbc7; color: #8e241d; }
.calendar-event.block small { display: none; }
@media (max-width: 700px) { .calendar-toolbar { align-items: stretch; flex-direction: column; } .calendar-toolbar label { width: 100%; } .calendar-toolbar .button { justify-content: center; } }
.timeline { display: grid; gap: 0; margin: 0 0 24px; padding: 0; list-style: none; border: 1px solid #e1e6ef; border-radius: 16px; overflow: hidden; background: white; }
.timeline li, .timeline-item { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #edf0f5; }
.timeline li:last-child, .timeline-item:last-child { border-bottom: 0; }
.timeline p { margin: 5px 0; }
.timeline > li > span, .timeline-item > span { flex: 0 0 auto; color: #63708b; font-size: .82rem; }
.add-comment { margin-top: 24px; }
.feedback-filter { display: flex; align-items: end; gap: 14px; padding: 18px; margin-bottom: 24px; }
.feedback-filter label { min-width: 220px; }
.feedback-rating { color: #284aa7; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .timeline li, .timeline-item, .feedback-filter { align-items: stretch; flex-direction: column; } .timeline > li > span, .timeline-item > span { flex-basis: auto; } .feedback-filter label { min-width: 0; } }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.lead-context { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 20px; }
.lead-context > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.repeat-hint { margin: -6px 0 20px; }
.duplicate-warning { border: 1px solid #efd77b; border-radius: 12px; padding: 16px; background: #fff8dd; color: #694b00; }
.duplicate-warning p { margin: 5px 0 10px; }
.duplicate-warning > div { display: grid; gap: 8px; }
.duplicate-warning > div > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid #ecd987; padding-top: 8px; }
.duplicate-warning > div span { margin-right: auto; }
.table-secondary-link { color: #63708b; font-size: .76rem; }
.lead-status-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; }
.lead-status-card strong { display: block; margin: 5px 0; font-size: 1.25rem; }
.lead-status-card .booking-actions { margin-top: 0; }
.lead-start-guide { max-width: 430px; display: grid; justify-items: end; gap: 8px; text-align: right; }
.lead-start-guide strong { margin: 0; font-size: 1rem; }
.lead-start-guide span { color: #63708b; font-size: .88rem; line-height: 1.45; }
.lost-lead-form { display: flex; align-items: center; gap: 9px; }
.lost-lead-form input { min-width: 210px; padding: 8px 10px; }
.lead-call { margin-top: 24px; }
.lead-call h2 { margin: 4px 0 5px; }
@media (max-width: 700px) { .heading-actions, .lead-context, .lead-status-card, .lead-status-card .booking-actions, .lost-lead-form { width: 100%; align-items: stretch; flex-direction: column; } .lead-status-card > div { width: 100%; } .lead-start-guide { max-width: none; justify-items: stretch; text-align: left; } .lead-start-guide .button { justify-content: center; width: 100%; } }
.compact-form { padding: 22px; }
.skill-fieldset { border: 1px solid #dfe5ef; border-radius: 12px; padding: 18px; display: grid; gap: 12px; }
.skill-fieldset legend { padding: 0 8px; font-weight: 800; }
.skill-fieldset small { display: block; color: #63708b; font-weight: 500; }
.staff-alert { display: flex; justify-content: space-between; gap: 18px; border: 1px solid #f0b8b3; border-radius: 12px; padding: 16px 20px; background: #fff2f1; color: #8f251e; }
.staff-alert.ready { border-color: #abd7be; background: #ecfdf3; color: #11683b; }
.staff-alert span { color: #63708b; }
.crisis-center { display: grid; gap: 17px; margin-top: 16px; padding: 22px; border-color: #9db4ef; background: #f9fbff; }
.crisis-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.crisis-heading h2 { margin: 4px 0 7px; }
.crisis-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.crisis-stats span { border-radius: 999px; padding: 7px 10px; background: #edf1f7; color: #52607a; font-size: .72rem; font-weight: 750; }
.crisis-stats span.warning { background: #fff0d5; color: #8a4b08; }
.crisis-stats span.critical { background: #fff0ef; color: #9f241b; }
.crisis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.crisis-grid a { display: grid; align-content: start; gap: 6px; border: 1px solid #dfe5ef; border-radius: 11px; padding: 14px; background: white; color: #172033; }
.crisis-grid a:hover { border-color: #9db4ef; text-decoration: none; }
.crisis-grid span { color: #63708b; font-size: .78rem; line-height: 1.4; }
.staffing-links { display: flex; flex-wrap: wrap; gap: 12px; }
.danger-link { color: #b42318; }
.staff-next-task { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 24px; border-color: #9db4ef; background: #f7f9ff; }
.staff-next-task h2 { margin: 4px 0 6px; }
.staff-next-task p { margin: 0; color: #52607a; }
.staff-next-task-action { display: grid; flex: 0 0 auto; gap: 9px; text-align: right; }
.personal-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.personal-task-card { display: grid; gap: 9px; padding: 20px; }
.personal-task-card p { margin: 0; color: #52607a; }
.personal-task-card form, .personal-task-card .button { width: 100%; }
.personal-task-card .button { justify-content: center; }
.personal-task-time { color: #3157c8; font-weight: 800; }
.completed-task-list { margin-top: 16px; padding: 18px 20px; }
.completed-task-list summary { cursor: pointer; font-weight: 800; }
.completed-task-list div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; margin-top: 12px; color: #63708b; }
.completed-task-list div strong { color: #172033; }
.staff-bookings { display: grid; gap: 14px; }
.staffing-card { padding: 20px; }
.staffing-title, .staffing-assignments { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.staffing-title > div { display: grid; gap: 5px; }
.staffing-assignments { margin-top: 16px; }
.badge.warning { background: #fff0d5; color: #8a4b08; }
.inline-staff-form, .replace-form, .row-actions { display: flex; align-items: center; gap: 8px; }
.inline-form { display: flex; align-items: center; gap: 8px; min-width: 230px; }
.inline-form input, .inline-form select { min-width: 140px; padding: 8px 9px; }
.inline-staff-form { margin-top: 14px; }
.inline-staff-form select { min-width: 190px; }
.shift-action-stack { display: grid; gap: 9px; min-width: 430px; }
.replace-form { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) auto; margin-top: 0; }
.replace-form select, .replace-form input { min-width: 0; padding: 7px 8px; }
.shift-action-stack .row-actions { justify-content: flex-end; }
.no-replacement { display: grid; gap: 3px; border-radius: 9px; padding: 9px 11px; background: #fff7e8; color: #8a4b08; font-size: .8rem; white-space: normal; }
.no-replacement span { color: #63708b; }
.actual-staff { margin: 24px 0; padding: 24px; display: grid; gap: 24px; }
.actual-staff h2 { margin-bottom: 8px; }
.actual-staff form { display: grid; gap: 20px; min-width: 0; }
.actual-staff-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.actual-staff-person { min-width: 0; margin: 0; padding: 16px; display: grid; gap: 16px; border: 1px solid #dfe5ef; border-radius: 12px; }
.actual-staff-person legend { padding: 0 6px; font-weight: 800; }
.actual-staff-person label { min-width: 0; font-size: .88rem; }
.actual-staff-person select { min-width: 0; }
.actual-staff-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.actual-staff-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.actual-staff-submit .muted { font-size: .85rem; }
.actual-staff-submit button { flex-shrink: 0; }
.date-time-field { display: grid; min-width: 0; gap: 5px; }
.date-time-control { position: relative; display: flex; align-items: center; min-width: 0; }
.date-time-display { min-width: 0; font-variant-numeric: tabular-nums; }
.date-time-control:has(.date-picker-button) .date-time-display { padding-right: 44px; }
.date-time-display[aria-invalid="true"] { border-color: #b42318; }
.date-time-display:disabled { background: #f3f5f9; color: #8993a5; }
.date-time-error { white-space: normal; }
.date-picker-button { position: absolute; right: 4px; width: 36px; height: 36px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: #63708b; cursor: pointer; }
.date-picker-button:hover { background: #e8edf8; color: #3157c8; }
.date-picker-proxy { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
@media (max-width: 1100px) { .actual-staff-times { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .actual-staff { padding: 18px; } .actual-staff-team, .event-checklist-items { grid-template-columns: 1fr; } .actual-staff-submit { flex-direction: column; align-items: stretch; } .actual-staff-submit button { justify-content: center; } }
.no-candidates { margin: 12px 0 0; border-radius: 9px; padding: 10px 12px; background: #fff7e8; color: #8a4b08; font-size: .88rem; }
.planning-tools { display: grid; gap: 14px; }
.planning-tool { overflow: hidden; }
.planning-tool summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; cursor: pointer; list-style-position: inside; }
.planning-tool summary span { color: #63708b; font-size: .88rem; font-weight: 500; }
.planning-tool[open] summary { border-bottom: 1px solid #edf0f5; }
.planning-tool .form { border: 0; border-radius: 0; box-shadow: none; }
label small { color: #63708b; font-size: .78rem; font-weight: 500; line-height: 1.35; }
@media (max-width: 1000px) { .crisis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .booking-command-bar, .incident-options, .crisis-grid { grid-template-columns: 1fr; } .cancellation-workflow.full { grid-column: auto; } .incident-heading, .crisis-heading, .staff-alert, .staffing-title, .staffing-assignments, .inline-form, .inline-staff-form, .replace-form, .actual-staff, .actual-staff form { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; } .crisis-stats { justify-content: flex-start; } .shift-action-stack { min-width: 260px; } .incident-actions, .incident-actions .button, .incident-actions form, .incident-actions button { width: 100%; justify-content: center; } }
@media (max-width: 700px) {
    .staff-mobile-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .staff-mobile-table table, .staff-mobile-table tbody { display: block; min-width: 0; }
    .staff-mobile-table thead { display: none; }
    .staff-mobile-table tr { display: grid; gap: 0; margin-bottom: 12px; padding: 6px 14px; border: 1px solid #e1e6ef; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(32, 46, 78, .05); }
    .staff-mobile-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid #edf0f5; white-space: normal; }
    .staff-mobile-table td:last-child { border-bottom: 0; }
    .staff-mobile-table td::before { content: attr(data-label); color: #6c7890; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .staff-mobile-table .shift-action-stack { min-width: 0; }
    .staff-mobile-table select, .staff-mobile-table button { max-width: 100%; }
}
@media (max-width: 700px) {
    .mobile-card-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .mobile-card-table table, .mobile-card-table tbody { display: block; min-width: 0; }
    .mobile-card-table thead { display: none; }
    .mobile-card-table tr { display: grid; margin-bottom: 12px; padding: 8px 14px; border: 1px solid #e1e6ef; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(32, 46, 78, .05); }
    .mobile-card-table td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #edf0f5; white-space: normal; }
    .mobile-card-table td:last-child { border-bottom: 0; }
    .mobile-card-table td::before { content: attr(data-label); color: #63708b; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .mobile-card-table .inline-form { min-width: 0; }
    .mobile-card-table .inline-form input, .mobile-card-table .inline-form select { min-width: 0; width: 100%; }
    .mobile-card-table .button { justify-content: center; width: 100%; }
}
.block-warning { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 20px; border-color: #efc779; background: #fffdfa; }
.block-warning strong { flex: 0 0 auto; color: #8a4b08; }
.block-warning span { color: #63708b; line-height: 1.45; }
@media (max-width: 700px) { .block-warning { align-items: flex-start; flex-direction: column; } }
@media (max-width: 700px) { .planning-tool summary { align-items: flex-start; flex-direction: column; } }
.dashboard-container { width: min(1380px, 94vw); }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dashboard-heading h1 { margin-bottom: 8px; }
.dashboard-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.dashboard-shortcuts a { display: flex; align-items: center; gap: 13px; min-width: 0; border: 1px solid #dfe5ef; border-radius: 14px; padding: 14px 16px; background: white; color: #172033; box-shadow: 0 7px 22px rgba(32, 46, 78, .045); }
.dashboard-shortcuts a:hover { border-color: #9db4ef; text-decoration: none; transform: translateY(-1px); }
.dashboard-shortcuts b { display: grid; flex: 0 0 35px; height: 35px; place-items: center; border-radius: 10px; background: #e8efff; color: #3157c8; font-size: .72rem; }
.dashboard-shortcuts span { display: grid; gap: 3px; min-width: 0; }
.dashboard-shortcuts strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-shortcuts small { overflow: hidden; color: #63708b; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-ribbons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.activity-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 12px; padding: 14px 18px; font-size: .9rem; }
.activity-ribbon:hover { text-decoration: none; filter: brightness(.98); }
.activity-ribbon.current { background: #e8efff; color: #2447ad; }
.activity-ribbon.warning { background: #fff0d5; color: #8a4b08; }
.sales-section { margin-top: 4px; }
.sales-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sales-card { min-height: 124px; display: grid; align-content: start; gap: 7px; overflow: hidden; border: 1px solid #dfe5ef; border-radius: 16px; padding: 18px; background: linear-gradient(145deg, #fff, #f8faff); box-shadow: 0 8px 26px rgba(32, 46, 78, .055); }
.sales-card span { color: #63708b; font-size: .73rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sales-card strong { overflow-wrap: anywhere; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sales-card small { color: #63708b; line-height: 1.35; }
.sales-card.primary { border-color: #9db4ef; background: linear-gradient(145deg, #f7f9ff, #eaf0ff); }
.sales-card.primary strong { color: #2447ad; }
.sales-card.success { border-color: #abd7be; background: linear-gradient(145deg, #fbfffc, #effbf4); }
.sales-card.success strong { color: #176b42; }
.sales-card.warning { border-color: #efc779; background: linear-gradient(145deg, #fffdfa, #fff5df); }
.sales-card.warning strong { color: #8a4b08; }
.control-section { margin-top: 28px; }
.control-section .section-heading { margin-top: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.metric-card { min-height: 142px; display: grid; align-content: start; gap: 5px; border: 1px solid #e1e6ef; border-radius: 16px; padding: 19px; background: white; color: #172033; box-shadow: 0 8px 30px rgba(32, 46, 78, .06); }
.metric-card:hover { border-color: #b9c8ee; text-decoration: none; transform: translateY(-1px); }
.metric-card span { color: #63708b; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.metric-card strong { margin-top: 4px; font-size: 2.2rem; line-height: 1; }
.metric-card small { color: #63708b; }
.metric-card.info { border-top: 4px solid #5a7ee0; }
.metric-card.warning { border-top: 4px solid #e3a12b; background: #fffdfa; }
.metric-card.critical { border-top: 4px solid #d7655c; background: #fffafa; }
.metric-card.healthy { border-top: 4px solid #62b787; }
.operations-section { margin: 30px 0 8px; }
.operations-board { overflow: hidden; border: 1px solid #dfe5ef; border-radius: 16px; background: white; box-shadow: 0 8px 30px rgba(32, 46, 78, .06); }
.operations-head, .operation-row { display: grid; grid-template-columns: minmax(250px, 1.35fr) 145px minmax(170px, .9fr) minmax(190px, 1fr) 175px; gap: 16px; align-items: center; }
.operations-head { padding: 12px 18px; background: #f1f4f9; color: #63708b; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.operation-row { position: relative; min-height: 112px; padding: 16px 18px; border-top: 1px solid #edf0f5; border-left: 5px solid #aebbd8; }
.operations-head + .operation-row { border-top: 0; }
.operation-row.current { border-left-color: #3157c8; background: #f8faff; }
.operation-row.hold { border-left-color: #e3a12b; background: #fffdfa; }
.operation-row.critical { border-left-color: #d7655c; background: #fffafa; }
.operation-row.completed { border-left-color: #62b787; background: #fbfffc; }
.operation-row.inactive { border-left-color: #98a2b3; background: #fafbfc; }
.operation-client { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; min-width: 0; }
.operation-client > div:last-child { min-width: 0; }
.operation-client > div:last-child > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-client p { margin: 4px 0; color: #63708b; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-client a { font-size: .82rem; }
.operation-state, .operation-team, .operation-task { display: grid; gap: 6px; min-width: 0; }
.operation-state { justify-items: start; }
.operation-state small, .operation-task small { color: #63708b; }
.operation-team > span.ready { color: #1c7a4a; font-weight: 700; }
.operation-team > span.missing { color: #a64c13; font-weight: 700; }
.operation-team a { font-size: .82rem; }
.operation-task > div { display: grid; gap: 4px; }
.operation-task > div.overdue strong { color: #b42318; }
.operation-task strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-actions, .operation-actions form { margin: 0; }
.operation-actions { display: grid; gap: 9px; }
.dashboard-action { width: 100%; display: inline-flex; justify-content: center; border: 0; border-radius: 9px; padding: 10px 12px; background: #e8edf8; color: #26334f; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; text-align: center; }
.dashboard-action:hover { text-decoration: none; filter: brightness(.97); }
.dashboard-action.primary { background: #3157c8; color: white; }
.dashboard-action.warning { background: #f6d899; color: #6e3b05; }
.dashboard-action.critical { background: #b42318; color: white; }
.operation-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: .77rem; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; }
.attention-columns { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.dashboard-ok { display: grid; gap: 6px; border-color: #abd7be; background: #f4fff8; color: #11683b; }
.dashboard-ok span { color: #63708b; }
.attention-list, .today-bookings { display: grid; gap: 10px; }
.attention-item { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 14px; border: 1px solid #e1e6ef; border-radius: 13px; padding: 14px 16px 14px 10px; background: white; color: #172033; }
.attention-item:hover { border-color: #b9c8ee; text-decoration: none; }
.attention-item i { width: 5px; height: 100%; min-height: 48px; border-radius: 999px; background: #5a7ee0; }
.attention-item.warning i { background: #e3a12b; }
.attention-item.critical i { background: #d7655c; }
.attention-item div { display: grid; gap: 3px; min-width: 0; }
.attention-item div > span { color: #63708b; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.attention-item strong, .attention-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-item small { color: #63708b; }
.attention-item b { color: #3157c8; }
.today-booking { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px; border: 1px solid #e1e6ef; border-left: 5px solid #aebbd8; border-radius: 13px; padding: 14px 16px; background: white; }
.today-booking.current { border-left-color: #3157c8; background: #f8faff; }
.today-booking.critical { border-left-color: #d7655c; background: #fffafa; }
.today-time { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.today-time strong { font-size: 1.15rem; }
.today-time span { color: #63708b; font-size: .82rem; }
.today-main { min-width: 0; }
.today-main > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.today-main p { margin: 6px 0; color: #63708b; }
.today-main small.ready, .day-load small.ready { color: #1c7a4a; }
.today-main small.missing, .day-load small.missing { color: #a64c13; font-weight: 700; }
.quick-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quick-screen-grid a { min-height: 108px; display: grid; align-content: center; gap: 6px; border: 1px solid #dfe5ef; border-radius: 13px; padding: 16px; background: white; color: #172033; }
.quick-screen-grid a:hover { border-color: #b9c8ee; text-decoration: none; }
.quick-screen-grid span { color: #63708b; font-size: .82rem; }
.customer-search-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; padding: 20px; margin-bottom: 24px; }
.customer-results { display: grid; gap: 12px; }
.customer-result { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 24px; padding: 20px; color: #172033; }
.customer-result:hover { border-color: #b9c8ee; text-decoration: none; }
.customer-result > div:first-child { display: grid; gap: 5px; }
.customer-result > div:first-child span { color: #63708b; }
.customer-result dl { display: flex; gap: 22px; margin: 0; }
.customer-result dl div { min-width: 68px; }
.customer-result b { color: #3157c8; }
.customer-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.customer-feedback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.customer-feedback a { min-height: 130px; display: grid; align-content: start; gap: 8px; padding: 18px; color: #172033; }
.customer-feedback a:hover { border-color: #b9c8ee; text-decoration: none; }
.customer-feedback span, .customer-feedback small { color: #63708b; }
@media (max-width: 700px) { .customer-search-form, .customer-result { grid-template-columns: 1fr; } .customer-result dl { justify-content: space-between; gap: 10px; } .customer-feedback, .customer-summary { grid-template-columns: 1fr; } }
.child-grid, .lead-child-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.child-card { display: grid; align-content: start; gap: 14px; padding: 20px; }
.child-card.archived { background: #f8f9fb; color: #667085; }
.child-card-heading { display: flex; justify-content: space-between; gap: 16px; }
.child-card-heading > div { display: grid; gap: 4px; }
.child-card details summary { color: #3157c8; cursor: pointer; font-weight: 700; }
.child-history-links { display: grid; gap: 7px; margin-top: 9px; }
.compact-child-form { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0f5; }
.archive-child-form { margin-top: 12px; text-align: right; }
.add-child-form { margin-top: 16px; }
.child-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lead-child-tools { align-items: start; margin-bottom: 24px; }
.child-checkboxes { display: grid; gap: 10px; }
@media (max-width: 700px) { .child-grid, .lead-child-tools { grid-template-columns: 1fr; } .child-card-heading { align-items: flex-start; flex-direction: column; } }
.week-load { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; padding: 2px 2px 12px; }
.day-load { min-width: 150px; display: grid; align-content: start; gap: 7px; border: 1px solid #e1e6ef; border-radius: 15px; padding: 16px; background: white; color: #172033; }
.day-load:hover { border-color: #b9c8ee; text-decoration: none; }
.day-load.today { border: 2px solid #5a7ee0; padding: 15px; }
.day-load-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.day-load-title span { color: #3157c8; font-weight: 800; text-transform: uppercase; }
.day-load-title strong { font-size: .82rem; }
.day-load-count { margin-top: 8px; font-size: 2rem; line-height: 1; }
.day-load > span { color: #63708b; font-size: .8rem; }
.day-load dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.day-load dl div { border-radius: 8px; padding: 8px; background: #f5f7fb; }
.day-load dt { font-size: .65rem; }
.day-load dd { font-size: .82rem; font-weight: 800; }
.day-load p { min-height: 34px; margin: 3px 0; color: #63708b; font-size: .76rem; line-height: 1.4; }
@media (max-width: 1100px) { .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sales-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-columns { grid-template-columns: 1fr; } .operations-head { display: none; } .operations-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .operation-row { grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; border: 1px solid #dfe5ef; border-left-width: 5px; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(32, 46, 78, .05); } .operation-client, .operation-actions { grid-column: 1 / -1; } }
@media (max-width: 700px) { .dashboard-heading, .activity-ribbon { align-items: stretch; flex-direction: column; } .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-shortcuts a { align-items: flex-start; padding: 12px; } .dashboard-shortcuts b { flex-basis: 30px; height: 30px; } .dashboard-shortcuts strong, .dashboard-shortcuts small { overflow: visible; text-overflow: clip; white-space: normal; } .sales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sales-card { min-height: 116px; padding: 15px; } .sales-card:first-child { grid-column: 1 / -1; min-height: 104px; } .dashboard-ribbons, .metric-grid, .operations-board, .quick-screen-grid { grid-template-columns: 1fr; } .operation-row { grid-template-columns: 1fr; padding: 15px; } .operation-client, .operation-actions { grid-column: auto; } .operation-client { grid-template-columns: 52px 1fr; } .operation-state { grid-template-columns: auto 1fr; align-items: center; } .operation-team, .operation-task { border-top: 1px solid #edf0f5; padding-top: 12px; } .today-booking { grid-template-columns: 52px 1fr; } .today-booking > a { grid-column: 2; } }
@media (max-width: 700px) { .staff-next-task { align-items: stretch; flex-direction: column; } .staff-next-task-action { text-align: left; } .staff-next-task-action .button, .personal-task-grid { width: 100%; } .personal-task-grid { grid-template-columns: 1fr; } }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #e8efff 0, transparent 38%), #f4f6fa; }
.login-shell { width: min(440px, 100%); }
.login-card { padding: 36px; }
.login-brand { margin: 0 0 28px; color: #3157c8; font-size: .82rem; font-weight: 900; letter-spacing: .18em; }
.login-card h1 { margin: 6px 0 8px; }
.login-form { margin-top: 24px; padding: 0; border: 0; box-shadow: none; }
.login-form .button { width: 100%; justify-content: center; margin-top: 4px; }
.notification-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.notification-summary article { display: grid; gap: 6px; padding: 20px; }
.notification-summary span { color: #63708b; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.notification-summary strong { font-size: 2rem; }
.notification-details { margin-top: 7px; color: #63708b; font-size: .82rem; }
.notification-details summary { cursor: pointer; color: #3157c8; }
.notification-details p { margin: 8px 0; white-space: pre-wrap; }
.error-text { color: #b42318; }
.badge.danger { background: #fff0ef; color: #9f241b; }
.badge.success { background: #e8f7ee; color: #176b42; }
.birthday-page { width: min(1240px, 92vw); }
.birthday-guide { margin-bottom: 22px; padding: 20px 24px; border-left: 5px solid #3157c8; }
.birthday-guide ol { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 12px 0; padding-left: 22px; }
.birthday-guide p { margin: 0; color: #63708b; }
.birthday-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
.birthday-summary small, .birthday-age, .birthday-page td small { display: block; margin-top: 5px; color: #63708b; font-size: .78rem; }
.birthday-allowed { border-top: 4px solid #62b787; }
.birthday-forbidden { border-top: 4px solid #d7655c; }
.birthday-row-forbidden { background: #fffafa; }
.birthday-phone { font-weight: 800; }
@media (max-width: 700px) { .birthday-guide ol { display: grid; } .birthday-summary { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .login-page { align-items: start; padding: 20px 14px; } .login-card { padding: 26px 22px; } }
@media (max-width: 700px) { .notification-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notification-channel-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.notification-channel-status div { display: grid; gap: 5px; }
.notification-channel-status span, .notification-user-heading p { margin: 0; color: #63708b; font-size: .84rem; }
.notification-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.notification-user { padding: 22px; }
.notification-user-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.notification-user-heading h2 { margin: 0 0 5px; }
.notification-event-grid { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.notification-event-grid label { display: flex; align-items: center; gap: 9px; border: 1px solid #e1e6ef; border-radius: 9px; padding: 10px 12px; font-weight: 650; }
.notification-event-grid input { width: auto; }
.notification-user > form:last-child { margin-top: 10px; }
.telegram-binding-instruction { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-bottom: 20px; border-color: #9db4ef; background: #f7f9ff; }
.binding-command { grid-column: 1 / -1; display: grid; gap: 6px; }
.binding-command code { overflow-wrap: anywhere; border-radius: 8px; padding: 11px 13px; background: #e8edfa; color: #243a77; }
.channel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.channel-heading span { color: #63708b; font-size: .8rem; }
.telegram-user-settings { margin-top: 18px; border-top: 1px solid #edf0f5; padding-top: 18px; }
.telegram-user-settings > div { display: grid; gap: 9px; }
.notification-test-form { margin-top: 14px; }
@media (max-width: 800px) { .notification-channel-status, .notification-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .notification-event-grid, .telegram-binding-instruction { grid-template-columns: 1fr; } .telegram-binding-instruction .button, .binding-command { grid-column: 1; } }
.customer-notification-help { display: grid; gap: 8px; margin-bottom: 20px; }
.disclosure { margin: 18px 0; border: 1px solid #e1e6ef; border-radius: 12px; padding: 16px 20px; background: white; }
.disclosure > summary, .visit-help > summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.disclosure[open] > summary { margin-bottom: 20px; }
.disclosure .form { padding: 16px 0; }
.visit-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.visit-choices h2 { margin-bottom: 8px; }
.visit-choices .button { justify-content: center; align-self: end; }
.visit-choices p { color: #52607a; }
.visit-help { margin-top: 24px; color: #52607a; }
.manager-home { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.3fr); gap: 0 24px; }
.manager-home > .page-heading, .manager-home > .flash, .manager-home > .read-only-note, .manager-home > .disclosure { grid-column: 1 / -1; }
.manager-home .attention-list { max-width: 100%; }
.manager-home > .page-heading { margin-bottom: 8px; }
.manager-home .operations-section { margin-top: 0; }
.manager-home > section > .section-heading { margin-top: 16px; }
.manager-home .attention-item { padding: 12px; }
.manager-home .attention-item span { text-transform: none; font-size: .92rem; font-weight: 600; letter-spacing: normal; }
.manager-home .attention-item small { font-size: .85rem; }
.manager-home .operations-board { display: block; }
.manager-home .operations-head { display: none; }
.manager-home .operation-row { grid-template-columns: 1fr 1fr; }
.manager-home .operation-client, .manager-home .operation-actions { grid-column: 1 / -1; }
.client-link { font-weight: 750; font-size: 1rem; }
.manager-home .sales-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .manager-home .operation-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .visit-choices, .manager-home, .manager-home .sales-grid, .manager-home .operation-row { grid-template-columns: 1fr; } .disclosure { padding: 16px; } .section-heading { gap: 12px; flex-wrap: wrap; } }
@media (max-width: 700px) {
    .calendar-day-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; padding: 12px; align-items: end; }
    .calendar-day-navigation .calendar-next { grid-column: 3; grid-row: 1; }
    .calendar-day-navigation > button { grid-column: 2; }
    .calendar-day-navigation > a { padding: 12px; }
    .calendar-day-navigation input { min-width: 0; }
    .container { margin-top: 24px; }
}
.customer-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.customer-rule form { display: grid; gap: 14px; }
.customer-communication { display: grid; gap: 16px; margin-top: 22px; }
.customer-communication-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.customer-communication-heading h2 { margin: 0; }
.customer-channel-summary { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #63708b; }
.customer-jobs { display: grid; gap: 8px; border-top: 1px solid #edf0f5; padding-top: 14px; }
.customer-jobs div { display: flex; justify-content: space-between; gap: 18px; }
.customer-jobs span { color: #63708b; font-size: .84rem; text-align: right; }
.price-helper { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -2px 0 16px; border-radius: 10px; padding: 11px 13px; background: #f1f5ff; color: #334a84; font-size: .88rem; }
.confirm-action { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #c8d1df; border-radius: 16px; padding: 24px; color: #23314b; }
.confirm-action::backdrop { background: #17233d99; }
.confirm-action h2 { margin-top: 0; }
.confirm-action p { line-height: 1.55; overflow-wrap: anywhere; }
.confirm-action .actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) { .customer-rule-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .customer-communication-heading, .customer-jobs div, .price-helper { display: grid; } .customer-jobs span { text-align: left; } }