/* assets/bd-office-mobile.css — fix pack Session 9 (2026-09-28)
 *
 * Office on a phone. Two things were broken, both badly:
 *
 * 1. THIRTEEN VIEWS WERE UNREACHABLE. The sidebar is display:none below 720px. Office
 *    ships a .d-mobile-bar meant to replace it — but its base `display:none` rule is
 *    declared AFTER the media query that sets `display:flex`, at the same specificity,
 *    so the later rule wins and the bar never appeared at any width. Current Jobs,
 *    Previous Jobs, Projects, Active Bids, Follow-ups, Reviews, Invoice Builder,
 *    Invoice Chaser, Customers, Leads, Notes, Connections and Help had no way in.
 *    That dead bar is left hidden on purpose: the bottom of the screen now belongs to
 *    the cross-tool bar from Session 8, and two fixed bars stacked would be worse than
 *    the problem. Office's own navigation goes at the TOP instead, as a sub-bar.
 *
 * 2. DRAFTS RENDERED OFF-SCREEN. setPanel() fills .d-panel, which on a phone stacks
 *    BELOW the chat and the composer — so "Here's your draft:" pointed at nothing and
 *    the contractor saw an empty screen. On a phone the panel is now a sheet that
 *    slides up over the chat.
 *
 * Everything here is <=720px. Desktop is untouched.
 */

@media (max-width:720px){

  /* ── 1. Office sub-bar, pinned under the page header ── */
  .bd-onav{
    position:sticky; top:0; z-index:35;
    display:flex; gap:4px; align-items:stretch;
    background:#F7F5F2; border-bottom:1px solid var(--border-light,#E4E8EE);
    padding:6px 8px; overflow:visible;
  }
  /* flex-basis:auto so "Estimates" and "Customers" get the room they need and "Jobs"
     gives room back. At 12px with equal widths both truncated to "Estima…" / "Custo…",
     which is exactly the cut-off-label problem this bar exists to fix. Verified clean at
     360, 375 and 414px. */
  .bd-onav button{
    flex:1 1 auto; min-width:0; min-height:44px;
    border:1px solid transparent; border-radius:8px; background:transparent;
    font-family:'DM Sans',system-ui,sans-serif; font-size:11.5px; font-weight:700;
    letter-spacing:-.01em; color:#5B6B80; cursor:pointer; padding:4px 3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    -webkit-tap-highlight-color:transparent;
  }
  /* "More" never needs to grow. */
  .bd-onav button[data-oview="__more"]{ flex:0 0 auto; padding:4px 10px; }
  .bd-onav button.bd-onav-active{
    background:#0D1B2E; color:#C9922A; border-color:#0D1B2E;
  }
  .bd-onav button:focus-visible{ outline:2px solid #7FA8DA; outline-offset:1px; }

  /* ── Office "More" sheet ── */
  .bd-osheet-scrim{
    position:fixed; inset:0; background:rgba(13,27,46,.55); z-index:96;
    opacity:0; pointer-events:none; transition:opacity .16s;
  }
  .bd-osheet-scrim.on{ opacity:1; pointer-events:auto; }
  .bd-osheet{
    position:fixed; left:0; right:0; bottom:0; z-index:97;
    background:#fff; border-radius:16px 16px 0 0;
    padding:10px 0 calc(14px + env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .2s ease;
    max-height:82vh; overflow-y:auto; box-shadow:0 -10px 30px rgba(13,27,46,.28);
  }
  .bd-osheet.on{ transform:translateY(0); }
  .bd-osheet-grip{ width:38px; height:4px; border-radius:99px; background:#D9DEE6; margin:2px auto 8px; }
  .bd-osheet-group{
    font-family:'DM Sans',system-ui,sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:#8696aa;
    padding:12px 20px 4px;
  }
  .bd-osheet-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    min-height:48px; padding:0 20px; border:none; background:none; cursor:pointer;
    font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:600;
    color:#1B3557; text-align:left;
  }
  .bd-osheet-row:active{ background:#F4F6F9; }
  .bd-osheet-row .bd-osheet-n{
    font-size:12px; font-weight:700; color:#8696aa; background:#EEF1F5;
    border-radius:99px; padding:2px 9px; min-width:24px; text-align:center;
  }

  /* ── 2. The draft panel becomes a sheet instead of stacking off-screen ── */
  body.bd-osheet-open{ overflow:hidden; }

  .donna-app.bd-panel-sheet .d-panel{
    position:fixed !important; left:0; right:0; bottom:0; top:0;
    z-index:98; display:flex !important; flex-direction:column;
    border:none !important; border-radius:0;
    max-height:none !important; height:100dvh;
    background:#fff; overflow:hidden;
  }
  .donna-app.bd-panel-sheet .d-panel-body{
    flex:1; min-height:0; overflow-y:auto;
    /* room for the sticky action row the page's own buttons sit in */
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  /* A way back to the chat. Without this the sheet is a trap. */
  .bd-panel-close{
    position:absolute; top:8px; right:8px; z-index:2;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border-light,#E4E8EE); background:#fff;
    font-size:22px; line-height:1; color:#5B6B80; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .bd-panel-close:focus-visible{ outline:2px solid #7FA8DA; outline-offset:2px; }
}

@media (min-width:721px){
  .bd-onav, .bd-osheet, .bd-osheet-scrim, .bd-panel-close{ display:none !important; }
}