/* =============================================================================
   01 — DESIGN TOKENS
   -----------------------------------------------------------------------------
   Figma screenshot'lar asosida ekstraktsiya qilingan aniq qiymatlar.
   ISHONCH brendi — yorqin yashil, oq sahifa.
   ========================================================================== */

:root {
  /* ==========================================================================
     RANGLAR — Brand (ISHONCH yorqin yashil)
     ========================================================================== */

  --color-primary:        #18B83C;  /* Tugma yashili — Figma 700 */
  --color-primary-hover:  #15A235;  /* Hover quyuqroq */
  --color-primary-active: #11842B;  /* Bosilgan paytda */
  --color-primary-light:  #E8F8EF;  /* Yumshoq fon */
  --color-primary-50:     #F0FBF4;  /* Eng yengil tint */

  /* Brand qora (ISHONCH yozuvi) */
  --color-brand-dark:     #1A1A1A;
  --color-brand-text:     #1A1A1A;  /* "ISHONCH" yozuvi */
  --color-brand-accent:   var(--color-primary);  /* "itilium" yashil yozuv */

  /* ==========================================================================
     RANGLAR — Neytral (oq fonda)
     ========================================================================== */

  --color-white:          #FFFFFF;
  --color-gray-50:        #FAFAFA;
  --color-gray-100:       #F5F5F5;
  --color-gray-200:       #E5E7EB;
  --color-gray-300:       #D4D4D4;
  --color-gray-400:       #A3A3A3;
  --color-gray-500:       #737373;
  --color-gray-600:       #525252;
  --color-gray-700:       #404040;
  --color-gray-800:       #262626;
  --color-gray-900:       #171717;
  --color-black:          #000000;

  /* ==========================================================================
     STATUS RANGLARI — Figma'dagi badge'lardan
     ========================================================================== */

  /* Yashil — Зарегистрировано, В работе, Согласовано, Решено */
  --color-status-success:        #18B83C;
  --color-status-success-bg:     #E8F8EF;
  --color-status-success-text:   #0F7A3A;

  /* Sariq/orange — Ожидает ответа, На согласовании, По уточнению, Выполнено */
  --color-status-warning:        #F59E0B;
  --color-status-warning-bg:     #FEF3C7;
  --color-status-warning-text:   #B45309;

  /* Qizil — Не подтверждено, Уведомления badge */
  --color-status-danger:         #EF4444;
  --color-status-danger-bg:      #FEE2E2;
  --color-status-danger-text:    #B91C1C;

  /* Ko'k — Назначено */
  --color-status-info:           #3B82F6;
  --color-status-info-bg:        #DBEAFE;
  --color-status-info-text:      #1E40AF;

  /* Kulrang — Закрыто, Приостановлено */
  --color-status-neutral:        #737373;
  --color-status-neutral-bg:     #F5F5F5;
  --color-status-neutral-text:   #404040;

  /* Eski aliaslar (saqlash uchun) */
  --color-success:        var(--color-status-success);
  --color-success-bg:     var(--color-status-success-bg);
  --color-success-text:   var(--color-status-success-text);
  --color-warning:        var(--color-status-warning);
  --color-warning-bg:     var(--color-status-warning-bg);
  --color-warning-text:   var(--color-status-warning-text);
  --color-danger:         var(--color-status-danger);
  --color-danger-bg:      var(--color-status-danger-bg);
  --color-danger-text:    var(--color-status-danger-text);
  --color-info:           var(--color-status-info);
  --color-info-bg:        var(--color-status-info-bg);
  --color-info-text:      var(--color-status-info-text);

  /* ==========================================================================
     SEMANTIK ALIASLAR
     ========================================================================== */

  /* Background — Figmada toza oq, gradient YO'Q */
  --bg-page:              #FFFFFF;
  --bg-surface:           #FFFFFF;
  --bg-elevated:          #FFFFFF;
  --bg-overlay:           rgba(23, 23, 23, 0.5);
  --bg-muted:             #F5F5F5;
  --bg-subtle:            #F8F8F8;

  /* Text */
  --text-primary:         #1A1A1A;
  --text-secondary:       #525252;
  --text-tertiary:        #737373;
  --text-muted:           #A3A3A3;
  --text-on-primary:      #FFFFFF;
  --text-link:            var(--color-primary);
  --text-link-hover:      var(--color-primary-hover);

  /* Border */
  --border-default:       #E5E7EB;
  --border-strong:        #D4D4D4;
  --border-focus:         var(--color-primary);
  --border-hover:         var(--color-primary);
  --border-danger:        var(--color-danger);

  /* ==========================================================================
     TIPOGRAFIYA
     ========================================================================== */

  /* Font family — Figma'da Inter ishlatilgan, header.php da Google Fonts dan yuklanadi */
  --font-family-base:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
  --font-family-heading:  var(--font-family-base);
  --font-family-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Og'irliklar */
  --font-light:           300;
  --font-regular:         400;
  --font-medium:          500;
  --font-semibold:        600;
  --font-bold:            700;

  /* O'lchamlar */
  --font-xs:              12px;
  --font-sm:              14px;
  --font-base:            15px;
  --font-md:              16px;
  --font-lg:              18px;
  --font-xl:              20px;
  --font-2xl:             24px;
  --font-3xl:             30px;
  --font-4xl:             36px;
  --font-5xl:             48px;

  /* Line heights */
  --leading-tight:        1.2;
  --leading-snug:         1.375;
  --leading-normal:       1.5;
  --leading-relaxed:      1.625;
  --leading-loose:        2;

  /* ==========================================================================
     SPACING (4px grid)
     ========================================================================== */

  --space-0:              0;
  --space-px:             1px;
  --space-0-5:            2px;
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;

  /* Semantik */
  --space-xs:             4px;
  --space-sm:             8px;
  --space-md:             16px;
  --space-lg:             24px;
  --space-xl:             32px;
  --space-2xl:            48px;
  --space-3xl:            64px;

  /* ==========================================================================
     BORDER RADIUS — Figmada o'rta radius (8-12px)
     ========================================================================== */

  --radius-none:          0;
  --radius-xs:            4px;
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           24px;
  --radius-full:          9999px;

  /* ==========================================================================
     SHADOWS — Figmada yumshoq soyalar
     ========================================================================== */

  --shadow-xs:            0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-sm:            0 1px 3px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-md:            0 4px 8px rgba(23, 23, 23, 0.06), 0 2px 4px rgba(23, 23, 23, 0.04);
  --shadow-lg:            0 10px 20px rgba(23, 23, 23, 0.08), 0 4px 8px rgba(23, 23, 23, 0.04);
  --shadow-xl:            0 20px 30px rgba(23, 23, 23, 0.1), 0 10px 15px rgba(23, 23, 23, 0.06);
  --shadow-focus:         0 0 0 3px rgba(24, 184, 60, 0.15);

  /* ==========================================================================
     LAYOUT
     ========================================================================== */

  --container-max:        1200px;
  --container-padding:    24px;

  --header-height:        72px;
  --header-height-mobile: 56px;

  /* ==========================================================================
     KOMPONENT O'LCHAMLARI
     ========================================================================== */

  --btn-height-sm:        32px;
  --btn-height-md:        40px;
  --btn-height-lg:        48px;

  --input-height-sm:      36px;
  --input-height-md:      44px;
  --input-height-lg:      52px;

  /* ==========================================================================
     ANIMATSIYA
     ========================================================================== */

  --transition-fast:      150ms ease;
  --transition-base:      200ms ease;
  --transition-slow:      300ms ease;

  --ease-in:              cubic-bezier(0.4, 0, 1, 1);
  --ease-out:             cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */

  --z-dropdown:           100;
  --z-sticky:             200;
  --z-fixed:              300;
  --z-modal-backdrop:     400;
  --z-modal:              500;
  --z-popover:            600;
  --z-tooltip:            700;
  --z-toast:              800;

  /* ==========================================================================
     BREAKPOINTS
     ========================================================================== */

  --bp-sm:                640px;
  --bp-md:                768px;
  --bp-lg:                1024px;
  --bp-xl:                1280px;
}
/* =============================================================================
   02 — RESET
   -----------------------------------------------------------------------------
   Brauzer default'larini tozalash. Zamonaviy reset.
   ========================================================================== */

/* Box sizing — barcha elementlar uchun */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margin va padding ni nolga keltirish */
* {
  margin: 0;
  padding: 0;
}

/* HTML va body */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media elementlar */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elementlar font'ni meros qiladi */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
}

button:disabled {
  cursor: not-allowed;
}

/* Linklar */
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Ro'yxatlar */
ul,
ol {
  list-style: none;
}

/* Sarlavhalar — line-height */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--font-semibold);
  text-wrap: balance;
}

/* Paragraflar */
p {
  text-wrap: pretty;
}

/* Stol */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Fokus uslublari */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Tanlash rangi */
::selection {
  background: var(--color-primary-light);
  color: var(--color-primary-active);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Placeholder rangi */
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Hidden attribute */
[hidden] {
  display: none !important;
}
/* =============================================================================
   03 — BASE
   -----------------------------------------------------------------------------
   HTML, body va tipografiya uchun asosiy stillar.
   ========================================================================== */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-base);
  font-weight: var(--font-regular);
  color: var(--text-primary);
  background-color: var(--bg-page);
  line-height: var(--leading-normal);
}

/* ============================================================================
   TIPOGRAFIYA
   ============================================================================ */

h1, .h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

h2, .h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

h3, .h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h4, .h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

h5, .h5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

h6, .h6 {
  font-family: var(--font-family-heading);
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

p {
  font-size: var(--font-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   LINKLAR
   ============================================================================ */

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

/* ============================================================================
   FOYDALI MATN STILLARI
   ============================================================================ */

small,
.text-small {
  font-size: var(--font-sm);
}

.text-xs {
  font-size: var(--font-xs);
}

.text-lg {
  font-size: var(--font-lg);
}

.text-xl {
  font-size: var(--font-xl);
}

strong,
b,
.text-bold {
  font-weight: var(--font-bold);
}

.text-semibold {
  font-weight: var(--font-semibold);
}

.text-medium {
  font-weight: var(--font-medium);
}

em,
i,
.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* ============================================================================
   MATN RANGLARI
   ============================================================================ */

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-muted      { color: var(--text-muted); }
.text-link       { color: var(--text-link); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-danger     { color: var(--color-danger); }
.text-info       { color: var(--color-info); }
.text-white      { color: var(--color-white); }

/* ============================================================================
   MATN HIZALAMA
   ============================================================================ */

.text-left       { text-align: left; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.text-justify    { text-align: justify; }

/* ============================================================================
   SAQLASH MAVJUD UTILITY KLASSLAR (PHP'da ishlatiladigan)
   ============================================================================ */

.align-center {
  text-align: center;
}

.pre-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.hidden,
.hide {
  display: none !important;
}

.no_hide {
  display: block !important;
}
/* =============================================================================
   04 — LAYOUT
   -----------------------------------------------------------------------------
   Sahifa skeleti: wrapper, container, header, content.
   Figma asosida — desktop-first, oq fon, toza minimalistik.
   ========================================================================== */

/* ============================================================================
   WRAPPER
   ============================================================================ */

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
}

/* ============================================================================
   CONTAINER
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ============================================================================
   KAFOLAT: container katta ekranda doim MARKAZDA.
   Sabab: Bitrix ShowHead() yoki tashqi CSS (masalan `body .container`) redesign
   `.container`ning margin-left'ini override qilib chapга tortib qo'yishi mumkin.
   Yuqori specificity (#itilium_module) + !important bilan markazlashni majburlaymiz.
   body/wrapper to'liq kenglikda — containing block tor bo'lib qolmasligi uchun.
   ============================================================================ */
html,
body#itilium_module {
  width: 100%;
  max-width: 100%;
}

#itilium_module .wrapper {
  width: 100%;
}

#itilium_module .container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
   HEADER — Figma'dagi top bar
   ----------------------------------------------------------------------------
   Layout: [LOGO] ............... [MENU] ............... [LANG] [AVATAR]
   ============================================================================ */

header {
  background-color: var(--bg-surface);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* Logo — ISHONCH + itilium (inline SVG, Figma o'lchami 173x20) */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  /* Natural SVG height — Figma'da aniq 20px ko'rsatilgan */
  height: 20px;
}

.logo__svg {
  display: block;
  height: 20px;
  width: auto;
}

/* Eski img logo (boshqa joyda ishlatilsa) */
.logo img {
  height: 20px;
  width: auto;
}

/* Logo o'rniga matn ham bo'lishi mumkin */
.logo .brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: 22px;
  font-weight: var(--font-bold);
  color: var(--color-brand-text);
  letter-spacing: -0.02em;
}

.logo .brand-name .accent {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--color-brand-accent);
  letter-spacing: 0;
}

/* ============================================================================
   HEADER — autentifikatsiyasiz (login sahifa)
   ============================================================================ */

header.header-shortcut {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
  position: static;
}

header.header-shortcut .container {
  justify-content: flex-start;
}

/* ============================================================================
   HEADER RIGHT GROUP — lang switcher + user
   ============================================================================ */

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* ============================================================================
   LANGUAGE SWITCHER — Globe + Ру dropdown
   ============================================================================ */

.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lang-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: none;
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: opacity var(--transition-fast);
  font-family: var(--font-family-base);
}

.lang-switcher__current:hover {
  opacity: 0.7;
}

/* Globe ikonkasi — SVG inline */
.lang-switcher__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: currentColor;
}

.lang-switcher__label {
  font-weight: var(--font-medium);
}

.lang-switcher__arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform var(--transition-fast);
}

.lang-switcher.is-open .lang-switcher__arrow {
  transform: rotate(180deg);
}

/* Dropdown menyu — Figma'da kichikroq (faqat o'ziga yetarli joy) */
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 0;            /* Figma: faqat o'ziga yetarli */
  width: auto;
  padding: var(--space-xs);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: var(--z-dropdown);
  white-space: nowrap;
}

.lang-switcher.is-open .lang-switcher__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.lang-switcher__item:hover {
  background-color: var(--bg-muted);
  color: var(--text-primary);
}

.lang-switcher__item.is-active {
  background-color: var(--color-primary-light);
  color: var(--color-primary-active);
}

/* Bayroqlar — CSS gradient bilan */
.lang-switcher__flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

/* O'zbekiston bayrog'i: ko'k - oq - yashil */
.lang-switcher__flag.flag-uz {
  background: linear-gradient(
    to bottom,
    #1eb53a 0%,
    #1eb53a 33%,
    #ffffff 33%,
    #ffffff 66%,
    #0099b5 66%,
    #0099b5 100%
  );
}

/* Rossiya bayrog'i: oq - ko'k - qizil */
.lang-switcher__flag.flag-ru {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 33%,
    #0039a6 33%,
    #0039a6 66%,
    #d52b1e 66%,
    #d52b1e 100%
  );
}

/* ============================================================================
   MAIN
   ============================================================================ */

main {
  flex: 1;
  padding: var(--space-lg) 0 var(--space-3xl);
}

/* ============================================================================
   CONTENT CENTER (login sahifa uchun)
   ============================================================================ */

.content-center-v {
  min-height: calc(100vh - var(--header-height) - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  gap: var(--space-md);
}

.content-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   BREADCRUMBS — Figmada "Главная > Обращения > Обращение № ..."
   ============================================================================ */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.breadcrumbs a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs__separator {
  color: var(--text-muted);
  user-select: none;
  font-size: 14px;
}

/* Oxirgi breadcrumb item (parent) — YASHIL */
.breadcrumbs__current,
.breadcrumbs a.breadcrumbs__current {
  color: var(--color-primary) !important;
  font-weight: var(--font-medium);
}

.breadcrumbs a.breadcrumbs__current:hover {
  color: var(--color-primary-hover) !important;
}

/* ============================================================================
   PAGE TITLE — Figmadagi sahifa sarlavhasi
   ----------------------------------------------------------------------------
   PHP: .title-button-back .title-button-back-title
   ============================================================================ */

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.page-title__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--font-xl);
  transition: color var(--transition-fast);
}

.page-title__back:hover {
  color: var(--color-primary);
}

/* PHP fayllaridagi mavjud .title-button-back-* uchun */
.title-button-back {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.title-button-back-breadcrumbs {
  flex: 1;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.title-button-back-title {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* ============================================================================
   FLEX UTILS
   ============================================================================ */

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.jc-center { justify-content: center; }
.center { text-align: center; }

/* ============================================================================
   LOADING — Shadcn-style spinner + backdrop blur
   .loading_total_back — global overlay (jQuery `.show()` / `.hide()` ishlatadi)
   ::before — Shadcn loader-2 SVG (rotating arc)
   ::after  — kichik centred card (oq, shadow, blur backdrop ostidan ko'rinadi)
   ============================================================================ */

.loading_total_back {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.loading_total_back.active,
.loading_total_back[style*="display: block"],
.loading_total_back[style*="display:block"] {
  display: flex !important;
  opacity: 1;
}

/* Shadcn loader2 — SVG via background, smooth spin */
.loading_total_back::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  animation: spinner-rotate 900ms linear infinite;
  filter: drop-shadow(0 2px 6px rgba(24, 184, 60, 0.18));
}

@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Eski .loading class — page'ga inline qo'shilgan spinner (saqlanadi) */
.loading {
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  border: none;
  animation: spinner-rotate 900ms linear infinite;
}

/* Universal page transition spinner — har qanday sahifa yuklanayotganda
   body.is-navigating bo'lgan paytda full-screen spinner ko'rsatamiz */
body.is-navigating .loading_total_back {
  display: flex !important;
  opacity: 1;
}

/* ============================================================================
   BURGER MENU (mobile only)
   ============================================================================ */

.header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 5px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.header-burger:hover {
  background-color: var(--bg-muted);
}

.header-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

/* Active state — chiziqlar X shakliga keladi */
.header-burger.is-active .header-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-burger.is-active .header-burger__bar:nth-child(2) {
  opacity: 0;
}

.header-burger.is-active .header-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================================
   MOBILE DRAWER — slide-in panel from right
   ============================================================================ */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;             /* yuqorida — loading_total_back (400) dan ham yuqori */
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;                /* panel ostida */
  background-color: rgba(17, 24, 39, 0.45);
  /* Orqa fon blur — drawer ochilganda sahifa kontenti xiralashadi */
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;                /* backdrop ustida — clicklar ishlaydi */
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;            /* mobil brauzer paneli hisobga olinadi */
  background-color: var(--bg-surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;    /* swipe drag silliq bo'lsin (compositor) */
  touch-action: pan-y;       /* vertikal scroll ruxsat, gorizontal swipe'ni JS hal qiladi */
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

/* User info — drawer tepasi */
.mobile-drawer__user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-md);
}

.mobile-drawer__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--bg-muted);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  flex-shrink: 0;
}

