/* ══════════════════════════════════════════════════════════════════
   YK Theme — demo.appliancecos.com CRM üçün uyğunlaşdırılmış qat
   Mənbə: YK Control (Yeni Klinika) görünüş sistemi.

   Bu fayl Tailwind-dən SONRA yüklənir və app.css-i üstələyir.
   Rəngi dəyişmək üçün yalnız aşağıdakı :root blokuna toxunun —
   --accent / --accent-soft / --accent-ink üç dəyəri kifayətdir.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* səthlər */
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#F7F9FD;
  --line:#E3E9F3; --line-soft:#EEF2F8;

  /* mətn — üç pillə */
  --text:#16203A; --muted:#65728C; --dim:#98A3B8;

  /* marka */
  --accent:#15A4DE; --accent-2:#4FC3EE; --accent-soft:#E3F4FB; --accent-ink:#0C7BA8;
  --accent-deep:#0A5F84;

  /* vəziyyət */
  --ok:#12A150;     --ok-soft:#E3F7EC;     --ok-ink:#0B7A3C;
  --warn:#E08700;   --warn-soft:#FFF3DE;   --warn-ink:#A96500;
  --danger:#EF3E36; --danger-soft:#FDE8E7; --danger-ink:#C42A23;
  --violet:#7C3AED; --violet-soft:#F1E9FE;
  --teal:#0D9488;   --teal-soft:#DDF5F2;
  --pink:#DB2777;   --pink-soft:#FCE7F3;

  /* forma */
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(22,32,58,.06), 0 1px 3px rgba(22,32,58,.04);
  --shadow:0 4px 16px rgba(22,32,58,.08);
  --shadow-lg:0 18px 48px rgba(22,32,58,.16);
}

/* ── 1. Baza ───────────────────────────────────────────────────── */
body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CFD8E8;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#B9C5DA}
::-webkit-scrollbar-track{background:transparent}
.arctic-scroll::-webkit-scrollbar{width:6px}
.arctic-scroll::-webkit-scrollbar-thumb{background:#CFD8E8;border-radius:10px}

/* YK qaydası №2: qradiyentsiz düymələr — qradiyent yalnız üst zolaq və loqoda */
.arctic-gradient{
  background:linear-gradient(135deg,var(--accent-deep) 0%,var(--accent) 100%)!important;
}

/* ── 2. Üst zolaq: marka qradiyenti, aşağı künclər yuvarlaq ───────
   YK-nın ən tanınan elementi. Header solid ağdan qradiyentə keçir,
   ona görə içindəki bütün mətn/ikonlar ağa çevrilir.            */
#appHeader{
  background:linear-gradient(120deg,var(--accent-deep) 0%,var(--accent-ink) 45%,var(--accent) 100%)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  border-bottom:none!important;
  border-radius:0 0 22px 22px;
  box-shadow:0 6px 16px rgba(21,164,222,.15);
  overflow:visible;
  position:sticky; top:0;   /* Tailwind-in sticky-si saxlanılır */
}
/* sağ yuxarıda incə işıq ləkəsi — səthə dərinlik verir */
#appHeader::after{
  content:"";position:absolute;top:-70px;right:-30px;width:210px;height:210px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);
}
#appHeader > *{position:relative;z-index:1}

/* zolaq içindəki mətn və ikonlar */
#appHeader .material-symbols-outlined,
#appHeader .text-slate-400,
#appHeader .text-slate-500,
#appHeader .text-on-surface,
#appHeader nav,
#appHeader nav a{color:rgba(255,255,255,.82)!important}
#appHeader .text-on-surface,
#appHeader b,#appHeader strong{color:#fff!important}
#appHeader #headerClock{color:#fff!important}
#appHeader #headerDate{color:rgba(255,255,255,.62)!important}
#appHeader button:hover,
#appHeader a:hover{background:rgba(255,255,255,.16)!important;color:#fff!important}
#appHeader .hover\:bg-slate-100:hover{background:rgba(255,255,255,.16)!important}
/* ayırıcı xətlər */
#appHeader [style*="background:#e2e8f0"],
#appHeader [style*="background: #e2e8f0"]{background:rgba(255,255,255,.28)!important}

