/*
 * FAZ 4 TASARIM SISTEMI
 * Dashboard, liste, detay, modal ve bilesen galerisi ilkelleri.
 */

/* ─── Layout bilesenleri ──────────────────────────────────────────────────
 * Layout registry uzerinden cozumlenen ortak parcalarin stilleri.
 * Her layout kendi .ejs surumunu saglayabilir; sinif adlari ortaktir.
 */

/* Yalniz ekran okuyucuya gorunur metin. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

.loading {
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--color-text-muted); font-size: var(--font-size-sm);
}
.loading--inline { display: inline-flex; padding: 0; }
.loading--compact { padding: var(--spacing-sm) 0; }

.loading__spinner {
  width: 16px; height: 16px; flex: none; border-radius: var(--radius-full);
  border: 2px solid var(--border-color-strong);
  border-top-color: var(--color-primary);
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Yogun panel yerlesimi: ayni kart, daha sik ic bosluk. */
.card--dense .card__header,
/*
 * TERCIH FORMU - tema ve dil secimi.
 *
 * Bu secimler eskiden GET baglantisiydi ve biri dogrudan VERITABANINA
 * yaziyordu (/theme/set/:id). GET rotalari CSRF muafiyetinde oldugu icin
 * herhangi bir sayfadaki bir <img src> etiketi kurbanin tercihini
 * degistirebiliyordu. Artik POST + CSRF jetonu.
 *
 * `display: contents` formu YERLESIMDEN CIKARIR: dugme, eskiden bagin
 * durdugu yerde dogrudan ustteki flex kutusunun cocugu olur. Olmasaydi her
 * secim fazladan bir kutu kazanir, aralar ve hizalama bozulurdu.
 */
.pref-form { display: contents; }

[data-layout="ADMINISTRATOR"] .card__header { padding: var(--spacing-sm) var(--spacing-md); }
.card--dense .card__body,
[data-layout="ADMINISTRATOR"] .card__body { padding: var(--spacing-md); }
.card--dense .card__footer,
[data-layout="ADMINISTRATOR"] .card__footer { padding: var(--spacing-sm) var(--spacing-md); }

/*
 * YONETIM KABUGUNUN KENDI YERLESIMI.
 *
 * ADMINISTRATOR kabugu katalogda "yogun tablo yerlesimi" olarak tanimli
 * (Config/Layouts.js) ama bu tanim bugune kadar hicbir piksele donusmuyordu:
 * MODERN ile ayni kabuk dosyasi kullanildigi icin iki gorunum birebir ayni
 * render ediliyordu.
 *
 * Ayrimi KABUK DOSYASINI IKIYE BOLEREK yapmak cazip ama yanlis olurdu:
 * menuye eklenen bir bolum birinde gorunur, digerinde sessizce eksik
 * kalirdi. Bu yuzden iskelet ortak kalir, FARK YALNIZ YOGUNLUKTA olur.
 */
[data-layout="ADMINISTRATOR"] .card__body--flush { padding: 0; }
[data-layout="ADMINISTRATOR"] .table th,
[data-layout="ADMINISTRATOR"] .table td { padding-top: 7px; padding-bottom: 7px; }
[data-layout="ADMINISTRATOR"] .page-header { margin-bottom: var(--spacing-md); }

/* Secim satiri: radyo/onay kutusu + aciklama. Layout secim ekrani kullanir. */
.field--choice {
  display: flex; align-items: flex-start; gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.field--choice + .field--choice { margin-top: var(--spacing-sm); }
.field--choice:hover { border-color: var(--color-border-hover); background: var(--color-row-hover); }
.field--choice:has(input:checked) {
  border-color: var(--color-primary); background: var(--color-primary-soft);
}
.field--choice:has(input:disabled) { cursor: not-allowed; opacity: .65; }
.field--choice input { margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.field--choice .field__hint { margin-top: 2px; }

.field__required { color: var(--color-danger); }
.field--invalid .field__label { color: var(--color-danger-text); }
.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea,
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger-border);
}
.field--invalid .input:focus,
.field--invalid .select:focus,
.field--invalid .textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
}

/* ─── Faz 4: referans ekran ilkelleri ───────────────────────────────────── */
.design-gallery { gap: var(--spacing-lg); }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.section-heading > p {
  max-width: 58ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: right;
}

.gallery-section {
  padding: var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-xs);
}
.gallery-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); }

