/* ---------- Layout ---------- */
  .app{display:grid; grid-template-columns:264px 1fr; min-height:100vh;}
  .sidebar{
    background:var(--card-bg); border-right:1px solid var(--border);
    padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
    display:flex; flex-direction:column; gap:4px; z-index:40;
  }
  .brand{display:flex; align-items:center; gap:10px; padding:4px 10px 22px;}
  .brand-mark{
    width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg,#a78bfa,#7c3aed);
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
    box-shadow:0 4px 10px rgba(124,58,237,.35);
  }
  .brand-text b{display:block; font-size:15px; letter-spacing:-.01em;}
  .brand-text span{display:block; font-size:11.5px; color:var(--ink-500);}

  .nav-group{margin-top:6px;}
  .nav-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-500); padding:14px 12px 6px; text-transform:uppercase;}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
    font-size:13.6px; font-weight:500; color:var(--ink-700); position:relative;
    transition:background .15s ease, color .15s ease;
  }
  .nav-item svg{width:18px;height:18px; flex-shrink:0; opacity:.85;}
  .nav-item:hover{background:var(--ink-100);}
  .nav-item.active{background:var(--purple-50); color:var(--purple-600); font-weight:600;}
  .nav-item.active svg{opacity:1; stroke:var(--purple-600);}
  /* The badge lives inside the label <span>, where margin-left:auto does nothing: give it real spacing. */
  .nav-item span .nav-badge{margin-left:7px; vertical-align:1px;}
  .nav-badge{
    margin-left:auto; font-size:9.5px; font-weight:700; background:var(--purple-600); color:#fff;
    padding:2px 6px; border-radius:20px; letter-spacing:.03em;
  }

  /* AI Studio — collapsible group. Parent row toggles open/closed; the
     5 pages (Plan/Ideas/Create Content/Instagram/Facebook) live nested
     inside instead of as separate flat sidebar items. */
  .nav-parent{cursor:pointer;}
  .nav-chevron{margin-left:auto; display:flex; flex-shrink:0; opacity:.55; transition:transform .2s ease;}
  .nav-chevron svg{width:12px; height:12px;}
  .nav-group-item.expanded .nav-parent .nav-chevron{transform:rotate(180deg);}
  .nav-children{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .nav-group-item.expanded .nav-children{max-height:320px;}
  .nav-child{padding-left:35px; font-size:12.8px;}
  .nav-child svg{width:16px; height:16px;}

  .plan-card{
    margin-top:auto; background:linear-gradient(160deg,var(--purple-50),var(--card-bg));
    border:1px solid var(--purple-100); border-radius:var(--radius-md); padding:16px; text-align:left;
  }
  .plan-card b{font-size:13.5px;}
  .plan-card p{margin:2px 0 12px; font-size:11.5px; color:var(--ink-500);}
  .btn-upgrade {
  width:100%;
  background:var(--purple-600);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s ease, transform .1s ease;
}
  .btn-upgrade:hover{background:var(--purple-700); transform:translateY(-1px);}

  /* ---------- Main ---------- */
  .main{padding:22px 28px 60px; max-width:1600px; min-width:0;}
  .topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px;}
  .greet h1{font-size:25px; margin:0; letter-spacing:-.02em;}
  .greet p{margin:5px 0 0; color:var(--ink-500); font-size:13.6px;}
  .topbar-actions{display:flex; align-items:center; gap:12px;}
  .icon-btn{
    width:38px;height:38px;border-radius:11px; border:1px solid var(--border); background:var(--card-bg);
    display:flex;align-items:center;justify-content:center; position:relative; color:var(--ink-700);
    transition:background .15s ease, border-color .15s ease;
  }
  .icon-btn:hover{background:var(--ink-100);}
  .icon-btn svg{width:17px;height:17px;}
  .dot-badge{position:absolute; top:-4px; right:-4px; background:var(--red-600); color:#fff; font-size:9.5px; font-weight:700; min-width:16px; height:16px; border-radius:20px; display:flex;align-items:center;justify-content:center; border:2px solid var(--card-bg);}
  .date-pill{
    display:flex;align-items:center;gap:8px; background:var(--card-bg); border:1px solid var(--border);
    padding:0 14px; min-height:38px; border-radius:11px; font-size:13px; font-weight:500; color:var(--ink-700);   /* 38px = same height as the search / bell buttons beside it */
  }
  .avatar{
    width:38px;height:38px;border-radius:11px; background:linear-gradient(135deg,#ddd6fe,#a78bfa);
    display:flex;align-items:center;justify-content:center; font-weight:700; color:var(--purple-700); font-size:13px;
    border:1px solid var(--border);
  }

  /* ---------- Views ---------- */
  .view{display:none;}
  .view.active{display:block; animation:viewFadeIn .22s ease;}
  @keyframes viewFadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  /* Mobile nav toggle */
  .menu-toggle{display:none; width:38px;height:38px; border-radius:11px; border:1px solid var(--border); background:var(--card-bg); align-items:center; justify-content:center;}
  .menu-toggle svg{width:18px;height:18px;}
  .sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:39;}


/* While the global search is open the date pill folds down to just its calendar icon.
   Make that folded state a proper 38x38 button (same size as the search / bell buttons) instead of a taller empty box. */
.date-range-wrap.gs-collapsed .date-pill{width:38px; height:38px; min-height:38px; padding:0; gap:0; justify-content:center; box-sizing:border-box;}


/* Topbar (desktop / tablet): the date pill sits on the LEFT, right after the page title; search, the Bookings
   shortcut, the bell and the profile stay on the right. Pure CSS — the markup order is unchanged, and the
   <=560px mobile layout (responsive.css) is untouched. The staff portal keeps its own topbar rules. */
@media (min-width:561px){
  body:not(.staff-dashboard-page) .topbar-actions{ flex:1; min-width:0; justify-content:flex-end; }
  body:not(.staff-dashboard-page) .topbar #dateRangeWrap{ order:-1; margin-right:auto; }
  body:not(.staff-dashboard-page) .topbar .date-range-dropdown{ left:0; right:auto; }
}

/* Desktop (sidebar visible, >=981px): the date picker comes FIRST — to the left of the page heading — and
   search, the Bookings shortcut, the bell and the profile stay on the right. Pure CSS: .topbar-actions is
   flattened (display:contents) so its children can be ordered around the heading wrapper (menu button +
   title); the markup is unchanged. Tablet and phone keep their own layouts (the hamburger needs the heading
   first there). The staff portal keeps its own topbar rules. */
@media (min-width:981px){
  body:not(.staff-dashboard-page) .topbar{ align-items:center; flex-wrap:nowrap; gap:16px; }
  body:not(.staff-dashboard-page) .topbar-actions{ display:contents; }
  body:not(.staff-dashboard-page) .topbar #dateRangeWrap{ order:1; margin-right:0; flex:none; }
  body:not(.staff-dashboard-page) .topbar > div:first-child{ order:2; flex:1; min-width:0; }
  body:not(.staff-dashboard-page) .topbar #gsearchWrap{ order:3; }
  body:not(.staff-dashboard-page) .topbar #bookingsShortcutBtn{ order:4; }
  body:not(.staff-dashboard-page) .topbar #notifWrap{ order:5; }
  body:not(.staff-dashboard-page) .topbar #accountWrap{ order:6; }
  body:not(.staff-dashboard-page) .topbar .greet h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
/* Bookings shortcut: highlighted while that view is open (matches the sidebar's active item). */
#bookingsShortcutBtn.active{ background:var(--purple-100); color:var(--purple-600); border-color:var(--purple-500); }