.mobile-drawer__user-name {
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  word-break: break-word;
}

/* Nav links */
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--font-medium);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-drawer__link:hover {
  background-color: var(--bg-muted);
}

.mobile-drawer__link.is-active {
  background-color: var(--color-primary-light);
  color: var(--color-primary-active);
}

.mobile-drawer__link-icon {
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.mobile-drawer__link-icon--notification {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.73%2021a2%202%200%200%201-3.46%200%22%2F%3E%3C%2Fsvg%3E");
}

.mobile-drawer__link-icon--appeals {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2217%22%20x2%3D%228%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E");
}

.mobile-drawer__link-icon--new {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E");
}

.mobile-drawer__link-icon--faq {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E");
}

.mobile-drawer__link.is-active .mobile-drawer__link-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(91%) saturate(545%) hue-rotate(85deg) brightness(95%) contrast(92%);
}

.mobile-drawer__link-text {
  flex: 1 1 auto;
}

.mobile-drawer__link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background-color: var(--color-danger);
  color: white;
  font-size: 11px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
}

/* Exit button — drawer pasti */
.mobile-drawer__exit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding: 12px var(--space-sm);
  background: transparent;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: var(--font-medium);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.mobile-drawer__exit:hover {
  background-color: var(--bg-muted);
}

.mobile-drawer__exit-icon {
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpolyline%20points%3D%2216%2017%2021%2012%2016%207%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%229%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* ============================================================================
   MOBILE — barcha pagelar uchun umumiy responsive
   ============================================================================ */

@media (max-width: 768px) {
  header {
    height: var(--header-height-mobile);
  }

  header .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    gap: var(--space-sm);
  }

  .content-center-v {
    min-height: calc(100vh - var(--header-height-mobile) - 40px);
    padding: var(--space-lg) var(--space-md);
  }

  main {
    padding: var(--space-md) 0;
  }

  /* Logo — mobile'da kichikroq */
  .logo {
    flex-shrink: 1;
    min-width: 0;
    height: 18px;
  }

  .logo__svg {
    height: 18px;
    max-width: 100%;
  }

  .logo img {
    height: 18px;
    max-width: 130px;
    width: auto;
    object-fit: contain;
  }

  /* Desktop menu va user — yashiramiz */
  header .menu,
  .header-user {
    display: none !important;
  }

  /* Burger — ko'rsatamiz */
  .header-burger {
    display: inline-flex;
  }

  /* Lang switcher — burger oldida (compact) */
  .lang-switcher__current span:not(.lang-switcher__flag):not(.lang-switcher__label) {
    display: none;
  }

  .lang-switcher__current .lang-switcher__label {
    display: inline;
    margin-right: 4px;
  }

  .lang-switcher__current {
    padding: 0 6px;
  }

  .header-right {
    gap: 6px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .logo,
  .logo__svg,
  .logo img {
    height: 16px;
    max-width: 110px;
  }
}

/* Tablet — kichik laptoplar ham mobile menu ishlatishi mumkin */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Menu desktop'da ko'rinadi, lekin tighter */
  header .menu {
    gap: var(--space-sm);
  }
}
/* =============================================================================
   05/Button — Tugma komponenti
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .btn          — asosiy tugma
   .btn-gray     — kulrang variant (default)
   .btn-blue     — ko'k (active filter)
   .btn-white    — oq (default filter)
   .btn-filter   — filter tugmasi (mobile)
   .btn-sorting  — sorting tugmasi (mobile)
   .submit-btn   — submit wrapper
   .add-announcement — yangi murojaat tugmasi (asosiy CTA)
   ========================================================================== */

/* ============================================================================
   BAZA — .btn
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  height: var(--btn-height-md);
  padding: 0 var(--space-lg);

  font-family: var(--font-family-base);
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  background-color: var(--color-primary);
  color: var(--text-on-primary);

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  background-color: var(--color-primary-hover);
  color: var(--text-on-primary);
}

.btn:active {
  background-color: var(--color-primary-active);
  transform: translateY(1px);
}

.btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   VARIANTLAR
   ============================================================================ */

/* Kulrang — neytral default */
.btn-gray {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

.btn-gray:hover {
  background-color: var(--color-primary-hover);
}

/* Ko'k — active filter / submit */
.btn-blue {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

.btn-blue:hover {
  background-color: var(--color-primary-hover);
}

/* Oq — default filter */
.btn-white {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-white:hover {
  background-color: var(--color-gray-50);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ============================================================================
   O'LCHAMLAR (modifiers)
   ============================================================================ */

.btn--sm {
  height: var(--btn-height-sm);
  padding: 0 var(--space-md);
  font-size: var(--font-sm);
}

.btn--lg {
  height: var(--btn-height-lg);
  padding: 0 var(--space-xl);
  font-size: var(--font-lg);
}

.btn--full {
  width: 100%;
}

/* ============================================================================
   MAXSUS TUGMALAR
   ============================================================================ */

/* "Yangi murojaat" katta CTA tugma */
.add-announcement {
  width: 100%;
  max-width: 400px;
  height: var(--btn-height-lg);
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  margin: 0 auto var(--space-lg);
}

/* Submit button — wrapper, input ichida bo'lishi mumkin */
.submit-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

.submit-btn input[type="submit"],
.submit-btn .btn {
  width: 100%;
  height: var(--btn-height-lg);
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
}

/* Filter / sorting (mobile-only odatda) */
.btn-filter,
.btn-sorting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--btn-height-md);
  padding: 0 var(--space-md);
  background-color: var(--color-gray-100);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-size: var(--font-sm);
}

.btn-filter:hover,
.btn-sorting:hover {
  background-color: var(--color-gray-200);
}

/* History back (umumiy "orqaga" tugma) */
.history_back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.history_back:hover {
  color: var(--text-primary);
}

/* ============================================================================
   LINK-VARIANT TUGMALAR
   ============================================================================ */

.dark-blue-link,
.dark-blue-link-text,
.gray-link {
  color: var(--text-link);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.dark-blue-link:hover,
.dark-blue-link-text:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.gray-link {
  color: var(--text-secondary);
}

.gray-link:hover {
  color: var(--text-primary);
}
/* =============================================================================
   05/Input — Form input komponentlari
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .input-field         — input wrapper (label + input)
   .input-item          — search input
   .input-password      — parol input wrapper
   .re-form-input       — login/parol input
   .input-error__text   — xato matn
   .input-success__text — muvaffaqiyat matni
   .eye-password        — parolni ko'rsatish tugmasi
   .smart-captcha       — captcha wrapper
   ========================================================================== */

/* ============================================================================
   INPUT-FIELD — wrapper (label + input + helper)
   ============================================================================ */

.input-field {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-md);
}

.input-field label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

/* Special: PHP'da label[placeholder] atributi bor */
.input-field label[placeholder]::before {
  content: attr(placeholder);
}

/* ============================================================================
   BAZA INPUT — barcha turdagi inputlar
   ============================================================================ */

.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="password"],
.input-field input[type="number"],
.input-field input[type="tel"],
.input-field input[type="search"],
.input-field input[type="url"],
.input-field input[type="date"],
.input-field input[type="time"],
.input-field input[type="datetime-local"],
.input-field select,
.input-field textarea,
.input-item,
.re-form-input,
input.input-item {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-md);

  font-family: var(--font-family-base);
  font-size: var(--font-base);
  font-weight: var(--font-regular);
  line-height: 1;
  color: var(--text-primary);

  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);

  outline: none;
  appearance: none;
}

/* Textarea — baland balandlik */
.input-field textarea,
textarea.input-item {
  height: auto;
  min-height: 100px;
  padding: var(--space-md);
  line-height: var(--leading-normal);
  resize: vertical;
}

/* Hover */
.input-field input:hover:not(:disabled),
.input-field select:hover:not(:disabled),
.input-field textarea:hover:not(:disabled),
.input-item:hover:not(:disabled),
.re-form-input:hover:not(:disabled) {
  border-color: var(--border-strong);
}

/* Focus */
.input-field input:focus,
.input-field select:focus,
.input-field textarea:focus,
.input-item:focus,
.re-form-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

/* Disabled */
.input-field input:disabled,
.input-field select:disabled,
.input-field textarea:disabled,
.input-item:disabled,
.re-form-input:disabled {
  background-color: var(--color-gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Placeholder rangi */
.input-field input::placeholder,
.input-field textarea::placeholder,
.input-item::placeholder,
.re-form-input::placeholder {
  color: var(--text-muted);
}

/* ============================================================================
   IKONKALI INPUT — input boshida ikona
   PHP: <div class="input-field"><span><input ...></span></div>
   ============================================================================ */

.input-field > span {
  position: relative;
  display: block;
}

/* Span ichida ikona bo'lsa, padding kerak */
.input-field > span::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
  pointer-events: none;
}

/* Login input — foydalanuvchi ikonkasi */
.input-field input[name="login"] {
  padding-left: calc(var(--space-md) * 2 + 20px);
}

.input-field span:has(input[name="login"])::before {
  background-image: url('/itilium/themes/img/icons/avatar.svg');
}

/* Parol input — qulf ikonkasi */
.input-password input[type="password"],
.input-password input[type="text"] {
  padding-left: calc(var(--space-md) * 2 + 20px);
  padding-right: calc(var(--space-md) * 2 + 20px);
}

/* ============================================================================
   PASSWORD WRAPPER — eye toggle bilan
   PHP: <span class="input-password"><button class="eye-password" id="eye"></button><input ...></span>
   ============================================================================ */

.input-password {
  position: relative;
  display: block;
}

.input-password::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat;
  opacity: 0.6;
  /* Bu yerda qulf ikonkasi bo'lishi mantiqliroq — keyin almashtirish mumkin */
  pointer-events: none;
}

/* Eye toggle button */
.eye-password {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat;
  opacity: 0.5;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.eye-password:hover {
  opacity: 0.8;
}

.eye-password.active {
  background-image: url('/itilium/themes/img/icons/eye-open.svg');
  opacity: 1;
}

/* ============================================================================
   SEARCH INPUT — qidiruv formasi
   Figma:
     - To'liq yumaloq (pill shape)
     - Chap tomonda kichik search ikona
     - Ko'rinmaydigan border (oddiy fon)
     - O'ng tomonda HECH NIMA (icons YO'Q)
   ============================================================================ */

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search .input-item {
  width: 100%;
  height: 44px;
  padding-left: 44px;
  padding-right: 44px;  /* x ikona uchun joy */
  font-family: var(--font-family-base);
  font-size: var(--font-sm);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);  /* 8px — boshqa komponentlar bilan bir xil */
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search .input-item:hover {
  border-color: var(--border-strong);
}

.search .input-item:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.search .input-item::placeholder {
  color: var(--text-muted);
}

/* Search icon — chap tomonda */
.search::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('/itilium/themes/img/icons/search.svg') center/contain no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}

/* Clear va submit tugmalari — Figma'da YASHIRIN.
   PHP'da ular bor, lekin biz default'da yashiramiz va faqat matn yozsa ko'rsatamiz.
   Hozircha to'liq yashiramiz — Figma'da o'ng ikonkalar yo'q. */
.search-clear,
.search-submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Input matn yozilganda — clear tugma ko'rsatamiz */
.search:has(.input-item:not(:placeholder-shown):not([value=""])) .search-clear {
  right: var(--space-md);
  width: 18px;
  height: 18px;
  opacity: 0.5;
  visibility: visible;
  pointer-events: auto;
  background-image: url('/itilium/themes/img/icons/close-mini.svg');
}

.search-clear:hover {
  opacity: 1 !important;
}

/* ============================================================================
   XATO / MUVAFFAQIYAT MATNLARI
   ============================================================================ */

.input-error__text {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--color-danger);
  min-height: 16px;
}

.input-success__text {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--color-success);
  min-height: 16px;
}

/* Input xato holatida */
.input-field.has-error input,
.input-field.has-error select,
.input-field.has-error textarea,
.input-field input.error,
.input-error input {
  border-color: var(--border-danger);
}

.input-field.has-error input:focus,
.input-error input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ============================================================================
   SELECT — chosen.js bilan ishlatiladi, lekin biz bazasini ham yaxshilab beramiz
   ============================================================================ */

.input-field select {
  background-image: url('/itilium/themes/img/icons/arrow-down.svg');
  background-position: right var(--space-md) center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: calc(var(--space-md) * 2 + 16px);
}

/* ============================================================================
   FILE UPLOAD
   PHP: .fl_inp, .fl_nm_container, .fl_upld
   ============================================================================ */