/* zolaqdakı axtarış / ZIP sahələri — şüşəvari */
#appHeader input{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.26)!important;
  color:#fff!important;
}
#appHeader input::placeholder{color:rgba(255,255,255,.66)!important}
#appHeader input:focus{
  background:rgba(255,255,255,.24)!important;
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:none!important;
}
/* On/Off düyməsi */
#appHeader #availToggle{
  background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.28)!important;
}
#appHeader #availLabel{color:#fff!important}
/* açılan pəncərələr zolağın rəngini miras almasın */
#appHeader #globalSearchDropdown,
#appHeader #zipCheckDrop,
#appHeader #userMenu,
#globalSearchDropdown,#zipCheckDrop{
  background:var(--surface)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;box-shadow:var(--shadow-lg)!important;
}
#globalSearchDropdown *,#zipCheckDrop *{color:inherit}

/* ── 3. Yan menyu ─────────────────────────────────────────────── */
#sidebar{
  background:var(--surface)!important;
  border-right:1px solid var(--line);
}
#sidebar nav a{border-radius:var(--radius-sm)!important;font-weight:500}
#sidebar nav a:hover{background:var(--surface-2)!important;color:var(--text)!important}
/* aktiv bölmə — YK: açıq marka fonu + tünd marka mətni, sağ zolaq yox */
#sidebar nav a.bg-sky-50,
#sidebar nav a[class*="border-sky-600"]{
  background:var(--accent-soft)!important;
  color:var(--accent-ink)!important;
  border-right:0!important;
  font-weight:700;
}
#sidebar nav a.bg-sky-50 .material-symbols-outlined{color:var(--accent-ink)!important}
#sidebar .text-slate-500{color:var(--muted)!important}
#sidebar h1{color:var(--text)!important}
/* loqo mətni — YK marka qradiyenti */
#sidebar #logoFallback p{
  background:linear-gradient(92deg,var(--accent) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}

/* ── 4. Kartlar: kölgə yox, çərçivə (YK qaydası №1) ───────────── */
main [class*="bg-white"][class*="rounded-"],
main [class*="bg-surface-container-lowest"][class*="rounded-"]{
  border:1px solid var(--line);
}
main .shadow-2xl,main .shadow-xl{box-shadow:var(--shadow)!important}
main .shadow-lg,main .shadow-md{box-shadow:var(--shadow-sm)!important}
main .shadow-sm,main .shadow{box-shadow:var(--shadow-sm)!important}
main .rounded-2xl{border-radius:16px}
main .rounded-xl{border-radius:var(--radius)}
main .rounded-lg{border-radius:var(--radius-sm)}

/* ── 5. Üç pilləli mətn ierarxiyası ───────────────────────────── */
main .text-slate-900,main .text-on-surface,main .text-on-background{color:var(--text)!important}
main .text-slate-600,main .text-slate-500,main .text-on-surface-variant{color:var(--muted)!important}
main .text-slate-400,main .text-slate-300{color:var(--dim)!important}

/* ── 6. Cədvəl ─────────────────────────────────────────────────── */
main thead th{
  background:var(--surface-2);
  color:var(--muted)!important;
  text-transform:uppercase;letter-spacing:.04em;
  font-size:11.5px;font-weight:700;
  border-bottom:1px solid var(--line);
}
main tbody td{border-bottom:1px solid var(--line-soft)}
main tbody tr:hover{background:var(--surface-2)}

/* ── 7. Nişanlar: açıq fon + tünd mətn, heç vaxt doymuş rəng ──── */
.bg-emerald-100,.bg-green-100{background-color:var(--ok-soft)!important}
.text-emerald-700,.text-emerald-600,.text-emerald-800,
.text-green-700,.text-green-600,.text-green-800{color:var(--ok-ink)!important}

