/* PawCard 31.0.3 — compact phone layout, loaded after the desktop styles. */
.header-title-line { display: flex; align-items: center; gap: 9px; }
#mobileDirectoryCount, .directory-filters-toggle, .mobile-earn-summary,
.mobile-schedule-options-toggle, .mobile-schedule-options,
.mobile-schedule-status, .mobile-earn-filters-toggle { display: none; }
.directory-search-row { display: flex; align-items: flex-start; gap: 8px; }
.directory-search-row .search-wrap { flex: 1; min-width: 0; }
.earnings-breakdown { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.earn-filters-panel, .earn-compact-toolbar { display: contents; }

@media (max-width: 768px) {
  :root {
    --mobile-nav-content: 52px;
    --mobile-nav-safe: env(safe-area-inset-bottom, 0px);
    --mobile-nav-height: calc(var(--mobile-nav-content) + var(--mobile-nav-safe));
  }
  .app-shell { padding-bottom: var(--mobile-nav-height); }
  .app-shell.mobile-nav-hidden { padding-bottom: 0; }
  .workspace-header {
    height: calc(64px + env(safe-area-inset-top, 0px));
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  }
  .workspace-header h1 { font-size: 25px; line-height: 29px; margin-top: 0; }
  .header-kicker { font-size: 12px; line-height: 15px; }
  #mobileDirectoryCount { display: inline-flex; align-items: center; font-size: 12px; min-height: 23px; padding-inline: 7px; }
  .workspace-actions > #globalCreate { display: none; }
  .workspace-actions { gap: 2px; }
  .workspace-actions .sync-indicator { width: 36px; }
  .workspace-actions .icon-button { width: 44px; height: 48px; }
  #createMenu {
    position: fixed; top: auto; bottom: calc(var(--mobile-nav-height) + 8px);
    left: 16px; right: 16px; width: auto; max-width: none;
    border-radius: 18px; padding: 8px; box-shadow: 0 -12px 45px #000a;
  }
  #createMenu button { min-height: 54px; padding: 14px; font-size: 17px; }
  #createMenu .icon { width: 23px; height: 23px; }
  .mobile-nav {
    height: var(--mobile-nav-height); min-height: var(--mobile-nav-height);
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--mobile-nav-safe)
      max(4px, env(safe-area-inset-left, 0px));
    display: flex; align-items: stretch; justify-content: space-between;
    transform: translateY(0); transition: transform 180ms ease;
    background: rgba(0, 0, 0, .97); will-change: transform;
  }
  .mobile-nav .nav-item, .mobile-nav .nav-create {
    position: relative; display: flex; width: 20%; min-width: 0;
    height: 52px; min-height: 52px; padding: 0; margin: 0;
    align-items: center; justify-content: center; flex-direction: row;
    border-radius: 0; color: #92999f; touch-action: manipulation;
  }
  .mobile-nav .nav-item.active { color: #f1f3f4; }
  .mobile-nav .nav-label { display: none; }
  .mobile-nav .icon { width: 28px; height: 28px; }
  .mobile-nav .nav-create { color: #000; }
  .nav-create-symbol {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 34px; border-radius: 10px;
    background: #f1f3f4; border: 1px solid #f1f3f4;
  }
  .nav-create-symbol .icon { width: 24px; height: 24px; stroke-width: 2.2; }
  .mobile-nav .nav-create:hover .nav-create-symbol { background: #d5d9dd; }
  .mobile-nav .nav-count {
    top: 2px; right: calc(50% - 25px); min-width: 17px; min-height: 17px;
    line-height: 17px; font-size: 11px; padding: 0 4px; background: #f1f3f4; color: #000;
  }
  .mobile-nav-hidden .mobile-nav { transform: translateY(100%); pointer-events: none; }
  .client-list, .main-panel, #earningsCardsContainer, #inboxListContainer, .sched-timeline {
    scroll-padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-nav-hidden .client-list, .mobile-nav-hidden #earningsCardsContainer,
  .mobile-nav-hidden #inboxListContainer, .mobile-nav-hidden .main-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .directory-tools { position: relative; padding: 8px 16px 0; flex-shrink: 0; }
  .directory-heading { display: none; }
  .directory-search-row { gap: 8px; align-items: center; }
  .directory-search-row .search-wrap { margin-bottom: 0; }
  .search-input { height: 44px; min-height: 44px; font-size: 16px !important; }
  .search-input::placeholder { font-size: 14px; }
  .search-icon { top: 12px; }
  .directory-filters-toggle { display: inline-flex; width: 44px; height: 44px; position: relative; border: 1px solid var(--line); }
  .directory-filters-toggle .icon { width: 22px; height: 22px; }
  .directory-filters-toggle.has-filters { color: var(--text); border-color: #6a747c; }
  .filter-active-dot { position: absolute; width: 6px; height: 6px; background: var(--text); border-radius: 50%; right: 5px; top: 5px; }
  .filter-bar { gap: 18px; margin-top: 2px; margin-bottom: 0; min-height: 42px; }
  .filter-pill { min-height: 42px; padding: 8px 0 7px; font-size: 14px; }
  .directory-refine, .earn-filters-panel, .mobile-schedule-options {
    display: none; position: absolute; z-index: 60;
    top: 100%; left: 12px; right: 12px; padding: 14px;
    border: 1px solid #363e45; border-radius: 14px;
    background: #101417; box-shadow: 0 16px 42px #000b;
    max-height: min(60dvh, 390px); overflow: auto;
  }
  .directory-refine.is-open, .earn-filters-panel.is-open, .mobile-schedule-options.is-open { display: block; }
  .directory-filter-row { gap: 8px; }
  .directory-filter-row .clean-select { font-size: 14px; }
  .date-pills-row { flex-wrap: wrap; margin-top: 12px; gap: 6px; }
  .date-pill { min-height: 40px; font-size: 13px; }
  .client-item { padding: 16px; }
  .item-main-row { gap: 14px; }
  .client-item .avatar-headshot, .client-item .avatar-fallback,
  .client-item .avatar-walkin { width: 72px; height: 72px; border-radius: 19px; }
  .pet-name { font-size: 19px; line-height: 1.35; }
  .owner-row { margin-top: 3px; font-size: 14px; line-height: 1.45; }
  .client-meta-line { margin-top: 8px; gap: 6px; }
  .client-list-price { font-size: 16px; }
  .status-pill, .new-client-pill { font-size: 12px; }
  .last-service { font-size: 12px; }
  .client-list .client-item:last-child { margin-bottom: 0; }
  .detail-content { padding: 12px 16px 28px; }
  .detail-topline { margin-bottom: 16px; }
  .detail-topline .detail-edit { min-height: 44px; }
  .section-title { margin-top: 22px; margin-bottom: 12px; }
  .visit-card { padding: 16px 0; }
  .data-value, .notes-panel, .visit-notes { font-size: 16px; }
  .schedule-controls { position: relative; padding: 8px 16px; gap: 4px; flex-shrink: 0; }
  .schedule-top-controls { gap: 0; }
  .schedule-date-row { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .schedule-date-row input {
    width: 0; min-width: 124px; min-height: 44px; height: 44px;
    flex: 1; flex-basis: 0; padding: 7px 8px; font-size: 16px !important;
  }
  .schedule-date-row .quick-chip { min-height: 44px; padding: 8px; font-size: 13px; }
  .mobile-schedule-options-toggle { display: inline-flex; width: 40px; height: 44px; }
  .mobile-schedule-options-toggle .icon { width: 23px; height: 23px; }
  .schedule-staff-caption { display: none; }
  .staff-pills { gap: 6px; }
  .staff-pill { min-height: 38px; padding: 5px 11px; font-size: 14px; gap: 6px; }
  .staff-pill .staff-total { font-size: 12px; }
  .mobile-schedule-options { top: 54px; left: auto; width: min(330px, calc(100% - 24px)); }
  .mobile-schedule-options .schedule-control-buttons { flex-direction: column; align-items: stretch; gap: 8px; }
  .mobile-schedule-options .schedule-control-buttons button { width: 100%; min-height: 46px; font-size: 15px; }
  .mobile-schedule-options .schedule-summary { margin-top: 14px; font-size: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .mobile-schedule-presets { display: none; }
  .mobile-schedule-status { display: block; font-size: 13px; line-height: 18px; color: var(--muted); padding-top: 2px; }
  .mobile-schedule-status.is-off { color: var(--amber); }
  .sched-timeline { padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .timeline-column-labels { padding-bottom: 8px; font-size: 12px; }
  .timeline-row, .slot-main { min-height: 58px; }
  .timeline-time { width: 80px; font-size: 14px; }
  .slot-toggle { min-height: 44px; }
  .earn-filter-panel { position: relative; padding: 8px 16px; gap: 0; flex-shrink: 0; }
  .earn-compact-toolbar { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
  .earn-compact-toolbar .chip-wrap { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; min-width: 0; margin: 0; }
  .earn-compact-toolbar .quick-chip { flex-shrink: 0; min-height: 44px; font-size: 0; padding: 8px 12px; }
  .earn-compact-toolbar .quick-chip:after { content: attr(data-compact-label); font-size: 14px; }
  .mobile-earn-filters-toggle { display: inline-flex; width: 44px; height: 44px; }
  .earn-filters-panel #earnStaffSelectorWrap { margin-bottom: 12px; }
  .earn-filters-panel .field-label { font-size: 13px; }
  .earn-filters-panel .text-input, .earn-filters-panel .select-input { font-size: 16px !important; min-height: 46px; }
  .earn-row { padding: 16px; gap: 12px; align-items: flex-start; }
  .earn-row .avatar-headshot, .earn-row .avatar-fallback { width: 58px; height: 58px; border-radius: 16px; }
  .earn-copy h3 { font-size: 17px; }
  .earn-copy p { font-size: 13px; line-height: 1.55; }
  .earn-amount { font-size: 18px; max-width: 42%; overflow-wrap: anywhere; }
  .earn-amount small { font-size: 12px; line-height: 1.5; }
  .earnings-sticky-bar {
    position: relative; display: block; flex-shrink: 0;
    padding: 0 !important; min-height: 60px; background: #0c1013;
  }
  .mobile-nav-hidden .earnings-sticky-bar { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
  .mobile-earn-summary {
    display: flex; width: 100%; min-height: 60px; padding: 8px 16px;
    align-items: center; gap: 10px; text-align: left; font-size: 15px;
  }
  .earnings-sticky-bar #earnSummaryToggle { padding: 8px 16px !important; }
  #mobileEarnCount { flex: 1; color: var(--muted); }
  #mobileEarnTotal { font-size: 24px; letter-spacing: -.6px; color: var(--text); }
  .summary-chevron { display: inline-flex; color: var(--muted); }
  .summary-chevron .icon { width: 19px; height: 19px; }
  .mobile-earn-summary[aria-expanded="true"] .summary-chevron { transform: rotate(180deg); }
  .earnings-breakdown {
    display: none; position: absolute; bottom: calc(100% + 6px); left: 12px; right: 12px;
    width: auto; z-index: 60; padding: 16px; gap: 14px;
    border: 1px solid #363e45; border-radius: 14px; background: #101417;
    box-shadow: 0 -12px 40px #000b; max-height: 50dvh; overflow-y: auto;
  }
  .earnings-breakdown.is-open { display: flex; flex-wrap: wrap; }
  .earnings-sticky-bar #earningsBreakdown { background: #101417 !important; border: 1px solid #363e45 !important; padding: 16px !important; }
  .earnings-breakdown #earnSummaryCount { display: none; }
  .earnings-sticky-bar #earnSummaryGross, .earnings-sticky-bar #earnSummaryTips,
  .earnings-sticky-bar #earnNetCommission { font-size: 14px !important; line-height: 1.6; }
  .earnings-breakdown #earnFinalGroomerTotal { display: none; }
  .earnings-sticky-bar #earnRateLabel { font-size: 12px !important; }
  .inbox-card { padding: 18px 16px; }
  .settings-layout { padding: 18px 16px 30px; }
  .toast-region { bottom: calc(var(--mobile-nav-height) + 12px); }
  .mobile-nav-hidden ~ .toast-region { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .schedule-date-row > .quick-chip { display: none; }
  .schedule-date-row input { flex-basis: 0; width: 0; min-width: 0; }
  .mobile-schedule-presets { display: flex; gap: 8px; padding-bottom: 12px; }
  .filter-bar { gap: 15px; }
  .earn-compact-toolbar .quick-chip { padding-inline: 10px; }
  .earn-row { gap: 9px; }
  .earn-row .avatar-headshot, .earn-row .avatar-fallback { width: 52px; height: 52px; }
  .earn-amount { max-width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
}