/* Main operations UI. Existing management components inherit these shared tokens. */
:root {
  --ink: #1c2334;
  --muted: #667085;
  --line: #e4e7ed;
  --panel: #fff;
  --canvas: #f6f7fb;
  --forest: #303e98;
  --lime: #4d5bc5;
  --lime-soft: #eef0ff;
  --radius: 12px;
  --shadow: 0 3px 12px rgb(20 30 60 / 3%);
}
.mvp { color: var(--ink); background: var(--canvas); line-height: 1.5; }
.mvp button, .mvp input, .mvp select, .mvp textarea { font: inherit; }
.mvp button { min-height: 40px; }
.mvp h1, .mvp h2, .mvp h3, .mvp h4 { letter-spacing: -.025em; line-height: 1.3; }
.mvp h1 { font-size: 1.5rem; }
.mvp h2 { font-size: 1.2rem; }
.mvp h3 { font-size: 1.05rem; }
.mvp small, .mvp .helper-text { font-size: .875rem; color: var(--muted); }
.mvp p { color: var(--muted); }
.mvp button:focus-visible, .mvp a:focus-visible, .mvp input:focus-visible, .mvp select:focus-visible, .mvp textarea:focus-visible { outline: 3px solid #8997ff; outline-offset: 3px; }
.mvp button:disabled { opacity: .45; cursor: not-allowed; }
.mvp .app-shell { display: grid; grid-template-columns: 224px minmax(0,1fr); }
.mvp .sidebar { width: auto; height: 100dvh; position: sticky; top: 0; background: #fff; color: var(--ink); border-right: 1px solid var(--line); padding: 28px 14px 20px; overflow-y: auto; }
.mvp .sidebar::after, .mvp .nav-item.active::before { display: none; }
.mvp .brand { margin: 0 12px 30px; gap: 12px; }
.mvp .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: #354398; color: #fff; transform: none; font-size: 1.25rem; }
.mvp .brand-name { color: #172036; font-size: 1.2rem; }
.mvp .brand-name small { color: var(--muted); font-size: .75rem; letter-spacing: .12em; }
.mvp .nav-label { font-size: .75rem; color: #848c9c; margin: 22px 12px 8px; letter-spacing: .09em; }
.mvp .nav-list { gap: 3px; }
.mvp .nav-item { color: #667085; font-size: .9rem; font-weight: 500; border-radius: 7px; padding: 10px 12px; min-height: 44px; }
.mvp .nav-item:hover { color: #303e98; background: #f6f7fc; }
.mvp .nav-item.active { color: #334199; background: #edf0ff; font-weight: 700; }
.mvp .nav-item svg { width: 19px; height: 19px; }
.workspace-note { margin-top: auto; padding: 30px 12px 0; font-size: .8rem; }
.workspace-note strong { color: #475467; display: block; }
.workspace-note span { display: block; margin-top: 6px; color: #7c8495; }
.mvp .main { padding: 0; min-width: 0; }
.mvp .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; min-height: 104px; margin: 0; padding: 22px 32px; border-bottom: 1px solid var(--line); background: #fff; }
.mvp .page-title { margin: 3px 0 0; }
.mvp .eyebrow { font-size: .75rem; color: #7a8495; letter-spacing: .1em; margin: 0 0 4px; }
.heading-group { display: flex; gap: 12px; align-items: center; }
.mvp .top-actions { gap: 12px; }
.mvp .top-select-wrap { display: grid; gap: 4px; border: 0; background: transparent; padding: 0; }
.mvp .top-select-wrap span { color: #7a8495; font-size: .75rem; }
.mvp input, .mvp select, .mvp textarea { padding: 10px 12px; border: 1px solid #dce0e8; border-radius: 7px; min-height: 42px; color: var(--ink); background: #fff; max-width: 100%; }
.mvp textarea { resize: vertical; }
.mvp input[type=checkbox] { min-height: 0; width: 18px; height: 18px; accent-color: #4d5bc5; padding: 0; }
.mvp .local-banner { padding: 9px 32px; color: #786027; background: #fffbef; border-bottom: 1px solid #f1e9d2; font-size: .8rem; }
.mvp #mainView { padding: 28px 32px 44px; }
.mvp .view { animation: none; }
.mvp .section-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 22px; }
.mvp .section-toolbar h2 { margin: 0; }
.mvp .section-toolbar p { margin: 6px 0 0; font-size: .875rem; }
.mvp .primary-btn, .mvp .secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; padding: 10px 15px; font-size: .875rem; min-height: 42px; box-shadow: none; white-space: nowrap; }
.mvp .primary-btn { color: #fff; background: #4756bd; border: 1px solid #4756bd; }
.mvp .primary-btn:hover { background: #34439f; }
.mvp .secondary-btn { background: #fff; color: #394356; border: 1px solid #dce0e8; }
.mvp .secondary-btn:hover { background: #f6f7fb; }
.mvp .icon-btn { border-radius: 7px; background: #fff; border: 1px solid var(--line); width: 40px; height: 40px; padding: 4px; font-size: 1.4rem; box-shadow: none; color: #5f6980; }
.mvp .panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.mvp .panel-head { padding: 20px 22px; margin: 0; border-bottom: 1px solid #eef0f4; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mvp .panel-head h3 { margin: 0; }
.mvp .panel-head span { font-size: .875rem; color: var(--muted); }
.mvp .entity-link { border: 0; background: transparent; padding: 0; min-height: auto; color: #34439f; font-weight: 650; text-align: left; line-height: 1.5; white-space: normal; }
.mvp .entity-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mvp .text-link { color: #4452af; font-size: .875rem; }
.record-status { display: inline-flex; gap: 5px; align-items: center; font-size: .75rem; font-weight: 650; border-radius: 5px; padding: 4px 8px; white-space: nowrap; background: #f0f2f5; color: #667085; }
.record-status.confirmed { background: #edf0ff; color: #4c57b7; }
.record-status.checked_in, .record-status.active { background: #e8f5ef; color: #238467; }
.record-status.checked_out { background: #f0f2f5; color: #667085; }
.record-status.cleaning { background: #fff5df; color: #99691a; }
.record-status.maintenance, .record-status.cancelled { background: #fff0ee; color: #b5584d; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.metric { padding: 22px; }
.metric > span { color: var(--muted); font-size: .875rem; }
.metric strong { display: block; font-size: 2rem; font-weight: 650; margin-top: 10px; }
.metric strong small { font-size: 1rem; font-weight: 400; }
.operations-panel { margin-bottom: 20px; }
.operations-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,.7fr) auto; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #f0f1f5; }
.operations-row:last-child { border-bottom: 0; }
.operations-row small { display: block; margin-top: 4px; }
.empty-inline { padding: 24px; color: var(--muted); font-size: .9rem; }
.mvp .empty-state { padding: 50px 24px; text-align: center; }
.list-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.list-toolbar > span { margin-left: auto; font-size: .875rem; color: var(--muted); }
.list-toolbar.standalone { padding: 0; border: 0; margin-bottom: 22px; }
.search-control { flex: 1; min-width: 200px; max-width: 480px; }
.search-control input { width: 100%; }
.mvp .table-scroll { overflow: auto; }
.mvp table { width: 100%; border-collapse: collapse; }
.mvp .data-table th { padding: 14px 20px; color: #788193; background: #fafbfc; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.mvp .data-table td { padding: 18px 20px; border-bottom: 1px solid #edf0f5; font-size: .875rem; vertical-align: middle; }
.mvp .data-table tr:last-child td { border-bottom: 0; }
.mvp .data-table td small { display: block; margin-top: 5px; }
.owner-record-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(285px,1fr)); gap: 20px; }
.owner-record { padding: 22px; }
.owner-record header { display: flex; gap: 12px; align-items: center; }
.owner-record h3 { margin: 0; }
.owner-record header p { margin: 4px 0 0; font-size: .875rem; }
.initial-mark, .profile-mark { display: grid; place-items: center; background: #eef0fc; color: #4b56a4; border-radius: 12px; width: 44px; height: 44px; font-weight: 700; }
.profile-mark { width: 64px; height: 64px; font-size: 1.4rem; margin-bottom: 20px; }
.pet-records { margin: 20px 0; }
.pet-records > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f0f1f5; }
.pet-records > div > span:last-child { margin-left: auto; color: #9098a8; }
.pet-records small { display: block; }
.pet-initial { border: 1px solid var(--line); width: 32px; height: 32px; border-radius: 50%; text-align: center; line-height: 30px; color: #697286; }
.room-record-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: 18px; }
.room-record { padding: 20px; }
.room-record header, .room-record footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-record h3 { margin: 0; }
.room-record p { font-size: .8rem; margin: 6px 0 16px; }
.room-resident { min-height: 54px; padding: 12px 0; }
.room-resident > span { color: #8a92a2; font-size: .875rem; }
.room-record footer { padding-top: 14px; border-top: 1px solid #eef0f5; font-size: .875rem; }
.room-record footer small { font-weight: 400; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: #f1f3f8; border: 1px solid #e5e8ef; border-radius: 8px; }
.segmented button { background: transparent; border: 0; color: #70798b; padding: 7px 12px; font-size: .875rem; border-radius: 5px; min-height: 34px; }
.segmented button[aria-pressed=true] { background: #fff; color: #34439f; box-shadow: 0 1px 4px rgb(20 30 60 / 8%); font-weight: 650; }
.calendar-panel { overflow: hidden; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; gap: 14px; flex-wrap: wrap; }
.calendar-navigation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calendar-navigation input { font-size: .875rem; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 0 20px 18px; font-size: .8rem; color: #737c8e; }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend-reserved { background: #7b86df; }.legend-staying { background: #3e9c7b; }.legend-complete { background: #b6bcc9; }.legend-blocked { background: #d2ad69; }
.calendar-legend small { margin-left: auto; font-size: .75rem; }
.calendar-scroll { overflow: auto; max-height: 65vh; border-top: 1px solid var(--line); }
.mvp .timeline-table { table-layout: fixed; min-width: 1050px; }
.mvp .timeline-table th, .mvp .timeline-table td { border-right: 1px solid #e9ecf2; border-bottom: 1px solid #e9ecf2; padding: 7px; text-align: left; vertical-align: top; }
.mvp .timeline-table thead th { position: sticky; top: 0; z-index: 2; background: #fafbfe; text-transform: none; letter-spacing: 0; color: #536078; font-size: .875rem; height: 68px; }
.mvp .timeline-table thead th button { border: 0; background: transparent; width: 100%; text-align: left; font-weight: 600; color: inherit; }
.timeline-table small, .timeline-table th span { display: block; font-size: .75rem; color: #8b94a6; font-weight: 400; margin-top: 4px; }
.mvp .timeline-table .room-column { width: 172px; min-width: 172px; position: sticky; left: 0; background: #fff; z-index: 1; padding: 15px 16px; border-right: 1px solid #dce1eb; }
.mvp .timeline-table thead .room-column { z-index: 3; background: #fafbfe; }
.mvp .timeline-table td.today { background: #fafaff; }
.mvp .timeline-table th.today { background: #eef0ff; color: #4251ae; }
.calendar-stay { background: #eef0ff; border-left: 3px solid #7c87da; border-radius: 5px; padding: 8px; margin-bottom: 5px; }
.calendar-stay.checked_in { background: #eaf6f0; border-color: #58a68c; }
.calendar-stay.checked_out { background: #f1f3f6; border-color: #b7bfcd; }
.calendar-stay .entity-link { font-size: .875rem; }
.event-meta { display: block; text-align: left; background: none; border: 0; padding: 3px 0 0; font-size: .75rem !important; color: #737d93; min-height: 30px !important; }
.event-meta span { display: block; font-size: .75rem; }
.empty-slot { width: 100%; min-height: 66px !important; display: grid; place-items: center; border: 1px dashed transparent; background: transparent; color: #7782b9; border-radius: 5px; font-size: .8rem !important; }
.empty-slot span { opacity: 0; }.empty-slot:hover, .empty-slot:focus-visible { background: #f4f5fe; border-color: #d9def1; }.empty-slot:hover span, .empty-slot:focus-visible span { opacity: 1; }
.readonly-slot { color: #a0a6b4; }
.unavailable-slot { width: 100%; min-height: 66px !important; border: 0; border-radius: 5px; background: repeating-linear-gradient(-45deg,#faf7f1,#faf7f1 5px,#f5f1e9 5px,#f5f1e9 6px); color: #9b855f; font-size: .75rem !important; }
.month-scroll { overflow: auto; border-top: 1px solid var(--line); }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-width: 840px; }
.month-weekdays span { padding: 12px 14px; background: #fafbfc; color: #7d8798; font-size: .8rem; border-bottom: 1px solid var(--line); }
.month-day { min-height: 160px; padding: 8px; border-right: 1px solid #e9ecf2; border-bottom: 1px solid #e9ecf2; }
.month-day.outside-month { background: #fafbfd; opacity: .65; }.month-day.today { background: #fafaff; }
.month-day header { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 5px; }
.month-day header button { border: 0; background: transparent; border-radius: 6px; min-width: 32px; min-height: 32px; color: #667085; font-size: .875rem; }
.month-day.today header button { background: #4d5bc5; color: #fff; }
.month-day header span { font-size: .75rem; color: #9198a7; }
.month-event { border: 0; border-left: 3px solid #8993dd; border-radius: 4px; background: #eef0ff; text-align: left; display: block; width: 100%; margin: 4px 0; padding: 6px; color: #525dac; font-size: .8rem !important; }
.month-event.checked_in { border-color: #64ab90; background: #eaf6f0; color: #40836b; }.month-event.checked_out { border-color: #b9c1ce; background: #f0f2f6; color: #7d8696; }
.month-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.month-event small { font-size: .75rem; color: inherit; }
.more-events, .month-add { background: transparent; border: 0; color: #737fa6; font-size: .75rem !important; padding: 4px; min-height: 28px !important; }.month-add { width: 100%; }
.detail-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px,100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--line); box-shadow: -20px 0 70px rgb(22 29 53 / 15%); color: var(--ink); background: #fff; }
.detail-panel::backdrop { background: rgb(24 32 55 / 27%); }
.detail-inner { min-height: 100%; }.detail-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 26px; background: #fff; border-bottom: 1px solid var(--line); }.detail-header h2 { margin: 4px 0 0; font-size: 1.4rem; }.detail-body { padding: 26px; }.detail-body > .record-status { margin-bottom: 20px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 4px 0 24px; }.detail-field { min-width: 0; }.detail-field dt { color: #8a93a3; font-size: .8rem; margin-bottom: 5px; }.detail-field dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.detail-section { margin: 26px 0; }.detail-section h3 { padding-bottom: 12px; margin: 0; border-bottom: 1px solid var(--line); }.detail-record { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #f0f2f5; }.detail-record > div { min-width: 0; }.detail-record small { display: block; margin-top: 5px; }.detail-record:last-child { border-bottom: 0; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }.detail-form { display: grid; gap: 18px; }.mvp .detail-form .field { display: grid; gap: 7px; font-size: .875rem; }.inline-form { display: flex; align-items: end; gap: 10px; margin-top: 18px; }.inline-form label { flex: 1; display: grid; gap: 7px; font-size: .875rem; }.room-link-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding-top: 18px; }.care-instruction { padding: 14px 0; white-space: pre-wrap; }.confirm-box, .notice { background: #fff9e9; border: 1px solid #f0e2bf; padding: 18px; border-radius: 8px; margin-top: 18px; }.confirm-box p { margin: 0 0 14px; color: #836c38; }.detail-feedback { padding: 12px 18px; background: #fff0e9; color: #99472e; border-radius: 7px; margin: 15px 0; font-size: .875rem; }
.mvp .modal { border-radius: 12px; max-height: 90dvh; overflow-y: auto; }.mvp .modal-backdrop { background: rgb(24 32 55 / 35%); }.mvp .modal h3 { font-size: 1.25rem; }.mvp .step-badge { background: #edf0ff; color: #4453aa; border-radius: 7px; }.mvp .form-section { border-color: var(--line); }.mvp .modal-actions { border-top: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }.mvp .close-btn { color: #6c768b; }.mvp .field label, .mvp .care-options label { font-size: .875rem; }.mvp .sticky-actions { position: sticky; bottom: 0; background: #fff; }
.mvp .care-board { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); }.mvp .care-card { padding: 22px; }.mvp .care-card-head { border-color: var(--line); }.mvp .care-progress i { background: #4d5bc5; }.mvp .care-count.complete { background: #e8f5ef; color: #238467; }.mvp .care-task-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eef0f5; }.care-task-row > div { flex: 1; }.care-task-row small { display: block; }.care-task-row.done .entity-link { text-decoration: line-through; color: #99a1b0; }.mvp .add-task-link { color: #4756b2; }
.mvp .team-layout { gap: 20px; }.mvp .staff-row { padding: 16px 20px; }.mvp .branch-monogram { background: #eef0ff; color: #4654b2; }.mvp .branch-card { padding: 22px; }.mvp .profit-hero { background: #303e7e; }.mvp .profit-hero h2 { color: #fff; font-size: 2rem; }.mvp .permission-check input { accent-color: #4d5bc5; }.mvp .permission-table th, .mvp .permission-table td { padding: 14px; font-size: .875rem; }.mvp .access-panel { margin-top: 22px; }.mvp .toast { background: #253252; color: #fff; font-size: .875rem; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mvp .menu-toggle, .mvp .mobile-nav { display: none; }
@media (max-width: 1100px) { .mvp .app-shell { grid-template-columns: 196px minmax(0,1fr); }.mvp #mainView { padding: 22px; }.mvp .topbar { padding: 20px 22px; }.mvp .local-banner { padding: 9px 22px; }.metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.mvp .top-actions { flex-wrap: wrap; } }
@media (max-width: 800px) {
  .mvp .app-shell { display: block; }.mvp .sidebar { display: none; }.mvp .sidebar.is-open { display: flex; position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40; box-shadow: 20px 0 70px rgb(22 29 53 / 20%); }.mvp .menu-toggle { display: inline-grid; place-items: center; }.mvp .topbar { gap: 16px; }.mvp .top-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.mvp .top-select-wrap select { width: 100%; font-size: .875rem; }.mvp .local-banner span { display: none; }.mvp #mainView { padding: 22px 16px 100px; }.mvp .mobile-nav { display: flex; justify-content: space-around; align-items: center; background: #fff; border-top: 1px solid var(--line); padding: 7px 5px max(8px,env(safe-area-inset-bottom)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; gap: 0; }.mvp .mobile-item { display: grid; place-items: center; gap: 3px; border: 0; background: transparent; color: #67718a; padding: 6px 8px; font-size: .75rem; }.mvp .mobile-item svg { width: 21px; height: 21px; }.calendar-legend small { margin-left: 0; }.calendar-toolbar { padding: 14px; }.calendar-scroll { max-height: 65dvh; }.calendar-legend { padding: 0 14px 14px; gap: 10px; }.empty-slot span { opacity: 1; }.operations-row { grid-template-columns: 1fr auto; }.operations-row > button { grid-column: 1 / -1; }.mvp .booking-form-grid, .mvp .team-layout, .mvp .finance-v2-grid { grid-template-columns: 1fr; }.mvp .section-toolbar .primary-btn { min-height: 44px; }.room-filters { overflow-x: auto; max-width: 100%; }.room-filters button { white-space: nowrap; }.mvp .data-table { min-width: 950px; }
}
@media (max-width: 480px) { .mvp h1 { font-size: 1.2rem; }.mvp .topbar { padding: 16px; }.mvp .local-banner { padding: 8px 16px; }.metric { padding: 16px; }.metric strong { font-size: 1.7rem; }.detail-body, .detail-header { padding: 20px; }.detail-grid { gap: 18px 14px; }.detail-actions > button { flex: 1; }.inline-form { align-items: stretch; flex-direction: column; }.mvp .modal-wide { width: 100%; }.mvp .form-grid { grid-template-columns: 1fr; }.mvp .modal { padding: 20px; }.mvp .modal-backdrop { padding: 10px; }.owner-record-grid, .room-record-grid { grid-template-columns: 1fr; }.list-toolbar > span { margin-left: 0; }.calendar-navigation input { max-width: 145px; }.calendar-legend { font-size: .75rem; }.mvp .section-toolbar { align-items: flex-start; }.mvp .section-toolbar > .primary-btn { width: 100%; }.mvp .care-board { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mvp *, .mvp *::before, .mvp *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }