/* ============================================================
   Nearily panel — shared sidebar shell
   SINGLE SOURCE for the app sidebar used by BOTH the admin SPA
   (static/index.html) and the standalone partner pages
   (cafe.html / scanner.html / settings.html / staff.html / plans.html,
   which build it via panel-common.js mountPartnerNav()).
   Rules below were relocated verbatim from index.html's <style>; edit
   here only. @keyframes fadeIn (drawer backdrop) is redeclared here —
   byte-identical to index.html's — so the partner pages, which don't inline
   it, are self-contained. @keyframes pulse-dot is redeclared here for the
   same reason (the partner foot now carries the connected dot too) —
   byte-identical to index.html's copy.
   ============================================================ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,.06); }
}

    .side-user {
      display: flex; align-items: center; gap: 12px;
      padding: 6px 8px 4px;
    }
    .side-user-name { font-weight: 600; font-size: 14px; line-height: 1.1; letter-spacing: -.005em; color: #1A1A2E; }
    .side-user-role { font-size: 12px; color: rgba(26,26,46,0.55); margin-top: 3px; }
    .side-user-avatar {
      width: 36px; height: 36px; border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, #5AA9FF 0%, #007AFD 55%, #0052AD 100%);
      box-shadow: 0 2px 8px rgba(31,38,135,0.18), inset 0 1px 2px rgba(255,255,255,0.6);
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }
    .side-user-avatar img,
    .profile-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .profile-avatar { position: relative; overflow: hidden; }
    /* Cafe-initial fallback when the cafe has no logo (partner sessions). */
    .side-user-avatar .avatar-initial {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 700; font-size: 15px;
    }
    /* HeroUI-style shimmer skeleton — removed via onload */
    .side-user-avatar.loading::before,
    .profile-avatar.loading::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(228,228,231,0.55) 25%,
        rgba(244,244,245,0.85) 50%,
        rgba(228,228,231,0.55) 75%);
      background-size: 200% 100%;
      animation: avatar-shimmer 1.5s linear infinite;
      pointer-events: none;
      z-index: 1;
    }
    @keyframes avatar-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .side-section-divider {
      height: 1px; background: rgba(26,26,46,0.07); margin: 6px 4px;
    }
    .side-section-label {
      font-size: 10px; font-weight: 600; letter-spacing: .08em;
      color: rgba(26,26,46,0.40); text-transform: uppercase;
      padding: 0 12px; margin: 4px 0 2px;
    }

    .side-nav {
      display: flex; flex-direction: column; gap: 1px;
      flex: 1;
    }
    .side-tab {
      display: flex; align-items: center; gap: 11px;
      padding: 10px 12px;
      border-radius: 12px;
      background: transparent; border: none;
      cursor: pointer;
      font-size: 14px; font-weight: 500;
      color: rgba(26,26,46,0.72);
      text-align: left; width: 100%;
      transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    }
    .side-tab:hover {
      background: rgba(255,255,255,0.55);
      color: #1A1A2E;
    }
    .side-tab.active {
      background: rgba(255,255,255,0.85);
      color: #1A1A2E;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(31,38,135,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .side-tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
    .side-tab.active svg { opacity: 1; color: #007AFD; }
    .side-tab .side-badge {
      margin-left: auto;
      font-size: 11px; font-weight: 600;
      padding: 2px 8px; border-radius: 999px;
      background: rgba(0,122,253,0.12); color: #1E40AF;
      border: 1px solid rgba(0,122,253,0.22);
    }
    /* Nav item awaiting data (partner "View website" until the @tag resolves). */
    .side-tab.disabled { opacity: .5; cursor: default; }

    /* Cafe switcher (multi-cafe partners / chains) — sits right under the
       profile chip, both in the index.html partner SPA and in the
       standalone-page nav built by mountPartnerNav(). */
    .side-cafe-switch {
      width: 100%; margin: 2px 0 4px;
      font: 600 13px 'Inter', system-ui, sans-serif; color: #1A1A2E;
      background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6);
      border-radius: 12px; padding: 8px 10px; cursor: pointer;
    }

    /* Sidebar data card — the admin shell shows Storage usage here; partner
       sessions show live stamp counts for the selected cafe. Mirrors the
       admin #usage-box (glass-soft card + label + bar + mute line) so both
       roles render the identical sidebar format. */
    .side-stats {
      padding: 12px 14px; margin: 4px 2px 2px;
      background: rgba(255,255,255,0.4);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.5);
      border-radius: 16px;
    }
    .side-stats-label {
      font-size: 11px; font-weight: 500; text-transform: uppercase;
      letter-spacing: .06em; color: rgba(26,26,46,.55);
      margin-bottom: 6px;
    }
    .side-stats-track {
      height: 6px; border-radius: 999px;
      background: rgba(26,26,46,.08); overflow: hidden;
    }
    .side-stats-bar {
      height: 100%; width: 0%;
      background: #007AFD; border-radius: 999px;
      transition: width .4s ease;
    }
    .side-stats-text { font-size: 12px; color: rgba(26,26,46,0.45); margin-top: 8px; }

    .side-foot {
      padding: 10px 12px 4px;
      display: flex; align-items: center; gap: 8px;
      border-top: 1px solid rgba(26,26,46,0.06);
      margin-top: 6px;
    }
    .side-foot .pulse-dot {
      width: 7px; height: 7px; border-radius: 999px;
      background: #10B981;
      box-shadow: 0 0 0 3px rgba(16,185,129,.20);
      animation: pulse-dot 2.4s ease-in-out infinite;
    }
    .side-foot.down .pulse-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.20); }
    .side-foot-text { font-size: 12px; color: rgba(26,26,46,0.62); flex: 1; min-width: 0; }
    .side-foot-action {
      width: 28px; height: 28px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(26,26,46,0.05);
      border: none; cursor: pointer;
      transition: background 140ms ease;
    }
    .side-foot-action:hover { background: rgba(26,26,46,0.10); }
    .side-foot-action svg { width: 14px; height: 14px; color: rgba(26,26,46,0.65); }

    /* Sidebar mobile drawer */
    .sidebar-toggle {
      display: none; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 999px;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.7);
      cursor: pointer;
      flex-shrink: 0;
    }
    .sidebar-toggle svg { width: 17px; height: 17px; color: #1A1A2E; }

    .main-mobile-bar {
      display: none;
      align-items: center; gap: 12px;
      margin-bottom: 18px;
    }
    .main-mobile-bar .current-tab {
      /* Serif italic page title in the top bar (20.08, Kağan) — the in-content
         h2 duplicates it and is hidden on mobile below. */
      font-family: 'Instrument Serif', Georgia, serif;
      font-style: italic;
      font-size: 22px; font-weight: 400;
      color: #1A1A2E;
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    @media (max-width: 900px) {
      /* Title lives in the mobile top bar; hide the duplicate heading and
         let header rows (cached line + Refresh) wrap instead of squishing. */
      .tab-content h2.serif { display: none; }
      .tab-content .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 6px; }
    }

    @media (max-width: 900px) {
      /* IMPORTANT: drop the card's backdrop-filter on mobile.
         backdrop-filter establishes a containing block, which would anchor
         the position:fixed sidebar to the card instead of the viewport AND
         cause Safari to swallow click events on the drawer buttons. With it
         removed, the sidebar floats correctly against the viewport, the dark
         scrim covers the full screen, and taps on tabs register normally. */
      .app-card {
        margin: 12px;
        grid-template-columns: 1fr;
        height: calc(100dvh - 24px);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .app-main {
        padding: 18px 18px 28px;
      }
      /* Mobile drawer — solid white card, crisp text on top of a dark scrim. */
      .app-sidebar {
        position: fixed;
        top: 12px; left: 12px; bottom: 12px;
        width: min(280px, calc(100vw - 24px));
        z-index: 60;
        background: #FFFFFF;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 1px solid rgba(26,26,46,0.06);
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(15,23,42,0.28);
        transform: translateX(calc(-100% - 16px));
        transition: transform 320ms cubic-bezier(.16,1,.3,1);
        padding: 22px 16px 18px;
      }
      .app-sidebar.open { transform: translateX(0); }
      .sidebar-backdrop {
        position: fixed; inset: 0;
        z-index: 55;
        background: rgba(15,23,42,0.45);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        animation: fadeIn 200ms ease;
      }
      .sidebar-backdrop.hidden { display: none; }
      .sidebar-toggle { display: inline-flex; }
      .main-mobile-bar { display: flex; }
    }

    @media (min-width: 901px) {
      .sidebar-backdrop { display: none !important; }
    }

    /* Brand logo (Vector.svg) inside the round marks */
    .logo-mark svg { width: 60%; height: 60%; display: block; }

    /* Unread badge on sidebar nav tabs */
    .side-tab { position: relative; }
    .nav-badge {
      margin-left: auto;
      min-width: 20px; height: 20px; padding: 0 6px;
      border-radius: 999px; background: #007AFD; color: #fff;
      font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
      box-shadow: 0 2px 6px rgba(0,122,253,.4);
    }

/* ── Red alert badge variant — admin Mail / Tickets sidebar tabs ── */
.nav-badge-alert { background: #EF4444; box-shadow: 0 2px 6px rgba(239,68,68,.42); }

/* ─────────────────────────────────────────────────────────────
   Partner standalone pages. mountPartnerNav() (panel-common.js) builds
   the SAME admin sidebar shell (.app-sidebar / .side-user / .side-nav /
   .side-tab / .side-stats / .side-foot), but the standalone pages have no
   .app-card grid, so the sidebar floats as a fixed glass rail on desktop
   and an off-canvas drawer on mobile. Only container-positioning + the
   back-to-admin link live here; the component look is the shared shell.
   ───────────────────────────────────────────────────────────── */
a.side-tab { text-decoration: none; }
.app-sidebar.partner-standalone { display: flex; flex-direction: column; gap: 12px; }
.app-sidebar.partner-standalone .side-nav { gap: 2px; }

/* back-to-admin link (admins browsing partner pages un-impersonated) */
.pn-admin { display:block; text-align:center; padding:4px; font-size:12px; font-weight:600; color:rgba(26,26,46,.55); text-decoration:none; }
.pn-admin:hover { color:#1A1A2E; }

@media (min-width: 901px) {
  .app-sidebar.partner-standalone {
    position: fixed; left: 18px; top: var(--partner-nav-side-top, 18px); bottom: 18px;
    width: 216px; z-index: 40; padding: 20px 14px 16px;
    border: 1px solid rgba(255,255,255,0.6); border-right: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(31,38,135,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  html.has-partner-nav body { padding-left: var(--partner-nav-pad-left, 250px); }
  html.has-partner-nav select.cafe-select { display: none; }
  .main-mobile-bar.partner-standalone { display: none; }
}
@media (max-width: 900px) {
  html.has-partner-nav body { padding-top: var(--partner-nav-pad-top, 70px); }
  .main-mobile-bar.partner-standalone {
    position: fixed; top: var(--partner-nav-bar-top, 10px); left: 10px; right: 10px;
    z-index: 41; margin-bottom: 0; padding: 8px 12px; border-radius: 16px;
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: 0 8px 24px rgba(31,38,135,0.12);
  }
}