/* =============================================================
   shell.css — Jimeat ERP Unified Responsive Shell
   Version: 1.0 (2026-05-13)
   Breakpoint: 1024px
   Brand red: #B91C1C
   Two shell modes:
     .shell-desktop-first — admin/hub/planner/account/reconciliation
     .shell-mobile-first  — order/warehouse/wastage
   =============================================================

   RULE: @media overrides ALWAYS come AFTER base rules in this
   file so that specificity ties resolve correctly (source order).
   ============================================================= */

/* ── Global reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; }

/* ── Design Tokens (shell namespace) ─────────────────────────── */
:root {
  /* Brand */
  --sh-red:          #B91C1C;
  --sh-red-dark:     #991B1B;
  --sh-red-light:    #FEE2E2;
  --sh-red-subtle:   #FFF5F5;

  /* Ink */
  --sh-ink:          #111827;
  --sh-ink-muted:    #6B7280;
  --sh-ink-faint:    #9CA3AF;

  /* Surfaces */
  --sh-surface:      #FFFFFF;
  --sh-surface-2:    #F9FAFB;
  --sh-surface-3:    #F3F4F6;

  /* Borders */
  --sh-border:       #E5E7EB;
  --sh-border-strong:#D1D5DB;

  /* Semantic */
  --sh-green:        #065F46;
  --sh-green-bg:     #D1FAE5;
  --sh-amber:        #92400E;
  --sh-amber-bg:     #FEF3C7;
  --sh-blue:         #1E40AF;
  --sh-blue-bg:      #DBEAFE;

  /* Layout */
  --sh-sidebar-w:    240px;
  --sh-header-h:     56px;
  --sh-appbar-h:     56px;
  --sh-bottomnav-h:  64px;
  --sh-breakpoint:   1024px;

  /* Misc */
  --sh-radius:       6px;
  --sh-radius-lg:    10px;
  --sh-shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --sh-shadow:       0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --sh-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* =============================================================
   DESKTOP-FIRST SHELL
   Used by: hub, admin, planner, account, reconciliation
   Default layout: sidebar (240px) + topbar (56px) grid
   Mobile override: hamburger drawer at ≤1023px
   ============================================================= */

/* ── Shell wrapper ── */
.shell-desktop-first {
  display: grid;
  grid-template-columns: var(--sh-sidebar-w) 1fr;
  grid-template-rows: var(--sh-header-h) 1fr;
  height: 100vh;
  width: 100%;
  font-family: var(--sh-font);
  font-size: 14px;
  color: var(--sh-ink);
  background: var(--sh-surface-2);
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar ── */
.shell-desktop-first .sh-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-border);
  height: var(--sh-header-h);
  position: sticky;
  top: 0;
  z-index: 100;
}

.shell-desktop-first .sh-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--sh-sidebar-w);
  padding: 0 20px;
  height: 100%;
  border-right: 1px solid var(--sh-border);
  flex-shrink: 0;
}

/* Hamburger — hidden by default on desktop */
.shell-desktop-first .sh-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: var(--sh-ink-muted);
  border-radius: var(--sh-radius);
  flex-shrink: 0;
}

.shell-desktop-first .sh-brand-logo {
  width: 28px;
  height: 28px;
  background: var(--sh-red);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.shell-desktop-first .sh-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sh-ink);
  letter-spacing: -0.3px;
}

.shell-desktop-first .sh-brand-tag {
  font-size: 10px;
  color: var(--sh-ink-faint);
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.shell-desktop-first .sh-topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 6px;
  min-width: 0;
}

.shell-desktop-first .sh-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
}

.shell-desktop-first .sh-topbar-user {
  font-size: 13px;
  color: var(--sh-ink-muted);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-desktop-first .sh-topbar-date {
  font-size: 13px;
  color: var(--sh-ink-faint);
  white-space: nowrap;
}

/* Logout button in topbar */
.shell-desktop-first .sh-topbar-logout {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-ink-muted);
  background: var(--sh-surface-2);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  white-space: nowrap;
  min-height: 32px;
}

.shell-desktop-first .sh-topbar-logout:hover {
  border-color: var(--sh-red);
  color: var(--sh-red);
}

/* ── Sidebar ── */
.shell-desktop-first .sh-sidebar {
  background: var(--sh-surface);
  border-right: 1px solid var(--sh-border);
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}

.shell-desktop-first .sh-sidebar::-webkit-scrollbar { width: 4px; }
.shell-desktop-first .sh-sidebar::-webkit-scrollbar-track { background: transparent; }
.shell-desktop-first .sh-sidebar::-webkit-scrollbar-thumb { background: var(--sh-border); border-radius: 2px; }

.shell-desktop-first .sh-nav-section { padding: 0 12px; margin-bottom: 4px; }

.shell-desktop-first .sh-nav-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sh-ink-faint);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 8px 8px 4px;
}

.shell-desktop-first .sh-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--sh-radius);
  cursor: pointer;
  color: var(--sh-ink-muted);
  font-size: 13.5px;
  font-weight: 400;
  transition: all .1s;
  text-decoration: none;
  margin-bottom: 1px;
  min-height: 36px;
  position: relative;
}

.shell-desktop-first .sh-nav-item:hover {
  background: var(--sh-surface-3);
  color: var(--sh-ink);
}

.shell-desktop-first .sh-nav-item.active {
  background: var(--sh-red-light);
  color: var(--sh-red-dark);
  font-weight: 500;
}

