/*
  v135 Staff App Shell Redesign
  UI/layout only. Does not change permissions, routes, staff roles, checkout,
  tax, coupons, loyalty, customer app, or backend behavior.
*/

:root{
  --staff-bg:#f8fafc;
  --staff-surface:#ffffff;
  --staff-ink:#0f172a;
  --staff-muted:#64748b;
  --staff-line:rgba(15,23,42,.10);
  --staff-dark:#0f172a;
  --staff-dark-2:#111827;
  --staff-primary:#f97316;
  --staff-primary-dark:#ea580c;
  --staff-soft:#fff7ed;
  --staff-radius:24px;
  --staff-nav-h:78px;
  --staff-safe-bottom:env(safe-area-inset-bottom,0px);
  --staff-shadow:0 18px 50px rgba(15,23,42,.12);
}

/* Mobile staff app shell */
@media (max-width: 767px){
  body:not(.shop-page):has(.staff-mobile-shell-v135),
  body.staff-shell-page-v135{
    background:var(--staff-bg) !important;
    padding-bottom:calc(var(--staff-nav-h) + var(--staff-safe-bottom) + 20px) !important;
    overflow-x:hidden !important;
  }

  /* Hide desktop/accordion sidebar on mobile. Bottom nav becomes primary. */
  body.staff-shell-page-v135 aside,
  body.staff-shell-page-v135 .sidebar,
  body.staff-shell-page-v135 .admin-sidebar,
  body.staff-shell-page-v135 .staff-sidebar,
  body.staff-shell-page-v135 nav.sidebar-v33,
  body.staff-shell-page-v135 [class*="sidebar"],
  body.staff-shell-page-v135 [class*="SideNav"],
  body.staff-shell-page-v135 [class*="side-nav"]{
    display:none !important;
  }

  body.staff-shell-page-v135 main,
  body.staff-shell-page-v135 .main,
  body.staff-shell-page-v135 .admin-main,
  body.staff-shell-page-v135 .content,
  body.staff-shell-page-v135 [class*="content"]{
    margin-left:0 !important;
    width:100% !important;
    max-width:100vw !important;
    padding:0 !important;
  }

  .staff-mobile-shell-v135{
    width:100%;
    min-height:100dvh;
    background:
      radial-gradient(circle at top right, rgba(249,115,22,.10), transparent 34%),
      linear-gradient(180deg,#fff 0%,#f8fafc 44%,#fff7ed 100%);
    color:var(--staff-ink);
  }

  .staff-mobile-top-v135{
    position:sticky;
    top:0;
    z-index:7000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--staff-line);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .staff-mobile-brand-v135{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }

  .staff-mobile-logo-v135{
    width:48px;
    height:48px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--staff-primary),var(--staff-primary-dark));
    color:#fff;
    font-size:22px;
    flex:none;
    box-shadow:0 12px 28px rgba(249,115,22,.25);
  }

  .staff-mobile-brand-v135 strong{
    display:block;
    font-size:18px;
    line-height:1.05;
    letter-spacing:-.035em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .staff-mobile-brand-v135 span{
    display:block;
    margin-top:3px;
    color:var(--staff-muted);
    font-weight:750;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .staff-mobile-action-v135{
    width:44px;
    height:44px;
    border:0;
    border-radius:16px;
    background:#111827;
    color:#fff;
    font-size:18px;
    font-weight:950;
  }

  .staff-mobile-page-v135{
    padding:18px 16px 8px;
  }

  .staff-mobile-kicker-v135{
    color:var(--staff-primary-dark);
    font-size:12px;
    font-weight:950;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:8px;
  }

  .staff-mobile-title-v135{
    margin:0;
    color:var(--staff-ink);
    font-size:clamp(34px,10vw,48px);
    line-height:.96;
    letter-spacing:-.075em;
  }

  .staff-mobile-subtitle-v135{
    margin:10px 0 0;
    color:var(--staff-muted);
    font-weight:750;
    font-size:15px;
    line-height:1.4;
  }

  .staff-role-strip-v135{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:16px 16px 4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .staff-role-strip-v135::-webkit-scrollbar{display:none}

  .staff-role-chip-v135{
    flex:none;
    padding:10px 13px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--staff-line);
    color:var(--staff-ink);
    font-weight:950;
    font-size:13px;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
  }

  .staff-role-chip-v135.active-v135{
    background:var(--staff-dark);
    color:#fff;
    border-color:var(--staff-dark);
  }

  .staff-quick-grid-v135{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:16px;
  }

  .staff-quick-card-v135{
    min-height:118px;
    padding:16px;
    border-radius:24px;
    background:#fff;
    color:var(--staff-ink);
    text-decoration:none;
    box-shadow:var(--staff-shadow);
    border:1px solid rgba(15,23,42,.08);
    display:grid;
    align-content:space-between;
  }

  .staff-quick-card-v135 .icon-v135{
    font-size:26px;
    line-height:1;
  }

  .staff-quick-card-v135 strong{
    display:block;
    font-size:18px;
    line-height:1.05;
    letter-spacing:-.035em;
  }

  .staff-quick-card-v135 span{
    display:block;
    color:var(--staff-muted);
    font-size:12px;
    font-weight:750;
    margin-top:4px;
  }

  .staff-quick-card-v135.primary-v135{
    background:linear-gradient(135deg,var(--staff-primary),var(--staff-primary-dark));
    color:#fff;
  }

  .staff-quick-card-v135.primary-v135 span{
    color:rgba(255,255,255,.82);
  }

  .staff-content-card-v135{
    margin:14px 16px;
    padding:18px;
    border-radius:26px;
    background:#fff;
    border:1px solid var(--staff-line);
    box-shadow:var(--staff-shadow);
  }

  /* Existing dashboard cards inside staff pages should become mobile cards, not desktop blocks. */
  body.staff-shell-page-v135 .card,
  body.staff-shell-page-v135 [class*="card"],
  body.staff-shell-page-v135 section{
    border-radius:24px !important;
  }

  body.staff-shell-page-v135 h1{
    font-size:clamp(34px,10vw,48px) !important;
    line-height:.96 !important;
    letter-spacing:-.075em !important;
  }

  body.staff-shell-page-v135 h2{
    font-size:clamp(24px,7vw,34px) !important;
    line-height:1 !important;
    letter-spacing:-.055em !important;
  }

  body.staff-shell-page-v135 input,
  body.staff-shell-page-v135 select,
  body.staff-shell-page-v135 textarea,
  body.staff-shell-page-v135 button{
    font-size:16px !important;
  }

  body.staff-shell-page-v135 button,
  body.staff-shell-page-v135 .btn,
  body.staff-shell-page-v135 a[class*="btn"]{
    min-height:48px;
    border-radius:16px !important;
    touch-action:manipulation;
  }

  .staff-bottom-nav-v135{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9100;
    height:calc(var(--staff-nav-h) + var(--staff-safe-bottom));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    padding:7px 8px calc(7px + var(--staff-safe-bottom));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--staff-line);
    border-radius:24px 24px 0 0;
    box-shadow:0 -18px 44px rgba(15,23,42,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .staff-bottom-nav-v135 a{
    min-width:0;
    min-height:58px;
    border-radius:20px;
    color:#64748b;
    text-decoration:none;
    font-weight:850;
    display:grid;
    place-items:center;
    gap:2px;
    padding:5px 3px;
    -webkit-tap-highlight-color:transparent;
  }

  .staff-bottom-nav-v135 .active-v135{
    color:var(--staff-primary);
    background:#fff7ed;
  }

  .staff-bottom-nav-v135 .icon-v135{
    font-size:21px;
    line-height:1;
  }

  .staff-bottom-nav-v135 .label-v135{
    font-size:11px;
    line-height:1.1;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Hide old generic customer/staff nav on staff pages only to prevent double nav. */
  body.staff-shell-page-v135 .mobile-bottom-nav-v130,
  body.staff-shell-page-v135 .mobile-bottom-nav-v126{
    display:none !important;
  }
}

/* Tablet: collapsible workspace feel, no giant mobile cards */
@media (min-width:768px) and (max-width:1024px){
  body.staff-shell-page-v135{
    background:#f8fafc !important;
  }

  .staff-mobile-shell-v135{
    display:none !important;
  }

  body.staff-shell-page-v135 aside,
  body.staff-shell-page-v135 .sidebar,
  body.staff-shell-page-v135 [class*="sidebar"]{
    width:84px !important;
    overflow:hidden !important;
  }

  body.staff-shell-page-v135 main,
  body.staff-shell-page-v135 .main,
  body.staff-shell-page-v135 .admin-main{
    margin-left:84px !important;
  }
}

/* Desktop: keep existing desktop workflow, only light polish. */
@media (min-width:1025px){
  .staff-mobile-shell-v135,
  .staff-bottom-nav-v135{
    display:none !important;
  }

  body.staff-shell-page-v135{
    background:#f8fafc !important;
  }
}