/* Phone opening view, modeled on the user's Housecall Pro workflow. */
#phone-home, #phone-field { display:none; }
@media (max-width: 700px) {
  #dashboard-ui.phone-office-home > header,
  #dashboard-ui.phone-office-home > main,
  #dashboard-ui.phone-field-home > header,
  #dashboard-ui.phone-field-home > main { display:none; }
  #dashboard-ui.phone-office-home.phone-more-open > header,
  #dashboard-ui.phone-office-home.phone-more-open > main,
  #dashboard-ui.phone-field-home.phone-more-open > header,
  #dashboard-ui.phone-field-home.phone-more-open > main { display:block; }
  #dashboard-ui.phone-office-home #phone-home,
  #dashboard-ui.phone-field-home #phone-field { display:block; min-height:100dvh; padding:0 0 calc(86px + env(safe-area-inset-bottom)); background:#edf3fb; color:#122b3c; }
  #dashboard-ui.phone-more-open #phone-home .phone-home-content,
  #dashboard-ui.phone-more-open #phone-field .phone-home-content { display:none; }
  #phone-home *, #phone-field * { box-sizing:border-box; }
  .phone-topbar { position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; background:#fff; border-bottom:1px solid #dbe3ed; }
  .phone-topbar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; }
  .phone-topbar a { color:#064ba8; font-weight:700; font-size:.9rem; }
  .phone-home-content { padding:14px; }
  .phone-card { background:#fff; border:1px solid #dfe8f4; border-radius:14px; margin-bottom:14px; overflow:hidden; box-shadow:0 2px 7px #16324b0a; }
  .phone-card-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px 18px; border-bottom:1px solid #e7ecf3; }
  .phone-card-header h2 { font-size:1.16rem; margin:0; color:#183448; }
  .phone-card-header a { font-size:.9rem; color:#0755bd; font-weight:700; white-space:nowrap; }
  .phone-card-body { padding:16px 18px; }
  .phone-alert { color:#a92152; font-weight:800; text-decoration:none; }
  .phone-muted { color:#55697c; font-size:.9rem; margin:0; line-height:1.5; }
  .phone-appointment { display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; padding:15px 18px; border-top:1px solid #e9edf3; text-decoration:none; color:inherit; }
  .phone-appointment:first-child { border-top:0; }
  .phone-time { font-weight:700; color:#254050; }
  .phone-person { display:block; font-weight:750; font-size:1rem; overflow-wrap:anywhere; }
  .phone-address,.phone-appointment small { display:block; margin-top:3px; color:#526578; line-height:1.4; }
  .phone-tag { display:inline-block; margin-top:7px; padding:3px 7px; border-radius:5px; background:#e8f0ff; color:#174e93; font-size:.78rem; font-weight:700; }
  .phone-review { background:#fff5e7; color:#734506; }
  .phone-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .phone-metric { padding:16px; background:#fff; border-radius:13px; border:1px solid #dfe8f4; text-decoration:none; color:#183448; }
  .phone-metric strong { display:block; font-size:1.35rem; margin:5px 0; overflow-wrap:anywhere; }
  .phone-metric span { font-size:.9rem; }
  .phone-field-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px 18px; }
  .phone-field-tools a { display:block; padding:13px 10px; border:1px solid #dfe8f4; border-radius:9px; color:#0755bd; font-weight:700; text-align:center; text-decoration:none; }
  .phone-bottom-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,1fr); padding:8px 3px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #cfdbe9; }
  .phone-bottom-nav.phone-field-nav { grid-template-columns:repeat(4,1fr); }
  .phone-bottom-nav a,.phone-bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; gap:3px; padding:3px 0; border:0; background:none; color:#506578; font:inherit; font-size:.74rem; text-decoration:none; }
  .phone-bottom-nav .selected { color:#0755bd; font-weight:800; }
  .phone-bottom-nav .nav-icon { font-size:1.3rem; line-height:1; }
  .phone-back { display:none; }
  #dashboard-ui.phone-more-open .phone-back { display:block; }
  #dashboard-ui.phone-more-open .phone-bottom-nav button.selected { color:#0755bd; font-weight:800; }
}