/* ============================================================
   linq · slide-up menu v2 — mobile drawer theme override

   Re-themes the existing in-app .sidebar slide-up sheet from the
   dark CRM chrome to the cream brand-kit "slide-up menu v2" design
   handed off from claude.ai/design (project: linq Slide-up Menu v2).

   Scope: @media (max-width: 1023px) only — desktop sidebar stays
   on the dark CRM theme. Loaded AFTER nav.css/fab.css/locksmith.css
   so the cascade picks these rules up last.

   Visual deltas vs the prototype:
     - Cream sheet (#F2EBDF) with rounded top corners + heavy shadow
     - Page-bg dim raised to rgba(0,0,0,0.62) + 3px backdrop blur
     - Sheet header is the linq mark only (wordmark hidden)
     - Search row is a dark-ink terminal-prompt: mono "SEARCH"
       label, input, blinking horizontal orange underscore caret
     - "Full menu" toggle is a flat white pill row
     - User row: white surface, ink avatar with orange ring,
       MASTERADMIN · ID set in mono
     - "// Favourites" eyebrow, white tile cards w/ orange-light
       icon chips
     - Quick-create row: ink, ink-2, orange — round avatar-style
       icon background inside each card
   ============================================================ */

@media (max-width: 1023px) {

  /* ── tokens (local) ── */
  :root {
    --v2-ink: #0F1623;
    --v2-ink-2: #1B2230;
    --v2-ink-soft: #3A4250;
    --v2-ink-mute: #6B7280;
    --v2-cream: #F2EBDF;
    --v2-cream-soft: #FAF6EE;
    --v2-cream-light: #F8F2E5;
    --v2-orange: #EA6A2C;
    --v2-orange-dk: #C9551F;
    --v2-orange-lt: #FBE2D2;
    --v2-line: rgba(15, 22, 35, 0.10);
    --v2-line-soft: rgba(15, 22, 35, 0.06);
    --v2-mono: 'Archivo Narrow', ui-monospace, Menlo, monospace;
  }

  /* ── sheet ── */
  .sidebar {
    background: var(--v2-cream);
    color: var(--v2-ink);
    box-shadow:
      0 -28px 70px -8px rgba(0, 0, 0, 0.55),
      0 -2px 0 0 rgba(255, 255, 255, 0.6) inset;
    border-top: 0;
    padding-top: 8px;
  }
  /* Grabber — drawn in via ::before so we don't have to touch markup. */
  .sidebar::before {
    content: '';
    display: block;
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: rgba(15, 22, 35, 0.22);
    margin: 6px auto 14px;
    flex: none;
  }

  /* Body text colour reset — the dark drawer relied on light text. */
  .sidebar,
  .sidebar * {
    --text: var(--v2-ink);
    --text-muted: var(--v2-ink-mute);
  }

  /* ── dim overlay (the rest of the page behind the sheet) ── */
  #sidebar-overlay,
  .sidebar-overlay {
    background: rgba(15, 22, 35, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* ── sheet header — mark only, no wordmark ── */
  .sidebar .sidebar-logo {
    padding: 0 22px 14px;
  }
  .sidebar .sidebar-logo-text {
    /* Hide the lockup image (mark + wordmark) on mobile so we can
       show the standalone mark via .sidebar-logo-collapsed. */
    display: none !important;
  }
  .sidebar .sidebar-logo-collapsed {
    display: inline-flex !important;
    align-items: center;
  }
  .sidebar .sidebar-logo-collapsed img {
    height: 32px !important;
    width: auto;
  }

  /* Close button — white circle with ink × */
  .sidebar-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(15, 22, 35, 0.04);
  }
  .sidebar-close-btn i { font-size: 14px; }

  /* ── toolbar: cmdbar + Full-menu toggle in the same row ── */
  .sidebar-toolbar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0 14px 12px;
    flex-wrap: wrap;
  }
  /* search — terminal-prompt style; flex:1 fills the row */
  .sidebar-toolbar .sidebar-cmdbar {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
  .sidebar-cmdbar {
    padding: 0 14px 12px;
    margin: 0;
  }
  .sidebar-cmdbar .cmdbar-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--v2-ink);
    border: 1px solid var(--v2-ink);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 6px 18px -8px rgba(15, 22, 35, 0.6);
    min-width: 0;
  }
  /* Hide the magnifier icon — replaced by the SEARCH prompt label. */
  .sidebar-cmdbar .cmdbar-search-icon { display: none !important; }
  /* "SEARCH" label rendered as a pseudo so we don't have to touch markup. */
  .sidebar-cmdbar .cmdbar-search-wrap::before {
    content: 'SEARCH';
    font-family: var(--v2-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 246, 238, 0.55);
    flex: none;
  }
  /* Higher specificity + !important required to beat light.css line
     257-260 + fab.css line 1190-1201, which paint the input white-bg
     with dark text + a brand-blue border on :focus. Those were
     written for the legacy bone drawer; the v2 sheet's input has to
     stay transparent over the dark wrap with cream text. */
  .sidebar-cmdbar .cmdbar-search,
  .sidebar .sidebar-cmdbar .cmdbar-search,
  .sidebar .sidebar-toolbar .sidebar-cmdbar .cmdbar-search {
    /* Auto-size to content so the input's right edge sits exactly
       where the cursor is. The orange caret pseudo (rendered after
       the input in the flex row) then naturally snaps to the right
       of the typed text. */
    flex: 0 1 auto !important;
    field-sizing: content;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--v2-cream-soft) !important;
    font-family: var(--v2-mono) !important;
    font-size: 13.5px;
    padding: 0 !important;
    caret-color: transparent !important;
    outline: none !important;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
  }
  .sidebar-cmdbar .cmdbar-search:focus,
  .sidebar-cmdbar .cmdbar-search:focus-visible,
  .sidebar .sidebar-cmdbar .cmdbar-search:focus,
  .sidebar .sidebar-toolbar .sidebar-cmdbar .cmdbar-search:focus {
    outline: none !important;
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--v2-cream-soft) !important;
  }
  /* Tap = clear the placeholder so the user starts typing into a
     blank dark field. The placeholder reappears if they blur without
     typing anything. */
  .sidebar-cmdbar .cmdbar-search:focus::placeholder {
    color: transparent !important;
  }
  /* Hide the SEARCH pseudo label as soon as the user focuses the
     field or starts typing — typed text replaces the prompt. The
     label comes back if they blur without typing. */
  .sidebar-cmdbar .cmdbar-search-wrap:has(.cmdbar-search:focus)::before,
  .sidebar-cmdbar .cmdbar-search-wrap:has(.cmdbar-search:not(:placeholder-shown))::before {
    display: none;
  }
  /* Chrome / Safari autofill paints the input white-yellow by default.
     Pin the bg back to ink and force cream text via fill-color so
     typed text reads on the dark field. */
  .sidebar-cmdbar .cmdbar-search:-webkit-autofill,
  .sidebar-cmdbar .cmdbar-search:-webkit-autofill:hover,
  .sidebar-cmdbar .cmdbar-search:-webkit-autofill:focus,
  .sidebar-cmdbar .cmdbar-search:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--v2-ink) inset !important;
    -webkit-text-fill-color: var(--v2-cream-soft) !important;
    caret-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
  }
  .sidebar-cmdbar .cmdbar-search::placeholder {
    color: rgba(250, 246, 238, 0.45);
    font-family: var(--v2-mono);
    text-transform: none;
    letter-spacing: 0.01em;
  }
  /* Make the entire wrap a click target. <label> with for="cmdbar-search"
     handles the focus delegation; cursor reinforces it visually. */
  .sidebar-cmdbar .cmdbar-search-wrap {
    cursor: text;
  }
  /* Blinking horizontal orange caret — sits at the baseline. */
  .sidebar-cmdbar .cmdbar-search-wrap::after {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--v2-orange);
    box-shadow: 0 0 8px rgba(234, 106, 44, 0.7);
    flex: none;
    align-self: flex-end;
    margin-bottom: 4px;
    animation: linq-v2-caret-blink 1s steps(2, end) infinite;
  }
  @keyframes linq-v2-caret-blink {
    50% { opacity: 0; }
  }

  /* ── Full-menu toggle — compact pill in the toolbar row ── */
  .sidebar .sidebar-toolbar .sidebar-full-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    border-radius: 14px;
    padding: 0 14px;
    flex: 0 0 auto;
    min-height: 50px;
    font-family: var(--v2-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-ink);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 1px 0 rgba(15, 22, 35, 0.04);
  }
  .sidebar .sidebar-full-menu-toggle::-webkit-details-marker { display: none; }
  .sidebar .sidebar-full-menu-toggle .sidebar-full-menu-toggle-icon {
    color: var(--v2-ink-mute);
    font-size: 14px;
    transition: transform 0.18s ease;
  }
  .sidebar .sidebar-full-menu-toggle[aria-expanded="true"] {
    background: var(--v2-cream-soft);
  }
  .sidebar .sidebar-full-menu-toggle[aria-expanded="true"] .sidebar-full-menu-toggle-icon {
    transform: rotate(180deg);
  }

  /* When the wrapper is shown, full sheet width below the toolbar. */
  .sidebar .sidebar-full-menu {
    /* Only ever shown on mobile via JS hidden-toggle. The wrapper has
       `hidden` by default; CSS just styles the OPEN state. */
    width: 100%;
    padding: 0 14px;
    margin: 0 0 10px;
  }
  .sidebar .sidebar-full-menu[hidden] { display: none; }

  /* Full-menu OPEN state on the sheet itself: expand the drawer to the
     full viewport so the unfolded zones (primary grid + favorites +
     chips + more) get the whole screen instead of the cramped 75vh
     default. 100dvh keeps the bottom row clear of iOS Safari's URL
     bar. The grabber pill is hidden because the sheet is no longer a
     bottom-sheet at that point — it's the full screen. */
  .sidebar.sidebar--full-menu-open {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .sidebar.sidebar--full-menu-open::before { display: none; }
  .sidebar .sidebar-full-menu .sidebar-nav {
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    border-radius: 14px;
    padding: 14px;
  }
  /* Quick slide-up reveal when the full-menu wrapper is unhidden — pairs
     with .sidebar.sidebar--full-menu-open above so the additional nav
     reads as sliding into view above the persistent bottom favourites
     grid (kept anchored via the inner-scroll rule in nav.css). */
  .sidebar .sidebar-full-menu:not([hidden]) {
    animation: linq-v2-fullmenu-in .22s cubic-bezier(.4, 0, .2, 1) both;
  }
  @keyframes linq-v2-fullmenu-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Orange Signal scrollbar — scoped to the full-menu inner scroll
     panel only (i.e. when the drawer is expanded). Other scroll
     containers in the drawer stay on the OS default. Firefox uses the
     thin + scrollbar-color shorthand; WebKit gets the explicit pseudo
     elements so we control width + thumb radius. */
  .sidebar.sidebar--full-menu-open .sidebar-full-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--v2-orange) transparent;
  }
  .sidebar.sidebar--full-menu-open .sidebar-full-menu::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar.sidebar--full-menu-open .sidebar-full-menu::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar.sidebar--full-menu-open .sidebar-full-menu::-webkit-scrollbar-thumb {
    background: var(--v2-orange);
    border-radius: 999px;
  }
  .sidebar.sidebar--full-menu-open .sidebar-full-menu::-webkit-scrollbar-thumb:hover {
    background: var(--v2-orange-dk);
  }

  /* ── User row — white surface, orange-ring avatar ── */
  .sidebar .sidebar-user-wrap {
    margin: 0 14px 18px;
    padding: 0;
    order: 50;
  }
  .sidebar .sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    border-radius: 14px;
    padding: 11px 14px;
    color: var(--v2-ink);
    width: 100%;
  }
  .sidebar .sidebar-user:hover {
    background: var(--v2-cream-soft);
  }
  .sidebar .sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--v2-ink);
    color: var(--v2-cream-soft);
    border: 2px solid var(--v2-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex: none;
  }
  .sidebar .sidebar-user-name {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--v2-ink);
  }
  .sidebar .sidebar-user-role,
  .sidebar .sidebar-user-role--co {
    font-family: var(--v2-mono);
    font-size: 11.5px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.06em;
    text-transform: none;
  }
  .sidebar .sidebar-user-chevron {
    color: var(--v2-ink-mute);
    font-size: 14px;
  }

  /* ── Favourites ── */
  .sidebar .nav-favs {
    /* Drop the dark frosted-glass treatment — the v2 design floats
       favs directly on the cream sheet. */
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 14px 8px !important;
  }
  .sidebar .nav-favs-h {
    margin: 0 0 10px;
    padding: 0;
  }
  .sidebar .nav-favs-title {
    font-family: var(--v2-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
  }
  /* Code-comment "// " marker before the eyebrow per the v2 layout. */
  .sidebar .nav-favs-title::before {
    content: '// ';
    color: var(--v2-ink-mute);
    font-weight: 600;
  }
  .sidebar .nav-favs-edit-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-soft);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar .nav-favs-edit-btn i { font-size: 12px; }
  .sidebar .nav-favs-done-btn {
    background: var(--v2-orange-lt) !important;
    color: var(--v2-orange-dk) !important;
    border-color: var(--v2-orange) !important;
  }

  .sidebar .nav-favs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .sidebar .nav-fav {
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    border-radius: 14px;
    padding: 14px 8px 12px;
    color: var(--v2-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    aspect-ratio: 1.05;
    text-decoration: none;
    /* Stop iOS Safari + Chrome from popping the "Copy / Save Image / Open
       in New Tab" callout on long-press, and Chrome desktop's right-click
       menu — the user reorders these tiles, so the native menu fights the
       interaction. Paired with a `contextmenu` preventDefault on the grid. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  .sidebar .nav-fav:hover {
    background: var(--v2-cream-soft);
    border-color: rgba(15, 22, 35, 0.18);
  }
  .sidebar .nav-fav-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--v2-orange-lt);
    color: var(--v2-orange-dk);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar .nav-fav-ico i { font-size: 18px; }
  .sidebar .nav-fav-ico .linq-ico { width: 22px; height: 22px; }
  .sidebar .nav-fav-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--v2-ink);
    margin: 0;
  }
  .sidebar .nav-fav.active {
    background: var(--v2-cream-soft);
    border-color: var(--v2-orange);
  }
  .sidebar .nav-fav-empty {
    background: rgba(255, 255, 255, 0.55);
    border-style: dashed;
    color: var(--v2-ink-mute);
  }
  .sidebar .nav-fav-empty .nav-fav-ico {
    background: rgba(15, 22, 35, 0.06);
    color: var(--v2-ink-mute);
  }
  .sidebar .nav-fav-empty .nav-fav-label {
    color: var(--v2-ink-mute);
  }
  .sidebar .nav-fav-remove {
    background: var(--v2-orange);
    color: #FFFFFF;
  }

  /* ── Quick-create row (New Lead / New Invoice / New Job) ── */
  .sidebar .sidebar-quick-create {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 14px 0;
    padding: 0;
  }
  .sidebar .sidebar-quick-create .sb-qc {
    border: 0;
    border-radius: 16px;
    padding: 16px 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--v2-cream-soft);
    background: var(--v2-ink);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    text-decoration: none;
    text-align: center;
    min-height: 0;
  }
  .sidebar .sidebar-quick-create .sb-qc i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(250, 246, 238, 0.14);
    color: rgba(250, 246, 238, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  /* Card 2 reads as ink-2 so the trio steps from ink → ink-2 → orange. */
  .sidebar .sidebar-quick-create .sb-qc:nth-child(2) {
    background: var(--v2-ink-2);
  }
  .sidebar .sidebar-quick-create .sb-qc--accent {
    /* 3-stop orange gradient for visible depth (light-orange →
       signal → signal-deep). No glow / drop shadow — per brand
       "no drop shadows on text" + just gradient was the ask. */
    background: linear-gradient(135deg, #F2823F 0%, var(--v2-orange) 45%, var(--v2-orange-dk) 100%);
    color: #FFFFFF;
    box-shadow: none;
  }
  .sidebar .sidebar-quick-create .sb-qc--accent:active {
    background: linear-gradient(135deg, var(--v2-orange) 0%, var(--v2-orange-dk) 100%);
    box-shadow: none;
  }
  .sidebar .sidebar-quick-create .sb-qc--accent i {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
  }

  /* ── Notifications row — keep flush with the cream sheet. ── */
  .sidebar .sidebar-notif-row {
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    margin: 14px 14px 0;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
  }
  .sidebar .sidebar-notif-row i { color: var(--v2-orange-dk); }
  .sidebar .sidebar-notif-row .sidebar-notif-label {
    color: var(--v2-ink);
    font-weight: 600;
  }

  /* The full-menu nav lists inherit their own dark theme; in the v2
     cream sheet flip them to ink-on-cream with white surface chips. */
  .sidebar .sidebar-nav .nav-section-label {
    color: var(--v2-ink-mute);
  }
  .sidebar .nav-chip,
  .sidebar .nav-fav-row,
  .sidebar .nav-primary-card,
  .sidebar .nav-flat-item {
    background: #FFFFFF;
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
  }
  .sidebar .nav-chip i,
  .sidebar .nav-flat-item i {
    color: var(--v2-orange-dk);
  }
  .sidebar .nav-chip-label,
  .sidebar .nav-flat-label,
  .sidebar .nav-primary-label,
  .sidebar .nav-fav-label {
    color: var(--v2-ink);
  }

  /* User dropdown panel — stay on cream. */
  .sidebar .sidebar-dropdown {
    background: #FFFFFF;
    color: var(--v2-ink);
    border: 1px solid var(--v2-line);
  }
  .sidebar .sidebar-dropdown-item {
    color: var(--v2-ink);
  }
  .sidebar .sidebar-dropdown-item:hover {
    background: var(--v2-cream-soft);
  }
  .sidebar .sidebar-dropdown-section-eyebrow {
    color: var(--v2-ink-mute);
    font-family: var(--v2-mono);
    letter-spacing: 0.18em;
  }
}