/* ==========================================================================
   ui-kit.css — sayt daxili dialoqlar və dropdownlar
   Brauzerin/telefonun standart pəncərələri (alert / confirm / prompt) və
   yerli <select> siyahısı əvəzinə saytın öz interfeysi.
   Fayl bütün panellərdə paylaşılır (müştəri menyusu, admin, qarson) və
   hər səhifənin öz CSS dəyişənlərinə uyğunlaşır — tema da avtomatik tutur.
   ========================================================================== */

.uik {
  /* Səhifə dəyişənlərindən törəmə tokenlər (fallback ilə) */
  --uik-panel: var(--panel, var(--card, #ffffff));
  --uik-ink: var(--ink, #1c1d21);
  --uik-soft: var(--ink-soft, var(--muted, #6b7280));
  --uik-line: var(--line, rgba(128, 128, 128, .3));
  --uik-accent: var(--accent, #8b3ff0);
  --uik-accent-ink: var(--accent-ink, #ffffff);
  --uik-danger: var(--danger, var(--danger-ink, #e5484d));
  /* Yarımşəffaf → həm işıqlı, həm qaranlıq temada düzgün görünür */
  --uik-field: rgba(128, 128, 128, .12);
  --uik-hover: rgba(128, 128, 128, .16);
  --uik-sel: rgba(128, 128, 128, .22);
  --uik-radius: 16px;
  --uik-scrim: rgba(10, 10, 16, .55);
  --uik-shadow: var(--shadow-lg, 0 24px 60px rgba(10, 10, 20, .35));

  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--uik-ink);
  -webkit-tap-highlight-color: transparent;
}
.uik *, .uik *::before, .uik *::after { box-sizing: border-box; }

@keyframes uikFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes uikPop  { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes uikUp   { from { transform: translateY(100%) } to { transform: none } }

/* Dialoq açıqkən arxa fon sürüşməsin */
html.uik-lock, html.uik-lock body { overflow: hidden !important; }

/* ---------------------------------------------------------------- Dialoq */
.uidlg {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.uidlg__scrim { position: absolute; inset: 0; background: var(--uik-scrim); animation: uikFade .16s ease both; }
.uidlg__box {
  position: relative; width: 100%; max-width: 430px;
  background: var(--uik-panel); border: 1px solid var(--uik-line);
  border-radius: var(--uik-radius); box-shadow: var(--uik-shadow);
  padding: 20px; max-height: calc(100dvh - 40px); overflow: auto;
  animation: uikPop .18s cubic-bezier(.2, .9, .3, 1.1) both;
}
.uidlg__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.uidlg__msg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--uik-soft); white-space: pre-line; }
.uidlg__body { margin-top: 14px; }
.uidlg__body:empty { display: none; }

.uidlg__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--uik-soft); margin: 0 0 6px; }
.uidlg__input {
  width: 100%; font: inherit; font-size: 16px; /* <16px iOS-da avtomatik zoom edir */
  padding: 11px 13px; border-radius: 12px; color: var(--uik-ink);
  border: 1.5px solid var(--uik-line); background: var(--uik-field);
  outline: none; resize: vertical; display: block;
}
.uidlg__input:focus { border-color: var(--uik-accent); }
textarea.uidlg__input { min-height: 84px; line-height: 1.45; }
.uidlg__hint { margin: 7px 2px 0; font-size: 12px; color: var(--uik-soft);
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between; min-height: 15px; }
.uidlg__count { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }

.uidlg__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.uidlg__chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; color: var(--uik-ink);
  border: 1.5px solid var(--uik-line); background: transparent;
}
.uidlg__chip:hover { background: var(--uik-hover); }
.uidlg__chip.is-on { border-color: var(--uik-accent); background: var(--uik-accent); color: var(--uik-accent-ink); }

.uidlg__err {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--uik-danger);
  display: flex; gap: 6px; align-items: flex-start;
}

.uidlg__acts { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.uidlg__btn {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 11px 17px; border-radius: 12px; min-width: 96px;
  border: 1.5px solid var(--uik-line); background: transparent; color: var(--uik-ink);
}
.uidlg__btn:hover { background: var(--uik-hover); }
.uidlg__btn:disabled { opacity: .5; cursor: not-allowed; }
.uidlg__btn--primary { border-color: var(--uik-accent); background: var(--uik-accent); color: var(--uik-accent-ink); }
.uidlg__btn--primary:hover { background: var(--uik-accent); filter: brightness(1.07); }
.uidlg__btn--danger { border-color: var(--uik-danger); background: var(--uik-danger); color: #fff; }
.uidlg__btn--danger:hover { background: var(--uik-danger); filter: brightness(1.07); }

@media (max-width: 560px) {
  .uidlg { align-items: flex-end; padding: 0; }
  .uidlg__box {
    max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 88dvh; animation: uikUp .22s cubic-bezier(.2, .9, .3, 1) both;
  }
  .uidlg__acts { margin-top: 16px; }
  .uidlg__acts .uidlg__btn { flex: 1 1 140px; padding: 13px 16px; }
}

/* ------------------------------------------------------------- Dropdown */
/* Qab yalnız yerləşdirmə üçündür — bütün görünüş içindəki düymədədir.
   Yerli elementin sinifləri qaba köçürülür ki, flex/grid davranışı qalsın;
   həmin siniflərdən gələn fon/kənar/boşluq isə burada söndürülür, yoxsa
   qat-qat çərçivə alınır. */
.uisel { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.uisel { padding: 0 !important; border: 0 !important; background: none !important;
  box-shadow: none !important; border-radius: 0 !important; }
/* Yerli element (select / date / time) DOM-da qalır — mövcud kod .value
   oxuyur/yazır və "change" dinləyir — amma görünmür və toxunulmur */
.uisel > .uisel__native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  overflow: hidden !important; white-space: nowrap !important; appearance: none !important;
}
.uisel__btn {
  font: inherit; font-size: 14px; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 8px; color: var(--uik-ink);
  padding: 10px 12px; border-radius: 11px;
  border: 1.5px solid var(--uik-line); background: var(--uik-panel);
}
.uisel__btn:hover { border-color: var(--uik-accent); }
.uisel__btn[aria-expanded="true"] { border-color: var(--uik-accent); }
.uisel__btn:disabled { opacity: .55; cursor: not-allowed; }
.uisel__txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uisel__txt.is-empty { color: var(--uik-soft); }
.uisel__car { flex: none; width: 9px; height: 9px; margin-left: 2px; opacity: .6; transform: translateY(-2px) rotate(45deg); border: solid currentColor; border-width: 0 1.8px 1.8px 0; transition: transform .15s ease; }
.uisel__btn[aria-expanded="true"] .uisel__car { transform: translateY(1px) rotate(225deg); }

.uisel__pop {
  position: fixed; z-index: 2147483100; min-width: 160px;
  background: var(--uik-panel); border: 1px solid var(--uik-line);
  border-radius: 14px; box-shadow: var(--uik-shadow);
  padding: 6px; overflow: auto; overscroll-behavior: contain;
  animation: uikPop .14s ease both;
}
.uisel__opt {
  font: inherit; font-size: 14px; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 8px; color: var(--uik-ink);
  padding: 10px 11px; border: 0; border-radius: 10px; background: transparent;
}
.uisel__opt:hover, .uisel__opt.is-active { background: var(--uik-hover); }
.uisel__opt.is-sel { background: var(--uik-sel); font-weight: 700; }
.uisel__opt[disabled] { opacity: .45; cursor: not-allowed; }
.uisel__opt::after { content: "✓"; margin-left: auto; opacity: 0; color: var(--uik-accent); font-weight: 900; }
.uisel__opt.is-sel::after { opacity: 1; }
.uisel__grp { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--uik-soft); padding: 9px 11px 4px; }

/* Telefonda dropdown alt vərəq kimi açılır */
.uisel__sheetwrap { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: flex-end; }
.uisel__sheetwrap > .uisel__scrim { position: absolute; inset: 0; background: var(--uik-scrim); animation: uikFade .16s ease both; }
.uisel__sheetwrap > .uisel__pop {
  position: relative; width: 100%; min-width: 0; max-height: 72dvh;
  border-radius: 20px 20px 0 0; border-bottom: 0;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  animation: uikUp .2s cubic-bezier(.2, .9, .3, 1) both;
}
.uisel__sheetwrap .uisel__opt { padding: 13px 13px; font-size: 15px; }
.uisel__head { font-size: 13px; font-weight: 800; color: var(--uik-soft); padding: 8px 12px 10px; }

/* --------------------------------------------- Tarix / saat seçiciləri */
.uisel__ic { flex: none; display: inline-flex; opacity: .55; margin-left: 2px; }
.uisel__btn:hover .uisel__ic, .uisel__btn[aria-expanded="true"] .uisel__ic { opacity: .9; }

.uidt { padding: 10px; }
.uidt__acts { display: flex; gap: 7px; justify-content: flex-end; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--uik-line); }
.uidt__act {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 13px; border-radius: 10px; color: var(--uik-ink);
  border: 1.5px solid var(--uik-line); background: transparent;
}
.uidt__act:hover { background: var(--uik-hover); }
.uidt__act.is-primary { border-color: var(--uik-accent); background: var(--uik-accent); color: var(--uik-accent-ink); }
.uidt__act.is-primary:hover { filter: brightness(1.07); }

/* Saat: saat + dəqiqə sütunları */
.uidt--time .uidt__val { font-size: 25px; font-weight: 800; text-align: center;
  padding: 2px 0 10px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.uidt__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uidt__col { max-height: 196px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--uik-line); border-radius: 12px; padding: 5px; }
.uidt__colhead { position: sticky; top: -5px; z-index: 1; background: var(--uik-panel);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--uik-soft); padding: 4px 4px 6px; text-align: center; }
.uidt__n {
  font: inherit; font-size: 14px; cursor: pointer; width: 100%; display: block;
  padding: 8px 4px; border: 0; border-radius: 9px; background: transparent;
  color: var(--uik-ink); text-align: center; font-variant-numeric: tabular-nums;
}
.uidt__n:hover { background: var(--uik-hover); }
.uidt__n.is-sel { background: var(--uik-accent); color: var(--uik-accent-ink); font-weight: 800; }

/* Tarix: ay təqvimi */
.uidt__nav { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.uidt__nav-b {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; flex: none;
  width: 30px; height: 30px; border: 0; border-radius: 9px;
  background: transparent; color: var(--uik-soft);
}
.uidt__nav-b:hover { background: var(--uik-hover); color: var(--uik-ink); }
.uidt__title { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 800; }
.uidt__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.uidt__wd span { text-align: center; font-size: 11px; font-weight: 700; color: var(--uik-soft); }
.uidt__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.uidt__d {
  font: inherit; font-size: 13.5px; cursor: pointer; aspect-ratio: 1 / 1;
  display: grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--uik-ink); font-variant-numeric: tabular-nums;
}
.uidt__d:hover { background: var(--uik-hover); }
.uidt__d--pad { pointer-events: none; }
.uidt__d.is-today { box-shadow: inset 0 0 0 1.5px var(--uik-line); font-weight: 800; }
.uidt__d.is-sel { background: var(--uik-accent); color: var(--uik-accent-ink); font-weight: 800; box-shadow: none; }
.uidt__d[disabled] { opacity: .3; cursor: not-allowed; }
.uidt__d[disabled]:hover { background: transparent; }

.uisel__sheetwrap > .uidt { padding: 4px 10px 10px; }
@media (max-width: 560px) {
  .uidt__col { max-height: 42dvh; }
  .uidt__n { padding: 11px 4px; font-size: 15px; }
  .uidt__d { font-size: 15px; border-radius: 11px; }
  .uidt__acts .uidt__act { flex: 1 1 auto; padding: 12px 10px; }
}