/* Belair Operations — Mobile Option A: clean and modern
   Applied only to phones and compact/portrait tablets. Desktop remains unchanged. */
@media (max-width: 900px) {
  :root {
    --a-bg: #f4f7f3;
    --a-surface: #ffffff;
    --a-surface-soft: #f8faf7;
    --a-green: #245f46;
    --a-green-dark: #173f34;
    --a-green-soft: #eaf3ed;
    --a-ink: #172820;
    --a-muted: #69786f;
    --a-line: #dfe7e1;
    --a-shadow: 0 8px 24px rgba(28, 54, 42, .075);
    --a-shadow-strong: 0 15px 36px rgba(28, 54, 42, .12);
  }

  html,
  body.belair-mobile-v2,
  body.belair-mobile-v2 .app-shell,
  body.belair-mobile-v2 .main-column,
  body.belair-mobile-v2 .page-content {
    background: var(--a-bg) !important;
    color: var(--a-ink);
  }

  body.belair-mobile-v2 {
    color-scheme: light;
    --green: var(--a-green);
    --green-2: #34795a;
    --text: var(--a-ink);
    --ink: var(--a-ink);
    --muted: var(--a-muted);
    --line: var(--a-line);
    --surface: var(--a-surface);
    --surface-2: var(--a-surface-soft);
  }

  body.belair-mobile-v2 h1,
  body.belair-mobile-v2 h2,
  body.belair-mobile-v2 h3,
  body.belair-mobile-v2 h4,
  body.belair-mobile-v2 strong,
  body.belair-mobile-v2 label,
  body.belair-mobile-v2 legend,
  body.belair-mobile-v2 th {
    color: var(--a-ink);
  }

  body.belair-mobile-v2 p,
  body.belair-mobile-v2 small,
  body.belair-mobile-v2 .muted,
  body.belair-mobile-v2 .helper-text,
  body.belair-mobile-v2 .field-help {
    color: var(--a-muted);
  }

  /* Simple white app header with clear branding. */
  body.belair-mobile-v2 .topbar {
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid rgba(33, 77, 58, .10);
    box-shadow: 0 5px 20px rgba(28, 54, 42, .06) !important;
  }
  body.belair-mobile-v2 .topbar .belair-topbar-mark {
    width: 44px !important;
    height: 44px !important;
    padding: 3px;
    background: #f1f6f2;
    border: 1px solid var(--a-line);
    border-radius: 13px;
    object-fit: contain;
  }
  body.belair-mobile-v2 .topbar strong { font-weight: 850; }
  body.belair-mobile-v2 .topbar .icon-button,
  body.belair-mobile-v2 .topbar button {
    background: #f5f8f5;
    border: 1px solid var(--a-line);
    color: var(--a-green-dark);
  }

  body.belair-mobile-v2 .page-content { padding-top: .8rem; }
  body.belair-mobile-v2 .page-header h1 { font-size: 1.45rem; }

  /* Clean cards used across every module. */
  body.belair-mobile-v2 .panel,
  body.belair-mobile-v2 .table-card,
  body.belair-mobile-v2 .metric-card,
  body.belair-mobile-v2 .site-card,
  body.belair-mobile-v2 .job-card,
  body.belair-mobile-v2 .stock-card,
  body.belair-mobile-v2 .incident-card,
  body.belair-mobile-v2 .scanner-panel,
  body.belair-mobile-v2 .scan-result,
  body.belair-mobile-v2 .channel-button,
  body.belair-mobile-v2 .chat-panel,
  body.belair-mobile-v2 .chat-bubble,
  body.belair-mobile-v2 .inspection-row,
  body.belair-mobile-v2 .detail-sidebar,
  body.belair-mobile-v2 .integration-status,
  body.belair-mobile-v2 .toggle-row,
  body.belair-mobile-v2 .empty-state,
  body.belair-mobile-v2 [class*="-panel"],
  body.belair-mobile-v2 [class*="-card"] {
    background: var(--a-surface) !important;
    border-color: var(--a-line) !important;
    color: var(--a-ink) !important;
    box-shadow: var(--a-shadow) !important;
  }

  body.belair-mobile-v2 .metric-card,
  body.belair-mobile-v2 .site-card,
  body.belair-mobile-v2 .job-card,
  body.belair-mobile-v2 .stock-card,
  body.belair-mobile-v2 .incident-card,
  body.belair-mobile-v2 .panel,
  body.belair-mobile-v2 .table-card {
    border-radius: 16px !important;
  }

  body.belair-mobile-v2 .site-card:active,
  body.belair-mobile-v2 .job-card:active,
  body.belair-mobile-v2 .stock-card:active,
  body.belair-mobile-v2 .v2-home-action:active,
  #belair-mobile-v2-sheet .v2-sheet-item:active {
    transform: scale(.985);
  }

  body.belair-mobile-v2 .metric-icon,
  body.belair-mobile-v2 .row-icon,
  body.belair-mobile-v2 .channel-icon {
    background: var(--a-green-soft) !important;
    color: var(--a-green) !important;
  }

  body.belair-mobile-v2 .toolbar {
    background: linear-gradient(180deg, var(--a-bg) 76%, rgba(244,247,243,0)) !important;
  }

  body.belair-mobile-v2 input,
  body.belair-mobile-v2 select,
  body.belair-mobile-v2 textarea,
  body.belair-mobile-v2 .search-box,
  body.belair-mobile-v2 .manual-scan label {
    background: #fff !important;
    color: var(--a-ink) !important;
    border-color: #cfdad2 !important;
    border-radius: 12px !important;
  }
  body.belair-mobile-v2 input:focus,
  body.belair-mobile-v2 select:focus,
  body.belair-mobile-v2 textarea:focus {
    outline: 3px solid rgba(36, 95, 70, .13);
    border-color: #6f9c84 !important;
  }
  body.belair-mobile-v2 input[type="checkbox"],
  body.belair-mobile-v2 input[type="radio"] { accent-color: var(--a-green); }

  body.belair-mobile-v2 .button,
  body.belair-mobile-v2 button.button,
  body.belair-mobile-v2 .primary-button,
  body.belair-mobile-v2 button[type="submit"] {
    border-radius: 12px !important;
  }
  body.belair-mobile-v2 .button.primary,
  body.belair-mobile-v2 .primary-button,
  body.belair-mobile-v2 button[type="submit"] {
    background: linear-gradient(135deg, #2f7a56, #245f46) !important;
    border-color: #245f46 !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(36, 95, 70, .20);
  }
  body.belair-mobile-v2 .button.secondary,
  body.belair-mobile-v2 .button.ghost,
  body.belair-mobile-v2 .secondary-button {
    background: #fff !important;
    border-color: var(--a-line) !important;
    color: var(--a-green-dark) !important;
  }

  /* Option A home: bright greeting and simple large shortcut cards. */
  body.belair-mobile-v2 .v2-home-hero {
    color: var(--a-ink) !important;
    background: linear-gradient(145deg, #ffffff, #f0f6f1) !important;
    border: 1px solid var(--a-line);
    border-radius: 19px !important;
    box-shadow: var(--a-shadow-strong) !important;
    padding: 1.05rem !important;
    position: relative;
    overflow: hidden;
  }
  body.belair-mobile-v2 .v2-home-hero::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -45px;
    top: -48px;
    border-radius: 50%;
    background: rgba(84, 145, 106, .10);
  }
  body.belair-mobile-v2 .v2-home-kicker {
    color: var(--a-green) !important;
    opacity: 1 !important;
  }
  body.belair-mobile-v2 .v2-home-hero h1 {
    color: var(--a-ink) !important;
    font-size: 1.55rem !important;
  }
  body.belair-mobile-v2 .v2-home-hero p {
    color: var(--a-muted) !important;
  }
  body.belair-mobile-v2 .v2-home-actions { gap: .7rem; }
  body.belair-mobile-v2 .v2-home-action {
    min-height: 94px !important;
    background: #fff !important;
    border: 1px solid var(--a-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--a-shadow) !important;
    padding: .85rem !important;
  }
  body.belair-mobile-v2 .v2-home-action span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--a-green-soft);
    color: var(--a-green);
    font-size: 1.15rem !important;
    margin-bottom: .15rem;
  }
  body.belair-mobile-v2 .v2-home-action strong { font-size: .92rem; }
  body.belair-mobile-v2 .v2-home-action small { color: var(--a-muted) !important; }
  body.belair-mobile-v2 .v2-home-action.primary {
    background: #fffaf0 !important;
    border-color: #eadbb4 !important;
  }
  body.belair-mobile-v2 .v2-home-action.primary span {
    background: #fff0c9;
    color: #8e6516;
  }

  body.belair-mobile-v2 #belair-role-dashboard {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .15rem 0 !important;
  }
  body.belair-mobile-v2 .role-metric,
  body.belair-mobile-v2 .role-alert-card,
  body.belair-mobile-v2 .role-alert-panel {
    background: #fff !important;
    border-color: var(--a-line) !important;
    box-shadow: var(--a-shadow) !important;
    border-radius: 15px !important;
  }

  /* Priority is visible without making the whole card visually noisy. */
  body.belair-mobile-v2 .job-card { border-left-width: 4px !important; }
  body.belair-mobile-v2 .job-card:has(.status-urgent),
  body.belair-mobile-v2 .job-card:has([data-priority="Urgent"]) { border-left-color: #b73d38 !important; }
  body.belair-mobile-v2 .job-card:has(.status-high),
  body.belair-mobile-v2 .job-card:has([data-priority="High"]) { border-left-color: #e0644f !important; }
  body.belair-mobile-v2 .job-card:has(.status-medium),
  body.belair-mobile-v2 .job-card:has([data-priority="Medium"]) { border-left-color: #d9a13a !important; }
  body.belair-mobile-v2 .job-card:has(.status-low),
  body.belair-mobile-v2 .job-card:has([data-priority="Low"]) { border-left-color: #72a581 !important; }

  /* Bottom navigation mirrors Option A's simple white toolbar. */
  #belair-mobile-v2-nav {
    background: rgba(255, 255, 255, .985) !important;
    border-top-color: rgba(31, 73, 55, .12) !important;
    box-shadow: 0 -9px 26px rgba(28, 54, 42, .10) !important;
  }
  #belair-mobile-v2-nav a,
  #belair-mobile-v2-nav button {
    color: #7a887f !important;
  }
  #belair-mobile-v2-nav a.active,
  #belair-mobile-v2-nav button.active {
    color: var(--a-green) !important;
    background: var(--a-green-soft) !important;
  }
  #belair-mobile-v2-nav .v2-nav-icon { font-size: 1.35rem; }

  #belair-mobile-v2-scan {
    left: 14px !important;
    right: 14px !important;
    justify-content: center;
    min-height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #2f7a56, #245f46) !important;
    box-shadow: 0 11px 26px rgba(36, 95, 70, .24) !important;
  }

  /* Menus remain light and easy to scan. */
  #belair-mobile-v2-sheet { background: rgba(19, 39, 30, .36) !important; }
  #belair-mobile-v2-sheet .v2-sheet-panel {
    background: #f7f9f6 !important;
    border-radius: 24px 24px 0 0 !important;
  }
  #belair-mobile-v2-sheet .v2-sheet-item {
    background: #fff !important;
    border-color: var(--a-line) !important;
    color: var(--a-ink) !important;
    box-shadow: 0 5px 16px rgba(28, 54, 42, .055);
  }
  #belair-mobile-v2-sheet .v2-sheet-item .v2-item-icon {
    background: var(--a-green-soft) !important;
    color: var(--a-green) !important;
  }
  #belair-mobile-v2-sheet .v2-sheet-item small { color: var(--a-muted) !important; }
  #belair-mobile-v2-sheet .v2-sheet-close {
    background: #fff !important;
    border-color: var(--a-line) !important;
    color: var(--a-ink) !important;
  }

  /* Checklists and full-screen task windows. */
  body.belair-mobile-v2 .inspection-row {
    background: #fff !important;
    border-color: var(--a-line) !important;
    box-shadow: var(--a-shadow) !important;
  }
  body.belair-mobile-v2 .fake-check {
    background: #fff !important;
    border-color: #91a399 !important;
  }
  body.belair-mobile-v2 .check-item.checked .fake-check,
  body.belair-mobile-v2 .fake-check.checked {
    background: var(--a-green) !important;
    border-color: var(--a-green) !important;
  }
  body.belair-mobile-v2 .inspection-form.v2-step-mode .v2-step-controls {
    background: rgba(244, 247, 243, .97) !important;
  }
  body.belair-mobile-v2 .v2-step-progress { background: #dce7df !important; }
  body.belair-mobile-v2 .v2-step-progress span { background: var(--a-green) !important; }

  body.belair-mobile-v2 .form-actions,
  body.belair-mobile-v2 .inspection-form .form-actions {
    background: rgba(255, 255, 255, .98) !important;
    border-color: var(--a-line) !important;
    box-shadow: 0 -8px 22px rgba(28, 54, 42, .09) !important;
  }

  body.belair-mobile-v2 .modal-backdrop,
  body.belair-mobile-v2 [id$="-root"].active {
    background: rgba(18, 39, 29, .48) !important;
  }
  body.belair-mobile-v2 .modal-card,
  body.belair-mobile-v2 .modal-card > header,
  body.belair-mobile-v2 .modal-content,
  body.belair-mobile-v2 [id$="-root"] > section,
  body.belair-mobile-v2 [id$="-root"] .module-shell,
  body.belair-mobile-v2 [id$="-root"] .module-panel,
  body.belair-mobile-v2 [id$="-root"] .module-card {
    background: #fff !important;
    color: var(--a-ink) !important;
    border-color: var(--a-line) !important;
  }
  body.belair-mobile-v2 .modal-card > header {
    box-shadow: 0 3px 14px rgba(28, 54, 42, .06);
  }

  /* Chat: own messages pale green, replies white. */
  body.belair-mobile-v2 .channel-button.active {
    background: var(--a-green-soft) !important;
    border-color: #bdd4c5 !important;
  }
  body.belair-mobile-v2 .chat-bubble.mine {
    background: #eaf4ed !important;
    border-color: #c9dfd0 !important;
  }
  body.belair-mobile-v2 .chat-bubble.theirs { background: #fff !important; }
  body.belair-mobile-v2 .chat-composer {
    background: var(--a-bg) !important;
    border-color: var(--a-line) !important;
  }

  /* Keep the actual park map in its original colours. */
  body.belair-mobile-v2 #belair-park-map-root,
  body.belair-mobile-v2 #belair-park-map-root * {
    color-scheme: light;
  }

  /* Light login page for a consistent first impression. */
  body.belair-mobile-v2 .login-page,
  body.belair-v2-auth-screen .login-page {
    background: linear-gradient(145deg, #edf4ee, #f9fbf8) !important;
  }
  body.belair-mobile-v2 .login-card,
  body.belair-v2-auth-screen .login-card {
    border: 1px solid var(--a-line);
    border-radius: 20px !important;
    box-shadow: 0 24px 58px rgba(28, 54, 42, .14) !important;
  }
}