/* Kabuk (A1-17 parça a): yerleşim ve renk değişkenleri. Tarayıcıda satır içi stil yok (ADR-0007). */
:root {
  --ui-bg: #ffffff;
  --ui-text: #1f2933;
  --ui-muted: #52606d;
  --ui-line: #d9dee3;
  --ui-menu-bg: #f4f6f8;
  --ui-menu-width: 14rem;
  --ui-topbar-height: 2.5rem;
  --ui-hover: #eef1f4;
  --ui-negative: #b42318;
  --ui-warning: #b54708;
  font-size: 14px;
}

body.shell {
  margin: 0;
  display: grid;
  grid-template-columns: var(--ui-menu-width) 1fr;
  grid-template-rows: var(--ui-topbar-height) 1fr;
  grid-template-areas: "top top" "menu content";
  min-height: 100vh;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: system-ui, sans-serif;
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--ui-line);
  font-weight: 600;
}

.topbar-clock {
  color: var(--ui-muted);
  font-weight: 400;
}

.menu {
  grid-area: menu;
  padding: 0.75rem 0;
  background: var(--ui-menu-bg);
  border-right: 1px solid var(--ui-line);
}

.menu-group-title {
  margin: 0.75rem 1rem 0.25rem;
  font-size: 0.8rem;
  color: var(--ui-muted);
  text-transform: none;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list a {
  display: block;
  padding: 0.3rem 1rem;
  color: inherit;
  text-decoration: none;
}

.menu-list a:hover {
  background: var(--ui-line);
}

.content {
  grid-area: content;
  padding: 1rem 1.25rem;
}

.page-title {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
}

.page-help {
  margin: 0 0 1rem;
  color: var(--ui-muted);
}

/* Tek tablo bileşeni (A1-17b; 03 §11.2): genişlik sütun tipinden, tahmin eden betik yok. Tutar,
   tarih, kod, sayı ve yüzde kırpılmaz (içerik kadar); tek esnek metin sütunu kalan yeri alır ve "…" ile
   kısalır. Yatay kaydırma yok. */
.grid {
  width: 100%;
  border-collapse: collapse;
}

.grid th,
.grid td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--ui-line);
  font-size: 11.5px;
  text-align: left;
  white-space: nowrap;
}

.grid th {
  position: sticky;
  top: 0;
  padding: 7px 10px;
  background: var(--ui-bg);
  font-size: 11px;
}

.grid th a,
.tab {
  color: inherit;
  text-decoration: none;
}

.grid tbody tr:hover {
  background: var(--ui-hover);
}

.grid .col-number,
.grid .col-percent,
.grid .col-days,
.grid .col-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.grid .col-flex {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.negative,
.badge-critical {
  color: var(--ui-negative);
}

.row-passive,
.badge-passive,
.badge-unmeasured,
.pager {
  color: var(--ui-muted);
}

.badge {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid currentcolor;
  border-radius: 0.2rem;
  font-size: 10.5px;
}

.badge-warning {
  color: var(--ui-warning);
}

.skeleton {
  display: inline-block;
  width: 4rem;
  height: 0.6rem;
  background: var(--ui-line);
}

.tabs,
.pager,
.exports {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0;
}

.exports {
  justify-content: flex-end;
  font-size: 11.5px;
}

.tabs {
  border-bottom: 1px solid var(--ui-line);
}

.tab[aria-current="page"] {
  font-weight: 600;
  border-bottom: 2px solid var(--ui-text);
}

.strip,
.notice {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ui-line);
}

.notice-error {
  border-color: var(--ui-negative);
}

/* "Yeni veri var — yenile" bildirimi (A1-17c): üst çubukta, parça yanıtı doldurur. */
.topbar-fresh:empty {
  display: none;
}

.topbar-fresh a {
  color: var(--ui-warning);
  font-weight: 600;
}

/* Grafik bileşeni (A1-17d): çubuklar sınıfla boyanır; satır içi stil yok (ADR-0007). */
.chart {
  margin: 0 0 1rem;
}

.chart-svg {
  max-width: 100%;
  height: auto;
}

.chart-axis {
  stroke: var(--ui-line);
  stroke-width: 1;
}

.chart-bar {
  fill: var(--ui-text);
}

.chart-bar-negative {
  fill: var(--ui-negative);
}

.chart-label,
.chart-gap {
  fill: var(--ui-muted);
  font-size: 11px;
}

.chart-caption,
.chart-table-caption {
  margin: 0.25rem 0;
  color: var(--ui-muted);
  font-size: 0.85rem;
  text-align: left;
}

/* Bileşen vitrini (A1-17d): bölüm aralığı ve açıklama satırı. */
.vitrin-section {
  margin: 0 0 1.75rem;
}

.vitrin-title {
  margin: 1rem 0 0.25rem;
  font-size: 1.05rem;
}

.vitrin-note {
  margin: 0 0 0.5rem;
  color: var(--ui-muted);
}