.bg-sky-100,.bg-blue-100,.bg-cyan-100{background-color:var(--accent-soft)!important}
.text-sky-700,.text-sky-600,.text-blue-700,.text-blue-600,
.text-cyan-700,.text-cyan-600{color:var(--accent-ink)!important}

.bg-amber-100,.bg-yellow-100,.bg-orange-100{background-color:var(--warn-soft)!important}
.text-amber-700,.text-amber-600,.text-amber-800,
.text-yellow-700,.text-yellow-800,
.text-orange-700,.text-orange-600{color:var(--warn-ink)!important}

.bg-red-100,.bg-rose-100{background-color:var(--danger-soft)!important}
.text-red-700,.text-red-600,.text-red-800,
.text-rose-700,.text-rose-600{color:var(--danger-ink)!important}

.bg-indigo-100,.bg-violet-100,.bg-purple-100{background-color:var(--violet-soft)!important}
.text-indigo-700,.text-indigo-600,.text-violet-700,
.text-purple-700,.text-purple-600{color:var(--violet)!important}

.bg-teal-100{background-color:var(--teal-soft)!important}
.text-teal-700,.text-teal-600{color:var(--teal)!important}

.bg-pink-100,.bg-fuchsia-100{background-color:var(--pink-soft)!important}
.text-pink-700,.text-pink-600{color:var(--pink)!important}

.bg-slate-100,.bg-gray-100{background-color:var(--line-soft)!important}

/* nişan forması — tam yumru */
main span[class*="rounded-full"][class*="text-[10px]"],
main span[class*="rounded-full"][class*="text-xs"]{letter-spacing:.01em;font-weight:650}

/* ── 8. Forma sahələri ─────────────────────────────────────────── */
main input:not([type=checkbox]):not([type=radio]),
main select,main textarea{
  border-radius:var(--radius-sm);
  border-color:var(--line);
}
main input:focus,main select:focus,main textarea:focus{
  outline:none;
  border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 1px var(--accent)!important;   /* app.css-dəki indigo halqanı əvəz edir */
}
main input::placeholder,main textarea::placeholder{color:var(--dim)}

/* ── 9. Düymələr ───────────────────────────────────────────────── */
main button[class*="bg-primary"],
main a[class*="bg-primary"]{
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}
main button[class*="bg-primary"]:hover,
main a[class*="bg-primary"]:hover{filter:brightness(1.05);box-shadow:var(--shadow)}
main button:active{transform:translateY(1px)}

/* ── 10. Modal və bildirişlər ──────────────────────────────────── */
.modal-backdrop{background:rgba(22,32,58,.34)!important;backdrop-filter:blur(3px)}
.swal2-popup{border-radius:16px!important;font-family:'Roboto',system-ui,sans-serif!important}
.swal2-styled.swal2-confirm{
  background:var(--accent)!important;border-radius:var(--radius-sm)!important;font-weight:600!important;
}
.swal2-styled.swal2-cancel{
  background:#fff!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;
}