.fl_upld {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.fl_upld:hover {
  border-color: var(--border-focus);
}

.fl_inp {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.fl_nm_container {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* ============================================================================
   CAPTCHA
   ============================================================================ */

.smart-captcha {
  margin: var(--space-md) 0;
}
/* =============================================================================
   05/Checkbox — Checkbox va radio
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .checkbox              — checkbox wrapper
   .checkbox-icon         — custom checkbox ikona
   .modal__checkbox       — modal ichidagi checkbox (radio)
   .modal__checkbox-icon  — modal checkbox ikonkasi
   ========================================================================== */

/* ============================================================================
   CHECKBOX — asosiy
   PHP: <div class="checkbox">
          <label>
            <input type="checkbox" checked />
            <span class="checkbox-icon"></span>
            Eslab qol
          </label>
        </div>
   ============================================================================ */

.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-md);
}

.checkbox label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

/* Asl checkbox'ni yashirish */
.checkbox input[type="checkbox"],
.modal__checkbox input[type="checkbox"],
.modal__checkbox input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox icon */
.checkbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Checked holat — yashil fon + OQ tick (Figma'dagi kontrast) */
.checkbox input[type="checkbox"]:checked + .checkbox-icon {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

/* Hover */
.checkbox label:hover .checkbox-icon {
  border-color: var(--color-primary);
}

/* Focus */
.checkbox input[type="checkbox"]:focus-visible + .checkbox-icon {
  box-shadow: var(--shadow-focus);
}

/* Disabled */
.checkbox input[type="checkbox"]:disabled + .checkbox-icon {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   MODAL CHECKBOX (radio sifatida ishlatiladi)
   PHP: <div class="modal__checkbox">
          <label>
            <input type="radio" name="filter" checked>
            <span class="modal__checkbox-icon"></span>
            <span>Open</span>
          </label>
        </div>
   ============================================================================ */

.modal__checkbox {
  margin-bottom: var(--space-sm);
}

.modal__checkbox label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  user-select: none;
  font-size: var(--font-base);
  color: var(--text-primary);
}

.modal__checkbox label:hover {
  background-color: var(--color-gray-100);
}

.modal__checkbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Radio checked - ichida nuqta */
.modal__checkbox input[type="radio"]:checked + .modal__checkbox-icon {
  border-color: var(--color-primary);
  background-color: var(--bg-surface);
}

.modal__checkbox input[type="radio"]:checked + .modal__checkbox-icon::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* Checkbox in modal (kvadrat) — yashil fon + OQ tick */
.modal__checkbox input[type="checkbox"]:checked + .modal__checkbox-icon {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}
/* =============================================================================
   05/Card — Card komponentlari
   -----------------------------------------------------------------------------
   Figmadan: oq fon, kulrang border, hover'da yashil border + arrow rangli.
   Har kartochka o'ng tomonda → arrow ikona bilan.
   ========================================================================== */

/* ============================================================================
   MAIN FORM (Login formasi)
   ============================================================================ */

.main-form {
  width: 100%;
  max-width: 440px;
  padding: var(--space-2xl);
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}

.main-form h3 {
  text-align: center;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.main-form__down {
  text-align: center;
  margin-top: var(--space-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* ============================================================================
   TEMPLATES GRID — kategoriyalar va shablonlar (Figma'dagi 3-column)
   ----------------------------------------------------------------------------
   PHP:
     <div class="templates">
       <a class="template" href="...">
         <img />  (ixtiyoriy)
         <div class="text">
           <div class="name">Title</div>
           <div class="comment">Subtitle</div>
         </div>
       </a>
     </div>
   ============================================================================ */

.templates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (max-width: 1024px) {
  .templates {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .templates {
    grid-template-columns: 1fr;
  }
}

.template,
.category {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  padding-right: 56px;  /* arrow uchun joy (32px button + margin) */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  cursor: pointer;
  min-height: 60px;
}

/* Agar img bo'lsa — kichik ikona ko'rinadi (home sahifasidagi yashil "i") */
.template img,
.category img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}

/* Karta ikonkasi — Figma'da YOK (faqat agar PHP <img> bersa ko'rsatiladi) */
.template::before,
.category::before {
  display: none;
}


/* Arrow ikonasi — o'ng tomonda, kichik tugma stilida (Figma'dagi kabi)
   Box: 32x32 light gray bg, rounded
   Icon: User bergan 15x12 arrow SVG (Lucide arrow-right stilida) */
.template::after,
.category::after {
  content: '';
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: var(--color-gray-100);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.75%205.75H14.0833M9.08333%2010.75L14.0833%205.75L9.08333%200.75%22%20stroke%3D%22%233B82F6%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 12px;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

/* Hover holati — nozik yashil border (1.5px effective) */
.template:hover,
.category:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
  /* 1px border + 0.5px box-shadow = effektiv 1.5px nozik border */
  box-shadow: 0 0 0 0.5px var(--color-primary);
}

.template:hover::after,
.category:hover::after {
  background-color: var(--color-primary-light);
  transform: translateY(-50%) translateX(2px);
}

.template:hover::before,
.category:hover::before {
  opacity: 1;
}

/* Selected holat — bir xil ko'rinish */
.template.is-selected,
.category.is-selected,
.template.active,
.category.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.5px var(--color-primary);
}

/* Selected/Active holat — Figmada yashil ring */
.template.is-selected,
.category.is-selected,
.template.active,
.category.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-primary-light);
}

/* Card content */
.template .text,
.category .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;  /* truncate uchun */
}

.template .name,
.category .name {
  font-size: var(--font-md);
  font-weight: var(--font-regular);   /* Figma: card title 400 (qalin emas) */
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.template .comment,
.category .comment {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   SLIDER — Mass appeals (slick carousel)
   ============================================================================ */

.sliders {
  margin-bottom: var(--space-xl);
}

.slider {
  padding: var(--space-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  margin-right: var(--space-md);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.slider:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.slider .topic {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
}

.slider .text {
  margin-bottom: var(--space-sm);
}

.slider .text:last-child {
  margin-bottom: 0;
}

.slider .label {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.slider .value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.slider .fixh {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slider-modal-copy-container {
  display: none;
}

/* ============================================================================
   SLICK SLIDER OVERRIDES
   ============================================================================ */

.slick-slider { position: relative; }
.slick-list { overflow: hidden; }
.slick-track { display: flex; }
.slick-slide > div { height: 100%; }
.slick-slide .slider { height: 100%; }

.slick-dots {
  display: flex !important;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: 0;
}

.slick-dots li { list-style: none; }

.slick-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-300);
  font-size: 0;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.slick-dots .slick-active button {
  background-color: var(--color-primary);
  width: 24px;
}

/* ============================================================================
   VERSIYA matni
   ============================================================================ */

.version {
  text-align: center;
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-xl);
  line-height: var(--leading-relaxed);
}

.version b {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

/* ============================================================================
   PAGE TEMPLATE wrapper
   ============================================================================ */

.page_template {
  padding: var(--space-lg) 0;
}

.page_template h3 {
  margin-bottom: var(--space-md);
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
/* =============================================================================
   05/Notification — Notifications, ticket cards, alerts
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .notification                       — asosiy notification konteyner
   .notification-item                  — notification ichidagi item
   .notification-card                  — murojaat karta
   .notification-card__abbreviated     — qisqartilgan ko'rinish
   .notification-number                — Obrasheniye №
   .notification-title                 — sarlavha
   .notification-info / __list / __top — ma'lumotlar bloki
   .notification-info__btn             — ma'lumotlar tugmasi
   .notification-status                — holat indikatori
   .notification-status__registered    — registered holat
   .notification-comment               — komment maydon
   .notification-correspondence        — yozishma
   .notification-document / __list     — fayl ilovalari
   .notification-approve / -cancel     — tasdiqlash tugmalari
   .notification-preview               — preview
   .notification-read-all              — hammasini o'qish
   .notification-user / __author / __date — user info
   .card-abbreviated-control           — toggle button
   .attantion                          — alert ikona
   ========================================================================== */

/* ============================================================================
   NOTIFICATION — bazaviy konteyner
   PHP: <div class="notification">
          <div class="notification-item">...</div>
        </div>
   ============================================================================ */

.notification {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.notification-item {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}

.notification-item:last-child {
  border-bottom: none;
}

/* Alert / xato variant — qizil chiziq chap tomonda */
.notification:has(p[style*="color:red"]),
.notification:has(.attantion) {
  border-left: 4px solid var(--color-danger);
}

/* Alert icon */
.attantion {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: var(--space-xs);
  background: url('/itilium/themes/img/icons/attantion.svg') center/contain no-repeat;
}

/* ============================================================================
   NOTIFICATION CARD — ticket detail
   PHP: <div class="notification notification-card notification-card__abbreviated">
   ============================================================================ */

.notification-card {
  position: relative;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.notification-card .notification-item {
  padding: var(--space-lg);
}

/* Qisqartilgan ko'rinish — collapse mumkin */
.notification-card__abbreviated .notification-item {
  position: relative;
  max-height: 200px;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.notification-card__abbreviated.is-expanded .notification-item {
  max-height: none;
}

.notification-card__abbreviated:not(.is-expanded) .notification-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg-surface));
  pointer-events: none;
}

/* Toggle control */
.card-abbreviated-control {
  position: absolute;
  right: var(--space-md);
  top: var(--space-md);
  width: 32px;
  height: 32px;
  background-color: var(--bg-muted);
  background-image: url('/itilium/themes/img/icons/down.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  z-index: 2;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.card-abbreviated-control:hover {
  background-color: var(--color-gray-200);
}

.notification-card__abbreviated.is-expanded .card-abbreviated-control {
  transform: rotate(180deg);
}

/* ============================================================================
   NOTIFICATION CONTENT — sarlavha, raqam, matn
   ============================================================================ */

.notification-number {
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.notification-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: var(--leading-snug);
}

.notification-card .text {
  font-size: var(--font-base);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
}

/* ============================================================================
   NOTIFICATION INFO — qo'shimcha ma'lumotlar
   PHP: <ul class="notification-info__list"><li>...</li></ul>
   ============================================================================ */

.notification-info {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
}

.notification-info__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.notification-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-info__list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-default);
}

.notification-info__list li:last-child {
  border-bottom: none;
}

.notification-info__list p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.notification-info__list b {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-right: var(--space-xs);
}

/* Info button */
.notification-info__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--bg-muted);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.notification-info__btn:hover {
  background-color: var(--color-gray-200);
}

.notification-info__btn_text {
  font-weight: var(--font-medium);
}

/* ============================================================================
   STATUS — holat indikatori
   ============================================================================ */

.notification-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-0-5) var(--space-sm);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.notification-status__registered {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Boshqa status variantlari */
.notification-status--open {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.notification-status--closed {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.notification-status--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* ============================================================================
   USER INFO — author, date
   ============================================================================ */

.notification-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.notification-user__author {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.notification-user__date {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* ============================================================================
   COMMENTS — komment maydoni
   ============================================================================ */

.notification-comment {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
}

.notification-comment__field {
  width: 100%;
  min-height: 80px;
  padding: var(--space-md);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-base);
  resize: vertical;
}

.notification-comment__field:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.notification-comment__item {
  padding: var(--space-md);
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.notification-comment__submit {
  margin-top: var(--space-sm);
}

/* ============================================================================
   CORRESPONDENCE — yozishma (chat-like)
   ============================================================================ */

.notification-correspondence,
.correspondence {
  margin-top: var(--space-md);
}

.correspondence-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.correspondence-item {
  flex: 1;
  padding: var(--space-md);
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
}

.correspondence-author {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: var(--font-sm);
  margin-bottom: var(--space-xs);
}

.correspondence-date {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* ============================================================================
   DOCUMENTS — fayl ilovalari
   ============================================================================ */

.notification-document {
  margin-top: var(--space-md);
}

.notification-document__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.notification-document__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

.notification-document__list li::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('/itilium/themes/img/icons/file-blue.svg') center/contain no-repeat;
  flex-shrink: 0;
}

/* ============================================================================
   APPROVE/CANCEL — tasdiqlash tugmalari
   ============================================================================ */

.notification-approve,
.notification-approve-cancel,
.notification-cancel,
.notification-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.notification-approve {
  background-color: var(--color-success);
  color: var(--color-white);
}

.notification-approve:hover {
  background-color: var(--color-success-text);
}

.notification-cancel,
.notification-approve-cancel {
  background-color: var(--bg-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.notification-cancel:hover,
.notification-approve-cancel:hover {
  background-color: var(--color-danger-bg);
}

.notification-confirm {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

/* ============================================================================
   PREVIEW / READ ALL
   ============================================================================ */

.notification-preview {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.notification-read-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: transparent;
  color: var(--text-link);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border: none;
}

.notification-read-all:hover {
  color: var(--text-link-hover);
}
/* =============================================================================
   05/Modal — Modal va big modal komponentlari
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .modal                  — kichik modal
   .filter__modal          — filter modal (mobile)
   .sorting__modal         — sorting modal (mobile)
   .sorting__modal-btn     — sort tugmalari
   .sort-btn               — sort tugmasi
   .sort-descending        — pasayuvchi
   .sort-regrowth          — o'suvchi
   #bigmodal               — katta modal (footer.php'da)
   .bigmodal-back          — orqaga tugma
   .bigmodal-close         — yopish tugma
   ========================================================================== */

/* ============================================================================
   .modal — kichik fancybox modallar (confirm/reject/approve dialoglar)
   Eski style.css'da display:none edi, redesign'da yo'q. Fancybox tomonidan
   ochilganda inline style bilan ko'rinadi.
   ============================================================================ */

.modal {
  display: none;
}

/* Fancybox modallarni ko'rsatganda — display: block bilan tabletkalik holatga */
.fancybox-content .modal,
.fancybox-slide .modal {
  display: block;
}

/* ============================================================================
   BIGMODAL — to'liq ekran modal
   PHP: <div id="bigmodal">
          <div class="border">
            <button class="bigmodal-back">SVG</button>
            <button class="bigmodal-close">SVG</button>
            <div class="content"></div>
            <div class="bottom"></div>
          </div>
        </div>
   ============================================================================ */

#bigmodal {
  position: fixed;
  inset: 0;
  background-color: var(--bg-overlay);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  overflow-y: auto;
}

/* Body class — bigmodal ochiq holatini bildiradi */
body.bigmodal {
  overflow: hidden;
}

body.bigmodal #bigmodal {
  display: flex;
  animation: fadeIn var(--transition-base);
}

#bigmodal .border {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  overflow-y: auto;
  animation: slideUp var(--transition-base);
}

/* Back and close buttons (SVG ichida) */
.bigmodal-back,
.bigmodal-close {
  position: absolute;
  top: var(--space-md);
  width: 36px;
  height: 36px;
  padding: var(--space-sm);
  background-color: var(--bg-muted);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  z-index: 2;
  transition: background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bigmodal-back {
  left: var(--space-md);
}

.bigmodal-close {
  right: var(--space-md);
}

.bigmodal-back svg,
.bigmodal-close svg {
  width: 16px;
  height: 16px;
}

.bigmodal-back path,
.bigmodal-close path {
  fill: var(--text-secondary);
  transition: fill var(--transition-fast);
}

.bigmodal-back:hover,
.bigmodal-close:hover {
  background-color: var(--color-gray-200);
}

.bigmodal-back:hover path,
.bigmodal-close:hover path {
  fill: var(--text-primary);
}

#bigmodal .content {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

#bigmodal .bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-default);
}

/* Big modal container — agar body bigmodal_container bo'lsa, joriy sahifa modal'da ochilgan */
body.bigmodal_container {
  background-color: transparent;
}

body.bigmodal_container .wrapper {
  background-color: transparent;
  min-height: auto;
}

/* ============================================================================
   FILTER VA SORTING MODAL (mobile filter)
   PHP: <div class="hidden"><div class="filter__modal">...</div></div>
   Bu yashirin elementlar — JS orqali bigmodal'da ko'rsatiladi
   ============================================================================ */

.filter__modal,
.sorting__modal {
  padding: var(--space-md);
}

.filter__modal h3,
.sorting__modal h3 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-md);
}

.sorting__modal-btn {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
}

.sort-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-md);
  padding: 0 var(--space-md);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.sort-btn:hover {
  border-color: var(--border-strong);
}

.sort-btn.active {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-active);
}

.sort-descending::before {
  content: '↓';
  margin-right: var(--space-xs);
  font-weight: bold;
}

.sort-regrowth::before {
  content: '↑';
  margin-right: var(--space-xs);
  font-weight: bold;
}

/* ============================================================================
   ANIMATSIYALAR
   ============================================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   MOBILE
   ============================================================================ */

@media (max-width: 640px) {
  #bigmodal {
    padding: 0;
  }

  #bigmodal .border {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--space-lg) var(--space-md);
  }
}
/* =============================================================================
   05/Menu — Navigation menu komponentlari
   -----------------------------------------------------------------------------
   Mavjud klasslar (PHP'da):
   .menu                — Asosiy navigatsiya menyu (header ichida)
   .menu-back           — Orqaga tugma
   .menu-home           — Bosh sahifa
   .menu-notification   — Bildirishnomalar
   .menu-appeals        — Murojaatlar
   .menu-new            — Yangi murojaat
   .menu-count          — Notification soni (badge)
   .header-user         — Foydalanuvchi paneli
   .header-user__icon   — Foydalanuvchi avatar
   .login / .output     — Login / chiqish linklari
   .appeals-top         — Sahifa yuqori menyu
   .title-button-back   — Sarlavhada orqaga tugma
   ========================================================================== */

/* ============================================================================
   ASOSIY MENU — header ichida
   PHP: <ul class="menu">
          <li><a class="menu-home">Home</a></li>
          ...
        </ul>
   ============================================================================ */

.menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-regular);   /* Figma: 400 default/hover/active barchasida */
  text-decoration: none;
  background-color: transparent;
  transition: color var(--transition-fast);
}

.menu a:hover {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: var(--font-regular);   /* Figma: hover'da ham 400 */
}

/* Active state — Figma'da faqat yashil matn (underline YO'Q, font-weight o'zgarmaydi) */
.menu li.active a {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: var(--font-regular);   /* Figma: active'da ham 400 */
}

/* Active'da underline YO'Q (Figmaga moslangan) */
.menu li.active a::after {
  display: none;
}

/* Menyu ikonkalari — Figma'da ikona YO'Q, faqat matn */
/* Agar ikona kerak bo'lsa, qaytarish uchun comment'dan chiqaring */
.menu a::before {
  display: none;
}

/* Backga'lik tugmasi (alohida) — User bergan 14x14 SVG (Lucide arrow-left) */
.menu-back::before {
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;
  opacity: 0.6;
}

/* Notification count badge */
.menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-xs);
  margin-left: var(--space-xs);
  background-color: var(--color-danger);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  line-height: 1;
}

.menu-count:empty,
.menu-count:has(:empty) {
  display: none;
}

/* ============================================================================
   HEADER USER — yuqori o'ng burchakdagi foydalanuvchi paneli
   PHP: <div class="header-user">
          <a class="header-user__icon"></a>
          <div class="hidden">
            <a class="login gray-link">username</a>
            <a class="output gray-link">Chiqish</a>
          </div>
        </div>
   ============================================================================ */

.header-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Username matni — avatardan oldin (Figmadagi kabi) */
.header-user__name {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.header-user__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: url('/itilium/themes/img/icons/avatar-user.svg') center/20px no-repeat var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  outline: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.header-user__icon:hover {
  background-color: var(--color-gray-200);
  border-color: var(--border-strong);
}

.header-user__icon:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ============================================================================
   USER DROPDOWN MENU — yangi klass (.hidden konflikti yo'qotildi)
   PHP: <div class="header-user__menu">
   ============================================================================ */

.header-user__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: var(--space-xs);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  flex-direction: column;
  gap: 2px;
}

.header-user.is-open .header-user__menu {
  display: flex;
  animation: dropdownFade var(--transition-fast);
}

/* Username — birinchi qator (bold, alohida bo'lim) */
.header-user__menu-login {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 2px;
  cursor: default;
  user-select: none;
}

/* "Выйти" — qizil rangda */
.header-user__menu-exit {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--color-danger);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.header-user__menu-exit:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Eski .hidden klassi uchun — fallback (PHP boshqa joylarda ham ishlatadi) */
.header-user .hidden {
  display: none !important;
}

/* Avatar bosilganda chiroyli ko'rinish */
.header-user__icon {
  position: relative;
}

.header-user.is-open .header-user__icon {
  background-color: var(--bg-muted);
  border-color: var(--color-primary);
}

/* ============================================================================
   APPEALS-TOP — sahifa yuqori filter/sort paneli
   PHP: <div class="appeals-top">
          <form class="search">...</form>
          OR <a class="btn btn-white history_back">Back</a>
          <div class="appeals-top__btn__desktop">filter buttons</div>
          <div class="appeals-top__btn__mobile">filter button</div>
        </div>
   ============================================================================ */

.appeals-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
}

.appeals-top .search {
  flex: 1;
  min-width: 280px;
}

.appeals-top__btn__desktop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.appeals-top__btn__desktop .btn {
  height: 36px;
  padding: 0 var(--space-md);
  font-size: var(--font-sm);
  border-radius: var(--radius-full);
}

.appeals-top__btn__mobile {
  display: none;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .appeals-top__btn__desktop {
    display: none;
  }

  .appeals-top__btn__mobile {
    display: flex;
  }

  .appeals-top {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================================
   TITLE BUTTON BACK — sarlavhada orqaga tugma
   PHP: .title-button-back, .title-button-back-breadcrumbs, .title-button-back-title
   ============================================================================ */

.title-button-back {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.title-button-back-breadcrumbs {
  flex: 1;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.title-button-back-title {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* ============================================================================
   MOBILE — kichik ekranlarda menyu
   ============================================================================ */

@media (max-width: 768px) {
  .menu {
    gap: 0;
  }

  .menu a {
    padding: var(--space-sm);
    font-size: 0;  /* Matnni yashirish, faqat ikona */
  }

  .menu a::before {
    margin-right: 0;
    width: 24px;
    height: 24px;
  }

  /* Notification badge ham yuqorida */
  .menu-count {
    position: absolute;
    top: -4px;
    right: -4px;
    margin-left: 0;
  }
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =============================================================================
   05/Pagination — Figma design system komponenti
   -----------------------------------------------------------------------------
   HTML structure (HelperClasses::page() chiqaradi):
     <nav class="pagination">
       <a  class="pagination__btn pagination__btn--prev">  ← prev arrow
       <a  class="pagination__btn">1
       <span class="pagination__ellipsis">...
       <span class="pagination__btn is-active">3
       <a  class="pagination__btn">4
       <a  class="pagination__btn pagination__btn--next">  ← next arrow
     </nav>
   ========================================================================== */

.pagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  user-select: none;
}

/* ============================================================================
   PAGINATION BUTTON — har bir element bir xil width/height
   ============================================================================ */

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background-color: transparent;
  color: var(--text-primary);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--font-medium);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* Hover (inactive button) */
.pagination__btn:hover:not(.is-active):not(.is-disabled) {
  background-color: var(--bg-muted);
  color: var(--text-primary);
}

/* ACTIVE — yashil border (Figma) */
.pagination__btn.is-active {
  background-color: var(--bg-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--font-semibold);
  cursor: default;
}

/* DISABLED — bo'sh, click qilib bo'lmaydigan */
.pagination__btn.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.4;
}

/* ============================================================================
   ARROW BUTTONS — Prev / Next (chevron iconlar)
   ============================================================================ */

.pagination__btn--prev,
.pagination__btn--next {
  min-width: 32px;
  width: 32px;
  padding: 0;
  font-size: 0;
  color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Prev arrow — chevron left (yashil) */
.pagination__btn--prev {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%2018%209%2012%2015%206%22%2F%3E%3C%2Fsvg%3E");
}

/* Next arrow — chevron right (yashil) */
.pagination__btn--next {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
}

/* Disabled arrows — kulrang */
.pagination__btn--prev.is-disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%2018%209%2012%2015%206%22%2F%3E%3C%2Fsvg%3E");
}

.pagination__btn--next.is-disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
}

/* Arrow hover — biroz to'qroq fon */
.pagination__btn--prev:hover:not(.is-disabled),
.pagination__btn--next:hover:not(.is-disabled) {
  background-color: var(--bg-muted);
}

/* ============================================================================
   ELLIPSIS — "..." (uchta nuqta)
   ============================================================================ */

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--font-medium);
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
}

/* ============================================================================
   LEGACY support — eski pagination markup uchun (agar kerak bo'lsa)
   ============================================================================ */

.pagination > a:not([class]),
.pagination > span:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: var(--font-medium);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.pagination > a:not([class]):hover {
  background-color: var(--bg-muted);
}

.pagination > span:not([class]) {
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.pagination > a[disabled] {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.4;
}

/* ============================================================================
   MOBILE — kichikroq button'lar
   ============================================================================ */

@media (max-width: 640px) {
  .pagination {
    gap: 2px;
  }

  .pagination__btn,
  .pagination__ellipsis {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .pagination__btn--prev,
  .pagination__btn--next {
    width: 28px;
    background-size: 14px;
  }
}
/* =============================================================================
   06/Pages — Login (entry.php) — YANGI FIGMA DIZAYNI
   -----------------------------------------------------------------------------
   Yangi dizayn (web uchun moslash):
     - Background: off-white + ikki burchakda yashil pattern (SVG, opacity 0.06)
     - Logo: header'da yuqorida (yoki yo'q — logo card'dan yuqorida turadi)
     - Card: oq, rounded, subtle shadow — Xush Kelibsiz + inputs + Kirish tugma
     - Card TASHQARISIDA (pastida): "Meni eslab qolish" checkbox + Til tanlash
     - Error state: red border + red text ostida ("Login xato kiritildi")
   ========================================================================== */

/* ============================================================================
   BODY — off-white background, dekoratsiya joyi
   ============================================================================ */

body.page-login,
body:has(.main-form#entry) {
  position: relative;
  background-color: #FFFFFF;
  min-height: 100vh;
  overflow-x: hidden;
}

/* YASHIL ATMOSFERIK GLOW — yuqori va pastda, Figmadagidek
   ::before — TOP green glow (yengil, dekorativ SVG ortida)
   ::after  — BOTTOM green glow (yumshoq, balandroq doirasimon gradient) */
body.page-login::before,
body:has(.main-form#entry)::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 500px;
  background: radial-gradient(
    ellipse at center top,
    rgba(24, 184, 60, 0.10) 0%,
    rgba(24, 184, 60, 0.05) 30%,
    rgba(24, 184, 60, 0.02) 55%,
    rgba(24, 184, 60, 0) 75%
  );
  pointer-events: none;
  z-index: 0;
}

body.page-login::after,
body:has(.main-form#entry)::after {
  content: '';
  position: fixed;
  bottom: -250px;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px;
  height: 600px;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(24, 184, 60, 0.14) 0%,
    rgba(24, 184, 60, 0.07) 30%,
    rgba(24, 184, 60, 0.025) 55%,
    rgba(24, 184, 60, 0) 80%
  );
  pointer-events: none;
  z-index: 0;
}

body.page-login > .wrapper,
body:has(.main-form#entry) > .wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   DEKORATIV BURCHAK SVG'LARI — Figma dizayni
   Chap yuqori va o'ng yuqori burchaklarda yashil pattern.
   Shakl YO'NALISHI: burchakdan INWARD (markazga) qaragan — chevron'lar
   burchakda joylashib markazga "ochiladi"
   ============================================================================ */

.login-deco {
  position: fixed;
  top: 0;
  width: 280px;
  height: 280px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.55; /* Yashil glow bilan birga — yengil ko'rinish */
}

/* CHAP yuqori — shakl burchakdan markazga (pastga-o'ngga) ochilsin */
.login-deco--left {
  left: 0;
  /* Natural SVG ko'rinishi yuqori-o'ngga yo'nalgan — uni FLIP qilamiz
     vertikal (scaleY -1) qilib pastga-o'ngga aylantirish */
  transform: scaleY(-1);
}

/* O'NG yuqori — chap'dan mirror (horizontalda flip) */
.login-deco--right {
  right: 0;
  transform: scaleY(-1) scaleX(-1); /* = rotate(180deg) */
}

.login-deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   HEADER — login (autentifikatsiyasiz: logo markazda, card'dan tepada)
   ============================================================================ */

body.page-login header.header-shortcut,
body:has(.main-form#entry) header.header-shortcut {
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 2;
  height: auto;
  padding: 64px 0 0;
}

body.page-login header.header-shortcut .container,
body:has(.main-form#entry) header.header-shortcut .container {
  justify-content: center;
}

body.page-login .logo,
body:has(.main-form#entry) .logo {
  display: inline-flex;
  pointer-events: none; /* login sahifada logo bosilmaydi */
}

body.page-login .logo img,
body:has(.main-form#entry) .logo img {
  height: 32px;
}

/* ============================================================================
   MAIN — markazda content
   ============================================================================ */

body.page-login main,
body:has(.main-form#entry) main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px var(--space-md) var(--space-xl);
  position: relative;
  z-index: 1;
}

body.page-login .content-center-v,
body:has(.main-form#entry) .content-center-v {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: 0;
  min-height: auto;
}

/* ============================================================================
   MAIN-FORM (#entry) — wrapper, no card style here
   Wrapper, card'ning o'zi emas — main-form__card oq card
   ============================================================================ */

.main-form#entry {
  width: 100%;
  max-width: 400px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sarlavha "Xush Kelibsiz" — card ICHIDA */
.main-form#entry h3 {
  text-align: center;
  font-size: 22px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

/* ============================================================================
   MAIN-FORM__CARD — OQ CARD: title + inputs + button
   ============================================================================ */

.main-form__card {
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================================================================
   INPUTS — Figmadagi light gray fill, ikona bilan
   ============================================================================ */

.main-form#entry .input-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* Label "Login" / "Parol" — input'dan YUQORIDA */
.main-form#entry .input-field label {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0;
}

.main-form#entry .input-field label[placeholder]::before {
  content: attr(placeholder);
}

/* Input wrapper span */
.main-form#entry .input-field > span {
  position: relative;
  display: block;
}

/* Asosiy input stillari */
.main-form#entry .input-field input[type="text"],
.main-form#entry .input-field input[type="password"] {
  width: 100%;
  height: 42px;
  padding: 0 var(--space-md);
  padding-left: 40px;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--text-primary);
  background-color: #FFFFFF;
  border: 1.5px solid #E5E5E5;
  border-radius: 10px;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
  outline: none;
  box-shadow: none;
}

