/* 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.
 * Logotip (Axion so'z-belgisi) — o'z tokenlari bilan (--logo-ink / --logo-dot); qolgan qobiq — neytral shadcn palitrasi.
 */

/* ============================== 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-header { padding-bottom: 4px; }                             /* logotip bloki (76px) + 4px + guruh 8px = CTA'gacha ~30px (muhofaza maydoni, §6) */
.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; }
/* Guruh yorlig'i — brendning "imzo" uslubi: JetBrains Mono, katta harf, kenglik +0.04em */
.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-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; 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: 600; 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 */
/* Sahifa sarlavhasi — Geologica (brend sarlavha shrifti); 16px header'da 600 — 700 juda og'ir ko'rinadi */
#page-title {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-heading); font-size: 16px; font-weight: 600; 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); }
/* Tanlangan tugma fokusda: yuqoridagi box-shadow components.css'dagi fokus halqasini bosib ketmasin — ikkalasi birga */
.country-seg .toggle-item[aria-pressed="true"]:focus-visible { box-shadow: var(--ring-glow), 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; } }
/* "Axion 1.2" — nom matnda oddiy yoziladi (logotip emas, nuqtasiz); urg'u — chapdagi pulsli .rb-dot */
.release-banner .rb-ver { font-weight: 600; color: var(--foreground); white-space: nowrap; }
.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; }
/* birlik yorlig'i — brend "imzo" uslubi: JetBrains Mono, katta harf, +0.04em */
.release-banner .rb-seg i { font-family: var(--font-mono); font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; 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 (Axion so'z-belgisi) ============================== */
/* Brendbuk §01 (docs/BRAND.md §2): harflar currentColor = .logo rangi = --logo-ink (och temada to'q siyoh, qorong'i
   temada och — inverse logotip), x nuqtasi — --logo-dot. Logotip ranglari rasmiy va o'zgarmas, shu sabab qobiqning
   neytral tokenlariga emas, o'z tokenlariga bog'langan (tokens.css). Proporsiya o'zgarmaydi: faqat eni beriladi,
   balandlik viewBox'dan (478.62 x 139.5). Ekranda eni kamida 140px; muhofaza maydoni = harf balandligi (~0,21 x eni).
   Aylantirish, qayta bo'yash, soya/kontur/gradient — taqiqlangan. */
.logo { display: flex; align-items: center; color: var(--logo-ink); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-wordmark { display: block; flex-shrink: 0; width: 140px; height: auto; aspect-ratio: 478.62 / 139.5; }
.logo-wordmark .aw-dot { fill: var(--logo-dot); }
.logo-icon { display: block; flex-shrink: 0; width: 32px; height: 32px; }
.logo.logo-lg .logo-wordmark { width: 200px; }

/* Yon panel sarlavhasi: harflar --logo-ink (och panelda to'q, qorong'i panelda och). Muhofaza maydoni = harf balandligi
   (140px enida ~29,3px): 76px balandlik => tepada ~33,6px (ekran cheti), pastda ~29,9px ("Yangi sayt" CTA'gacha),
   chapda 8 + 8 + 14 = 30px. Hover foni yo'q — quti cheti maydon ichiga tushmasin; klaviatura fokus halqasi (qulaylik
   uchun) qoladi. */
.sidebar-header .logo {
  height: 76px; padding: 0 14px; border-radius: var(--radius-md); color: var(--logo-ink); outline: none;
  transition: box-shadow var(--duration-fast);
}