/* ── 11. Giriş səhifəsi ────────────────────────────────────────── */
body.yk-login{
  background:radial-gradient(900px 520px at 50% -5%, #DCE7FF 0%, var(--bg) 62%)!important;
}
body.yk-login main > div form,
body.yk-login form{border-radius:20px}
body.yk-login h2{
  background:linear-gradient(92deg,var(--accent) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
body.yk-login input:focus{
  border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;
}

/* ── 12. Mobil ────────────────────────────────────────────────── */
@media (max-width:1023px){
  #appHeader{
    background:linear-gradient(120deg,var(--accent-deep) 0%,var(--accent-ink) 45%,var(--accent) 100%)!important;
    border-radius:0 0 18px 18px;
  }
  main input:not([type=checkbox]):not([type=radio]),
  main select,main textarea{font-size:16px}   /* iOS-da avtomatik yaxınlaşmanın qarşısı */
}

/* çap: qradiyent zolağı kağıza düşməsin */
@media print{ #appHeader{display:none!important} }

/* ── 13. Marka sözü — YK qradiyentli loqo mətni ─────────────────── */
#sidebar h1 .yk-wordmark{
  background:linear-gradient(92deg,var(--accent) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
#sidebar h1 .yk-wordmark-sub{
  color:var(--dim)!important;font-weight:700;letter-spacing:.06em;font-size:.62em;
  text-transform:uppercase;vertical-align:.18em;
}
/* menyu qrup başlıqları */
#sidebar .sb-group,#sidebar [class*="uppercase"][class*="tracking-"]{
  color:var(--dim)!important;letter-spacing:.08em;font-weight:700;
}

/* ── 14. Zolaqdan asılan pəncərələr ağ mətni miras almasın ──────
   #appHeader-in "hər şey ağ olsun" qaydası açılan menyulara da düşürdü
   (ağ fonda ağ mətn). Burada geri qaytarılır.                      */
#appHeader #userMenu,
#appHeader #globalSearchDropdown,
#appHeader #zipCheckDrop{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-lg)!important;
}
#appHeader #userMenu *,
#appHeader #globalSearchDropdown *,
#appHeader #zipCheckDrop *{color:var(--text)!important}
#appHeader #userMenu .material-symbols-outlined,
#appHeader #globalSearchDropdown .material-symbols-outlined,
#appHeader #zipCheckDrop .material-symbols-outlined{color:var(--muted)!important}
#appHeader #userMenu .text-slate-400,
#appHeader #globalSearchDropdown .text-slate-400,
#appHeader #zipCheckDrop .text-slate-400{color:var(--dim)!important}
#appHeader #userMenu .text-error,
#appHeader #userMenu .text-error *{color:var(--danger)!important}
#appHeader #userMenu a:hover,
#appHeader #userMenu button:hover,
#appHeader #globalSearchDropdown .gs-item:hover,
#appHeader #zipCheckDrop a:hover{background:var(--surface-2)!important}
#appHeader #userMenu hr{border-color:var(--line-soft)!important}

/* ── 15. Zolağın yığılma qatı ──────────────────────────────────
   Orijinalda backdrop-filter header-ə öz yığılma konteksti verirdi;
   qradiyentə keçəndə o kontekst itdi və açılan menyu məzmunun
   altında qalırdı. Qatı açıq şəkildə qaldırırıq.                */
/* Zolaq orijinaldakı kimi yan menyunun ALTINDA qalmalıdır (header 40 < sidebar 50);
   yoxsa menyu açılıb-bağlananda logo və menyu başlığı zolağın altında itir.
   Açılan pəncərələr isə öz-özünə yuxarı qaldırılır. */
#appHeader{z-index:40!important}
#sidebar{z-index:50!important}
#appHeader #userMenu,
#appHeader #globalSearchDropdown,
#appHeader #zipCheckDrop{z-index:99999!important}

/* Yan menyu üzərinə gələndə açılırsa, üzən panel kimi görünsün —
   qradiyentli zolağın üstünə düz kəsiklə çıxmasın. */
html.sb-collapsed #sidebar:hover{
  border-right:1px solid var(--line);
  box-shadow:8px 0 34px rgba(22,32,58,.16);
}

/* ── 16. Dar masaüstü enində üst zolağın sıxlığı ────────────────
   md–lg aralığında axtarış + ZIP + saat + breadcrumb üst-üstə düşür.
   Breadcrumb ən az lazım olanıdır — yalnız lg-dən yuxarı göstərilir. */
@media (max-width:1279px){
  #appHeader > div:first-child > nav{display:none!important}
}
@media (max-width:1100px){
  #appHeader #zipCheckWrap{display:none!important}
}

/* ── 17. Menyunu yığandan sonra hover sıçraması ─────────────────
   sb-no-hover kursor menyunu tərk edənə qədər qalır (JS qoyur). */
html.sb-collapsed.sb-no-hover #sidebar:hover{
  width:4.75rem; overflow:hidden; box-shadow:none;
}
html.sb-collapsed.sb-no-hover #sidebar:hover .sb-label{ opacity:0; width:0; }
html.sb-collapsed.sb-no-hover #sidebar:hover #sbCollapseBtn{ margin-left:auto; margin-right:auto; }