.main-form#entry .input-field input::placeholder {
  color: #B8B8B8;
  font-size: 14px;
}

/* Hover */
.main-form#entry .input-field input:hover:not(:disabled):not(:focus) {
  border-color: #D4D4D4;
}

/* Focus — yashil border */
.main-form#entry .input-field input:focus {
  background-color: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: none;
}

/* Error state — RED border (Figmadagidek) */
.main-form#entry .input-field.has-error input[type="text"],
.main-form#entry .input-field.has-error input[type="password"] {
  border-color: #EF4444;
  background-color: #FFFFFF;
}

/* ============================================================================
   IKONALAR — input ichida chap tomonda
   ============================================================================ */

/* Login input — user ikonkasi
   MUHIM: faqat input wrapper span'iga (input bilan birga) qo'llaniladi,
   .input-error__text span'iga emas! Aks holda 2-ikonka chiqib qoladi. */
.main-form#entry .input-field:has(input[name="login"]) > span:not(.input-error__text)::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('/itilium/themes/img/icons/user-input.svg') center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.main-form#entry .input-password::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url('/itilium/themes/img/icons/lock.svg') center/contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

/* Error state — ikona rangi red'ga aylantirish */
.main-form#entry .input-field.has-error:has(input[name="login"]) > span:not(.input-error__text)::before,
.main-form#entry .input-field.has-error .input-password::before {
  opacity: 0.7;
  filter: invert(38%) sepia(82%) saturate(2476%) hue-rotate(346deg) brightness(96%) contrast(94%);
}

/* Password input — eye uchun o'ng padding */
.main-form#entry .input-password input[type="password"],
.main-form#entry .input-password input[type="text"] {
  padding-right: 40px;
}

/* Eye toggle button */
.main-form#entry .eye-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat;
  background-color: transparent !important;
  border: none;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  z-index: 3;
}

.main-form#entry .eye-password:hover {
  opacity: 0.9;
}

.main-form#entry .eye-password.active {
  background-image: url('/itilium/themes/img/icons/eye-open.svg');
  opacity: 1;
}

/* ============================================================================
   ERROR TEXT — input ostida red matn
   ============================================================================ */

.main-form#entry .input-error__text {
  display: none;
  font-size: 12px;
  color: #EF4444;
  margin-top: 0;
  font-weight: var(--font-medium);
}

.main-form#entry .input-field.has-error .input-error__text {
  display: block;
}

/* ============================================================================
   "Kirish" tugma — yashil, full width
   ============================================================================ */

.main-form#entry .submit-btn {
  display: block;
  width: 100%;
  margin: 8px 0 0;
}

.main-form#entry .submit-btn input[type="submit"],
.main-form#entry .submit-btn .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 var(--space-lg);
  background-color: var(--color-primary);
  color: var(--text-on-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-semibold);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  letter-spacing: 0;
}

.main-form#entry .submit-btn input[type="submit"]:hover,
.main-form#entry .submit-btn .btn:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(24, 184, 60, 0.25);
}

.main-form#entry .submit-btn input[type="submit"]:active,
.main-form#entry .submit-btn .btn:active {
  background-color: var(--color-primary-active);
  transform: translateY(1px);
  box-shadow: none;
}

/* ============================================================================
   MAIN-FORM__BOTTOM — Card TASHQARISIDA: checkbox (chap) + lang (o'ng)
   ============================================================================ */

.main-form__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 20px 0 0;
  padding: 0 4px;
}

/* "Meni eslab qolish" checkbox — shadcn-style, card TASHQARISIDA
   Native input yashirilgan, custom .checkbox-icon — 16x16 sharp, OQ tick */
.main-form#entry .checkbox {
  margin: 0;
  display: flex;
}

.main-form#entry .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Native input — to'liq yashirilgan (pointer events ham yo'q) */
.main-form#entry .checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

/* Custom checkbox icon — shadcn unchecked: oq fon + gray border */
.main-form#entry .checkbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  border: 1.5px solid #D4D4D4;
  border-radius: 4px;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Checked — yashil fon + OQ TICK (inline SVG, shadcn style) */
.main-form#entry .checkbox input[type="checkbox"]:checked + .checkbox-icon {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

/* Hover (unchecked) — yashil border */
.main-form#entry .checkbox label:hover .checkbox-icon {
  border-color: var(--color-primary);
}

/* Hover (checked) — quyuqroq yashil */
.main-form#entry .checkbox input[type="checkbox"]:checked + .checkbox-icon:hover,
.main-form#entry .checkbox label:hover input[type="checkbox"]:checked + .checkbox-icon {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Focus — shadcn focus ring */
.main-form#entry .checkbox input[type="checkbox"]:focus-visible + .checkbox-icon {
  box-shadow: var(--shadow-focus);
}

/* ============================================================================
   LANG SWITCHER (login page) — header bilan BIR XIL design
   .lang-switcher base styles 04-layout.css ichida.
   Bu yerda faqat pozitsiya — dropdown YUQORIGA ochiladi (chunki pastida
   versiya matni bor).
   ============================================================================ */

.main-form__bottom .lang-switcher__menu {
  top: auto;
  bottom: calc(100% + 4px);
}


/* ============================================================================
   Forgot password link
   ============================================================================ */

.main-form#entry .main-form__down {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.main-form#entry .main-form__down .dark-blue-link {
  color: var(--text-link);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.main-form#entry .main-form__down .dark-blue-link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* Registration link */
body.page-login .content-center-v > .align-center,
body:has(.main-form#entry) .content-center-v > .align-center {
  margin-top: 8px;
  text-align: center;
}

body.page-login .content-center-v > .align-center .dark-blue-link,
body:has(.main-form#entry) .content-center-v > .align-center .dark-blue-link {
  color: var(--text-link);
  font-weight: var(--font-medium);
  font-size: 13px;
  text-decoration: none;
}

body.page-login .content-center-v > .align-center .dark-blue-link:hover,
body:has(.main-form#entry) .content-center-v > .align-center .dark-blue-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   Versiya matni — pastda
   ============================================================================ */

body.page-login .version,
body:has(.main-form#entry) .version {
  margin-top: auto;
  padding-top: var(--space-2xl);
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

body.page-login .version b,
body:has(.main-form#entry) .version b {
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
}

/* ============================================================================
   Error / Warning xabarlari (auth_domain_error) — yangi dizayn
   ============================================================================ */

.main-form#entry #auth_domain_error,
.main-form#entry #auth_domain_ajax {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 12px 14px;
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-left: 3px solid var(--color-warning);
  border-radius: 8px;
  color: var(--color-warning-text);
  font-size: 13px;
  line-height: 1.45;
}

.main-form#entry #auth_domain_error::before,
.main-form#entry #auth_domain_ajax::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url('/itilium/themes/img/icons/attantion.svg') center/contain no-repeat;
  margin-top: 1px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(700%) hue-rotate(20deg) brightness(95%) contrast(90%);
}

.main-form#entry #auth_domain_error b,
.main-form#entry #auth_domain_ajax b {
  font-weight: var(--font-semibold);
}

.main-form#entry #auth_domain_error:empty,
.main-form#entry #auth_domain_ajax:empty {
  display: none;
}

/* ============================================================================
   RESPONSIVE — tablet va mobile
   ============================================================================ */

@media (max-width: 768px) {
  .login-deco {
    width: 130px;
    height: 140px;
  }

  body.page-login header.header-shortcut,
  body:has(.main-form#entry) header.header-shortcut {
    padding-top: 48px;
  }
}

@media (max-width: 480px) {
  .login-deco {
    width: 100px;
    height: 110px;
    opacity: 0.7; /* mobile'da yengilroq */
  }

  body.page-login header.header-shortcut,
  body:has(.main-form#entry) header.header-shortcut {
    padding-top: 32px;
  }

  body.page-login .logo img,
  body:has(.main-form#entry) .logo img {
    height: 26px;
  }

  body.page-login main,
  body:has(.main-form#entry) main {
    padding: 16px var(--space-md) var(--space-lg);
  }

  .main-form#entry {
    max-width: 100%;
  }

  .main-form__card {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .main-form#entry h3 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .main-form__bottom {
    padding: 0;
    margin-top: 16px;
  }
}
/* =============================================================================
   06/Pages — Home / Asosiy ekran (home.php)
   -----------------------------------------------------------------------------
   Figma tartibi:
     1. "Создайте обращение" h1 (markazda, katta bold)
     2. "+ Новое обращение" yashil tugma (kichikroq, markazda)
     3. "Категории шаблонов для регистрации обращений" h3 (kichik, markazda)
     4. Search input (markazda, yumaloq, ingichka)
     5. Templates grid (3 column, kichik horizontal cards)
   ========================================================================== */

/* Container'ga flex - tartibni qayta belgilash uchun */
.page_template {
  padding: var(--space-2xl) 0 var(--space-3xl);
  position: relative;
}

/* ============================================================================
   FIGMA 100% — Home page'da:
   - Header transparent, border-bottom YO'Q
   - Yashil radial gradient .wrapper level'da (header + content'ga yoyiladi)
   - Eski .page_template::before gradient olib tashlandi
   ============================================================================ */

/* DIQQAT: gradient FAQAT asosiy (home) sahifada — drill-down (template/
   templateCategories = "detail") sahifalardan olib tashlandi. */
body.page-home .wrapper {
  background-color: var(--bg-page);
  background-image: radial-gradient(
    ellipse 1100px 650px at 50% 360px,
    rgba(24, 184, 60, 0.20) 0%,
    rgba(24, 184, 60, 0.08) 35%,
    rgba(24, 184, 60, 0) 70%
  );
  background-repeat: no-repeat;
  background-position: top center;
}

/* Header — frosted glass (backdrop blur) + transparent bg
   Scrolled content header orqasidan blurred ko'rinadi — Apple/macOS style */
body.page-home header {
  background-color: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Eski .page_template::before gradient — endi wrapper'da, bu kerakmas */
.page_template::before {
  display: none;
}

.page_template .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   1) Hero title — "Создайте обращение"
   ============================================================================ */

.home-hero__title {
  order: 1;
  text-align: center;
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

/* ============================================================================
   2) "+ Новое обращение" tugma — markazda, kichikroq
   ============================================================================ */

.page_template .center {
  order: 2;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.add-announcement {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: auto;
  min-width: 220px;
  height: auto;              /* button.css height-lg'ni bekor qilish — padding o'lcham belgilaydi */
  padding: 12px 16px;        /* Figma: tugma padding 12px 16px */
  line-height: 1.2;
  background-color: var(--color-primary);
  color: var(--text-on-primary);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
}

.add-announcement::before {
  content: '+';
  font-size: 18px;
  font-weight: var(--font-bold);
  line-height: 1;
}

.add-announcement:hover {
  background-color: var(--color-primary-hover);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-md);
}

.add-announcement:active {
  background-color: var(--color-primary-active);
  transform: translateY(1px);
}

/* ============================================================================
   3) Section subtitle (h3) — "Категории шаблонов..."
   ============================================================================ */

.page_template h3 {
  order: 3;
  text-align: center;
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

/* ============================================================================
   4) Search — markazda, kichikroq
   ============================================================================ */

.create-appeal__head {
  order: 4;
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  width: 100%;
  max-width: 480px;  /* Subcategory page bilan bir xil */
}

.create-appeal__head .search {
  width: 100%;
}

/* ============================================================================
   "Результаты поиска..." label (live filter ishlaganda — natija bor)
   ============================================================================ */

.search-results-label {
  order: 5;
  text-align: center;
  font-size: var(--font-md);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
  font-weight: var(--font-medium);
}

/* Templates grid'ni order 6 ga olamiz (results-label dan keyin) */
.page_template .templates {
  order: 6;
}

/* ============================================================================
   Empty state — search natija yo'q (Figma: sad face ikon + matn)
   ============================================================================ */

.search-empty-state {
  order: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--text-secondary);
}

.search-empty-state__icon {
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-md);
  background: url('/itilium/themes/img/icons/empty-search.svg') center/contain no-repeat;
  opacity: 0.9;
}

.search-empty-state__text {
  font-size: var(--font-md);
  color: var(--text-secondary);
  font-weight: var(--font-regular);   /* ma'lumot yo'q ogohlantirishi — 400 */
  line-height: 1.4;
}

/* ============================================================================
   5) Templates grid
   ============================================================================ */

.page_template .templates {
  order: 5;
  margin: 0;
}

/* ============================================================================
   6) Notification (xato/info) — eng yuqorida bo'lsin
   ============================================================================ */

.page_template .notification {
  order: 0;  /* eng yuqorida */
  margin-bottom: var(--space-lg);
}

/* ============================================================================
   PAGINATION — Home page'da kerakmas (categoriyalar/shablonlar oz)
   ----------------------------------------------------------------------------
   home.php pagination'ni inline style="margin-bottom:2rem" div ichida render
   qiladi. CSS order tufayli u eng yuqoriga chiqib qoladi — yashiramiz.
   Bizga 1-darajali kategoriyalar bir varaqda hammasi ko'rinishi kerak.
   ============================================================================ */

.page_template .pagination,
.page_template nav.pagination,
.page_template > .container > div[style*="margin-bottom"]:has(.pagination),
.page_template > .container > div[style*="margin-bottom"]:has(nav) {
  display: none !important;
}

