/* ═══════════════════════════════════════════════════════════
   2 DEGREE WEBAPP — layout.css
   Structural layout only. No colour/component styling.
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile top bar ─────────────────────────────────────── */
.mobile-topbar {
  background: var(--ck-green);
  height: var(--topbar-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.topbar-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ck-green-mid);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: #fff; flex-shrink: 0;
}
.topbar-info { flex: 1 }
.topbar-info h1 { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2 }
.topbar-info p  { color: #ACE5DC; font-size: 11px }
#cart-badge {
  background: var(--ck-green-light); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; display: none; flex-shrink: 0;
  font-family: 'DM Mono', monospace;
}

/* ── Mobile tab bar ─────────────────────────────────────── */
.mobile-tabbar {
  background: var(--surface);
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-h);
  z-index: 199;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile-tabbar::-webkit-scrollbar { display: none }
.m-tab {
  flex: 0 0 auto; padding: 10px 14px; text-align: center;
  font-size: 11px; font-weight: 500; color: var(--text-2);
  cursor: pointer; border-bottom: 2.5px solid transparent;
  user-select: none; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.m-tab svg { display: block; margin: 0 auto 3px; stroke: currentColor; flex-shrink: 0 }
.m-tab.active { color: var(--ck-green); border-bottom-color: var(--ck-green) }

/* ── Page panels ────────────────────────────────────────── */
.page { display: none; padding: var(--page-pad) var(--page-pad) 90px }
.page.active { display: block }

/* ── Mobile sticky bottom bar ───────────────────────────── */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 10px 14px; display: none; align-items: center; gap: 10px;
}
.sticky-bar.show { display: flex }
.sticky-bar-info { flex: 1 }
.sticky-bar-info small  { font-size: 11px; color: var(--text-2) }
.sticky-bar-info strong { display: block; font-size: 13px; color: var(--ck-green) }
.sticky-go-btn {
  background: var(--ck-green); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 10px 16px;
  font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; white-space: nowrap;
}

/* ── Small phones ────────────────────────────────────────── */
@media (max-width: 360px) {
  :root { --page-pad: 10px }
  .topbar-info h1 { font-size: 13px }
  .m-tab { font-size: 10px; padding: 8px 2px }
  .m-tab svg { width: 16px; height: 16px }
}

/* ── Tablet portrait ─────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 767px) {
  :root { --page-pad: 20px }
  .items-grid-mob { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
  .stat-grid { grid-template-columns: repeat(2,1fr) }
}

/* ── Desktop / tablet landscape ─────────────────────────── */
@media (min-width: 768px) {
  .mobile-topbar, .mobile-tabbar, .sticky-bar { display: none !important }
  body { display: flex; min-height: 100vh }

  .desktop-sidebar {
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--ck-green);
    display: flex; flex-direction: column;
    position: sticky; top: 0; min-height: 100vh; height: 100vh; overflow-y: auto;
  }
  .sidebar-brand { padding: 24px 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.12) }
  .sidebar-brand .brand-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px;
  }
  .sidebar-brand h2 { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3 }
  .sidebar-brand p  { color: #ACE5DC; font-size: 11px; margin-top: 2px }
  .sidebar-nav { padding: 14px 10px; flex: 1 }
  .d-tab {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 11px; border-radius: 10px;
    color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500;
    cursor: pointer; margin-bottom: 3px;
    transition: background .15s, color .15s; user-select: none;
  }
  .d-tab svg { flex-shrink: 0; stroke: currentColor; width: 17px; height: 17px }
  .d-tab:hover  { background: rgba(255,255,255,0.1); color: #fff }
  .d-tab.active { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600 }
  .d-tab .tab-badge {
    margin-left: auto; background: var(--ck-green-light);
    color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 20px;
    font-family: 'DM Mono', monospace; display: none;
  }
  .d-tab .tab-badge.show { display: block }
  .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.12) }
  .sidebar-footer p        { color: rgba(255,255,255,0.5); font-size: 11px; line-height: 1.6 }
  .sidebar-footer strong   { color: rgba(255,255,255,0.8) }

  .desktop-main { flex: 1; overflow-y: auto; min-width: 0 }
  .desktop-header {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 16px 28px; display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 100;
  }
  .desktop-header h2 { font-size: 17px; font-weight: 600; flex: 1 }
  .desktop-header p  { font-size: 13px; color: var(--text-2) }
  .desktop-content { padding: 20px 28px 60px; width: 100% }
  .page { padding: 0 !important }\n  .stat-grid { grid-template-columns: repeat(4,1fr) }
}

@media (min-width: 1200px) {
  :root { --sidebar-w: 280px }
  .desktop-content { padding: 28px 36px 60px }
  .desktop-header { padding: 20px 36px }
  .sidebar-brand { padding: 28px 22px 24px }
  .sidebar-brand .brand-icon { width: 52px; height: 52px; font-size: 22px }
  .sidebar-brand h2 { font-size: 16px }
  .d-tab { font-size: 14px; padding: 11px 13px }
}

@media (min-width: 1600px) {
  :root { --sidebar-w: 300px }
  .desktop-content { padding: 32px 40px 60px }
}