.shell-desktop-first .sh-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--sh-red);
  border-radius: 0 2px 2px 0;
}

.shell-desktop-first .sh-nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.shell-desktop-first .sh-sidebar-footer {
  margin-top: auto;
  padding: 12px 12px 4px;
  border-top: 1px solid var(--sh-border);
}

.shell-desktop-first .sh-sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

.shell-desktop-first .sh-sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sh-red);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shell-desktop-first .sh-sidebar-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-desktop-first .sh-sidebar-user-role {
  font-size: 11px;
  color: var(--sh-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar overlay (mobile backdrop) ── */
.shell-desktop-first .sh-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 98;
}

/* ── Main content area ── */
.shell-desktop-first .sh-main {
  overflow-y: auto;
  background: var(--sh-surface-2);
}

.shell-desktop-first .sh-main::-webkit-scrollbar { width: 6px; }
.shell-desktop-first .sh-main::-webkit-scrollbar-track { background: transparent; }
.shell-desktop-first .sh-main::-webkit-scrollbar-thumb { background: var(--sh-border-strong); border-radius: 3px; }

/* ── DESKTOP-FIRST MOBILE OVERRIDES (≤1023px) ──────────────── */
/* CRITICAL: These rules come AFTER all desktop defaults above   */
@media (max-width: 1023px) {

  .shell-desktop-first {
    grid-template-columns: 1fr;
    grid-template-rows: var(--sh-header-h) 1fr;
  }

  .shell-desktop-first .sh-topbar-brand {
    width: auto;
    border-right: none;
    padding: 0 8px 0 4px;
    gap: 0;
  }

  .shell-desktop-first .sh-hamburger {
    display: flex;
  }

  .shell-desktop-first .sh-brand-tag {
    display: none;
  }

  .shell-desktop-first .sh-topbar-date {
    display: none;
  }

  /* Sidebar: fixed drawer, slides in from left */
  .shell-desktop-first .sh-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sh-sidebar-w);
    height: 100%;
    z-index: 99;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }

  .shell-desktop-first .sh-sidebar.open {
    transform: translateX(0);
  }

  .shell-desktop-first .sh-sidebar-overlay.open {
    display: block;
  }

  .shell-desktop-first .sh-main {
    padding: 20px 16px;
    grid-column: 1;
  }
}


/* =============================================================
   MOBILE-FIRST SHELL
   Used by: order, warehouse, wastage
   Default layout: fixed appbar + bottom-nav, scrollable content
   Desktop override: centered container (max 720px) at ≥1024px
   ============================================================= */

.shell-mobile-first {
  font-family: var(--sh-font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  background: var(--sh-surface-2);
  color: var(--sh-ink);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── App Bar ── */
.shell-mobile-first .sh-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sh-appbar-h);
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 200;
}

.shell-mobile-first .sh-appbar-logo {
  width: 30px;
  height: 30px;
  background: var(--sh-red);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.shell-mobile-first .sh-appbar-title-wrap {
  flex: 1;
  min-width: 0;
}

.shell-mobile-first .sh-appbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sh-ink);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.shell-mobile-first .sh-appbar-sub {
  font-size: 11px;
  color: var(--sh-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-mobile-first .sh-appbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shell-mobile-first .sh-icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: var(--sh-ink-muted);
}

.shell-mobile-first .sh-icon-btn:active {
  background: var(--sh-surface-3);
}

/* ── Screen / Scroll area ── */
.shell-mobile-first .sh-screen {
  padding-top: var(--sh-appbar-h);
  padding-bottom: calc(var(--sh-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
}

.shell-mobile-first .sh-content {
  padding: 16px;
}

/* ── Bottom Nav ── */
.shell-mobile-first .sh-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--sh-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--sh-surface);
  border-top: 1px solid var(--sh-border);
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 200;
}

.shell-mobile-first .sh-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--sh-ink-faint);
  transition: color .1s;
  position: relative;
  min-height: 44px;
  text-decoration: none;
}

.shell-mobile-first .sh-nav-tab.active {
  color: var(--sh-red);
}

.shell-mobile-first .sh-nav-tab-icon {
  font-size: 20px;
  line-height: 1;
}

.shell-mobile-first .sh-nav-tab-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* ── Page wrapper (mobile-first pages have a page-wrapper div) ── */
.shell-mobile-first .sh-page-wrapper {
  max-width: 100%;
  position: relative;
  min-height: 100vh;
}

/* ── MOBILE-FIRST DESKTOP OVERRIDES (≥1024px) ─────────────── */
/* CRITICAL: These rules come AFTER all mobile defaults above   */
@media (min-width: 1024px) {

  .shell-mobile-first {
    background: var(--sh-surface-3);
  }

  .shell-mobile-first .sh-page-wrapper {
    max-width: 720px;
    margin: 0 auto;
    background: var(--sh-surface-2);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 0 1px var(--sh-border), 0 0 40px rgba(0,0,0,.08);
  }

  /* Appbar + bottom nav stay full-width on desktop (bars span edge-to-edge) */
  .shell-mobile-first .sh-appbar {
    max-width: 100%;
    left: 0;
    right: 0;
    transform: none;
  }

  .shell-mobile-first .sh-bottom-nav {
    max-width: 100%;
    left: 0;
    right: 0;
    transform: none;
  }

  /* Slightly more padding on desktop */
  .shell-mobile-first .sh-content {
    padding: 20px 24px;
  }
}