/* ============================================================================
   7) Sliders (mass appeals) — agar bor bo'lsa
   ============================================================================ */

.page_template .sliders,
.page_template h3:first-of-type {
  /* Sliders sarlavhasi va sliderlar — agar bor bo'lsa, kategoriya h3 dan oldin */
}

/* ============================================================================
   News section — eng pastda
   ============================================================================ */

#news {
  order: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

#news article,
#news .news-item {
  padding: var(--space-lg);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

#news article:hover,
#news .news-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.getNews {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: var(--space-md) auto 0;
}

/* ============================================================================
   Mobile
   ============================================================================ */

@media (max-width: 768px) {
  .home-hero__title {
    font-size: var(--font-2xl);
    margin-bottom: var(--space-md);
  }

  .add-announcement {
    min-width: 180px;
    font-size: var(--font-sm);
  }

  .page_template {
    padding: var(--space-lg) 0 var(--space-2xl);
  }
}
/* =============================================================================
   06/Pages — Обращения (Tickets list) — 100% Figma match
   -----------------------------------------------------------------------------
   2 ta holat:
     1. Empty — "На данный момент обращений нет"
     2. Filled — jadval ma'lumotlar bilan
   Status badge ranglari:
     - Ожидают согласования → PURPLE
     - Ожидают ответа       → YELLOW
     - Открытые             → BLUE
     - Закрытые             → GREEN
     - Boshqa               → GRAY (neutral)
   ========================================================================== */

.appeals-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  min-height: 60vh;
}

/* ============================================================================
   1) HEADER — title (chap) + filter tabs (o'ng)
   ============================================================================ */

/* IMPORTANT: <header> global selector (04-layout.css)'dan keladigan
   border-bottom, height, sticky, background va boshqalarni bekor qilamiz */
.appeals-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  background-color: transparent;
  height: auto;
  border: none;
  border-bottom: none;
  position: static;
  top: auto;
  z-index: auto;
}

.appeals-header__title {
  margin: 0 auto 0 0;  /* push search + filters to right */
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ============================================================================
   SEARCH form — loyihaning .search + .input-item komponentini ishlatadi.
   Appeals header'da: balandlik filter tablar bilan bir xil (36px)
   ============================================================================ */

.appeals-search-form.search {
  width: 280px;
  flex-shrink: 0;
}

/* Input balandligini filter tablar bilan moslashtirish */
.appeals-search-form.search .input-item {
  height: 36px;
  padding-left: 38px;
}

/* Icon ham kichikroq pozitsiya */
.appeals-search-form.search::before {
  left: 12px;
  width: 14px;
  height: 14px;
}

/* Clear button — kichikroq input'ga moslangan */
.appeals-search-form.search:has(.input-item:not(:placeholder-shown):not([value=""])) .search-clear {
  right: 10px;
  width: 16px;
  height: 16px;
}

/* ============================================================================
   2) FILTER TABS — pill style
   ----------------------------------------------------------------------------
   Default: oq fon, kulrang border
   Active:  yashil fon, oq matn (Figma)
   ============================================================================ */

/* Filter tabs — SINGLE BUTTON GROUP (segmented control)
   - Outer container: border + rounded corners
   - Active tab: yashil pill, container ichida "float" (padding bilan)
   - Inactive tabs: transparent, oralarda thin divider line */
.appeals-filters {
  display: inline-flex;
  align-items: stretch;             /* Stretch — tab to'liq balandlikni egallasin */
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;                       /* Figma: padding YO'Q */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;                 /* Active tab rounded corners wrapper'ga moslashsin */
}

.appeals-filter {
  display: inline-flex;
  align-items: center;
  height: 36px;                      /* Biroz kattaroq — Figma */
  padding: 0 16px;
  background-color: transparent;
  color: var(--text-muted);          /* Yorug' kulrang (Figma) */
  font-size: 13px;
  font-weight: var(--font-medium);
  border: none;
  border-radius: 0;                  /* Default — Figma: kvadrat. Active'da rounded */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

/* Inactive tab'lar orasidagi vertikal divider — Figma: TO'LIQ balandlik */
.appeals-filter:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;                            /* To'liq balandlik (top:0 + bottom:0) */
  right: 0;
  width: 1px;
  background-color: var(--border-default);
}

/* Active tab tepasida va active'dan oldingi tab'da divider ko'rinmasin */
.appeals-filter.is-active::after,
.appeals-filter:has(+ .is-active)::after {
  display: none;
}

.appeals-filter:hover:not(.is-active) {
  color: var(--text-secondary);
}

.appeals-filter.is-active {
  background-color: var(--color-primary);
  color: var(--color-white, #ffffff);
}

.appeals-filter.is-active:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-white, #ffffff);
}

/* ============================================================================
   3) TABLE WRAPPER — oq kartochka, light border, rounded corners
   ============================================================================ */

.appeals-table-wrapper {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
}

/* ============================================================================
   4) TABLE — jadval
   ============================================================================ */

.appeals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.appeals-table thead th {
  padding: 14px 18px;        /* cell bilan gorizontal hizalanish (18px) */
  text-align: left;
  font-weight: var(--font-medium);
  font-size: 13px;
  color: var(--text-tertiary);
  background-color: var(--bg-subtle);  /* #F8F8F8 — body'dan ozgina to'qroq */
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  vertical-align: middle;
}

.appeals-table__th-theme {
  min-width: 220px;
}

/* Sort link in header — Figma'da arrow ko'rinmaydi, faqat clickable text */
.appeals-table__sort {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.appeals-table__sort:hover {
  color: var(--text-primary);
}

.appeals-table__sort.is-active {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

/* Sort arrow — Figma'da yo'q, lekin DOM'da bor (PHP'dan keladi).
   Yashirib turamiz — hover'da ham ko'rinmaydi */
.appeals-table__sort-icon {
  display: none;
}

/* Table body — qator separatorlari faqat qatorlar OARASIDA */
.appeals-table tbody td.appeals-table__cell {
  padding: 16px 18px;        /* Figma: Murojaatlar card padding 16px 18px */
  color: var(--text-primary);
  vertical-align: middle;
  background-color: var(--bg-surface);
}

/* Birinchi qatorda border-top yo'q (header bilan tutash bo'lsin) */
.appeals-table tbody tr:not(:first-child) td.appeals-table__cell {
  border-top: 1px solid var(--border-default);
}

.appeals-table__row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.appeals-table__row:hover td {
  background-color: var(--bg-muted);
}

/* ============================================================================
   5) TOPIC BADGE — Figma'dagi ko'k pill ("Текст названия обращения")
   ============================================================================ */

.appeals-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  line-height: 1.3;
  transition: background-color var(--transition-fast);
}

.appeals-topic-badge:hover {
  background-color: #BFDBFE;  /* darker light blue */
}

.appeals-topic-badge__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Atribut belgilari (attention va new message) */
.appeals-topic-badge__attn,
.appeals-topic-badge__new {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.appeals-topic-badge__attn {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F59E0B%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E");
}

.appeals-topic-badge__new {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E40AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22%2F%3E%3Cpolyline%20points%3D%2222%206%2012%2013%202%206%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================================
   6) NUMBER va DATE cell'lar
   ============================================================================ */

.appeals-table__number {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 13px;
}

.appeals-table__date {
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.4;
}

.appeals-table__date-actual {
  margin-top: 2px;
  font-size: 12px;
  font-weight: var(--font-medium);
}

.appeals-table__date-actual.is-overdue {
  color: var(--color-danger);
}

.appeals-table__date-actual.is-ontime {
  color: var(--color-primary);
}

.appeals-table__initiator {
  font-size: 13px;
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================================================
   7) STATE BADGE — Figma'dagi 5 ta rang
   ============================================================================ */

/* =============================================================================
   STATE BADGE — Figma dizayni: orqa fon YO'Q, faqat rangli dumaloq + matn
   "Статус: ● Зарегистрировано" formatda ko'rinadi.
   ::before pseudo-element rangli dumaloqni hosil qiladi, rang
   .state-badge--<color> modifier orqali beriladi.
   ============================================================================ */

.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.5;
}

/* Rangli dumaloq — ::before orqali */
.state-badge::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #D1D5DB; /* default — kulrang */
}

/* Color modifiers — faqat dumaloqning rangini o'zgartiradi */
.state-badge--green::before   { background-color: #22C55E; }
.state-badge--yellow::before  { background-color: #F59E0B; }
.state-badge--blue::before    { background-color: #3B82F6; }
.state-badge--purple::before  { background-color: #A855F7; }
.state-badge--red::before     { background-color: #EF4444; }
.state-badge--dark::before    { background-color: #1A1A1A; }
.state-badge--orange::before  { background-color: #FB923C; }
.state-badge--sky::before     { background-color: #7DD3FC; }

/* NEUTRAL (Зарегистрировано) — Figma: solid #D9D9D9 fon (transparent emas) */
.state-badge--neutral::before {
  background-color: #D9D9D9;
  border: none;
  box-sizing: border-box;
}

/* ============================================================================
   8) EMPTY STATE — "На данный момент обращений нет"
   ============================================================================ */

.appeals-table__empty-body td {
  padding: 0 !important;
  border: none !important;
  background-color: var(--bg-surface) !important;
}

.appeals-empty {
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  background-color: var(--bg-surface);
}

.appeals-empty__text {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  font-weight: var(--font-regular);   /* ma'lumot yo'q ogohlantirishi — 400 */
  line-height: 1.5;
}

/* ============================================================================
   9) PAGINATION
   ============================================================================ */

.appeals-pagination {
  margin-top: var(--space-lg);
}

/* ============================================================================
   10) MOBILE — jadval card-stack ko'rinishida
   ============================================================================ */

@media (max-width: 768px) {
  .appeals-header {
    flex-direction: column;
    align-items: stretch;
  }

  .appeals-header__title {
    margin: 0;
  }

  .appeals-search-form {
    width: 100%;
  }

  /* Filter tab'lar — horizontal scrollable segmented control */
  .appeals-filters {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    /* Snap behavior — qulay scroll */
    scroll-snap-type: x proximity;
  }

  .appeals-filters::-webkit-scrollbar {
    display: none;             /* Chrome/Safari */
  }

  .appeals-filter {
    flex-shrink: 0;            /* tab'lar siqilmasin */
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .appeals-filters::-webkit-scrollbar {
    display: none;
  }

  .appeals-filter {
    flex-shrink: 0;
  }

  /* REDIZAYN: Mobileda ham TABLE ko'rinishi saqlanadi — "stacked card" o'rniga
     gorizontal scroll (overflow-x). Shunda jadval tuzilishi buzilmaydi. */
  .appeals-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* iOS silliq scroll */
  }

  .appeals-table {
    min-width: 760px;   /* ustunlar siqilmasin → gorizontal scroll paydo bo'ladi */
  }
  /* thead ko'rinib turadi; hujayralar desktopdagi stilini (padding, 2-qatorli
     mavzu clamp, sana nowrap) o'zgarmagan holda saqlaydi */
}
/* =============================================================================
   06/Pages — Новое обращение (create.php) — 100% Figma match
   -----------------------------------------------------------------------------
   3 ta holat:
     1. Default — bo'sh form
     2. Filled — to'ldirilgan + fayllar
     3. Submitted — success modal
   ========================================================================== */

.create-page {
  padding: var(--space-lg) 0 0;
  overflow-x: hidden;  /* horizontal scroll oldini olish */
  max-width: 100vw;
}

.create-page #create_send_form {
  display: flex;
  flex-direction: column;
}

/* niceSelect plugin'ning widget'ini yashiramiz (custom dropdown ishlaydi) */
.create-page .nice-select {
  display: none !important;
}

/* Loading overlay'ni create page'da o'chiramiz — select tanlaganda
   AJAX ishga tushib, overlay qotib qolmasin */
body:has(.create-page) .loading_total_back,
body:has(.create-page) #bigmodal:not([style*="flex"]):not(.is-open),
.create-page ~ .loading_total_back {
  display: none !important;
  pointer-events: none !important;
}

/* ============================================================================
   1) Breadcrumb (yuqorida)
   ============================================================================ */

.create-page .breadcrumbs {
  margin-bottom: var(--space-md);
}

/* ============================================================================
   2) Title with back arrow
   ============================================================================ */

.create-page__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-xl);
  letter-spacing: -0.01em;
}

/* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */
.create-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0;     /* "←" unicode character ni yashirish */
  color: transparent;
  text-decoration: none;
  transition:
    background-color var(--transition-fast);
}

.create-page__back:hover {
  background-color: var(--bg-muted);
}

/* ============================================================================
   3) Popular services (pills)
   ============================================================================ */

.popular-services,
.create-page .membershipServices {
  margin: 0 0 var(--space-lg);
}

/* Header: label (chap) + search (o'ng) — Figma layout */
.popular-services__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
  flex-wrap: wrap;
}

.popular-services__label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* Search input — shadcn-style */
.popular-services__search {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.popular-services__search-input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 38px;
  font-family: var(--font-family-base);
  font-size: 13px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.popular-services__search-input:hover:not(:focus) {
  border-color: var(--border-strong);
}

.popular-services__search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 184, 60, 0.10);
}

.popular-services__search-input::placeholder {
  color: var(--text-muted);
}

/* Search ikona (chap tomonda) */
.popular-services__search::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Clear (X) tugma — o'ng tomonda */
.popular-services__search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E") center/12px no-repeat;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: none; /* JS .style.display orqali ko'rsatamiz */
  transition: background-color var(--transition-fast);
}

.popular-services__search-clear:hover {
  background-color: var(--bg-muted);
}

/* Empty state — qidiruv natijasi bo'lmaganda */
.popular-services__empty {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  text-align: center;
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Mobile */
@media (max-width: 640px) {
  .popular-services__header {
    align-items: stretch;
  }
  .popular-services__search {
    width: 100%;
  }
}

.popular-services__list,
.create-page .membershipServices-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.service-pill,
.create-page .membershipServices-list .card {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--font-medium);
  border: 1px solid transparent;
  border-radius: var(--radius-md);  /* 8px — boshqa komponentlar bilan bir xil */
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.service-pill:hover,
.create-page .membershipServices-list .card:hover {
  border-color: var(--color-info);
}

/* Active (selected) — FAQAT ko'k border, fon odatiy turadi */
.service-pill.is-active,
.service-pill.active,
.create-page .membershipServices-list .card.is-active,
.create-page .membershipServices-list .card.active {
  background-color: var(--bg-muted) !important;     /* default gray */
  color: var(--text-secondary) !important;           /* default text */
  border-color: var(--color-info) !important;        /* faqat ko'k border */
  box-shadow: 0 0 0 0.5px var(--color-info) !important;
}

/* Active + hover — border ko'k bo'lib qoladi (hover bg'ni o'chiramiz) */
.service-pill.is-active:hover,
.service-pill.active:hover,
.create-page .membershipServices-list .card.is-active:hover,
.create-page .membershipServices-list .card.active:hover {
  background-color: var(--bg-muted) !important;
}

/* ============================================================================
   4) Form card — oq fon, border, padding
   ============================================================================ */

.create-form-card,
.create-page .create-appeal__content {
  display: block;
  padding: var(--space-xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}

.create-form-card .create-appeal__editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================================================
   5) Form fields
   ============================================================================ */

.create-page .input-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  position: relative;
}

.create-form__label,
.create-page .create-form__label {
  display: block;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0;
}

.create-form__label--required::before,
.create-page .create-form__label--required::before {
  content: '* ';
  color: var(--color-info);  /* Figma: KO'K (blue) */
}

/* ============================================================================
   6) Service selectors row — 2 column (Выберите услугу + Состав)
   ============================================================================ */

.create-page .create-appeal__select.create-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: 0;
}

.create-page .create-appeal__select .input-field {
  margin: 0;
  min-width: 0;          /* grid cell siqilsin → select overflow qilmasin (mobile) */
}

/* Agar group bo'lsa, 3 column */
.create-page .create-appeal__select.create-form__row:has(.input-field--group) {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
  .create-page .create-appeal__select.create-form__row,
  .create-page .create-appeal__select.create-form__row:has(.input-field--group) {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   CUSTOM DROPDOWN — Figma'dagi search + list
   Native <select> ni almashtirish uchun
   ============================================================================ */

.custom-select {
  position: relative;
  width: 100%;
}

/* Original native select'ni yashiramiz, lekin DOM'da qolsin (form submit uchun) */
.custom-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  z-index: -1;
}

/* Trigger button (dropdown ochish) */
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color var(--transition-fast);
}

.custom-select__trigger:hover {
  border-color: var(--border-strong);
}

.custom-select.is-open .custom-select__trigger {
  border-color: var(--color-primary);
}

/* Template rejimida qulflangan select — qiymat ko'rinadi, ammo o'zgartirib bo'lmaydi */
.custom-select.is-disabled .custom-select__trigger,
.custom-select.is-disabled .custom-select__trigger:hover {
  cursor: default;
  background-color: var(--bg-muted);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.custom-select.is-disabled .custom-select__clear {
  display: none !important;
}

.custom-select.is-disabled .custom-select__arrow {
  opacity: 0.4;
}

.custom-select__value {
  flex: 1;
  min-width: 0;          /* flexbox ellipsis bug fix — uzun matn truncate bo'lsin */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__value:empty::before,
.custom-select__value--placeholder {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.custom-select__trigger.is-placeholder .custom-select__value {
  color: var(--text-muted);
}

/* Trigger'ning o'ng tomonidagi ikonalar */
.custom-select__icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-select__clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-size: 0;
  color: var(--text-muted);
  transition: background-color var(--transition-fast);
}

.custom-select__clear::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>") center/contain no-repeat;
}

.custom-select__clear:hover {
  background-color: var(--bg-muted);
}

.custom-select.has-value .custom-select__clear {
  display: inline-flex;
}

.custom-select__arrow {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.custom-select.is-open .custom-select__arrow {
  transform: rotate(180deg);
}

/* Dropdown menyu */
.custom-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  overflow: hidden;
  animation: dropdownFade 0.15s ease;
}

.custom-select.is-open .custom-select__dropdown {
  display: block;
}

/* Search wrapper — ikonani sibling sifatida absolute joylashtiramiz
   (#itilium_module ID prefix bilan eski CSS specificity'ni yengamiz) */
#itilium_module .custom-select__search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--border-default);
}

#itilium_module .custom-select__search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  /* SVG viewBox=16x16, kontent butun viewBox'ni to'ldiradi */
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%225%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%2214%22%20x2%3D%2210.5%22%20y2%3D%2210.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

#itilium_module .custom-select__search-input {
  width: 100%;
  height: 36px;
  /* padding-left: 8 (wrapper) + 16 (icon) + 16 (gap) = 48 (icon end at 20+16=36, +12 gap = text at 48 from input start) */
  padding: 0 12px 0 48px !important;
  font-family: var(--font-family-base);
  font-size: 13px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  background-image: none !important;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

#itilium_module .custom-select__search-input:focus {
  border-color: var(--color-primary);
}

