/* ---------------------------------------------------------------------------
   Orginfo Accounts — dizayn tizimi.

   Tailwind CDN (_Layout.cshtml) utility klasslarni beradi; bu fayl esa
   takrorlanuvchi komponentlarni (input, tugma, karta, xabar paneli) bitta
   joyda ushlab turadi. Avval `dashedInput` / `dashedButton` klasslari
   view'larda ishlatilardi, lekin ularga HECH QANDAY CSS biriktirilmagan edi —
   ya'ni dizaynerning niyati amalga oshmagan. Endi ular haqiqiy uslubga ega.

   Ranglar Tailwind konfiguratsiyasidagi `primary: #00AE30` bilan mos.
   --------------------------------------------------------------------------- */

:root {
  --org-primary: #00ae30;
  --org-primary-dark: #009429;
  --org-primary-soft: rgba(0, 174, 48, 0.12);
  --org-ink: #404955;
  --org-text: #374151;
  --org-muted: #6b7280;
  --org-border: #e5e7eb;
  --org-border-soft: #e8edf2;
  --org-field-bg: #fafbfc;
  --org-danger: #dc2626;
  --org-radius-field: 12px;
  --org-radius-card: 20px;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  color: var(--org-text);
}

/* ---------------------------------------------------------------------------
   Maydonlar (input / select / textarea)

   Eski dizaynda faqat pastki chiziq bor edi (`border-b border-dashed`), bu esa
   maydon chegarasini noaniq qilardi va label uchun joy qoldirmasdi. Endi to'liq
   ramka: fokus holati aniq ko'rinadi, xato holati alohida.
   --------------------------------------------------------------------------- */

.org-field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.org-label {
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 500;
}

.dashedInput,
.org-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--org-field-bg);
  color: var(--org-text);
  font-size: 0.9375rem;
  border: 1px solid var(--org-border);
  border-radius: var(--org-radius-field);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dashedInput::placeholder,
.org-input::placeholder {
  color: #9ca3af;
}

.dashedInput:hover:not(:disabled),
.org-input:hover:not(:disabled) {
  border-color: #d1d5db;
}

.dashedInput:focus,
.org-input:focus {
  background: #ffffff;
  border-color: var(--org-primary);
  box-shadow: 0 0 0 3px rgba(0, 174, 48, 0.12);
}

.dashedInput:disabled,
.org-input:disabled,
.dashedInput[readonly],
.org-input[readonly] {
  background: #f3f4f6;
  color: var(--org-muted);
  cursor: not-allowed;
}

/* readonly maydon fokuslanadi (klaviatura bilan o'qish uchun), lekin
   tahrirlanmasligi bilinib turishi kerak — yashil fokus halqasi berilmaydi. */
.dashedInput[readonly]:focus,
.org-input[readonly]:focus {
  background: #f3f4f6;
  border-color: var(--org-border);
  box-shadow: none;
}

/* textarea `height: 48px` dan qutuladi */
textarea.dashedInput,
textarea.org-input {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* Server tomonda xato bo'lgan maydon */
.org-input--error,
.dashedInput.org-input--error {
  border-color: #f87171;
  background: #fef2f2;
}

.org-input--error:focus,
.dashedInput.org-input--error:focus {
  border-color: var(--org-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* select uchun o'z strelkasi (appearance: none bilan) */
select.dashedInput,
select.org-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

/* ---------------------------------------------------------------------------
   Tugmalar
   --------------------------------------------------------------------------- */

.org-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 24px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.org-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 174, 48, 0.3);
}

.org-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Asosiy harakat */
.org-btn--primary {
  background: var(--org-primary);
  border-color: var(--org-primary);
  color: #ffffff;
}

.org-btn--primary:hover:not(:disabled) {
  background: var(--org-primary-dark);
  border-color: var(--org-primary-dark);
}

/* Ikkilamchi harakat — mavjud "dashed" tili shu yerda saqlanadi */
.dashedButton,
.org-btn--dashed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--org-text);
  background: transparent;
  border: 1px dashed var(--org-primary);
  border-radius: 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashedButton:hover:not(:disabled),
.org-btn--dashed:hover:not(:disabled) {
  background: var(--org-primary-soft);
}

.dashedButton:focus-visible,
.org-btn--dashed:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 174, 48, 0.3);
}

/* Kontur tugma (OneID) */
.org-btn--outline {
  background: transparent;
  border: 1px solid var(--org-primary);
  color: var(--org-primary);
}

.org-btn--outline:hover:not(:disabled) {
  background: var(--org-primary-soft);
}

/* Footer ichidagi oq tugma */
.org-btn--on-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--org-primary);
}

.org-btn--on-primary:hover:not(:disabled) {
  background: #f3f4f6;
}

