@import url('/tokens.css');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fon);
  color: var(--matn);
  font: var(--olcham)/1.5 var(--shrift);
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 3px solid var(--asos);
  outline-offset: 2px;
  border-radius: var(--burchak-kichik);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- umumiy elementlar ---------------- */

.tugma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: var(--tegish);
  padding: 0 var(--b-4);
  border: 1px solid transparent;
  border-radius: var(--burchak);
  background: var(--asos);
  color: #fff;
  font: 600 var(--olcham)/1.2 var(--shrift);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.tugma:hover { background: var(--asos-quyuq); }
.tugma[disabled] { opacity: .5; cursor: not-allowed; }

.tugma.ikkilamchi {
  background: var(--yuza);
  color: var(--matn);
  border-color: var(--chegara-kuchli);
}
.tugma.ikkilamchi:hover { background: var(--yuza-2); }

.tugma.xavfli { background: var(--xavf); }

.tugma.kichik { min-height: 36px; padding: 0 var(--b-3); font-size: var(--olcham-kichik); }

input, select, textarea {
  width: 100%;
  min-height: var(--tegish);
  padding: var(--b-2) var(--b-3);
  border: 1px solid var(--chegara-kuchli);
  border-radius: var(--burchak-kichik);
  background: var(--yuza);
  color: var(--matn);
  font: var(--olcham)/1.4 var(--shrift);
}
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: var(--olcham-kichik); color: var(--matn-past); margin-bottom: var(--b-1); }
.maydon { margin-bottom: var(--b-4); }

/* ---------------- sarlavha paneli ---------------- */

.tepa {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--b-3);
  padding: var(--b-2) var(--b-4);
  min-height: 56px;
  background: var(--yuza);
  border-bottom: 1px solid var(--chegara);
}
.tepa h1 { margin: 0; font-size: var(--olcham-katta); font-weight: 700; white-space: nowrap; }
.tepa .osish { flex: 1; }

.doska-tanlov {
  max-width: 240px;
  min-height: 40px;
  font-weight: 600;
}

.men {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  padding: var(--b-1) var(--b-2);
  border-radius: var(--burchak);
  border: 1px solid var(--chegara);
  background: var(--yuza);
  cursor: pointer;
  min-height: 40px;
}
.men .harf {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--asos-och);
  color: var(--asos-quyuq);
  font-weight: 700;
  font-size: var(--olcham-kichik);
}
.men .ism { font-size: var(--olcham-kichik); line-height: 1.2; text-align: left; }
.men .rol { display: block; color: var(--matn-past); }

/* ---------------- doska ---------------- */

.doska {
  display: flex;
  gap: var(--b-3);
  align-items: flex-start;
  padding: var(--b-4);
  overflow-x: auto;
  height: calc(100% - 56px);
  scroll-snap-type: x proximity;
}

.ustun {
  flex: 0 0 var(--ustun-eni);
  max-width: var(--ustun-eni);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--yuza-2);
  border-radius: var(--burchak);
  scroll-snap-align: start;
}

.ustun-tepa {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  padding: var(--b-3);
  position: sticky;
  top: 0;
}
.ustun-tepa .rang {
  width: 4px; height: 20px; flex: 0 0 4px;
  border-radius: 2px;
  background: var(--chegara-kuchli);
}
.ustun-tepa h2 { margin: 0; font-size: var(--olcham); font-weight: 700; flex: 1; }
.ustun-tepa .soni {
  font-variant-numeric: tabular-nums;
  color: var(--matn-past);
  font-size: var(--olcham-kichik);
  background: var(--yuza);
  border-radius: 10px;
  padding: 0 var(--b-2);
  min-width: 24px;
  text-align: center;
}

.kartochkalar {
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
  padding: 0 var(--b-3) var(--b-3);
  overflow-y: auto;
  min-height: 56px;
}
.kartochkalar.ustida { background: var(--asos-och); border-radius: var(--burchak); }

