/* Kirish va profillar tabi (ADR-0130, 2026-09-14) — `modules/profillar.js`.
   Faqat `tokens.css` tokenlari: xom rang, xom o'lcham yo'q. Sinflar `prf-`
   prefiksi bilan — umumiy `.btn`/`.chip`/`.sim-in` qatlamiga tegmaydi. */

.prf-sarlavha { margin: 0 0 var(--sp-5) }
.prf-h { font-size: var(--fs-5); font-weight: 700; margin: 0 0 var(--sp-1) }
.prf-izoh { color: var(--muted); font-size: var(--fs-2); line-height: var(--lh-base); margin: 0; max-width: 72ch }

.prf-boshqaruv {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4)
}
.prf-bosh-ong { margin-left: auto; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap }

.prf-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); overflow: hidden }
.prf-seg-btn {
  background: transparent; border: 0; color: var(--muted); font-size: var(--fs-3); font-weight: 600;
  padding: var(--sp-2) var(--sp-5); cursor: pointer
}
.prf-seg-btn + .prf-seg-btn { border-left: 1px solid var(--line) }
.prf-seg-btn.active { background: var(--steel); color: var(--on-steel) }
.prf-seg-btn:focus-visible, .prf-yop:focus-visible, .prf-modul:focus-within, .prf-daraja:focus-within {
  outline: 2px solid var(--steel); outline-offset: 2px
}

/* ── Xodimlar jadvali ── */
.prf-jadval-quti { overflow-x: auto }
.prf-jadval td, .prf-jadval th { vertical-align: middle }
.prf-ong { text-align: right }
.prf-toxtagan td { opacity: .62 }
.prf-shaxs { display: flex; align-items: center; gap: var(--sp-3); min-width: 0 }
.prf-avatar {
  flex: none; display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: var(--r-full);
  background: var(--tint-steel-2); border: 1px solid var(--tint-steel-line); color: var(--txt);
  font-size: var(--fs-2); font-weight: 700
}
.prf-ism { font-weight: 600; color: var(--txt); display: flex; gap: var(--sp-2); align-items: center }
.prf-email { color: var(--muted); font-size: var(--fs-2) }
.prf-belgi {
  font-size: var(--fs-1); font-weight: 700; color: var(--on-steel); background: var(--steel);
  border-radius: var(--r-sm); padding: 0 var(--sp-2)
}
.prf-holat { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); font-weight: 600 }
.prf-holat::before { content: ""; width: .5em; height: .5em; border-radius: var(--r-full); background: currentColor }
.prf-holat-faol { color: var(--teal) }
.prf-holat-toxtagan { color: var(--amber) }
.prf-profil-chip {
  display: inline-block; font-size: var(--fs-2); font-weight: 600; color: var(--txt);
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-0) var(--sp-3)
}
.prf-profil-chip.prf-hammasi { border-color: var(--tint-teal-ring); background: var(--tint-teal-2) }
.prf-profil-chip.prf-eski { color: var(--muted); border-style: dashed }
.prf-amallar { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap }
.prf-amal {
  background: transparent; border: 1px solid var(--line); color: var(--txt); border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-2); cursor: pointer; white-space: nowrap
}
.prf-amal:hover { border-color: var(--line-strong) }
.prf-amal[disabled] { opacity: .45; cursor: not-allowed }
.prf-amal-xavf { color: var(--red); border-color: var(--tint-red-line) }
.prf-cheklov { color: var(--muted); font-size: var(--fs-2); white-space: nowrap }