/* ---------------------------------------------------------------------------
   Karta — forma konteyneri (A varianti)
   --------------------------------------------------------------------------- */

.org-card {
  background: #ffffff;
  border: 1px solid var(--org-border-soft);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(64, 73, 85, 0.06);
  padding: 32px;
}

@media (max-width: 640px) {
  .org-card {
    padding: 24px 20px;
    border-radius: 20px;
  }
}

/* ---------------------------------------------------------------------------
   Xabar panellari — oldin oddiy `text-red-500` matn edi, ko'zga tashlanmasdi
   --------------------------------------------------------------------------- */

.org-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.org-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.org-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.org-alert--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.org-alert--success {
  background: rgba(0, 174, 48, 0.08);
  border: 1px solid rgba(0, 174, 48, 0.35);
  color: #15803d;
}

/* ---------------------------------------------------------------------------
   Tab almashtirgich (Email / Telefon raqam)
   --------------------------------------------------------------------------- */

.org-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 50px;
}

.org-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  height: 44px;
  border-radius: 50px;
  color: #1f2937;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.org-tab--active {
  background: var(--org-primary);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Ajratgich ("yoki")
   --------------------------------------------------------------------------- */

.org-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.org-divider::before,
.org-divider::after {
  content: "";
  flex: 1 1 0%;
  height: 1px;
  background: var(--org-border);
}

.org-divider > span {
  color: #9ca3af;
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   Admin jadvallari

   Admin CRUD sahifalari `<table class="min-w-full border ...">` ishlatadi.
   Har bir katakdagi `border` to'r chizig'i o'qishni og'irlashtiradi — faqat
   qatorlar orasida ajratgich qoldiriladi.
   --------------------------------------------------------------------------- */

.org-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--org-border);
  border-radius: 12px;
  overflow: hidden;
}

.org-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--org-muted);
  background: #f9fafb;
  border-bottom: 1px solid var(--org-border);
  white-space: nowrap;
}

.org-table td {
  padding: 12px 16px;
  font-size: 0.9375rem;
  color: var(--org-text);
  border-bottom: 1px solid #f3f4f6;
}

.org-table tbody tr:last-child td {
  border-bottom: none;
}

.org-table tbody tr:hover td {
  background: #fafbfc;
}

/* ---------------------------------------------------------------------------
   Mobil drawer

   _Layout.cshtml dagi JS `document.body.classList.add("no-scroll")` chaqiradi,
   lekin bu klass hech qayerda ANIQLANMAGAN edi — drawer ochiq turganda orqa
   fondagi sahifa skroll bo'laverardi.
   --------------------------------------------------------------------------- */

body.no-scroll {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Yuklanish spinneri (mavjud `button-loader` bilan birga ishlaydi)
   --------------------------------------------------------------------------- */

.button-loader {
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Raqamli input'lardagi strelkalarni olib tashlash */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ---------------------------------------------------------------------------
   Bootstrap qoldiqlari — loyihada bootstrap.css hali ulanadi (lib/), shuning
   uchun uning fokus uslublari saqlanadi.
   --------------------------------------------------------------------------- */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---------------------------------------------------------------------------
   E-IMZO kalit tanlash — login sahifasi (eimzo-login.js).

   `.org-card` bilan bir oilada, lekin alohida: bu yerda roʻyxatdagi HAR BIR
   kalit uchun bosiladigan element kerak, forma maydoni emas. Mavjud
   `--org-*` oʻzgaruvchilari ishlatilgan — yangi rang kiritilmagan.
   --------------------------------------------------------------------------- */

.eimzo-key-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 0.875rem 1rem;
  text-align: left;
  border: 1px dashed var(--org-border);
  border-radius: var(--org-radius-field);
  background: transparent;
  transition: border-color 150ms, background-color 150ms;
}

.eimzo-key-item:hover {
  border-color: var(--org-primary);
  background-color: var(--org-field-bg);
}

.eimzo-key-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--org-text);
}

/* Tashkilot sarlavha ostidagi F.I.Sh — subtitle'dan bir pogʻona toʻq,
   chunki u hali ham kimligini aniqlaydigan ma'lumot, raqam emas. */
.eimzo-key-person {
  font-size: 0.8125rem;
  color: var(--org-text);
}

.eimzo-key-subtitle {
  font-size: 0.8125rem;
  color: var(--org-muted);
}

.eimzo-key-valid {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Muddati oʻtgan kalit: roʻyxatda qoladi (foydalanuvchi kalitini koʻrsin),
   lekin bosilmaydi — shuning uchun xira va hover'siz. */
.eimzo-key-item--expired {
  opacity: 0.55;
  cursor: not-allowed;
}

.eimzo-key-item--expired:hover {
  border-color: var(--org-border);
  background-color: transparent;
}

.eimzo-key-valid--expired {
  color: var(--org-danger);
  font-weight: 600;
}