/* Boshqaruv sahifalari uchun umumiy uslub: kirish, admin, tashkilot paneli.
   Rang tizimi kiosk bilan bir xil. */

:root {
  --fon:        #080b14;
  --panel:      rgba(14, 19, 34, .86);
  --matn:       #eef2fb;
  --matn-past:  #8b96b5;
  --chegara:    rgba(255, 255, 255, .08);
  --chegara-2:  rgba(255, 255, 255, .14);
  --asosiy:     #6366f1;
  --urgu:       linear-gradient(135deg, #6366f1, #a855f7);
  --yashil:     #34d399;
  --sariq:      #fbbf24;
  --qizil:      #fb7185;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #070a12;
  color: var(--matn);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

/* ---- Orqa fon animatsiyasi ---- */
.fon { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fon span {
  position: absolute; border-radius: 50%; filter: blur(95px); opacity: .42;
}
.fon .s1 {
  width: 44vw; height: 44vw; left: -8vw; top: -12vh;
  background: radial-gradient(circle, #6366f1, transparent 68%);
  animation: suz1 22s ease-in-out infinite alternate;
}
.fon .s2 {
  width: 40vw; height: 40vw; right: -6vw; bottom: -14vh;
  background: radial-gradient(circle, #a855f7, transparent 68%);
  animation: suz2 28s ease-in-out infinite alternate;
}
@keyframes suz1 { to { transform: translate(14vw, 12vh) scale(1.16); } }
@keyframes suz2 { to { transform: translate(-16vw, -10vh) scale(1.2); } }

.sahifa { position: relative; z-index: 1; display: flex; min-height: 100vh; }

/* ===================== CHAP YON MENYU ===================== */

.yon {
  position: sticky; top: 0;
  flex: none;
  width: 236px; height: 100vh;
  display: flex; flex-direction: column;
  background: rgba(11, 16, 29, .82);
  backdrop-filter: blur(22px) saturate(140%);
  border-right: 1px solid var(--chegara);
}

/* Brend */
.yon .brend {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--chegara);
}
.yon .belgi {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--urgu); border-radius: 11px;
  box-shadow: 0 5px 16px rgba(99, 102, 241, .42);
}
.yon .belgi svg {
  width: 19px; height: 19px;
  fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.yon .brend h1 {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yon .brend .izoh {
  font-size: 11px; color: var(--matn-past); margin-top: 2px;
}

/* Menyu */
.yon nav {
  flex: 1; overflow-y: auto;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.yon nav .sarlavha {
  padding: 12px 10px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--matn-past); opacity: .75;
}
.yon nav a, .yon nav button {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: transparent; border: none; border-radius: 10px;
  color: var(--matn-past);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s;
}
.yon nav svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.yon nav a:hover, .yon nav button:hover {
  background: rgba(255, 255, 255, .06); color: var(--matn);
}
.yon nav button.faol {
  background: rgba(99, 102, 241, .16);
  color: #c7d2fe;
  box-shadow: inset 2px 0 0 var(--asosiy);
}

/* Pastki qism */
.yon .past {
  padding: 12px; border-top: 1px solid var(--chegara);
  display: flex; flex-direction: column; gap: 3px;
}
.yon .past a, .yon .past button {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: transparent; border: none; border-radius: 10px;
  color: var(--matn-past);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s;
}
.yon .past svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.yon .past a:hover { background: rgba(99, 102, 241, .13); color: #c7d2fe; }
.yon .past button:hover { background: rgba(251, 113, 133, .12); color: #fecdd3; }

/* Asosiy maydon */
.asosiy-maydon { flex: 1; min-width: 0; overflow-x: hidden; }

/* Bo'lim sarlavhasi */
.bolim-bosh { padding: 26px 26px 0; }
.bolim-bosh h2 { font-size: 19px; font-weight: 600; }
.bolim-bosh p { font-size: 12.5px; color: var(--matn-past); margin-top: 5px; line-height: 1.6; }

/* Ko'rinadigan/yashirin bo'limlar */
.varaq-bolim { display: none; animation: bolimKir .25s ease; }
.varaq-bolim.faol { display: block; }
@keyframes bolimKir { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 860px) {
  .sahifa { flex-direction: column; }
  .yon {
    position: static; width: 100%; height: auto;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 0 12px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--chegara);
  }
  .yon .brend { border: none; padding: 12px 6px 12px 0; }
  .yon .brend h1, .yon .brend .izoh { display: none; }
  .yon nav { flex-direction: row; padding: 8px 0; gap: 5px; }
  .yon nav .sarlavha { display: none; }
  .yon .past { flex-direction: row; border: none; padding: 8px 0; margin-left: auto; }
  .yon nav a span, .yon nav button span, .yon .past a span, .yon .past button span { display: none; }
  .yon nav a, .yon nav button, .yon .past a, .yon .past button { padding: 10px; }
}

/* ---- Tugmalar ---- */
.tugma {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid var(--chegara);
  border-radius: 10px;
  color: var(--matn-past);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .1s;
}
.tugma:hover { background: rgba(255, 255, 255, .09); border-color: var(--chegara-2); color: var(--matn); }
.tugma:active { transform: scale(.97); }
.tugma svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.tugma.asosiy {
  background: var(--urgu); border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, .35);
}
.tugma.asosiy:hover { filter: brightness(1.12); }
.tugma.xavfli { color: #fca5a5; border-color: rgba(251, 113, 133, .3); }
.tugma.xavfli:hover { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .5); color: #fecdd3; }
.tugma.kichik { padding: 6px 11px; font-size: 11.5px; }

/* ---- Kartalar / bo'limlar ---- */
.tan { max-width: 1080px; margin: 0 auto; padding: 26px; }

.karta {
  background: var(--panel);
  backdrop-filter: blur(20px);
  border: 1px solid var(--chegara);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.karta h2 {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--matn-past);
  margin-bottom: 16px;
}

/* ---- Maydonlar ---- */
.maydon { margin-bottom: 14px; }
.maydon label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--matn-past);
}
input[type=text], input[type=password], select, textarea {
  width: 100%; padding: 10px 13px;
  background: rgba(255, 255, 255, .045);
  border: 1.5px solid var(--chegara);
  border-radius: 10px;
  color: var(--matn); font-family: inherit; font-size: 13px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: rgba(139, 150, 181, .6); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(129, 140, 248, .7);
  background: rgba(99, 102, 241, .07);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
select option { background: #131a2c; }

.qator { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Jadval ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 9px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--matn-past); border-bottom: 1px solid var(--chegara);
}
td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .045); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, .025); }
td .kichik { font-size: 11.5px; color: var(--matn-past); margin-top: 3px; }

.belgicha {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 600;
}
.belgicha.faol { background: rgba(52, 211, 153, .15); color: #6ee7b7; }
.belgicha.sust { background: rgba(251, 191, 36, .15); color: #fcd34d; }

/* ---- Xabar ---- */
.xabar {
  padding: 11px 14px; border-radius: 10px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.55;
}
.xabar.xato { background: rgba(251, 113, 133, .13); border: 1px solid rgba(251, 113, 133, .3); color: #fecdd3; }
.xabar.ok   { background: rgba(52, 211, 153, .13); border: 1px solid rgba(52, 211, 153, .3); color: #a7f3d0; }
.xabar[hidden] { display: none; }

.bosh-izoh { color: var(--matn-past); font-size: 12.5px; line-height: 1.6; margin-bottom: 16px; }

/* ---- Personaj tanlash ---- */
.personajlar { display: flex; flex-wrap: wrap; gap: 11px; }
.p-karta {
  position: relative; width: 108px; padding: 0; overflow: hidden;
  background: rgba(255, 255, 255, .035);
  border: 1.5px solid var(--chegara); border-radius: 12px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.p-karta:hover { transform: translateY(-3px); border-color: var(--chegara-2); }
.p-karta img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 20%; opacity: .7; transition: opacity .2s; }
.p-karta .yoq { display: grid; place-items: center; aspect-ratio: 1/1; color: var(--matn-past); font-size: 11px; }
.p-karta span.nomi { display: block; padding: 7px 9px; font-size: 10.5px; color: var(--matn-past); }
.p-karta.tanlangan {
  border-color: rgba(129, 140, 248, .75); background: rgba(99, 102, 241, .13);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .13);
}
.p-karta.tanlangan img { opacity: 1; }
.p-karta.tanlangan span.nomi { color: var(--matn); font-weight: 600; }

/* ---- Bo'sh holat ---- */
.bosh-holat { padding: 40px 20px; text-align: center; color: var(--matn-past); font-size: 13px; }

/* ---- Tahrirlash oynasi ---- */
.qoplama {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(5, 8, 15, .72);
  backdrop-filter: blur(6px);
  animation: qoplamaKir .2s ease;
}
.qoplama[hidden] { display: none; }
@keyframes qoplamaKir { from { opacity: 0; } }

.oyna {
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  padding: 26px 28px;
  background: rgba(16, 22, 38, .96);
  border: 1px solid var(--chegara-2);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: oynaKir .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes oynaKir { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.oyna::-webkit-scrollbar { width: 8px; }
.oyna::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.oyna header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--chegara);
}
.oyna header h3 { font-size: 15px; font-weight: 600; }
.oyna header .yopish {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--matn-past); cursor: pointer; font-size: 18px; line-height: 1;
  transition: background .18s, color .18s;
}
.oyna header .yopish:hover { background: rgba(255,255,255,.07); color: var(--matn); }

.oyna footer {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--chegara);
}

@media (max-width: 720px) {
  .qator { grid-template-columns: 1fr; }
  .tan { padding: 16px; }
  table { font-size: 12px; }
}