/* shell.css — docs/DESIGN-shadcn-ui.md §3 + §7 (F2: ilova qobig'i)
 *
 * shadcn/ui dashboard-01: "inset" sidebar (offcanvas) + site-header + inset ichidagi kontent.
 * Bo'limlar:  0 yuklanish holati  1 layout (#app / #sidebar / #main)  2 sidebar (brend, CTA, menyu, NavUser)
 *             3 header (trigger, sarlavha, sana, mamlakat, til, tema)  4 release banner  5 dropdown qo'shimchalari  6 logo
 * Ranglar faqat tokens.css dan (light + dark). Komponentlar (.btn, .toggle-group, .dropdown ...) — components.css.
 */

/* ============================== 0. Yuklanish holati ============================== */
/* Autentifikatsiya javobi kelguncha shell miltillamasin (app.js `booting` klassini olib tashlaydi).
   JS umuman yuklanmasa 2.5s dan keyin baribir ko'rinadi. */
body.booting #app { visibility: hidden; animation: shell-reveal 0s linear 2.5s forwards; }
@keyframes shell-reveal { to { visibility: visible; } }

/* ============================== 1. Layout ============================== */
#app {
  display: flex; height: 100vh; overflow: hidden;
  background: var(--sidebar); color: var(--foreground);   /* inset varianti: fon = --sidebar */
}

/* --- Sidebar (offcanvas): yopilganda chapga suriladi (holat <html data-sidebar="collapsed">) --- */
#sidebar {
  flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); min-height: 0;
  display: flex; flex-direction: column; padding: 8px;            /* inset: p-2 */
  background: var(--sidebar); color: var(--sidebar-foreground);
  transition: margin-left var(--duration) linear, visibility 0s linear 0s;
}
html[data-sidebar="collapsed"] #sidebar {
  margin-left: calc(var(--sidebar-width) * -1); visibility: hidden;
  transition: margin-left var(--duration) linear, visibility 0s linear var(--duration);
}

/* --- Inset: yumaloq burchakli, soyali, to'liq balandlikdagi asosiy panel --- */
#main {
  flex: 1 1 0; min-width: 0; min-height: 0; margin: 8px 8px 8px 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--background); box-shadow: var(--shadow-sm);
  transition: margin-left var(--duration) linear;
}
html[data-sidebar="collapsed"] #main { margin-left: 8px; }

/* Kontent: px-6 py-6 (lg). Xarita (#page.no-pad) inset'ni to'liq egallaydi. */
#page { flex: 1 1 0; min-height: 0; position: relative; overflow: auto; padding: 24px; outline: none; }
#page.no-pad { padding: 0; overflow: hidden; }

/* Rol bo'yicha yashirish: faqat media_owner ko'radi (UX qulayligi — haqiqiy chegara backend'da; base.css'dagi qoidaning nusxasi) */
body:not([data-role="media_owner"]) .owner-only { display: none !important; }

/* ============================== 2. Sidebar ============================== */
.sidebar-header, .sidebar-footer { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.sidebar-content { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; }
.sidebar-group { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; }
.sidebar-secondary { margin-top: auto; }
.sidebar-admin { margin-top: 12px; }
.sidebar-group-label {
  display: flex; align-items: center; height: 32px; padding: 0 8px; border-radius: var(--radius-md);
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.sidebar-menu { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sidebar-menu > li { position: relative; }

/* SidebarMenuButton: h-8 gap-2 rounded-md p-2 text-sm; faol = sidebar-accent + font-medium */
.sidebar-menu-button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 8px; overflow: hidden;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-foreground);
  font-size: 14px; line-height: 20px; text-align: left; text-decoration: none; cursor: pointer; outline: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.sidebar-menu-button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-menu-button:hover, .sidebar-menu-button:active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); text-decoration: none; }
.sidebar-menu-button.active, .sidebar-menu-button[aria-current="page"] {
  background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500;
}
.sidebar-menu-button:focus-visible, .sidebar-cta:focus-visible, .nav-user:focus-visible, #sidebar .logo:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--sidebar-ring);
}

/* CTA "Yangi sayt" (nav-main "Quick Create": bg-primary text-primary-foreground) */
.sidebar-cta {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 8px; overflow: hidden;
  border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; outline: none;
  transition: background-color var(--duration) linear, box-shadow var(--duration-fast);
}
.sidebar-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-cta:hover, .sidebar-cta:active { background: color-mix(in oklab, var(--primary) 90%, transparent); }

/* NavUser: avatar (yumaloq kvadrat) + ism + email + ⋮ */
#user-chip { display: block; }
.nav-user {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 8px; overflow: hidden;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-foreground);
  text-align: left; cursor: pointer; outline: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-user:hover, .nav-user[aria-expanded="true"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-user-more { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; }
.avatar {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; user-select: none;
}
.nav-user-text { display: grid; flex: 1 1 0; min-width: 0; gap: 0; font-size: 14px; line-height: 1.25; text-align: left; }
.nav-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nav-user-email, .nav-user-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted-foreground); }
.nav-user-role { margin-top: 2px; }

/* ============================== 3. Header (site-header) ============================== */
#topbar {
  display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: var(--header-height);
  padding: 0 24px; border-bottom: 1px solid var(--border);           /* px-4 lg:px-6 */
}
/* SidebarTrigger: ghost icon, size-7, -ml-1 */
#sidebar-toggle { width: 28px; height: 28px; margin-left: -4px; flex-shrink: 0; }
.header-sep { margin: 0 4px; }                                       /* Separator: mx-2 (gap bilan) h-4 */
#page-title {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-wrap: nowrap;
}
.site-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin-left: auto; }