/* Satır davranışı, satır menüsü, sağ panel ve orta kutu (A1-18c; 03 §11.2). Seçim tek nötr renk;
   dokunmada eylem hedefi en az 44×44 (alan/04 §5.5). [hidden] display kuralını ezmesin diye açık. */
:root {
  --ui-selected: #dde3ea;
  --ui-panel-compact: 24rem;
  --ui-panel-standard: 36rem;
  --ui-panel-wide: 56rem;
}

.grid tbody tr[aria-selected="true"] {
  background: var(--ui-selected);
}

.grid tbody tr:focus-visible {
  outline: 2px solid var(--ui-text);
  outline-offset: -2px;
}

.grid .col-menu {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.row-menu-button,
.panel-close {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
}

@media (pointer: coarse) {
  .row-menu-button,
  .panel-close {
    min-width: 44px;
    min-height: 44px;
  }

  .row-menu [role="menuitem"] {
    min-height: 44px;
  }
}

.row-menu {
  position: fixed;
  left: var(--row-menu-x, 0);
  top: var(--row-menu-y, 0);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.row-menu[hidden],
.panel[hidden] {
  display: none;
}

.row-menu [role="menuitem"] {
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.row-menu [role="menuitem"]:hover,
.row-menu [role="menuitem"]:focus {
  background: var(--ui-hover);
}

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(var(--ui-panel-standard), 100vw);
  background: var(--ui-bg);
  border-left: 1px solid var(--ui-line);
  box-shadow: -4px 0 16px rgb(0 0 0 / 12%);
}

.panel[data-size="compact"] {
  width: min(var(--ui-panel-compact), 100vw);
}

.panel[data-size="wide"] {
  width: min(var(--ui-panel-wide), 100vw);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ui-line);
}

.panel-title {
  margin: 0;
  font-size: 1rem;
}

.panel-body {
  padding: 1rem;
  overflow-y: auto;
}

.box-layer {
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--ui-line);
}

.box-layer::backdrop {
  background: rgb(0 0 0 / 30%);
}

/* Dar ekran (A1-17f): 48rem altında kabuk tek kolona iner (üst çubuk, menü, içerik alt alta) ve
   sayfa gövdesi yatay taşmaz. Kolon `minmax(0, 1fr)`: içerik kolonu en geniş öğesine göre
   büyümez. Tablo kendi bölümünde kayar; hücreler kırpılmaz, satır kırmama kuralı korunur. Bedeli:
   kaydırma kabındaki tablo başlığı sayfa kaydırmasında yapışmaz (yalnız dar ekranda). Geniş ekran
   kuralları ve menü genişliği tercihi (`--ui-menu-width`) değişmez. */
/* Combobox ve düzenlenebilir satırlar (A1-43): liste kutusu girdinin altında açılır; etkin seçenek
   seçim rengini alır. Satır tablosu dar ekranda kendi içinde kayar (`rows-scroll`), sayfa taşmaz. */
.combobox {
  position: relative;
  margin: 0 0 0.75rem;
}

.combobox label {
  display: block;
  margin: 0 0 0.25rem;
}

.combobox-list {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  min-width: 18rem;
  max-width: 100%;
  list-style: none;
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
}

.combobox-list[hidden] {
  display: none;
}

.combobox-list [role="option"] {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.combobox-list [aria-selected="true"] {
  background: var(--ui-selected);
}

.rows-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.rows-note {
  margin: 0 0 0.5rem;
  color: var(--ui-muted);
}

.rows-note[hidden] {
  display: none;
}

.recipe-error {
  margin: 0 0 0.5rem;
  color: var(--ui-negative);
  font-weight: 600;
}

.recipe-error[hidden] {
  display: none;
}

.editable-rows caption {
  caption-side: bottom;
  color: var(--ui-muted);
  text-align: left;
}

.row-actions button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

@media (max-width: 48rem) {
  body.shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--ui-topbar-height), auto) auto 1fr;
    grid-template-areas: "top" "menu" "content";
  }

  .topbar {
    flex-wrap: wrap;
    gap: 0 1rem;
  }

  .menu {
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }

  .content {
    min-width: 0;
  }

  .tabs,
  .pager,
  .exports {
    flex-wrap: wrap;
  }

  .data {
    overflow-x: auto;
  }
}

/* Yazdırma görünümü (A3-25): menüsüz tek sütun; başlık satırları, bütün satırlar. */
body.print-view {
  display: block;
}

.print-head {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1rem;
  margin: 0 0 0.75rem;
}

.print-head div {
  display: contents;
}

.print-head dt {
  color: var(--ui-muted);
}

.print-head dd {
  margin: 0;
}

.print-count {
  color: var(--ui-muted);
}

@media print {
  .topbar,
  .menu,
  .exports,
  .pager,
  .print-actions,
  .panel {
    display: none;
  }

  body.shell {
    display: block;
  }

  .grid th {
    position: static;
  }
}