/* ── Profil kartalari ── */
.prf-namunalar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4) }
.prf-namunalar .chip { margin: 0 }
.prf-namuna-yorliq { color: var(--muted); font-size: var(--fs-2); margin-right: var(--sp-2) }
.prf-kartalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-4) }
.prf-karta {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5);
  background: linear-gradient(180deg, var(--panel), var(--panel-deep));
  border: 1px solid var(--line); border-radius: var(--r-lg)
}
.prf-karta-bosh { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) }
.prf-karta-bosh h4 { margin: 0; font-size: var(--fs-4); font-weight: 700 }
.prf-tavsif { margin: 0; color: var(--muted); font-size: var(--fs-2); line-height: var(--lh-base) }
.prf-meta { color: var(--muted2); font-size: var(--fs-2) }
.prf-maxfiy {
  flex: none; font-size: var(--fs-1); font-weight: 700; color: var(--amber);
  border: 1px solid var(--tint-amber-line); background: var(--tint-amber-2); border-radius: var(--r-sm); padding: 0 var(--sp-2)
}
.prf-chiplar { display: flex; flex-wrap: wrap; gap: var(--sp-1) }
.prf-chip {
  font-size: var(--fs-1); color: var(--txt); background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-0) var(--sp-2)
}
.prf-chip-maxfiy { border-color: var(--tint-amber-line) }
.prf-karta-oyoq { margin-top: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2) }
.prf-bosh-holat { text-align: center; padding: var(--sp-7) var(--sp-5) }
.prf-bosh-holat p { color: var(--muted); margin: 0 0 var(--sp-4) }

/* ── Dialog (nativ `<dialog>`: fokus tuzog'i va `inert` brauzerdan) ── */
.prf-dialog {
  /* `margin: auto` — global reset UA markazlashini bekor qiladi; modal ekran o'rtasida tursin. */
  margin: auto;
  width: min(52rem, 94vw); max-height: 90vh; padding: 0; color: var(--txt);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg)
}
.prf-dialog-tor { width: min(34rem, 94vw) }
.prf-dialog::backdrop { background: var(--scrim) }
.prf-dialog-ich { display: flex; flex-direction: column; max-height: 90vh }
.prf-dialog-bosh {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line)
}
.prf-dialog-bosh h3 { margin: 0; font-size: var(--fs-4); font-weight: 700 }
.prf-yop { background: transparent; border: 0; color: var(--muted); font-size: var(--fs-4); cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm) }
.prf-dialog-tana { overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5) }
.prf-dialog-oyoq {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); background: var(--panel-deep)
}
.prf-dialog-oyoq .prf-hisob { margin-right: auto; color: var(--muted); font-size: var(--fs-2) }

.prf-maydonlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4) }
.prf-maydon { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-2); color: var(--muted) }
.prf-maydon .sim-in { min-width: 0; width: 100% }
.prf-maydon-qator { display: flex; gap: var(--sp-2) }
.prf-maydon-qator .sim-in { flex: 1 }
.prf-xato { color: var(--red); font-size: var(--fs-2); min-height: 1.2em }

.prf-asbob { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center }
.prf-asbob .sim-in { flex: 1; min-width: 12rem }

.prf-guruh { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin: 0 }
.prf-guruh legend { padding: 0 var(--sp-2) }
.prf-guruh-nom { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-3); color: var(--txt); cursor: pointer }
.prf-guruh-son { color: var(--muted2); font-weight: 600; font-size: var(--fs-2) }
.prf-modullar { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-2) }
.prf-modul {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); font-size: var(--fs-2)
}
.prf-modul:has(input:checked) { border-color: var(--steel); background: var(--tint-steel-2) }
.prf-modul-maxfiy:has(input:checked) { border-color: var(--amber); background: var(--tint-amber-2) }
.prf-modul:has(input:disabled) { opacity: .5; cursor: not-allowed }
.prf-modul-nom { flex: 1; color: var(--txt) }
.prf-qulf { flex: none }

.prf-darajalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-2) }
.prf-daraja {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-0) var(--sp-2); align-items: start; cursor: pointer;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2)
}
.prf-daraja:has(input:checked) { border-color: var(--steel); background: var(--tint-steel-2) }
.prf-daraja:has(input:disabled) { opacity: .5; cursor: not-allowed }
.prf-daraja input { grid-row: span 2; margin-top: var(--sp-1) }
.prf-daraja b { color: var(--txt); font-size: var(--fs-3) }
.prf-daraja span { color: var(--muted); font-size: var(--fs-1); line-height: var(--lh-base) }

.prf-korinish { display: flex; flex-direction: column; gap: var(--sp-2) }
.prf-korinish-yorliq { color: var(--muted); font-size: var(--fs-2) }

.prf-kod {
  font-family: var(--font-mono); font-size: var(--fs-3); white-space: pre-wrap; word-break: break-all;
  background: var(--panel-deep); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); margin: 0
}