/* Sana oralig'i — ixcham (h-8) input'lar */
.global-dates { display: flex; align-items: center; gap: 6px; }
.global-dates label { font-size: 12px; font-weight: 400; color: var(--muted-foreground); white-space: nowrap; }
.global-dates .dash { color: var(--muted-foreground); }
#topbar .global-dates input[type="date"] { width: 132px; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; }

/* Mamlakat almashtirgich: toggle-group (outline, sm). Tugmalar — <button aria-pressed>; kod + mahalliy nom + "Namuna" belgisi. */
#country-box { display: flex; align-items: center; flex-shrink: 0; }
.country-seg .toggle-item { gap: 6px; padding: 0 10px; font-size: 13px; }
.cs-code { font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cs-name { font-weight: 500; }
.country-seg .toggle-item[aria-pressed="true"] { font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
/* "Namuna" belgisi (qisqa davrli namuna ma'lumot) — warning tinted */
.cs-tag {
  padding: 2px 6px; border-radius: 999px; background-image: linear-gradient(var(--warning-muted), var(--warning-muted));
  color: var(--warning); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase;
}

/* Til tanlagich (native select, F1 `.lang-switch` = h-8) */
#lang-box { display: flex; align-items: center; flex-shrink: 0; }
.lang-switch { min-width: 5.75rem; font-size: 13px; }

/* Tema tugmasi: html.dark da quyosh o'rniga oy */
.theme-toggle .theme-icon-moon { display: none; }
html.dark .theme-toggle .theme-icon-sun { display: none; }
html.dark .theme-toggle .theme-icon-moon { display: inline; }

/* Tor laptop (<1440px): header sig'ishi uchun ixchamlashadi — mamlakat nomi va "Davr" yorlig'i yashirinadi,
   "Namuna" belgisi kichik nuqta bo'ladi (matn tooltip'da). */
@media (max-width: 1439px) {
  #topbar { padding: 0 16px; }
  .global-dates label, .cs-name { display: none; }
  .country-seg .toggle-item { padding: 0 9px; }
  .cs-tag { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--warning); font-size: 0; }
  #topbar .global-dates input[type="date"] { width: 124px; font-size: 12.5px; }
}

/* ============================== 4. Release banner ============================== */
/* Ingichka polosa: border-b, bg muted/50; chapda brend + izoh, o'ngda teskari sanoq (mono, tabular — sakramaydi). */
.release-banner {
  display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 6px 24px;
  border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent);
  color: var(--muted-foreground); font-size: 12px; line-height: 1.5;
}
.release-banner .rb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-signal) 18%, transparent); animation: rb-pulse 2.8s ease-in-out infinite;
}
@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.release-banner .rb-ver { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.03em; color: var(--foreground); }
.release-banner .rb-ver b { color: var(--brand-signal); font-weight: 500; }
.release-banner .rb-timer { display: flex; align-items: baseline; gap: 14px; margin-left: auto; }
.release-banner .rb-seg { display: inline-flex; align-items: baseline; gap: 4px; }
.release-banner .rb-seg b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.release-banner .rb-seg i { font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.release-banner .rb-done { color: var(--foreground); font-weight: 600; }
.release-banner.is-live .rb-text { display: none; }
.release-banner.is-live .rb-timer { margin-left: 0; }

/* "Yangiliklar" tugmasi — banner'ning o'ng chetida (rb-timer'ning auto-margin'i uni ham o'ngga suradi) */
.rb-news-btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; padding: 2px 6px;
  border: none; border-radius: var(--radius-sm); background: none; color: var(--muted-foreground);
  font-size: 12px; line-height: 1.5; cursor: pointer; transition: color var(--duration-fast), background var(--duration-fast);
}
.rb-news-btn svg { width: 13px; height: 13px; }
.rb-news-btn:hover { color: var(--foreground); background: var(--accent); }
.rb-news-btn:focus-visible { color: var(--foreground); box-shadow: var(--ring-glow); }
.rb-news-badge {
  width: 6px; height: 6px; border-radius: 50%; background: var(--destructive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--destructive) 25%, transparent);
}

/* ============================== 5. Dropdown qo'shimchalari (asos — components.css §11) ============================== */
.dropdown .dd-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown .dd-check { display: inline-flex; margin-left: auto; }
.dropdown .dd-check svg { color: var(--foreground); }
.dropdown-label:has(.dd-user) { padding: 0; font-weight: 400; }
.dd-user { display: flex; align-items: center; gap: 8px; padding: 4px; text-align: left; }

/* ============================== 6. Logo (Radar M + "metron.") ============================== */
/* M harfi = --foreground (ikkala temada o'qiladi); yoylar/sweep/nuqta = signal teal (--brand-signal). */
.logo { display: flex; align-items: center; gap: 8px; color: var(--foreground); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; color: var(--foreground); }
.logo-mark .lm-m { stroke: currentColor; }
.logo-mark .lm-arc, .logo-mark .lm-sweep { stroke: var(--brand-signal); }
.logo-mark .lm-dot { fill: var(--brand-signal); }
.logo-word {
  font-family: var(--font-mono); font-weight: 500; font-size: 21px; letter-spacing: -0.04em; line-height: 1;
  color: var(--foreground); white-space: nowrap; text-transform: lowercase;
}
.logo-word b { color: var(--brand-signal); font-weight: 500; }
.logo.logo-lg { gap: 12px; }
.logo.logo-lg .logo-mark { width: 44px; height: 44px; }
.logo.logo-lg .logo-word { font-size: 32px; }
.sidebar-header .logo { height: 44px; padding: 0 8px; border-radius: var(--radius-md); outline: none; }
.sidebar-header .logo:hover { background: var(--sidebar-accent); }