#itilium_module .custom-select__search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Options list */
.custom-select__list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.custom-select__list::-webkit-scrollbar {
  width: 6px;
}

.custom-select__list::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 3px;
}

.custom-select__option {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  user-select: none;
}

/* Hover state — Figma: och yashil (light green) */
.custom-select__option:hover,
.custom-select__option.is-focused {
  background-color: var(--color-primary-light);
}

/* Selected state — biroz to'qroq yashil */
.custom-select__option.is-selected {
  background-color: var(--color-primary-light);
  color: var(--color-primary-active);
  font-weight: var(--font-medium);
}

.custom-select__option.is-selected:hover {
  background-color: var(--color-primary-100);
}

/* No results */
.custom-select__no-results {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Animations */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   7) Native Select stillari — niceSelect plugin yoki fallback
   ============================================================================ */

.create-page select,
.create-page .nice-select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md);
  padding-right: 36px;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  transition: border-color var(--transition-fast);
  line-height: 38px;
}

.create-page select:hover,
.create-page .nice-select:hover {
  border-color: var(--border-strong);
}

.create-page select:focus,
.create-page .nice-select.open {
  border-color: var(--color-primary);
}

.create-page select:disabled {
  background-color: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* niceSelect plugin'ning override'i */
.create-page .nice-select .current {
  color: var(--text-primary);
  font-size: 14px;
}

.create-page .nice-select .list {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.create-page .nice-select .option {
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.create-page .nice-select .option:hover,
.create-page .nice-select .option.focus {
  background-color: var(--bg-muted);
}

.create-page .nice-select .option.selected.focus {
  background-color: var(--color-primary-light);
  color: var(--color-primary-active);
}

/* X icon (clear) — chosen plugin bilan */
.create-page .nice-select::after {
  border-bottom: 2px solid var(--text-secondary);
  border-right: 2px solid var(--text-secondary);
  height: 6px;
  width: 6px;
}

/* ============================================================================
   8) Title input (Введите тему проблемы)
   ============================================================================ */

.create-page .create-appeal__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.create-page .create-appeal__title input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md);
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
}

.create-page .create-appeal__title input:hover {
  border-color: var(--border-strong);
}

.create-page .create-appeal__title input:focus {
  border-color: var(--color-primary);
}

.create-page .create-appeal__title input::placeholder {
  color: var(--text-muted);
}

/* Eski label (from atribut bilan) yashiramiz — biz yangi label ishlatamiz */
.create-page .create-appeal__title label[from] {
  display: none;
}

/* ============================================================================
   9) Description textarea
   ============================================================================ */

.create-page .create-appeal__textarea {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.create-page .create-appeal__textarea textarea,
.create-page .create-appeal__textarea #create_preview {
  width: 100%;
  min-height: 120px;
  padding: var(--space-md);
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.create-page .create-appeal__textarea textarea:hover,
.create-page .create-appeal__textarea #create_preview:hover {
  border-color: var(--border-strong);
}

.create-page .create-appeal__textarea textarea:focus,
.create-page .create-appeal__textarea #create_preview:focus {
  border-color: var(--color-primary);
}

.create-page .create-appeal__textarea textarea::placeholder {
  color: var(--text-muted);
}

/* WYSIWYG preview placeholder */
.create-page .create-appeal__textarea #create_preview[contenteditable]:empty::before {
  content: attr(placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

/* Agar contenteditable preview bo'lsa, textarea yashir */
.create-page .create-appeal__textarea:has(#create_preview) textarea {
  display: none;
}

/* ============================================================================
   10) CI multiselect (Configuration items) — chosen plugin
   ============================================================================ */

.create-page .create-appeal__editor-select {
  margin-top: var(--space-md);
}

.create-page .create-appeal__editor-select.visible_off {
  display: none;
}

.create-page .label-CI {
  display: block;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: 6px;
}

.create-page .chosen-container {
  width: 100% !important;
  font-size: 14px;
}

.create-page .chosen-container-multi .chosen-choices {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-height: 40px;
  padding: 4px 8px;
}

.create-page .chosen-container-active .chosen-choices {
  border-color: var(--color-primary);
}

/* ============================================================================
   11) Predictive articles / CI suggestions
   ============================================================================ */

.create-page .create-appeal__predictive_articles,
.create-page .create-appeal__predictive_ci {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.create-page .create-appeal__predictive_articles .title,
.create-page .create-appeal__predictive_ci .title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

/* ============================================================================
   12) File upload + Submit row
   ============================================================================ */

.create-page .create-appeal__info,
.create-page .create-form__bottom {
  display: flex;
  align-items: flex-end;            /* submit pastga, attach+files yuqoriga */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* info-top — attach link + fayl pillar (vertikal stack) */
.create-page .create-appeal__info-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-width: 0;
}

.create-page .create-appeal__info_bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-left: auto;
}

/* Attach file label (📎 Прикрепить файл) — Figma: KO'K rang + semibold (600) */
.create-page .attach-file,
.create-page .fl_upld {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) 0;
  font-size: 13px;
  font-weight: var(--font-semibold);   /* Figma: 600 */
  color: var(--color-info);  /* KO'K (Figmadagidek) */
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  transition: color var(--transition-fast);
}

.create-page .attach-file::before,
.create-page .fl_upld::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.create-page .attach-file:hover,
.create-page .fl_upld:hover {
  color: var(--color-info-text);
}

.create-page .attach-file label,
.create-page .fl_upld label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.create-page .fl_inp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Submit tugma — "Отправить обращение" */
.create-page .create-form__submit,
.create-page #create_send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;              /* fiks height'ni bekor qilish — padding o'lchamni belgilaydi */
  padding: 12px 16px;        /* Figma: tugma padding 12px 16px */
  background-color: var(--color-primary);
  color: var(--text-on-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.create-page .create-form__submit:hover,
.create-page #create_send:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

.create-page .create-form__submit:disabled,
.create-page #create_send:disabled {
  background-color: var(--color-gray-300);
  color: var(--color-gray-500);
  cursor: not-allowed;
}

/* "Загрузка..." matnini yashirish — JS o'chirildi, lekin defensiv CSS ham bo'lsin */
.create-page .dop_dynamic_input_title {
  display: none !important;
}

/* notification-info__btn wrapper — "Поиск решений" + "Отправить" tugmalar
   Figma: yonma-yon, o'ng tomonda */
.create-page .notification-info__btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* Eski notification.css'dan keladigan style'larni bekor qilish */
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  cursor: default !important;
}

/* "Поиск решений" — outline yashil tugma (submit'dan oldin) */
.create-page .create-form__find-solutions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;              /* fiks height'ni bekor qilish — padding o'lchamni belgilaydi */
  padding: 12px 16px;        /* Figma: tugma padding 12px 16px */
  background-color: var(--bg-surface);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-semibold);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.create-page .create-form__find-solutions:hover {
  background-color: rgba(24, 184, 60, 0.06);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

.create-page .notification-info__btn .message {
  font-size: 12px;
  color: var(--color-danger);
}

.create-page .notification-info__btn .message.hide {
  display: none;
}

/* ============================================================================
   13) Uploaded files list
   ============================================================================ */

.create-page .attached-files,
.create-page .fl_nm_container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-md);
}

.create-page .fl_nm_container:empty {
  display: none;
}

/* Uploaded files container — vertikal stack, attach button ostida */
.create-page .fl_nm_container,
.create-page .attached-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  position: static;
  width: 100%;
}

/* Har bir fayl — oq pill, light gray border, document ikona, qizil circle X */
.create-page .fl_nm_container .fl_nm,
.create-page .fl_nm_container > .fl_nm {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: var(--bg-surface);
  background-image: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
  align-self: flex-start;
  font-weight: var(--font-regular);
  line-height: 1.4;
  position: static;
  width: auto;
  max-width: max-content;
  height: auto;
  overflow: visible;
}

.create-page .fl_nm_container .fl_nm.active {
  display: inline-flex !important;
}

.create-page .fl_nm_container .fl_nm.error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* YANGI: ::before olib tashlandi — JS-da .fl_nm__icon span render qilinadi.
   Eski pill'lar uchun (server-rendered) ::before saqlanadi (CSS only fallback). */
.create-page .fl_nm_container .fl_nm:not(:has(.fl_nm__icon))::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 18px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
  position: static;
  opacity: 1;
}

/* Yangi pill struktura (JS) — icon + info(name+size+progress) + delete */
.create-page .fl_nm_container .fl_nm:has(.fl_nm__info) {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  gap: 10px;
}

.create-page .fl_nm_container .fl_nm__icon {
  width: 18px;
  height: 22px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.create-page .fl_nm.is-ready .fl_nm__icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3Cpolyline%20points%3D%229%2015%2011%2017%2015%2013%22%2F%3E%3C%2Fsvg%3E");
}

.create-page .fl_nm__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.create-page .fl_nm__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.create-page .fl_nm__info .fl_nm__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.create-page .fl_nm__size {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
.create-page .fl_nm__progress {
  width: 100%;
  height: 4px;
  background-color: var(--bg-muted);
  border-radius: 2px;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.create-page .fl_nm__progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ready state — progress bar yashirinadi (smooth fade) */
.create-page .fl_nm.is-ready .fl_nm__progress {
  opacity: 0;
  height: 0;
  margin-top: -4px;
}

/* Error state — qizil progress bar */
.create-page .fl_nm.error .fl_nm__progress-bar {
  background-color: var(--color-danger);
}

/* Loading state — light pulse */
.create-page .fl_nm.is-loading {
  border-color: var(--color-primary);
}

/* Eski struktura — yangi fl_nm__name selektor (faqat .fl_nm__info ichida BO'LMAGAN paytda) */
.create-page .fl_nm_container .fl_nm > .fl_nm__name:not(.fl_nm__info .fl_nm__name) {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Error matn (max size oshib ketganda) */
.create-page .fl_nm_container .fl_nm > red,
.create-page .fl_nm_container .fl_nm > .fl_nm__error {
  display: block;
  font-size: 11px;
  color: var(--color-danger);
  margin-top: 2px;
}

/* Remove button (X) — Figma: oq fon, QIZIL outline circle + QIZIL X belgisi */
.create-page .fl_nm_container .fl_nm .delete,
.create-page .fl_nm_container .delete,
.create-page .fl_nm_container .remove,
.create-page .fl_nm_container [data-remove] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  top: auto;
  right: auto;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  flex-shrink: 0;
  z-index: auto;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.create-page .fl_nm_container .fl_nm .delete::before,
.create-page .fl_nm_container .delete::before,
.create-page .fl_nm_container .remove::before {
  display: none !important;
  content: none !important;
}

.create-page .fl_nm_container .fl_nm .delete:hover,
.create-page .fl_nm_container .delete:hover,
.create-page .fl_nm_container .remove:hover {
  opacity: 0.75;
  transform: scale(1.1);
}

/* ============================================================================
   14) Footer sections (Обращения + Другое) — qora bar
   ============================================================================ */

/* Footer .container'dan tashqarida — negative margin shart emas, full-width o'zi bo'ladi */
.create-page__footer {
  margin: 0;
  padding: var(--space-lg) 0;
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
  width: 100%;
}

.create-footer-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .create-footer-sections {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.create-footer-section__title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
}

.create-footer-section__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background-color: transparent;
  color: var(--color-gray-300);
  font-size: 13px;
  font-weight: var(--font-medium);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-md);  /* 8px — boshqa komponentlar bilan bir xil */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.footer-pill:hover {
  background-color: var(--color-gray-800);
  color: var(--color-white);
  border-color: var(--color-gray-600);
}

.footer-pill.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ============================================================================
   15) SUCCESS MODAL (form submitted)
   ============================================================================ */

.success-modal-wrapper {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.2s ease;
}

.success-modal-wrapper[style*="flex"] {
  display: flex !important;
}

.success-modal {
  width: 100%;
  max-width: 360px;
  padding: var(--space-xl);
  text-align: center;
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.25s ease;
}

/* Figma: yashil outlined circle + yashil check belgisi */
.success-modal__icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2229%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222.5%22%2F%3E%3Cpolyline%20points%3D%2220%2033%2028%2041%2044%2024%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%223.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.success-modal__icon::before {
  display: none;
}

.success-modal__title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.success-modal__text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.45;
}

.success-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: var(--color-primary);
  color: var(--text-on-primary);
  font-size: 14px;
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.success-modal__button:hover {
  background-color: var(--color-primary-hover);
  color: var(--text-on-primary);
}

/* ============================================================================
   16) ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   17) FORM VALIDATION — field-level errorlar (qizil border + matn)
   ============================================================================ */

.create-page .input-field--error input,
.create-page .input-field--error textarea,
.create-page .input-field--error select,
.create-page .input-field--error #create_preview,
.create-page .input-field--error .custom-select__trigger {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 0.5px var(--color-danger) !important;
}

.create-page .input-field--error .custom-select__trigger:hover {
  border-color: var(--color-danger) !important;
}

/* Error matn — field ostida */
.create-page .input-field__error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-danger);
  line-height: 1.3;
  animation: errorShake 0.3s ease;
}

/* Error matn ikona */
.create-page .input-field__error::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2212.01%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ============================================================================
   18) MOBILE
   ============================================================================ */

@media (max-width: 768px) {
  .create-page__title {
    font-size: var(--font-lg);
  }

  .create-form-card,
  .create-page .create-appeal__content {
    padding: var(--space-md);
  }

  .create-page .create-appeal__info {
    flex-direction: column;
    align-items: stretch;
  }

  .create-page .create-appeal__info_bottom {
    margin-left: 0;
    width: 100%;
  }

  /* Tugmalar mobileda vertical stack — ikkalasi ham to'liq (bir xil) kenglikda.
     Tartib: "Murojaatni yuborish" (primary) yuqorida, "Yechimlarni qidirish" pastda. */
  .create-page .notification-info__btn {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .create-page .notification-info__btn .message {
    order: 0;
    text-align: center;
  }

  .create-page .create-form__submit,
  .create-page #create_send {
    order: 1;
    width: 100%;
  }

  .create-page .create-form__find-solutions {
    order: 2;
    width: 100%;
  }
}
/* =============================================================================
   06/Pages — Notifications (notifications.php) — 100% Figma match
   -----------------------------------------------------------------------------
   States:
     1. Empty — "На данный момент уведомлений нет"
     2. Filled — notification cards
   Card layout:
     Row 1: [Title]                            [💬 Обращение № | от ...]
     Row 2: [Author + date]  [Timeline labels]  [Решение: text]  [Статус: ...]
     Row 3: [Новое значение: status_badge]
   ========================================================================== */

.notifications-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  min-height: 60vh;
}

/* ============================================================================
   1) HEADER — title + count badge (chap) + mark-all-read (o'ng)
   ============================================================================ */

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  /* <header> global selector overrides */
  background-color: transparent;
  height: auto;
  border: none;
  border-bottom: none;
  position: static;
  top: auto;
  z-index: auto;
}

.notifications-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notifications-header__title {
  margin: 0;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Count badge — "11 уведомлений" (Figma: light pink/red bg) */
.notifications-header__count {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background-color: #FEE2E2;
  color: #DC2626;
  font-size: 12px;
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  line-height: 1;
}

/* Mark-all-read action — Figma'dagidek double-check (overlapping) icon */
.notifications-header__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--font-medium);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Double-check (check-check) — overlapping ikkita check, Lucide icon */
.notifications-header__action-icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%207%2017l-5-5%22%2F%3E%3Cpath%20d%3D%22m22%2010-7.5%207.5L13%2016%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* Hover holati — Figmadagidek butun tugma yashilga aylanadi
   (matn + ikona ikkalasi ham) */
.notifications-header__action:hover {
  color: var(--color-primary);
}

.notifications-header__action:hover .notifications-header__action-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%207%2017l-5-5%22%2F%3E%3Cpath%20d%3D%22m22%2010-7.5%207.5L13%2016%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================================
   2) NOTIFICATIONS LIST
   ============================================================================ */

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================================================
   3) NOTIFICATION CARD
   ============================================================================ */

/* 05-components/notification.css'dagi .notification-card konflikt qiladi
   (u .notification.notification-card.notification-card__abbreviated kombinatsiyasi uchun).
   Specificity'ni oshirib o'zimizni override qilamiz */
.notifications-page .notification-card,
.notifications-list .notification-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-lg);
  background-color: #F5F5F6 !important;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: 0;                      /* component'dagi margin'ni bekor qilish */
  overflow: visible;                     /* component'dagi overflow:hidden bekor */
  transition: border-color var(--transition-fast);
}

.notification-card:hover {
  border-color: var(--border-default);
}

/* Unread state — Figma: alohida visual indicator yo'q (faqat header count badge) */
.notification-card.is-unread {
  /* border-left olib tashlandi — Figma'da bunday indicator yo'q */
}

/* ============================================================================
   3.1) Card head — title (chap) + ticket meta (o'ng)
   IMPORTANT: <header> global border-bottom, height va sticky'ni bekor qilamiz
   ============================================================================ */

.notification-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0;
  flex-wrap: wrap;
  /* Global <header> style'larini bekor qilish */
  background-color: transparent;
  height: auto;
  border: none;
  border-bottom: none;
  position: static;
  top: auto;
  z-index: auto;
}

.notification-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.4;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
  position: static; /* card o'zining position: relative tirnoq nuqtasi bo'lib qolsin */
}

.notification-card__title:hover {
  color: var(--color-primary);
}

/* STRETCHED LINK — butun card bosilganda detailga o'tsin
   Title link'ga ::before qo'shamiz va uni card ustiga yoyamiz.
   Boshqa interaktiv elementlar (state-badge va h.k.) ::before tagidan
   chiqib qolsin uchun z-index berib qo'yamiz. */
.notification-card__title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* Card ichidagi matn elementlari ::before tagida qolmasin — z-index sozlash */
.notification-card__ticket,
.notification-card__author,
.notification-card__timeline,
.notification-card__right,
.notification-card__footer,
.notification-card__comment,
.state-badge {
  position: relative;
  z-index: 2;
}

/* Title hover effekti — endi butun card hover'i */
.notification-card:hover .notification-card__title {
  color: var(--color-primary);
}