.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}
.token-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 2px var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.token-card code { grid-column: 2; color: var(--color-text-subtle); font-size: 10px; }
.token-swatch { grid-row: 1 / span 2; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.token-swatch--primary { background: var(--color-primary); }
.token-swatch--success { background: var(--color-success); }
.token-swatch--warning { background: var(--color-warning); }
.token-swatch--danger { background: var(--color-danger); }
.token-swatch--surface { background: var(--color-surface); }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}
.detail-grid--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}
.metric {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.metric__label { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.metric__value { display: block; font-size: var(--font-size-lg); font-weight: 650; }
.metric__hint { display: block; margin-top: 4px; color: var(--color-text-subtle); font-size: var(--font-size-xs); }

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--color-surface);
}
.filter-summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter-summary span { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.column-picker { position: relative; }
.column-picker > summary { list-style: none; }
.column-picker > summary::-webkit-details-marker { display: none; }
.column-picker[open] > summary { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-ring); }
.column-picker__panel {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  right: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--spacing-sm);
  min-width: 210px;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.column-picker__panel .checkbox { white-space: nowrap; }

.dialog-preview {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.dialog-panel {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-lg);
}
.dialog-panel__head,
.dialog-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
}
.dialog-panel__head { border-bottom: 1px solid var(--border-color); }
.dialog-panel__body { min-height: 120px; padding: var(--spacing-lg); }
.dialog-panel__foot { justify-content: flex-end; border-top: 1px solid var(--border-color); background: var(--color-surface-sunken); }

.component-preview-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: var(--spacing-lg);
  align-items: stretch;
}
.drawer-preview {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-text) 18%, var(--color-surface-sunken));
}
.drawer-panel {
  display: flex;
  flex-direction: column;
  width: min(320px, 88%);
  height: 100%;
  margin-left: auto;
  border-left: 1px solid var(--border-color);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.drawer-panel__head,
.drawer-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}
.drawer-panel__head { border-bottom: 1px solid var(--border-color); }
.drawer-panel__body { flex: 1; padding: var(--spacing-md); }
.drawer-panel__foot { border-top: 1px solid var(--border-color); }
.component-stack { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; }

.record-identity { display: flex; align-items: center; gap: var(--spacing-md); }
.record-identity__mark {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

@media (max-width: 760px) {
  .section-heading { align-items: flex-start; flex-direction: column; gap: var(--spacing-sm); }
  .section-heading > p { text-align: left; }
  .detail-grid, .detail-grid--balanced { grid-template-columns: minmax(0, 1fr); }
  .component-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .list-toolbar { align-items: stretch; flex-direction: column; padding: var(--spacing-md); }
  .list-toolbar > .row { width: 100%; }
  .list-toolbar > .row .btn { flex: 1; }
  .column-picker { flex: 1; }
  .column-picker > summary { width: 100%; }
  .column-picker__panel { left: 0; right: auto; width: min(280px, 100%); }

  .table--responsive thead { display: none; }
  .table--responsive,
  .table--responsive tbody,
  .table--responsive tr,
  .table--responsive td { display: block; width: 100%; }
  .table--responsive tbody { padding: var(--spacing-sm); }
  .table--responsive tr {
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--color-card);
  }
  .table--responsive tr:last-child { margin-bottom: 0; }
  .table--responsive td {
    display: grid;
    grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left !important;
  }
  .table--responsive td::before {
    content: attr(data-label);
    color: var(--color-text-subtle);
    font-size: var(--font-size-xs);
    font-weight: 600;
  }
  .table--responsive td[data-label=""]::before { display: none; }
  .table--responsive td.actions .btn { width: 100%; }

  .dialog-preview {
    display: flex;
    min-height: 360px;
    padding: var(--spacing-xl) 0 0;
  }
  .dialog-panel { width: 100%; margin-top: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ─── Etkileşimli Liste ve Özet İlkelleri (Interactive Lists & Summary Primitives) ── */
.interactive-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}
.interactive-list__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--border-color-subtle);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.interactive-list__item:hover {
  background: var(--color-surface-sunken);
  border-color: var(--border-color);
  transform: translateX(2px);
}
.interactive-list__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: none;
}
.interactive-list__body {
  min-width: 0;
  flex: 1;
}
.interactive-list__title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 650;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interactive-list__desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interactive-list__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex: none;
}