/* ==========================================================================
   Zesez Education — ortaq panel teması (ana səhifədəki dizaynın davamı)
   Tələbə kabineti, müəllim, partnyor, admin və mütəxəssis panelləri bu
   faylı öz <style> blokundan SONRA yükləyir; yalnız görünüşü dəyişir,
   heç bir sinif adı və ya funksiya dəyişmir.
   Brend: narıncı #F97316 + göy #1D4ED8 / #1E3A8A, Plus Jakarta Sans
   (kiril hərfləri üçün Onest).
   ========================================================================== */
:root {
  --z-navy: #1E3A8A;
  --z-navy-2: #172554;
  --z-blue: #1D4ED8;
  --z-orange: #F97316;
  --z-orange-d: #EA580C;
  --z-sky: #EFF6FF;
  --z-peach: #FFF7ED;
  --z-ink: #0F172A;
  --z-muted: #475569;
  --z-line: #E2E8F0;
  --z-bg: #F8FAFC;
  --z-card-shadow: 0 10px 30px -14px rgba(30, 64, 175, 0.22);

  /* Səhifələrin öz dəyişənləri — eyni palitraya bağlanır. */
  --primary-blue: var(--z-blue);
  --primary-dark-blue: var(--z-navy);
  --primary-orange: var(--z-orange);
  --primary-orange-hover: var(--z-orange-d);
  --accent-soft-blue: var(--z-sky);
  --accent-soft-orange: var(--z-peach);
  --bg-light: var(--z-bg);
  --text-dark: var(--z-ink);
  --text-muted: var(--z-muted);
  --border-color: var(--z-line);
  --shadow-md: var(--z-card-shadow);
}

* { font-family: 'Plus Jakarta Sans', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---------- Səhifə fonu: yuxarıda tünd göy zolaq + narıncı halqa ---------- */
body {
  position: relative;
  background: var(--z-bg) linear-gradient(180deg, var(--z-navy) 0, var(--z-navy) 300px, var(--z-bg) 300px) no-repeat !important;
}
body::before {
  content: '';
  position: absolute; top: 0; right: 0; width: 520px; height: 300px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 100% 0, transparent 170px, rgba(249, 115, 22, 0.14) 171px, rgba(249, 115, 22, 0.14) 250px, transparent 251px);
}
body > .container, body > .dashboard-layout, body > main, .admin-layout, #dashboard-screen, #specialist-dashboard { position: relative; z-index: 1; }

/* ---------- Header (Tailwind yüklənməsə də düzgün qalsın) ---------- */
body > header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--z-line) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
  color: var(--z-ink) !important;
}
/* Səhifələrin öz CSS-i header-i flex edir — daxili blok eninə uzanmasa
   elementlər mərkəzdə yığılırdı; width:100% bunu düzəldir. */