.notification-card__ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.notification-card__ticket-icon {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.notification-card__ticket-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

/* ============================================================================
   3.2) Card body — 4-bo'lim grid
   ============================================================================ */

.notification-card__body {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 280px;
  gap: var(--space-lg);
  align-items: start;
  margin: 0;
}

@media (max-width: 1024px) {
  .notification-card__body {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .notification-card__body {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ============================================================================
   3.3) Author column
   ============================================================================ */

.notification-card__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-card__author-name {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.notification-card__author-client {
  font-size: 12px;
  color: var(--text-tertiary);
}

.notification-card__author-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.notification-card__author-icon {
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* ============================================================================
   3.4) Timeline column — "Изменения состояния" + "Последнее состояние"
   ============================================================================ */

.notification-card__timeline {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
}

@media (max-width: 1024px) {
  .notification-card__timeline {
    grid-column: span 1;
  }
}

.notification-card__timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
}

/* Figma layout:
   [---dashed---] [Изменения состояния]    [Последнее состояние] [---dashed---]
   ya'ni: 1-label CHAP'da dashed, 2-label O'NG'da dashed. O'rtasida hech narsa yo'q.
*/

/* 1-label — faqat CHAP dashed */
.notification-card__timeline-item:first-child::before {
  content: '';
  flex: 1 1 auto;
  border-top: 1px dashed var(--border-default);
  min-width: 12px;
}
.notification-card__timeline-item:first-child::after {
  display: none;
}

/* 2-label — faqat O'NG dashed */
.notification-card__timeline-item:last-child::before {
  display: none;
}
.notification-card__timeline-item:last-child::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px dashed var(--border-default);
  min-width: 12px;
}

.notification-card__timeline-label {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* ============================================================================
   3.5) Right column — Решение box + Статус
   ============================================================================ */

.notification-card__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Solution box — "Решение: text..." */
.notification-card__solution {
  padding: 10px 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.notification-card__solution-label {
  font-size: 12px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.notification-card__solution-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  /* Faqat 3 qator ko'rsatamiz */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status row — "Статус: 🟡 Зарегистрировано"
   Figma: "Статус:" labeli + rangli DOT + state matni */
.notification-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  align-self: flex-end;
  /* Button reset (status interactive bo'lganda) */
  background: transparent;
  border: none;
  padding: 4px 8px;
  margin: -4px -8px;
  font-family: inherit;
  color: inherit;
}

/* (eski accordion-toggle styles olib tashlandi — status'ga click endi kerak emas) */

.notification-card__status-label {
  color: var(--text-tertiary);
}

.notification-card__status-value {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* ============================================================================
   3.5.1) STATUS DOT — rangli indikator
   .notification-card__status-dot.state-badge--green  → yashil dot
   .notification-card__status-dot.state-badge--yellow → sariq dot
   .notification-card__status-dot.state-badge--red    → qizil dot
   .notification-card__status-dot.state-badge--blue   → ko'k dot
   .notification-card__status-dot.state-badge--dark   → qora dot
   .notification-card__status-dot.state-badge--neutral → kulrang dot
   ============================================================================ */

.notification-card__status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #D1D5DB; /* default — neutral kulrang */
}

.notification-card__status-dot.state-badge--green   { background-color: #22C55E; }
.notification-card__status-dot.state-badge--yellow  { background-color: #F59E0B; }
.notification-card__status-dot.state-badge--red     { background-color: #EF4444; }
.notification-card__status-dot.state-badge--blue    { background-color: #3B82F6; }
.notification-card__status-dot.state-badge--purple  { background-color: #A855F7; }
.notification-card__status-dot.state-badge--dark    { background-color: #1A1A1A; }
.notification-card__status-dot.state-badge--orange  { background-color: #FB923C; }
.notification-card__status-dot.state-badge--sky     { background-color: #7DD3FC; }
.notification-card__status-dot.state-badge--neutral { background-color: #D1D5DB; }

/* ============================================================================
   3.6) Card footer — "Новое значение: status_badge"
   ============================================================================ */

.notification-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  /* Figma: divider chiziq yo'q, spacing parent gap'idan keladi */
}

.notification-card__new-value-label {
  font-size: 13px;
  color: var(--text-tertiary);
}

.notification-card__new-value-text {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

/* "Holati" label — agar "Yangi qiymat" ham bo'lsa, oldidan ajratuvchi
   visual gap ko'rsatamiz (vertical divider yoki margin) */
.notification-card__footer .notification-card__footer-status-label {
  margin-left: var(--space-md);
  position: relative;
}

/* Subtle separator (faqat oldida "Yangi qiymat" matni bor bo'lsa) */
.notification-card__footer .notification-card__new-value-text + .notification-card__footer-status-label::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--border-default);
  margin-right: var(--space-md);
  vertical-align: middle;
}

/* State badge — Figma'dagi yangi DOT+TEXT format appeals.css'da global beriladi
   (orqa fon yo'q, faqat ::before rangli dumaloq) */

/* ============================================================================
   3.7) Comment & files (subtle)
   ============================================================================ */

.notification-card__comment {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--bg-surface);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.notification-card__comment p {
  margin: 0;
}

.notification-card__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.notification-card__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-info);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.notification-card__file::before {
  content: '';
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.notification-card__file:hover {
  border-color: var(--color-info);
}

/* Action buttons (confirmation/approval) */
.notification-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.notification-card__actions-text {
  margin-right: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Подтвердите / Утвердите buttons — Figma uchun */
.notification-card__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: 36px;
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  z-index: 2; /* stretched link ostida qolmasin */
}

/* Ghost — "Отклонить" — oq fon, oq border, qora matn */
.notification-card__actions .btn--ghost {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.notification-card__actions .btn--ghost:hover {
  background-color: var(--bg-muted);
  border-color: var(--border-strong);
}

/* Primary — "Подтвердить" — yashil to'la */
.notification-card__actions .btn--primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

.notification-card__actions .btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ============================================================================
   3.7.1) INLINE ACTIONS — har doim ko'rinadi (ТребуетПодтверждения=Да)
   Chap: avval yuborilgan comment (agar bor) + chat-style input
   O'ng: "Подтвердите..." text + Отклонить/Подтвердить tugmalari
   ============================================================================ */

.notification-card__inline-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: end;
  padding-top: var(--space-md);
  position: relative;
  z-index: 2;
}

.notification-card__inline-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* Avval yuborilgan comment ("Текст комментария") + sana */
.notification-card__inline-existing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-size: 13px;
}

.notification-card__inline-existing-text {
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-card__inline-existing-date {
  color: var(--text-tertiary);
  font-size: 12px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .notification-card__inline-actions {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ============================================================================
   3.7.2) CHAT-STYLE COMMENT INPUT (Figma)
   ============================================================================ */

.notification-card__inline-comment {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  position: relative;
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.notification-card__inline-comment:focus-within {
  border-color: var(--color-primary);
}

.notification-card__inline-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font-family-base);
}

.notification-card__inline-input::placeholder {
  color: var(--text-muted);
}

/* Paperclip (attach) */
.notification-card__inline-attach {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.notification-card__inline-attach:hover {
  background-color: var(--bg-muted);
}

/* Send button (green) — icon + loading spinner switchable */
.notification-card__inline-send {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-card__inline-send:hover {
  background-color: var(--color-primary-hover);
}

.notification-card__inline-send:disabled {
  cursor: wait;
  background-color: var(--color-primary);
  opacity: 0.85;
}

.notification-card__inline-send-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.notification-card__inline-send-spinner {
  display: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  animation: spinner-rotate 900ms linear infinite;
}

.notification-card__inline-send.is-loading .notification-card__inline-send-icon { display: none; }
.notification-card__inline-send.is-loading .notification-card__inline-send-spinner { display: inline-block; }

/* Error matn */
.notification-card__inline-error {
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 11px;
  color: var(--color-danger);
}

/* ============================================================================
   3.7.3) CONFIRM/REJECT BUTTONS (right side)
   ============================================================================ */

.notification-card__inline-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.notification-card__inline-prompt {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* Two-button row: Отклонить + Подтвердить */
.notification-card__inline-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notification-card__inline-confirm .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 110px;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Btn label/spinner — default va loading holatlar */
.notification-card__inline-confirm .btn__label {
  display: inline-block;
  transition: opacity 0.15s ease;
}

.notification-card__inline-confirm .btn__spinner {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  animation: spinner-rotate 900ms linear infinite;
}

/* Primary (yashil) — oq spinner */
.notification-card__inline-confirm .btn--primary .btn__spinner {
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Ghost (outline) — yashil spinner */
.notification-card__inline-confirm .btn--ghost .btn__spinner {
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Loading state — label fades out, spinner appears */
.notification-card__inline-confirm .btn.is-loading {
  cursor: wait;
  pointer-events: none;
}

.notification-card__inline-confirm .btn.is-loading .btn__label {
  opacity: 0;
}

.notification-card__inline-confirm .btn.is-loading .btn__spinner {
  display: block;
}

/* Disabled (boshqa tugma loading bo'lganida) */
.notification-card__inline-confirm .btn:disabled:not(.is-loading) {
  opacity: 0.5;
  cursor: not-allowed;
}

.notification-card__inline-confirm .btn--ghost {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.notification-card__inline-confirm .btn--ghost:hover {
  background-color: var(--bg-muted);
  border-color: var(--border-strong);
}

.notification-card__inline-confirm .btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.notification-card__inline-confirm .btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Mobile — prompt va tugmalar full-width */
@media (max-width: 768px) {
  .notification-card__inline-confirm {
    align-items: stretch;
  }
  .notification-card__inline-prompt {
    text-align: left;
  }
  .notification-card__inline-buttons .btn {
    flex: 1 1 50%;
  }
}

/* ============================================================================
   3.8) COMMENT INPUT — Figma: yengil chat-style input + paperclip + send tugma
   Faqat ТребуетПодтверждения/ТребуетСогласования notifyalarda ko'rinadi
   ============================================================================ */

.notifications-page .notification-comment,
.notifications-list .notification-comment {
  margin-top: var(--space-sm);
  padding-top: 0;
  border-top: none;
  position: relative;
  z-index: 2; /* stretched link ostida qolmasin */
}

.notifications-page .notification-comment__item,
.notifications-list .notification-comment__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  margin-bottom: 0;
}

.notifications-page .notification-comment__field,
.notifications-list .notification-comment__field {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.notifications-page .notification-comment__field:focus,
.notifications-list .notification-comment__field:focus {
  box-shadow: none;
  outline: none;
}

.notifications-page .notification-comment__field input,
.notifications-list .notification-comment__field input {
  width: 100%;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-primary);
}

.notifications-page .notification-comment__field input::placeholder,
.notifications-list .notification-comment__field input::placeholder {
  color: var(--text-muted);
}

/* Paperclip (attach) — fl_upld label */
.notifications-page .notification-comment .fl_upld,
.notifications-list .notification-comment .fl_upld {
  order: 1; /* paperclip — send tugmadan oldin */
  flex-shrink: 0;
}

.notifications-page .notification-comment .fl_upld label,
.notifications-list .notification-comment .fl_upld label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 8px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat;
  transition: background-color var(--transition-fast);
}

.notifications-page .notification-comment .fl_upld label:hover,
.notifications-list .notification-comment .fl_upld label:hover {
  background-color: var(--bg-muted);
}

.notifications-page .notification-comment .fl_inp,
.notifications-list .notification-comment .fl_inp {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.notifications-page .notification-comment .fl_nm_container,
.notifications-list .notification-comment .fl_nm_container {
  flex-basis: 100%;
  order: 3;
  margin: 0;
}

.notifications-page .notification-comment .fl_nm_container:empty,
.notifications-list .notification-comment .fl_nm_container:empty {
  display: none;
}

/* Send button — yashil + ok ikona */
.notifications-page .notification-comment__submit,
.notifications-list .notification-comment__submit {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  background-color: var(--color-primary);
  border: none;
  border-radius: 8px;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: background-color var(--transition-fast);
}

.notifications-page .notification-comment__submit:hover,
.notifications-list .notification-comment__submit:hover {
  background-color: var(--color-primary-hover);
}

/* ============================================================================
   4) EMPTY STATE
   ============================================================================ */

.notifications-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  background: transparent;
}

.notifications-empty__text {
  margin: 0;
  font-size: var(--font-md);
  color: var(--text-tertiary);
  font-weight: var(--font-regular);   /* ma'lumot yo'q ogohlantirishi — 400 */
  line-height: 1.5;
}

/* ============================================================================
   5) PAGINATION
   ============================================================================ */

.notifications-pagination {
  margin-top: var(--space-xl);
}

/* ============================================================================
   6) BANNER (xato xabarlari)
   ============================================================================ */

.notification-banner {
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background-color: var(--color-status-danger-bg);
  border: 1px solid var(--color-status-danger);
  border-radius: var(--radius-md);
}

/* ============================================================================
   7) HEADER MENU notification badge (count)
   Figma: badge link matnining CHAP tomonida — qizil to'la doira
   ============================================================================ */

.menu-notification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu-notification .menu-count {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--color-danger);
  color: var(--color-white, #ffffff);
  font-size: 10px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  line-height: 1;
  flex-shrink: 0;
}

.menu-notification__text {
  display: inline-block;
}

/* ============================================================================
   8) MOBILE
   ============================================================================ */

@media (max-width: 768px) {
  .notifications-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-card__head {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .notification-card__ticket {
    font-size: 11px;
  }

  .notification-card__body {
    grid-template-columns: 1fr;
  }

  .notification-card__timeline {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .notification-card__timeline-item::before,
  .notification-card__timeline-item::after {
    display: none;
  }
}
/* =============================================================================
   06/Pages — Ticket detail (card.php) — 100% Figma match
   -----------------------------------------------------------------------------
   Sections:
     1. Breadcrumb
     2. Header (back + title + date + status badge)
     3. Info card (gray, expandable) — title, description, deadline, files, service
     4. Chat (messages + comment input)
   ========================================================================== */

.ticket-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  min-height: 70vh;
}

/* ============================================================================
   1) HEADER
   ============================================================================ */

.ticket-page__header {
  position: relative;
  margin-bottom: var(--space-sm);   /* Figma: kichik gap date va info-card o'rtasida */
  /* Override global <header> styles — KRITIK: display:flex'ni bekor qilish */
  display: block;                /* Global header { display:flex } ni override */
  align-items: initial;
  background-color: transparent;
  height: auto;
  border: none;
  border-bottom: none;
  top: auto;
  z-index: auto;
}

.ticket-page__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */
.ticket-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;
  border: none;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.ticket-page__back:hover {
  background-color: var(--bg-muted);
  opacity: 0.8;
}

.ticket-page__title {
  margin: 0;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ticket-page__title-number {
  font-weight: var(--font-bold);
}

/* Date — Figma: title ostida + card ustida kichik gap */
.ticket-page__date {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: var(--space-md);   /* Title'dan clear gap */
  margin-left: 0;                /* Card edge bilan tekislash */
  margin-bottom: 0;              /* Figma: card bilan kichik gap (header margin-bottom yetadi) */
}

/* Status badge — top right corner */
.ticket-page__status {
  position: absolute;
  top: 0;
  right: 0;
}

/* ============================================================================
   2) BANNER (error msgs)
   ============================================================================ */

.ticket-banner {
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background-color: var(--color-status-danger-bg);
  border: 1px solid var(--color-status-danger);
  border-radius: var(--radius-md);
}

/* ============================================================================
   3) TICKET INFO CARD — kulrang fon, expandable
   ============================================================================ */

.ticket-info-card {
  position: relative;
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 14px);
  background-color: #F5F5F6;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  transition: padding var(--transition-base);
}

.ticket-info-card__main {
  display: grid;
  grid-template-columns: 1fr 200px 220px;
  gap: var(--space-xl);
  align-items: flex-start;
}

@media (max-width: 900px) {
  .ticket-info-card__main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .ticket-info-card__main {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* LEFT column — title + description */
.ticket-info-card__primary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ticket-info-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.4;
}

.ticket-info-card__description {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  word-break: break-word;
}

.ticket-info-card__description img {
  max-width: 100%;
  height: auto;
}

/* Additional dop fields */
.ticket-info-card__dop {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-info-card__dop-item {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* MIDDLE column — meta (deadline, service, etc) */
.ticket-info-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ticket-info-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-info-card__field-label {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

.ticket-info-card__field-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: var(--font-medium);
  line-height: 1.4;
  word-break: break-word;
}

.ticket-info-card__field-value.is-overdue {
  color: var(--color-danger);
}

.ticket-info-card__solution {
  font-weight: var(--font-regular);
  white-space: pre-wrap;
}

/* RIGHT column — files */
.ticket-info-card__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticket-info-card__files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Expanded-only fields — smooth accordion animation (shadcn style) */
.ticket-info-card__expanded-only {
  overflow: hidden;
  max-height: 500px;
  opacity: 1;
  margin-top: 0;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease 0.1s,
    margin-top 0.3s ease,
    padding-top 0.3s ease,
    padding-bottom 0.3s ease;
}

/* Collapsed state — smooth fade + slide up */
.ticket-info-card.is-collapsed .ticket-info-card__expanded-only {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease,
    margin-top 0.3s ease;
}

/* Hover/focus expand */
.ticket-info-card__expanded-only:not(:empty) {
  /* default visible state inherited */
}

/* ============================================================================
   3.1) FILE chip (universal — info card va xabarlarda)
   ============================================================================ */

.ticket-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-info);
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  max-width: 100%;
}

.ticket-file__icon {
  width: 12px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.ticket-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-file:hover {
  border-color: var(--color-info);
}

/* ============================================================================
   3.2) EXPAND/COLLAPSE TOGGLE button
   ============================================================================ */

.ticket-info-card__toggle {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-info);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: var(--font-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  z-index: 1;
}

.ticket-info-card__toggle:hover {
  background-color: var(--bg-muted);
  border-color: var(--color-info);
}

.ticket-info-card__toggle-icon {
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233B82F6%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition: transform var(--transition-fast);
}

.ticket-info-card:not(.is-collapsed) .ticket-info-card__toggle-icon {
  transform: rotate(180deg);
}

/* ============================================================================
   4) ACTION buttons (Confirm / Approve)
   ============================================================================ */

.ticket-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
}

.ticket-actions__text {
  margin-right: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================================
   5) CHAT — messages + input
   ============================================================================ */

.ticket-chat {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ticket-chat__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-2xl);   /* Figma: ikki tomondan keng (48px) */
  max-height: 60vh;
  overflow-y: auto;
}

/* ============================================================================
   5.1) Message bubble
   ============================================================================ */

.ticket-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 70%;
  padding: 12px 14px;
  background-color: #F5F5F6;     /* Figma: barcha message uchun bir xil */
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .ticket-message {
    max-width: 90%;
  }
}

/* MY message — RIGHT-aligned, #F5F5F6 (Figma: yashil emas) */
.ticket-message--mine {
  align-self: flex-end;
  background-color: #F5F5F6;     /* Figma: theirs bilan bir xil neutral */
}

.ticket-message--mine .ticket-message__author {
  color: var(--text-primary);    /* Figma: yashil emas, neytral qora */
}

/* THEIR messages — LEFT-aligned, #F5F5F6 */
.ticket-message--theirs {
  align-self: flex-start;
  background-color: #F5F5F6;
}

.ticket-message--theirs .ticket-message__author {
  color: var(--text-primary);
}

/* Author — KATTAROQ + BOLD + UPPERCASE (Figma'da name dominant) */
.ticket-message__author {
  font-size: 12px;
  font-weight: var(--font-bold);
  letter-spacing: 0.5px;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Text — KICHIKROQ + REGULAR (name'dan kichik va engil) */
.ticket-message__text {
  font-size: 13px;
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}

.ticket-message__text p {
  margin: 0 0 6px;
}

.ticket-message__text p:last-child {
  margin-bottom: 0;
}

.ticket-message__text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.ticket-message__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ticket-message__date {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================================
   5.2) Comment input — Figma: rounded gray bar, attach + send buttons
   ============================================================================ */

/* Compose container — Figma: ikki tomondan keng padding (48px) */
.ticket-chat__compose {
  padding: var(--space-md) var(--space-2xl);   /* 16px 48px — Figma keng inset */
  background-color: var(--bg-surface);
}

/* Compose ichki container — Figma: #F5F5F6 fon, border yo'q */
.ticket-chat__input,
.ticket-chat__compose .notification-comment__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px !important;
  background-color: #F5F5F6 !important;       /* Figma: input wrapper #F5F5F6 */
  border: 1px solid transparent !important;    /* Default: ko'rinmaydigan border */
  border-radius: var(--radius-md) !important;
  min-height: 0;
  transition: border-color var(--transition-fast);
}

.ticket-chat__input:focus-within {
  border-color: var(--color-primary) !important;
}

/* Field container — flex 1 1 auto */
.ticket-chat__compose .notification-comment__field {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* notification-comment umumiy padding/margin — bekor */
.ticket-chat__compose.notification-comment {
  margin-top: 0;
  padding-top: 12px;
  border-top: none;
}

.ticket-chat__field {
  flex: 1 1 auto;
  min-width: 0;
}

.ticket-chat__field input,
.ticket-chat__field textarea {
  width: 100%;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-family-base);
  font-size: 13px;
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  display: block;
  margin: 0;
}

.ticket-chat__field input::placeholder,
.ticket-chat__field textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Attach button — paperclip icon */
.ticket-chat__attach {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: center;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/18px no-repeat;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.ticket-chat__attach:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
}

.ticket-chat__attach .fl_inp {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Send button — Figma: yashil rounded, oq strelka.
   IMPORTANT: 05-components/notification.css'dagi margin-top'ni bekor qilamiz */
.ticket-chat__submit,
.ticket-chat__compose .notification-comment__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 !important;
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  align-self: center;
  font-size: 0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.ticket-chat__submit:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* fl_nm_container — endi .ticket-chat__input ICHIDA (main.js path lookup uchun).
   Flex'da to'liq kenglik bilan yangi qatorga tushadi */
.ticket-chat__compose .fl_nm_container {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 8px;
}

.ticket-chat__compose .fl_nm_container:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.ticket-chat__compose .fl_nm_container .fl_nm {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background-image: none !important;
}

.ticket-chat__compose .fl_nm_container .fl_nm.active {
  display: inline-flex !important;
}

.ticket-chat__compose .fl_nm_container .fl_nm::before {
  content: '';
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

.ticket-chat__compose .fl_nm_container .fl_nm .delete {
  position: static !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
  cursor: pointer;
  font-size: 0;
}

/* ============================================================================
   5.3) Closed state
   ============================================================================ */

.ticket-chat__closed {
  padding: var(--space-xl);
  text-align: center;
  background-color: var(--bg-muted);
}

.ticket-chat__closed p {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================================
   6) MOBILE
   ============================================================================ */

@media (max-width: 768px) {
  .ticket-page__title {
    font-size: var(--font-xl);
  }

  .ticket-page__status {
    position: static;
    margin-top: var(--space-sm);
    display: inline-flex;
  }

  .ticket-info-card {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 14px);
  }

  .ticket-chat__messages {
    padding: var(--space-md);
    max-height: 50vh;
  }

  .ticket-chat__compose {
    padding: var(--space-sm) var(--space-md);
  }
}
/* =============================================================================
   06/Pages — Subcategory (templateCategories.php / template.php)
   -----------------------------------------------------------------------------
   Figma:
     - Breadcrumb: Регистрация обращения > General
     - Title with back arrow: "← IT Teknik bo'lim"
     - Search input (yumaloq, kichik)
     - Empty state (search natija yo'q bo'lsa)
     - Cards grid 3-column
   ========================================================================== */

/* Subcategory sahifasi: gradient YO'Q (faqat home'da) */
.subcategory-page.page_template {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.subcategory-page.page_template::before {
  display: none;  /* Hero gradient yo'q */
}

.subcategory-page.page_template .container {
  display: flex;
  flex-direction: column;
}

/* Container ichidagi tartibi (CSS flex order bilan) */
.subcategory-page .breadcrumbs { order: 1; }
.subcategory-page .subcategory-page__title { order: 2; }
.subcategory-page .create-appeal__head { order: 3; }
.subcategory-page .search-empty-state { order: 4; }
.subcategory-page .templates { order: 5; }

/* ============================================================================
   Title with back arrow
   ============================================================================ */

.subcategory-page__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
}

/* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */
.subcategory-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;
  border: none;
  cursor: pointer;
  font-size: 0;  /* hidden ← character if any */
  color: transparent;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    background-color var(--transition-fast),
    opacity var(--transition-fast);
}

.subcategory-page__back:hover {
  background-color: var(--bg-muted);
  opacity: 0.8;
}

/* ============================================================================
   Search section — markazda, max-width (Figma'dagidek qisqaroq)
   ============================================================================ */

.subcategory-page .create-appeal__head {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-xl);
  width: 100%;
  max-width: 480px;
}

.subcategory-page .create-appeal__head .search {
  width: 100%;
}

/* ============================================================================
   Templates grid (cards)
   ============================================================================ */

.subcategory-page .templates {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .subcategory-page .templates {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .subcategory-page .templates {
    grid-template-columns: 1fr;
  }
}

/* Subcategory cards — biroz boshqacha (comment matni katta bo'lishi mumkin) */
.subcategory-page .templates .template,
.subcategory-page .templates .category {
  padding: var(--space-md) var(--space-lg);
  padding-right: 56px;
  min-height: 88px;  /* Comment bo'lsa ko'proq joy */
  align-items: flex-start;
}

.subcategory-page .templates .template .text,
.subcategory-page .templates .category .text {
  align-self: center;
}

.subcategory-page .templates .template .name,
.subcategory-page .templates .category .name {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  margin-bottom: 4px;
}

.subcategory-page .templates .template .comment,
.subcategory-page .templates .category .comment {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   Empty state
   ============================================================================ */

.subcategory-page .search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--text-muted);
}

/* ============================================================================
   Mobile
   ============================================================================ */

@media (max-width: 768px) {
  .subcategory-page__title {
    font-size: var(--font-lg);
  }
}
/* =============================================================================
   06/Pages — Logout (quit.php) — Akkayntdan chiqqandan keyin
   -----------------------------------------------------------------------------
   Figma:
     Sahifa o'rtasida:
       ISHONCH itilium logo (markazda, yuqorida)
       Card:
         "Tizimdan muvaffaqiyatli chiqildi!"
         "Qayta avtorizatsiyani oldini olish uchun..."
   ========================================================================== */

/* Body — to'liq oq sahifa, markazda content */
body.logout-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-page);
  font-family: var(--font-family-base);
  color: var(--text-primary);
}

/* Inner wrapper — markazlashtirilgan column */
.logout-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-lg);
  width: 100%;
  max-width: 480px;
}

/* Logo — markazda, bossa /itilium/ ga olib o'tadi */
.logout-page__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  height: 24px;
  transition: opacity var(--transition-fast);
}

.logout-page__logo:hover {
  opacity: 0.85;
}

.logout-page__logo svg {
  display: block;
  height: 24px;
  width: auto;
}

/* Card — markazda, soyali oq panel */
.logout-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-xl) var(--space-2xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.logout-card__title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-snug);
}

.logout-card__text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Mobile */
@media (max-width: 480px) {
  .logout-page__inner {
    gap: var(--space-xl);
    padding: var(--space-lg);
  }

  .logout-page__logo,
  .logout-page__logo svg {
    height: 20px;
  }

  .logout-card {
    padding: var(--space-lg) var(--space-md);
  }

  .logout-card__title {
    font-size: var(--font-sm);
  }

  .logout-card__text {
    font-size: var(--font-xs);
  }
}
/* =============================================================================
   06/Pages — FAQ (faq.php) + Solutions (solutions.php) — 100% Figma match
   -----------------------------------------------------------------------------
   Shadcn-style accordion bilan, smooth grid-template-rows animatsiya.
   ========================================================================== */

.faq-page,
.solutions-page {
  padding: var(--space-xl) 0 var(--space-2xl);
  min-height: 60vh;
}

/* ============================================================================
   1) HEADER — back + title (chap) + search (o'ng)
   ============================================================================ */

.faq-page__header,
.solutions-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  /* override global header */
  background-color: transparent;
  height: auto;
  border: none;
  border-bottom: none;
  position: static;
  top: auto;
  z-index: auto;
}

.faq-page__title-row,
.solutions-page__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */
.faq-page__back,
.solutions-page__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;
  border: none;
  cursor: pointer;
  font-size: 0;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.faq-page__back:hover,
.solutions-page__back:hover {
  background-color: var(--bg-muted);
}

.faq-page__title,
.solutions-page__title {
  margin: 0;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Search — appeals page bilan bir xil pozitsiya */
.faq-page__search,
.solutions-page__search {
  width: 280px;
  flex-shrink: 0;
}

.faq-page__search .input-item,
.solutions-page__search .input-item {
  height: 36px;
  padding-left: 38px;
}

.faq-page__search::before,
.solutions-page__search::before {
  left: 12px;
  width: 14px;
  height: 14px;
}

/* ============================================================================
   2) ACCORDION LIST
   ============================================================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-section-title {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.faq-section-title:first-child {
  margin-top: 0;
}

/* ============================================================================
   3) ACCORDION ITEM — shadcn style
   ============================================================================ */

.faq-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-item.is-open {
  border-color: var(--color-primary);
}

/* Question button */
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}

.faq-item__question:hover {
  background-color: var(--bg-muted);
}

.faq-item__question-text {
  flex: 1 1 auto;
  word-break: break-word;
}

/* Chevron — smooth rotate on expand */
.faq-item__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
}

/* ============================================================================
   3.1) ANSWER WRAPPER — shadcn-style smooth expand
   ============================================================================ */

.faq-item__answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-item__answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__answer-inner > * {
  margin-left: 20px;
  margin-right: 20px;
}

.faq-item__answer-inner > *:first-child {
  margin-top: 0;
}

.faq-item__answer-inner > *:last-child {
  margin-bottom: 20px;
}

/* Decision title */
.faq-item__decision-title {
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Answer text */
.faq-item__answer-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: break-word;
}

.faq-item__answer-text p {
  margin: 0 0 8px;
}

.faq-item__answer-text p:last-child {
  margin-bottom: 0;
}

.faq-item__answer-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.faq-item__answer-text a {
  color: var(--color-info);
  text-decoration: underline;
}

/* Files list */
.faq-item__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

/* ============================================================================
   4) EMPTY STATE — "На данный момент данных нет"
   ============================================================================ */

.faq-empty,
.solutions-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
}

.faq-empty__text,
.solutions-empty__text {
  margin: 0;
  font-size: var(--font-md);
  color: var(--text-tertiary);
  font-weight: var(--font-regular);   /* ma'lumot yo'q ogohlantirishi — 400 */
  line-height: 1.5;
}

/* ============================================================================
   5) BANNER (errors)
   ============================================================================ */

.faq-banner,
.solutions-banner {
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background-color: var(--color-status-danger-bg);
  border: 1px solid var(--color-status-danger);
  border-radius: var(--radius-md);
}

/* ============================================================================
   6) PAGINATION
   ============================================================================ */

.faq-pagination,
.solutions-pagination {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}

/* ============================================================================
   7) SOLUTIONS — articles list (cards)
   ============================================================================ */

.solutions-page__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .solutions-page__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .solutions-page__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   8) SOLUTIONS — article detail view
   ============================================================================ */

.solutions-article {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.solutions-article__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}

.solutions-article__text p {
  margin: 0 0 12px;
}

.solutions-article__text p:last-child {
  margin-bottom: 0;
}

.solutions-article__text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 8px 0;
}

