/* PiCats Home 4.0.29 — shared visual language from the native Home apps.
   Load after the functional screen styles. Booking/payment/chat status colours
   and the chessboard's measured cells are deliberately outside this theme.
   Screen-only: signed documents and all existing print layouts stay unchanged. */
@media screen {
:root {
  color-scheme: light;
  --pc-brand: #6495ed;
  --pc-action: #315fbf;
  --pc-action-hover: #244eaa;
  --pc-action-pressed: #21458f;
  --pc-link: #1769c2;
  --pc-ink: #172a4d;
  --pc-muted: #5f728e;
  --pc-surface: #ffffff;
  --pc-canvas: #f5f8ff;
  --pc-soft: #eef4ff;
  --pc-soft-strong: #e2ecff;
  --pc-border: #dce6f5;
  --pc-border-strong: #b9cdf0;
  --pc-shadow: 0 4px 18px rgb(40 75 136 / 5%);
  --pc-shadow-raised: 0 16px 46px rgb(31 59 109 / 14%);
  --pc-radius: 18px;
  --line: var(--pc-border);
  --board-month-a: #dfeaff;
  --board-month-b: #d7e5fb;
  --board-dayhead-a: #eef4ff;
  --board-dayhead-b: #e6effd;
  --board-room: #f1f6ff;
  --board-room-head: #e1ebfc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--pc-ink);
  background: var(--pc-canvas);
}

body {
  color: var(--pc-ink);
  background: var(--pc-canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body :is(button, input, select, textarea) { font-family: inherit; }
body :is(h1, h2, h3, h4) { color: var(--pc-ink); letter-spacing: -.025em; }
body h1 { font-weight: 750; }
body h2 { font-weight: 720; }
body h3 { font-weight: 680; }
body a { color: var(--pc-link); text-underline-offset: 3px; }
body .muted, body .status-help, body .guest-note { color: var(--pc-muted); }
body :is(input[type=checkbox], input[type=radio]) { accent-color: var(--pc-action); }
body :is(button, summary, a, input, select, textarea):focus-visible {
  outline: 3px solid rgb(100 149 237 / 42%);
  outline-offset: 3px;
}
body :is(button, summary) { -webkit-tap-highlight-color: transparent; }
body button {
  color: var(--pc-ink);
  background-color: var(--pc-surface);
  border-color: var(--pc-border-strong);
  border-radius: 12px;
  font-weight: 570;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body button:disabled { cursor: not-allowed; }
body button:not(:disabled):hover { border-color: #a5bfe9; }
body button.primary,
body .primary,
body .guest-pet-tab.active,
body .settings-menu-btn.active,
body .booking-stage-actions .stage-main.stage-current,
body .booking-stage-actions button.stage-current {
  color: #fff;
  background: var(--pc-action);
  border-color: var(--pc-action);
  box-shadow: 0 3px 8px rgb(49 95 191 / 12%);
}
body button.primary:not(:disabled):hover,
body .guest-pet-tab.active:not(:disabled):hover,
body .settings-menu-btn.active:not(:disabled):hover,
body .booking-stage-actions button.stage-current:not(:disabled):hover {
  background: var(--pc-action-hover);
  border-color: var(--pc-action-hover);
}
body button.primary:not(:disabled):active { background: var(--pc-action-pressed); }
body .primary:disabled { opacity: .5; box-shadow: none; }
body .danger {
  color: #a92c36;
  border-color: #edb9bf;
  background: #fff4f5;
}
body .danger:not(:disabled):hover { color: #90232b; background: #ffeaed; border-color: #df9ba5; }
body .linkish, body .link-button { color: var(--pc-link); }

body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
body select, body textarea {
  background-color: #fff;
  border-color: var(--pc-border-strong);
  border-radius: 11px;
  color: var(--pc-ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body input::placeholder, body textarea::placeholder { color: #8090a7; opacity: 1; }
body input:focus, body select:focus, body textarea:focus {
  border-color: var(--pc-brand);
  box-shadow: 0 0 0 3px rgb(100 149 237 / 12%);
}
body input:disabled, body select:disabled, body textarea:disabled {
  background-color: #f2f5fa;
  color: #71829a;
}
body .field label, body .modal label, body .center-card label { color: #4c607e; font-weight: 550; }
body .field-help { color: var(--pc-muted); }
body .field :is(input, select), body .modal :is(input, select) { min-height: 40px; }
body .field :is(input[type=checkbox], input[type=radio]),
body .modal :is(input[type=checkbox], input[type=radio]) { min-height: 0; }
body :is(.modal-actions, .inline-buttons, .payment-actions, .document-create-buttons) > button,
body :is(.setting-row, .settings-menu, .navigation-menu-actions) > button {
  min-height: 42px;
  padding: 10px 16px;
}
body :is(.primary, .payment-action-btn) { min-height: 42px; }

/* Keep the existing responsive navigation and its measured sticky offsets. */
body .home-header {
  background: #fff;
  border-bottom-color: var(--pc-border);
  box-shadow: 0 3px 18px rgb(34 66 121 / 4%);
}
body .home-brand-mark {
  background: var(--pc-action);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 9px rgb(49 95 191 / 12%);
}
body .home-brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
body .home-brand #programBrand { color: #1b2d4e; font-weight: 750; }
body .home-brand-caption { color: #7787a0; letter-spacing: .01em; }
body .home-version { background: #f0f4fc; color: #6b7e9d; }
body .home-primary-nav > .tab,
body .home-primary-nav > .home-menu > summary {
  color: #5a6d88;
  border-radius: 13px;
  font-weight: 620;
}
body .tab.active,
body .home-primary-nav > .tab.active,
body .home-primary-nav > .home-menu > summary.active,
body .home-menu-panel .tab.active {
  color: #2857b4;
  background: var(--pc-soft);
  border-color: #d9e5fc;
  box-shadow: none;
}
body .home-header button:hover,
body .home-header summary:hover {
  color: #2857b4;
  background: #f0f5ff;
}
body .home-header button:focus-visible,
body .home-header summary:focus-visible { outline-color: rgb(100 149 237 / 50%); }
body .home-header .home-menu-trigger {
  color: #526985;
  background: #fff;
  border-color: var(--pc-border);
  border-radius: 13px;
}
body .home-menu[open] > summary {
  color: #2857b4;
  border-color: var(--pc-border-strong);
  background: var(--pc-soft);
}
body .home-menu-panel {
  background: #fff;
  color: var(--pc-ink);
  border-color: var(--pc-border);
  border-radius: 20px;
  padding: 9px;
  box-shadow: var(--pc-shadow-raised), 0 2px 5px rgb(32 62 112 / 4%);
}
body .home-menu-panel button,
body .home-menu-panel .tab { color: #3f587b; border-radius: 12px; font-weight: 560; }
body .home-menu-panel button:hover,
body .home-menu-panel .tab:hover { background: #f1f6ff; color: #2857b4; }
body .home-menu-group + .home-menu-group,
body .home-header .home-primary-nav,
body .home-profile-identity { border-color: #e7eef9; }
body .home-menu-heading { color: #8392aa; letter-spacing: .08em; font-weight: 680; }
body .home-menu-divider { background: #e8eff9; }
body .home-menu-panel button small { color: #7d8da5; }
body .home-action-symbol {
  color: #4975c7;
  background: #eef4ff;
  border-color: #dce7fc;
  border-radius: 10px;
}
body .home-header .home-profile-trigger { background: #f4f7fd; border-color: transparent; }
body .home-user-initials { color: #315fbf; background: #e4edff; border-radius: 11px; }
body .home-profile-trigger #who, body .home-profile-identity { color: #3b5276; }
body .home-menu-panel #logoutBtn { color: #a84b54; }
body .home-menu-panel #logoutBtn:hover { color: #992f3d; background: #fff2f4; }

/* Sign-in uses the same calm surfaces and large controls as mobile Home. */
body .center-card {
  width: min(420px, calc(100% - 32px));
  margin: 9vh auto;
  padding: 30px;
  background: #fff;
  border-color: #e0e9f8;
  border-radius: 28px;
  box-shadow: 0 14px 50px rgb(40 74 131 / 8%);
}
body #login h1 { margin: 12px 0 6px; font-size: 29px; line-height: 1.2; letter-spacing: -.04em; }
body #login > .muted { margin: 8px 0 24px; font-size: 13px; line-height: 1.55; }
body #login label { margin: 16px 0; font-size: 13px; }
body #login input { min-height: 48px; margin-top: 7px; padding: 12px 14px; border-radius: 14px; font-size: 16px; }
body #loginBtn { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 24px; font-size: 16px; font-weight: 650; }
body #forgotOwnerPassword { display: block; margin: 18px auto 0; padding: 6px 0; border: 0; background: transparent; color: var(--pc-link); font-size: 12px; }
body #login .home-login-logo { display: block; width: 104px; height: 104px; margin: 0 auto 22px; border-radius: 24px; object-fit: contain; }
body #loginError { margin-top: 14px; font-size: 13px; line-height: 1.5; }

/* Working surfaces: generous cards, compact operational tables. */
body #app > main { padding: 20px; }
body .toolbar {
  gap: 9px;
  padding: 12px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--pc-border);
  border-radius: 17px;
  box-shadow: var(--pc-shadow);
}
body .toolbar > button, body .toolbar > select { min-height: 38px; padding: 8px 12px; }
body .toolbar :is(input, select) { padding: 9px 12px; }
body .toolbar .booking-search-clear { min-height: 26px; padding: 0; border-radius: 50%; }
body .cards { gap: 10px; }
body .client-card,
body .settings-panel,
body .document-row,
body .history-panel,
body .booking-client-block,
body .booking-dates-block,
body .primary-placement-card,
body .payment-panel,
body .pay-stat,
body .channel-card,
body .report-rule-card,
body .task-config-card,
body .today-task-row,
body .tomorrow-prep-card,
body .navigation-menu-row,
body .slide-admin-row {
  border-color: var(--pc-border);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
}
body .client-card { padding: 16px 18px; }
body .client-card.black { background: #fff7f8; border-color: #edbdc3; }
body .settings-panel { padding: 20px; background: #fff; }
body .settings-panel > h2 { margin-top: 0; }
body .settings-menu {
  padding: 8px;
  gap: 6px;
  background: #edf3fc;
  border-color: var(--pc-border);
  border-radius: 17px;
}
body .settings-menu-btn { min-height: 40px; border: 1px solid transparent; border-radius: 12px; color: #526b91; }
body .settings-panel details { padding: 14px; background: #f8faff; border-color: var(--pc-border); border-radius: 14px; }
body .settings-panel summary { color: #3b557e; font-weight: 620; }
body :is(.summary, .guest-summary, .backup-status, .service-targets, .booking-stage-actions) {
  background: #f5f8ff;
  border-color: var(--pc-border);
  border-radius: 15px;
}
body .sum-item b, body .pay-stat b { color: #234779; font-variant-numeric: tabular-nums; }
body .pay-stat { background: #fff; }
body :is(.passport-box, .pet-section, .doc-automation-grid > div, .tablet-setting, .qr-settings) {
  border-color: var(--pc-border);
  border-radius: 16px;
}
body .doc-automation-grid > div { background: #f8faff; }
body .qr-settings, body .tablet-setting { background: #f3f7ff; }
body :is(.empty-state, .settings-hint) {
  color: var(--pc-muted);
  background: #fbfcff;
  border-color: #cbdaf2;
  border-radius: 17px;
  padding: 20px;
}
body .empty-state.compact { padding: 16px; }
body :is(.badge, .pill, .count-badge) { border-radius: 9px; }
body .badge:not([class*=status]):not(.home-version) { background: #eef3fc; color: #617795; }
body .today-task-row:hover, body .tomorrow-prep-card:hover { background: #f1f6ff; border-color: #bfd2f3; }
body .today-task-kind { color: #3765b8; }
body .navigation-menu-scope, body .navigation-menu-choice small { color: var(--pc-muted); }
body .navigation-menu-status:not(.error) { color: #3765b8; }
body .navigation-menu-choice input[type=checkbox] { accent-color: var(--pc-action); }
body .navigation-menu-choice b { color: var(--pc-ink); }
body .notice-info { color: #31598c; background: #eff5ff; border-color: #c8dafa; border-radius: 13px; }

/* Shape and typography only: statuses keep their existing colours. */
body :is(.table-wrap .data-table, .tariffs, .room-table, .option-table) { font-variant-numeric: tabular-nums; }
body :is(.table-wrap .data-table th, .tariffs th, .room-table th, .option-table th) {
  color: #506b90;
  background: #f0f5fd;
  border-color: var(--pc-border);
  font-size: 12px;
  font-weight: 680;
  text-align: left;
}
body :is(.table-wrap .data-table td, .tariffs td, .room-table td, .option-table td) { border-color: #e5edf9; }
body .document-row { padding: 13px 14px; }
body :is(.document-row small, .document-row .muted, .invStatic small) { color: var(--pc-muted); }
body :is(.booking-audit-list, .report-preview, .archived-value) { border-color: var(--pc-border); background: #f8faff; border-radius: 13px; }
body .audit-row { border-bottom-color: #e5edf9; }
body .guest-pet-tab { min-height: 38px; border-radius: 12px; }
body .booking-stage-actions button { border-radius: 11px; }
body .payment-panel { background: #fbfcff; }
body .payment-method-grid button { min-height: 60px; border-radius: 16px; }

/* Preserve modal dimensions, scroll containers and every form field ID. */
body .modal-backdrop { background: rgb(18 35 66 / 43%); }
body .modal-shell { border: 1px solid rgb(220 230 245 / 80%); border-radius: 24px; box-shadow: 0 26px 90px rgb(15 34 69 / 24%); }
body .modal { padding: 24px; }
body .modal > h2 { margin-bottom: 18px; }
body .modal-actions { padding-top: 16px; border-top: 1px solid #e8eff9; }
body .mini-list { border-color: var(--pc-border); border-radius: 13px; box-shadow: var(--pc-shadow-raised); }
body .mini-item { border-bottom-color: #e8eff9; }
body .mini-item:hover { background: #f0f5ff; }
body .mini-item.black:hover { background: #fff0f2; }
body .history-overlay { background: rgb(18 35 66 / 46%); }

/* No cell heights/widths/padding changes: drag, resize and sticky headers agree
   with the original chessboard geometry and all booking semantic fills. */
body .board-wrap { border-color: #cbdaf0; border-radius: 15px; box-shadow: var(--pc-shadow); }
body .room-head.month, body .room-head.dayhead { color: #38557d; }
body .room-cell:not(.archive-room-cell) { color: #2c496f; }
body .room-cell:not(.archive-room-cell) small { color: #6a7e99; }
body .board-day.empty:not(.booked):hover { box-shadow: inset 0 0 0 1px #7ca2e6; }
body .board-day.selected:not(.booked) { background: #dce9ff !important; }
body .board .today { outline-color: #315fbf; }
body .board-search-match { outline-color: #6495ed; }

/* Chat chrome follows the blue native palette. Bubble sides, status receipts,
   unread badges, media controls and their dimensions are left to chat CSS. */
body .chat-hub-sidebar, body .chat-hub-conversation-pane { border-color: #d3e1f7; border-radius: 19px; }
body .chat-hub-sidebar .chat-hub-search { background: #fff; border-bottom-color: #e5edf9; }
body .chat-hub-sidebar-title { color: #546f96; }
body .chat-hub-empty-conversation { color: #7185a3; }
body .chat-hub-empty-conversation > b { color: #3d5d8b; }

/* On phones the fixed 250px sidebar previously squeezed a conversation to a
   few pixels. Keep both existing panes, with independent usable scroll areas. */
@media (max-width: 680px) {
  body #app .chat-hub-split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 12px;
  }
  body .chat-hub-split > .chat-hub-sidebar {
    height: clamp(180px, 28dvh, 220px);
    min-height: 0;
    max-height: 220px;
    overflow-y: auto;
  }
  body .chat-hub-split > .chat-hub-conversation-pane {
    min-height: 420px;
    height: max(420px, calc(100dvh - var(--pc-header-height) - 32px));
    min-width: 0;
  }
  body .chat-hub-conversation-pane > .chat-hub-conversation {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  body .chat-hub-conversation-pane .chat-hub-messages {
    min-width: 0;
    padding: 12px;
  }
  body .chat-hub-conversation-pane .chat-hub-composer { min-width: 0; }
  body .chat-hub-conversation-pane .chat-hub-composer textarea {
    min-width: 0;
    width: 0;
    flex: 1 1 0%;
  }
  body .chat-hub-conv-head > div { min-width: 0; }
  body .chat-hub-conv-head h2 { overflow-wrap: anywhere; }
}

@media (max-width: 1279px) {
  body .home-header .home-primary-nav { border-top-color: #e8eff9; }
  body #app > main { padding: 16px; }
}
@media (max-width: 760px) {
  body #app > main { padding: 12px; }
  body .toolbar { padding: 10px; gap: 8px; border-radius: 15px; }
  body .toolbar > input { min-width: min(200px, 100%); }
  body .modal-backdrop { padding: 10px; }
  body .modal-shell { border-radius: 20px; }
  body .modal { padding: 18px; }
  body .settings-panel { padding: 15px; border-radius: 18px; }
  body .client-card { padding: 14px; }
  body .summary { gap: 10px; }
}
@media (max-width: 650px) {
  body .home-header .home-tools-trigger { background: #f0f5ff; border-color: transparent; }
  body .home-header .home-profile-trigger { background: transparent; }
  body .home-menu-panel { border-radius: 18px; }
  body .home-header .home-primary-nav > .tab,
  body .home-header .home-primary-nav > .home-menu > summary { border-radius: 11px; }
}
@media (max-width: 430px) {
  body .center-card { padding: 26px 22px; margin: 6vh auto; border-radius: 24px; }
  body #login h1 { font-size: 27px; }
  body .modal-actions { flex-wrap: wrap; }
  body .modal-actions > button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, input, select, textarea, summary) { transition: none; }
}
}