/* ════════════════════════════════════════════════════════════════════
   21 OCEAN BUILDERS · desktop-glass.css
   Desktop / web layout (≥900px) that CLONES the "Web Dashboard" mockup:
   light-glass flat sidebar, floating search/bell/avatar topbar, cool
   grey gradient + glows, and glass bento cards. Reuses the real app's
   code + live Firebase data.

   Loaded AFTER glass-system.css so it wins the cascade; the <link media>
   + this @media query keep it 100% inert under 900px (mobile untouched).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── Background: cool grey gradient + navy/blue glows (mockup) ────── */
  html.gl-on { background: linear-gradient(160deg,#E4E6EA 0%,#DADDE2 25%,#DEE0E4 60%,#D9DCE1 100%) fixed !important; }
  html.gl-on body::before {
    top: -12vh !important; right: -14vw !important; left: auto !important;
    width: 52vw !important; height: 52vw !important; max-width: 520px !important; max-height: 520px !important;
    background: radial-gradient(circle, rgba(27,39,64,0.14), transparent 70%) !important;
  }
  html.gl-on body::after {
    top: auto !important; bottom: -18vh !important; left: -10vw !important; right: auto !important;
    width: 60vw !important; height: 60vw !important; max-width: 620px !important; max-height: 620px !important;
    background: radial-gradient(circle, rgba(58,110,200,0.24), transparent 70%) !important;
  }

  /* ── Hide the floating mobile bottom bar ─────────────────────────── */
  html.gl-on .lg-bar-wrap { display: none !important; }

  /* ── Sidebar: light glass, flat list (mockup) ────────────────────── */
  html.gl-on #sidebar.sidebar {
    display: flex !important;
    transform: none !important;
    width: 250px; max-width: 250px;
    padding: 0;
    z-index: 40 !important;
    background: rgba(255,255,255,0.32) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
    backdrop-filter: blur(30px) saturate(1.4) !important;
    border-right: 1px solid rgba(255,255,255,0.6) !important;
    box-shadow: none;
    flex-direction: column;
    overflow: hidden;
  }
  html.gl-on #sidebarOverlay { display: none !important; }
  html.gl-on .app-shell { margin-left: 250px; }
  html.gl-on .icon-btn[aria-label="Open menu"] { display: none !important; }

  /* Static header/footer from index.html are replaced by the rendered rail */
  html.gl-on #sidebar > .sidebar-header,
  html.gl-on #sidebar > .sidebar-footer { display: none !important; }

  html.gl-on #sidebarList {
    display: flex !important;
    flex-direction: column;
    gap: 26px;
    padding: 26px 18px;
    height: 100%;
    overflow-y: auto;
  }
  html.gl-on #sidebarList::-webkit-scrollbar { width: 8px; }
  html.gl-on #sidebarList::-webkit-scrollbar-thumb { background: rgba(16,24,40,0.14); border-radius: 8px; }

  /* Brand */
  html.gl-on .dt-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
  html.gl-on .dt-brand-chip {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    background: linear-gradient(150deg,#1B2740,#3A4A6B);
    display: grid; place-items: center;
    color: #C9A557; font-weight: 800; font-size: 16px;
  }
  html.gl-on .dt-brand-name { font-weight: 700; font-size: 15px; line-height: 1.1; color: #101828; }
  html.gl-on .dt-brand-sub { font-size: 11.5px; color: rgba(16,24,40,0.5); font-weight: 500; }

  /* Nav */
  html.gl-on .dt-nav { display: flex; flex-direction: column; gap: 3px; }
  html.gl-on .dt-nav-section {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(16,24,40,0.38); padding: 14px 12px 4px;
  }
  html.gl-on .dt-nav-section:first-child { padding-top: 0; }
  html.gl-on .dt-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 12px;
    background: transparent; border: 1px solid transparent;
    cursor: pointer; text-align: left; width: 100%;
    transition: background .14s ease, border-color .14s ease;
  }
  html.gl-on .dt-nav-item:hover { background: rgba(255,255,255,0.4); }
  html.gl-on .dt-nav-item.is-active { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.85); }
  html.gl-on .dt-nav-ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: rgba(16,24,40,0.55); }
  html.gl-on .dt-nav-item.is-active .dt-nav-ic { color: #2A6FDB; }
  html.gl-on .dt-nav-lbl { flex: 1; font-size: 14px; font-weight: 500; color: rgba(16,24,40,0.72); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.gl-on .dt-nav-item.is-active .dt-nav-lbl { font-weight: 700; color: #101828; }
  html.gl-on .dt-nav-badge {
    font-size: 11px; font-weight: 700; color: #fff; background: #C0311F;
    border-radius: 999px; padding: 2px 7px; min-width: 20px; text-align: center; flex: none;
  }

  /* Footer */
  html.gl-on .dt-nav-foot { margin-top: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 10px; }

  /* Appearance segmented control */
  html.gl-on .dt-seg-row { display: flex; flex-direction: column; gap: 7px; padding: 8px 12px 4px; }
  html.gl-on .dt-seg-lbl { font-size: 12px; font-weight: 600; color: rgba(16,24,40,0.55); }
  html.gl-on .dt-seg {
    display: flex; gap: 2px; padding: 3px; border-radius: 11px;
    background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.7);
  }
  html.gl-on .dt-seg-opt {
    flex: 1; padding: 6px 0; border: 0; background: none; cursor: pointer; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: rgba(16,24,40,0.6);
  }
  html.gl-on .dt-seg-opt.is-active { background: rgba(255,255,255,0.9); color: #101828; box-shadow: 0 1px 3px rgba(27,39,64,0.1); }
  html.gl-on .dt-nav-signout {
    align-self: flex-start; background: none; border: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: rgba(16,24,40,0.55); padding: 0;
  }
  html.gl-on .dt-nav-signout:hover { color: #C0311F; }
  html.gl-on .dt-nav-ver { font-size: 11px; color: rgba(16,24,40,0.4); font-weight: 500; }

  /* ── Floating topbar: search + bell + avatar (mockup) ────────────── */
  html.gl-on .dt-topbar {
    position: fixed; top: 28px; right: 38px; z-index: 60;
    display: flex; align-items: center; gap: 12px;
  }
  html.gl-on .dt-tb-search {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 14px; width: 230px; cursor: pointer;
    background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    text-align: left;
  }
  html.gl-on .dt-tb-search-ic { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: rgba(16,24,40,0.4); }
  html.gl-on .dt-tb-search-tx { font-size: 13px; color: rgba(16,24,40,0.42); white-space: nowrap; }
  html.gl-on .dt-tb-bell {
    position: relative; width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
    background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    display: grid; place-items: center; color: #101828;
  }
  html.gl-on .dt-tb-bell-dot {
    position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
    background: #C0311F; border: 1.5px solid rgba(240,242,245,0.9);
  }
  html.gl-on .dt-tb-avatar {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(150deg,#1B2740,#3A4A6B);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
  }

  /* ── Content canvas ──────────────────────────────────────────────── */
  html.gl-on body.gl-ovpanel #panelHost,
  html.gl-on body.gl-emppanel #panelHost,
  html.gl-on body.gl-projpanel #panelHost,
  html.gl-on #panelHost {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding-left: 38px !important;
    padding-right: 38px !important;
    padding-top: 30px !important;
  }
  /* leave room under the floating topbar so panel headers don't collide */
  html.gl-on #panelHost { padding-top: 92px !important; }
  html.gl-on body.gl-ovpanel #panelHost { padding-top: 30px !important; }

  html.gl-on body.gl-ovpanel #panelHost > .gl-scope { max-width: 1120px !important; margin: 0 auto !important; }

  /* Overview bento: 2-col masonry over the widget container */
  html.gl-on body.gl-ovpanel #panelHost > .gl-scope > div:nth-child(2) {
    display: block !important;
    column-count: 2; column-gap: 18px; column-fill: balance;
    padding-bottom: 24px !important;
  }
  html.gl-on body.gl-ovpanel #panelHost > .gl-scope > div:nth-child(2) > * {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin-bottom: 18px !important; display: block;
  }
  /* greeting header spans full width, sits clear of the topbar */
  html.gl-on body.gl-ovpanel #panelHost > .gl-scope > div:first-child { max-width: 760px; }

  /* Glass card treatment to match the mockup */
  html.gl-on #panelHost .money-in-card,
  html.gl-on #panelHost .financials-card,
  html.gl-on #panelHost .attention-card,
  html.gl-on #panelHost .team-card,
  html.gl-on #panelHost .sec {
    border-radius: 24px !important;
    box-shadow: 0 8px 30px rgba(27,39,64,0.06) !important;
  }

  /* Wider list/detail panels feel less like a phone */
  html.gl-on body.gl-projpanel #panelHost > .gl-pj { max-width: 900px; margin: 0 auto; }

  /* Estimates web master–detail: override the 458px mobile clamp so the
     3-column layout gets the full content width. */
  html.gl-on body.gl-estpanel #panelHost,
  html.gl-on body.gl-invpanel #panelHost,
  html.gl-on body.gl-copanel #panelHost,
  html.gl-on body.gl-reimppanel #panelHost,
  html.gl-on body.gl-clipanel #panelHost,
  html.gl-on body.gl-leadpanel #panelHost {
    max-width: 1180px !important;
    padding: 0 38px !important;
  }

  /* App-only glass list panels (Day-off, RFIs, Lien, Lead expenses,
     Service catalog, Completed): widen, clear the floating topbar, and
     lay the cards out in a responsive grid so the page uses the width
     instead of a narrow phone column. */
  html.gl-on body.gl-dayoffpanel #panelHost,
  html.gl-on body.gl-rfipanel #panelHost,
  html.gl-on body.gl-lienpanel #panelHost,
  html.gl-on body.gl-lexppanel #panelHost,
  html.gl-on body.gl-svcpanel #panelHost,
  html.gl-on body.gl-emppanel #panelHost,
  html.gl-on body.gl-completedpanel #panelHost {
    max-width: 1120px !important;
    padding: 0 38px !important;
  }
  html.gl-on body.gl-dayoffpanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-rfipanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-lienpanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-lexppanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-svcpanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-emppanel #panelHost .gl-scope > div:first-child,
  html.gl-on body.gl-completedpanel #panelHost .gl-scope > div:first-child {
    padding-top: 74px !important;
  }
  html.gl-on body.gl-dayoffpanel #panelHost .gl-cards,
  html.gl-on body.gl-rfipanel #panelHost .gl-cards,
  html.gl-on body.gl-lienpanel #panelHost .gl-cards,
  html.gl-on body.gl-lexppanel #panelHost .gl-cards,
  html.gl-on body.gl-svcpanel #panelHost .gl-cards,
  html.gl-on body.gl-emppanel #panelHost .gl-cards,
  html.gl-on body.gl-completedpanel #panelHost .gl-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 12px !important;
    align-items: start;
  }

  /* ── Glass sheets (forms + payment card) → centered web dialog ────
     openGlassSheet() bottom-anchors a 430px sheet on mobile. On desktop
     we re-center it as a card. The nav drawer is also role=dialog.gl-scope
     so it is explicitly excluded. Inline styles are set without
     !important, so these !important rules win; animation:none avoids the
     rise-then-snap. */
  html.gl-on [role="dialog"].gl-scope:not(.gl-nav-drawer) {
    bottom: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 520px !important;
    max-height: 86vh !important;
    border-radius: 22px !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 20px 60px rgba(27,39,64,0.28) !important;
    animation: none !important;
  }
  /* Drop the mobile grab handle on desktop */
  html.gl-on [role="dialog"].gl-scope:not(.gl-nav-drawer) > div:first-child > div:first-child { display: none !important; }
  html.gl-on .modal::before { display: none !important; content: none !important; }
}