body > header > div:first-child:not(.brand) { width: 100%; flex: 1 1 auto; max-width: 1280px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body > header:has(> div:first-child:not(.brand)) { padding-left: 0 !important; padding-right: 0 !important; }
body > header a { text-decoration: none; }
body > header .flex { display: flex; align-items: center; gap: 10px; }
.brand-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-circle {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--z-orange);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
}
.logo-circle span.z { color: var(--z-orange); font-weight: 800; font-size: 1.2rem; }
.logo-circle span.s { color: var(--z-blue); font-weight: 800; font-size: 1.2rem; }
.lang-switcher { display: inline-flex; gap: 2px; background: #F1F5F9; border-radius: 999px; padding: 3px; }
.lang-btn { border: none; background: none; border-radius: 999px; font-weight: 700; font-size: 0.76rem; padding: 6px 11px; color: var(--z-muted); cursor: pointer; }
.lang-btn.active { background: var(--z-blue); color: #fff; }

/* Admin və mütəxəssis panellərinin başlığı (əvvəl tünd idi) — ağ, brend loqosu ilə. */
header .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header .brand { display: flex; align-items: center; gap: 12px; color: var(--z-navy) !important; font-weight: 800; font-size: 1.15rem; }
header .brand > svg { color: var(--z-orange); }
header .brand span.tag { color: var(--z-orange) !important; background: none !important; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; margin-left: 8px; }
header .top-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.85rem; padding: 9px 16px; border-radius: 999px;
  color: var(--z-navy) !important; background: var(--z-sky) !important; border: none; text-decoration: none; cursor: pointer;
}
header .top-link svg { width: 15px; height: 15px; }
header #header-signout-btn.top-link { color: #B91C1C !important; background: #FEF2F2 !important; }
body > header { padding-top: 0 !important; padding-bottom: 0 !important; }
body > header:not(:has(> div:first-child:not(.brand))) { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding-left: max(24px, calc((100% - 1232px) / 2)) !important; padding-right: max(24px, calc((100% - 1232px) / 2)) !important; }

/* Xidmət səhifələrinin başlığı (.wh — paketlər, viza, mütəxəssis pəncərəsi): əvvəl tünd idi,
   indi saytın qalan səhifələri ilə eyni ağ başlıq (loqo, göy başlıq, sağda vahid "Panellər" menyusu). */
.wh { background: rgba(255, 255, 255, 0.97) !important; color: var(--z-ink) !important; border-bottom: 1px solid var(--z-line); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02); min-height: 64px; }
.wh-brand { width: 44px !important; height: 44px !important; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2); }
.wh-title b { color: var(--z-navy) !important; }
.wh-title span { color: var(--z-muted) !important; }
.wh-lang { background: #F1F5F9 !important; color: var(--z-navy) !important; border: 0 !important; border-radius: 999px !important; height: 40px; padding: 0 10px !important; cursor: pointer; }

/* Mütəxəssisin iş səhifəsi (specialist-case.html) — eyni ağ başlıq. */
.sc-head { background: rgba(255, 255, 255, 0.97) !important; color: var(--z-ink) !important; border-bottom: 1px solid var(--z-line); min-height: 64px; }
.sc-head .sc-logo { width: 40px; height: 40px; text-decoration: none; }
.sc-head .sc-logo span.z, .sc-head .sc-logo span.s { font-size: 1.05rem; }
.sc-back { color: var(--z-navy) !important; background: var(--z-sky) !important; border-radius: 999px !important; }
.sc-back:hover { background: #DBEAFE !important; }
.sc-htitle b { color: var(--z-navy) !important; }
.sc-htitle span { color: var(--z-muted) !important; }
.sc-live { color: #16A34A !important; }

/* ---------- Kartlar ---------- */
.card, .content-card, .sidebar-card {
  background: #fff; border: 1px solid var(--z-line); border-radius: 24px; box-shadow: var(--z-card-shadow);
}
.pane-title, .card > h2, .card > h3, .content-card h2 { color: var(--z-navy); font-weight: 800; letter-spacing: -0.02em; }
.pane-subtitle { color: var(--z-muted); }

/* Giriş / qeydiyyat ekranları — tünd göy zolağın üstündə mərkəzləşmiş kart. */
#login-screen .card, #register-screen .card, #denied-screen .card, #inactive-screen .card, #pending-screen .card, #apply-screen .card, #onboard-screen .card {
  border: none; border-radius: 28px; box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.45);
}
#login-screen .card h2, #login-screen .card h3, #register-screen .card h2, #register-screen .card h3 { color: var(--z-navy); font-weight: 800; }

/* ---------- Naviqasiya (yan menyu və tablar) ---------- */
.nav-item-btn, .tab-nav .tab-btn { border-radius: 12px; font-weight: 600; color: var(--z-muted); transition: background 0.15s, color 0.15s; }
.nav-item-btn:hover, .tab-nav .tab-btn:hover { background: var(--z-sky); color: var(--z-navy); }
.nav-item-btn.active, .tab-nav .tab-btn.active { background: var(--z-sky); color: var(--z-navy); font-weight: 700; border-left-color: var(--z-orange); }
.nav-item-btn.active svg, .tab-nav .tab-btn.active svg { color: var(--z-orange); }
.nav-item-btn.signout, .nav-item-btn.signout:hover { color: #DC2626; }
.b2b-tab-btn { border-radius: 999px; font-weight: 700; }
.b2b-tab-btn.active { background: var(--z-blue); color: #fff; border-color: var(--z-blue); }

/* ---------- Düymələr ---------- */
.btn-primary, .btn-save {
  background: var(--z-orange); color: #fff; border: none; border-radius: 12px; font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.6); transition: background 0.15s, transform 0.15s;
}
.btn-primary:hover, .btn-save:hover { background: var(--z-orange-d); transform: translateY(-1px); }
.btn-primary:disabled, .btn-save:disabled { transform: none; box-shadow: none; }
.btn-secondary { background: #fff; color: var(--z-blue); border: 2px solid var(--z-blue); border-radius: 12px; font-weight: 700; }
.btn-secondary:hover { background: var(--z-sky); }
.google-btn { border-radius: 12px; border: 1.5px solid var(--z-line); background: #fff; font-weight: 700; color: var(--z-ink); }
.google-btn:hover { border-color: var(--z-blue); background: var(--z-sky); }

/* ---------- Form sahələri ---------- */
.field-wrap label { font-weight: 700; color: var(--z-navy); }
.field-input {
  background: var(--z-bg); border: 1.5px solid var(--z-line); border-radius: 12px; min-height: 44px; font-weight: 500; color: var(--z-ink);
}
textarea.field-input { min-height: 88px; }
.field-input:focus { background: #fff; border-color: var(--z-orange); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14); outline: none; }

/* ---------- Göstərici plitələri ---------- */
.hud-tile, .earn-tile { border-radius: 18px; border: 1px solid var(--z-line); background: #fff; }
.hud-tile .hud-value, .earn-tile .earn-value { color: var(--z-navy); font-weight: 800; }
.stat-box { border-radius: 18px; }
#specialist-dashboard .stat-box { background: var(--z-navy); border: none; color: #fff; }
#specialist-dashboard .stat-box > div { color: #fff !important; }
#specialist-dashboard .stat-box > div:first-child { color: #FDBA74 !important; }

/* ---------- Cədvəllər (admin) ---------- */
table { border-collapse: separate; border-spacing: 0; }
th { background: var(--z-sky); color: var(--z-navy); font-weight: 800; }
th:first-child { border-top-left-radius: 12px; }
th:last-child { border-top-right-radius: 12px; }
td { border-bottom: 1px solid var(--z-line); }

/* ---------- Kiçik elementlər ---------- */
.status-msg { border-radius: 12px; }
.modal-box, .modal-window { border-radius: 24px; }
.avatar-large { box-shadow: 0 0 0 4px #fff, 0 8px 20px -6px rgba(30, 64, 175, 0.35); }
.user-name { color: var(--z-navy); font-weight: 800; }
.spinner { border-top-color: var(--z-orange) !important; }

@media (max-width: 768px) {
  body { background: var(--z-bg) linear-gradient(180deg, var(--z-navy) 0, var(--z-navy) 220px, var(--z-bg) 220px) no-repeat !important; }
  body::before { width: 300px; height: 220px; }
  header .brand span.tag { display: none; }
  header .top-link.tl-home span { display: none; }
  /* Telefonda başlıqda yalnız loqo dairəsi qalır — dil düymələri və çıxış sığsın. */
  .brand-logo > div:not(.logo-circle) { display: none; }
  body > header > div:first-child:not(.brand) { padding: 0 14px; }
}