.solutions-article__text a {
  color: var(--color-info);
  text-decoration: underline;
}

.solutions-article__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.solutions-article__section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
}

.solutions-article__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solutions-article__link {
  display: block;
  padding: 8px 12px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: 13px;
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.solutions-article__link:hover {
  background-color: #BFDBFE;
}

.solutions-article__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================================
   8) MOBILE
   ============================================================================ */

@media (max-width: 768px) {
  .faq-page__header,
  .solutions-page__header {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-page__title-row,
  .solutions-page__title-row {
    width: 100%;
  }

  .faq-page__search,
  .solutions-page__search {
    width: 100%;
  }

  .faq-page__title,
  .solutions-page__title {
    font-size: var(--font-xl);
  }

  .faq-item__question {
    padding: 12px 16px;
    font-size: 13px;
  }

  .faq-item__answer-inner > * {
    margin-left: 16px;
    margin-right: 16px;
  }
}
/* =============================================================================
   99 — UTILITIES
   -----------------------------------------------------------------------------
   Yordamchi klasslar (helpers).
   ========================================================================== */

/* ============================================================================
   DISPLAY
   ============================================================================ */

.d-none      { display: none !important; }
.d-block     { display: block !important; }
.d-inline    { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex      { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid      { display: grid !important; }

/* ============================================================================
   FLEX
   ============================================================================ */

.flex-row     { flex-direction: row !important; }
.flex-column  { flex-direction: column !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }
.flex-1       { flex: 1 !important; }
.flex-auto    { flex: 0 0 auto !important; }

.jc-start     { justify-content: flex-start !important; }
.jc-center    { justify-content: center !important; }
.jc-end       { justify-content: flex-end !important; }
.jc-between   { justify-content: space-between !important; }
.jc-around    { justify-content: space-around !important; }

.ai-start     { align-items: flex-start !important; }
.ai-center    { align-items: center !important; }
.ai-end       { align-items: flex-end !important; }
.ai-stretch   { align-items: stretch !important; }

.gap-xs       { gap: var(--space-xs) !important; }
.gap-sm       { gap: var(--space-sm) !important; }
.gap-md       { gap: var(--space-md) !important; }
.gap-lg       { gap: var(--space-lg) !important; }
.gap-xl       { gap: var(--space-xl) !important; }

/* ============================================================================
   SPACING — margin
   ============================================================================ */

.m-0   { margin: 0 !important; }
.m-xs  { margin: var(--space-xs) !important; }
.m-sm  { margin: var(--space-sm) !important; }
.m-md  { margin: var(--space-md) !important; }
.m-lg  { margin: var(--space-lg) !important; }
.m-xl  { margin: var(--space-xl) !important; }
.m-auto { margin: auto !important; }

.mt-0  { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.ml-0  { margin-left: 0 !important; }
.ml-auto { margin-left: auto !important; }

.mr-0  { margin-right: 0 !important; }
.mr-auto { margin-right: auto !important; }

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
   SPACING — padding
   ============================================================================ */

.p-0   { padding: 0 !important; }
.p-xs  { padding: var(--space-xs) !important; }
.p-sm  { padding: var(--space-sm) !important; }
.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }

.pt-0  { padding-top: 0 !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }

/* ============================================================================
   WIDTH & HEIGHT
   ============================================================================ */

.w-100   { width: 100% !important; }
.w-auto  { width: auto !important; }
.h-100   { height: 100% !important; }
.h-auto  { height: auto !important; }
.min-h-100vh { min-height: 100vh !important; }

/* ============================================================================
   BORDER RADIUS
   ============================================================================ */

.rounded      { border-radius: var(--radius-md) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-none { border-radius: 0 !important; }

/* ============================================================================
   SHADOW
   ============================================================================ */

.shadow-none  { box-shadow: none !important; }
.shadow-xs    { box-shadow: var(--shadow-xs) !important; }
.shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.shadow-md    { box-shadow: var(--shadow-md) !important; }
.shadow-lg    { box-shadow: var(--shadow-lg) !important; }

/* ============================================================================
   BACKGROUNDS
   ============================================================================ */

.bg-page      { background-color: var(--bg-page) !important; }
.bg-surface   { background-color: var(--bg-surface) !important; }
.bg-muted     { background-color: var(--bg-muted) !important; }
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-success   { background-color: var(--color-success) !important; }
.bg-warning   { background-color: var(--color-warning) !important; }
.bg-danger    { background-color: var(--color-danger) !important; }
.bg-transparent { background-color: transparent !important; }

/* ============================================================================
   POSITION
   ============================================================================ */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* ============================================================================
   OVERFLOW
   ============================================================================ */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }

/* ============================================================================
   CURSOR
   ============================================================================ */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ============================================================================
   USER SELECT
   ============================================================================ */

.user-select-none { user-select: none !important; }
.user-select-all  { user-select: all !important; }

/* ============================================================================
   OPACITY
   ============================================================================ */

.opacity-0   { opacity: 0 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ============================================================================
   ELLIPSIS / TRUNCATE
   ============================================================================ */

.text-truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.text-line-clamp-1,
.text-line-clamp-2,
.text-line-clamp-3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.text-line-clamp-1 { -webkit-line-clamp: 1 !important; }
.text-line-clamp-2 { -webkit-line-clamp: 2 !important; }
.text-line-clamp-3 { -webkit-line-clamp: 3 !important; }

/* fixh — PHP'da bor (slider'da uchun) */
.fixh {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================================
   CLEARFIX
   ============================================================================ */

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
   ICON HELPERS (PHP'da ishlatiladigan)
   ============================================================================ */

.avatar,
.avatar-user,
.avatar-manager {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: var(--radius-full);
  background-color: var(--bg-muted);
}

.avatar {
  background-image: url('/itilium/themes/img/icons/avatar.svg');
}

.avatar-user {
  background-image: url('/itilium/themes/img/icons/avatar-user.svg');
}

.avatar-manager {
  background-image: url('/itilium/themes/img/icons/avatar-manager.svg');
}

/* Status icons */
.status-flame {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('/itilium/themes/img/icons/flame.svg') center/contain no-repeat;
  vertical-align: middle;
}

.status-flame__gray {
  background-image: url('/itilium/themes/img/icons/flame-gray.svg');
}

.status-pin {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* Star icons */
.star-list {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
}

.star-list .star,
.star-list span {
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('/itilium/themes/img/icons/star-.svg');
}

.star-list .star.active,
.star-list .active {
  background-image: url('/itilium/themes/img/icons/star.svg');
}