.kartochka {
  background: var(--yuza);
  border: 1px solid var(--chegara);
  border-radius: var(--burchak);
  padding: var(--b-3);
  box-shadow: var(--soya);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.kartochka:hover { border-color: var(--chegara-kuchli); }
.kartochka.sudralyapti { opacity: .4; }
.kartochka .nom { font-weight: 600; margin-bottom: var(--b-2); overflow-wrap: anywhere; }
.kartochka.bajarilgan .nom { text-decoration: line-through; color: var(--matn-past); }

.kartochka .pastki {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  flex-wrap: wrap;
  font-size: var(--olcham-kichik);
  color: var(--matn-past);
}

.nishon {
  display: inline-flex;
  align-items: center;
  gap: var(--b-1);
  padding: 2px var(--b-2);
  border-radius: 10px;
  background: var(--yuza-2);
  font-size: var(--olcham-kichik);
  white-space: nowrap;
}
.nishon.kechikkan { background: var(--xavf-och); color: var(--xavf); font-weight: 600; }
.nishon.bugun { background: var(--ogoh-och); color: var(--ogoh); font-weight: 600; }
.nishon.muhim { background: var(--xavf-och); color: var(--xavf); }
.nishon .sana { font-variant-numeric: tabular-nums; }

.qoshish {
  margin: 0 var(--b-3) var(--b-3);
  min-height: 40px;
  background: transparent;
  border: 1px dashed var(--chegara-kuchli);
  border-radius: var(--burchak);
  color: var(--matn-past);
  cursor: pointer;
  font: var(--olcham-kichik)/1.2 var(--shrift);
}
.qoshish:hover { background: var(--yuza); color: var(--matn); }

/* ---------------- holatlar: bo'sh / yuklanmoqda / xato ---------------- */

.holat {
  display: grid;
  place-items: center;
  gap: var(--b-3);
  padding: var(--b-16) var(--b-4);
  text-align: center;
  color: var(--matn-past);
  max-width: 480px;
  margin: 0 auto;
}
.holat h2 { margin: 0; color: var(--matn); font-size: var(--olcham-katta); }
.holat p { margin: 0; }

.skelet {
  background: linear-gradient(90deg, var(--yuza-2) 25%, var(--yuza) 50%, var(--yuza-2) 75%);
  background-size: 400% 100%;
  animation: yuklash 1.4s ease infinite;
  border-radius: var(--burchak);
}
@keyframes yuklash { from { background-position: 100% 0; } to { background-position: 0 0; } }

.xabar {
  position: fixed;
  left: 50%;
  bottom: var(--b-6);
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(520px, calc(100vw - var(--b-8)));
  padding: var(--b-3) var(--b-4);
  border-radius: var(--burchak);
  background: var(--matn);
  color: var(--fon);
  box-shadow: var(--soya-baland);
}
.xabar.xato { background: var(--xavf); color: #fff; }

/* ---------------- oyna (modal) ---------------- */

.oyna-fon {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(16 32 46 / 55%);
  display: grid;
  place-items: center;
  padding: var(--b-4);
}
.oyna {
  background: var(--yuza);
  border-radius: var(--burchak);
  box-shadow: var(--soya-baland);
  width: min(640px, 100%);
  max-height: calc(100vh - var(--b-8));
  overflow-y: auto;
  padding: var(--b-6);
}
.oyna h2 { margin: 0 0 var(--b-4); font-size: var(--olcham-sarlavha); }
.oyna-tugmalar { display: flex; gap: var(--b-2); flex-wrap: wrap; margin-top: var(--b-6); }
.oyna-tugmalar .osish { flex: 1; }

.izohlar { display: flex; flex-direction: column; gap: var(--b-3); margin-top: var(--b-4); }
.izoh { background: var(--yuza-2); border-radius: var(--burchak); padding: var(--b-3); }
.izoh .kim { font-size: var(--olcham-kichik); color: var(--matn-past); margin-bottom: var(--b-1); }
.izoh .matn { overflow-wrap: anywhere; }

.cheklist { display: flex; flex-direction: column; gap: var(--b-2); }
.cheklist label { display: flex; gap: var(--b-2); align-items: center; font-size: var(--olcham); color: var(--matn); margin: 0; min-height: var(--tegish); }
.cheklist input[type='checkbox'] { width: 20px; min-height: 20px; flex: 0 0 20px; }
.cheklist .bajarildi { text-decoration: line-through; color: var(--matn-past); }

/* ---------------- xato sahifasi ---------------- */

.xato-sahifa { display: grid; place-items: center; min-height: 100vh; padding: var(--b-4); }
.xato-quti {
  background: var(--yuza);
  border-radius: var(--burchak);
  box-shadow: var(--soya);
  padding: var(--b-8);
  max-width: 520px;
  text-align: center;
}
.xato-quti h1 { margin: 0 0 var(--b-4); font-size: var(--olcham-sarlavha); }
.xato-quti p { color: var(--matn-past); margin: 0 0 var(--b-3); }

/* ---------------- telefon ---------------- */

@media (max-width: 720px) {
  .tepa { padding: var(--b-2) var(--b-3); gap: var(--b-2); }
  .tepa h1 { display: none; }
  .doska-tanlov { max-width: none; flex: 1; }
  .men .ism { display: none; }

  .doska {
    padding: var(--b-3);
    gap: var(--b-3);
    scroll-snap-type: x mandatory;
  }
  /* Telefonda ustun ekranga to'liq sig'adi — Trello'dagidek suriladi */
  .ustun {
    flex: 0 0 calc(100vw - var(--b-6) - var(--b-2));
    max-width: calc(100vw - var(--b-6) - var(--b-2));
  }
  .oyna { padding: var(--b-4); border-radius: var(--burchak) var(--burchak) 0 0; }
  .oyna-fon { align-items: flex-end; padding: 0; }
  .oyna { max-height: 92vh; width: 100%; }
}