/* =========================================================================
   Elevatora PROJE — tasarım sistemi
   Kaynak: docs/reference-ui/design_tokens.json + docs/contracts/ui-visual-v07.md
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --primary: #16a34a;
  --primary-hover: #15803d;
  --primary-soft: #ecfdf3;

  /*
   * Küçük yeşil yazı için ayrı ton.
   *
   * `--primary` (#16a34a) beyaz üstünde 3.30:1 — WCAG AA'nın küçük yazı için
   * istediği 4.5:1'in altında. Buton **zemini** olarak sorun yok (yazı beyaz),
   * ama bağlantı ve etiket metni olarak kullanıldığı 200+ yerde okunmuyordu;
   * şantiyede güneş altında telefonda hiç okunmuyor. Bu ton 5.02:1.
   */
  --primary-text: #15803d;

  --text: #0f172a;

  /*
   * Soluk gri koyulaştırıldı: eski #64748b rozet zemininde (#f1f5f9) 4.34:1
   * kalıyordu. Yeni değer beyazda 5.43, rozet zemininde 4.96.
   */
  --muted: #5b6b81;

  /*
   * En soluk ton yalnız **süs** içindir (ayraç, ikon, ölçek çizgisi). Metin
   * için kullanılmaz; ölçüldüğünde 2.56:1 çıkıyor ve hiçbir eşiği geçmiyor.
   * Metin taşıyan yerler `--muted`e çekildi.
   */
  --muted-2: #94a3b8;
  --surface: #ffffff;
  --canvas: #f8fafc;
  --border: #e2e8f0;
  --border-soft: #eef2f6;
  --blue: #2563eb;
  --orange: #f59e0b;
  --red: #ef4444;
  --purple: #7c3aed;

  --green-soft: #ecfdf3;
  --blue-soft: #eff6ff;
  --orange-soft: #fffbeb;
  --red-soft: #fef2f2;
  --purple-soft: #f5f3ff;
  --gray-soft: #f1f5f9;

  --r-input: 8px;
  --r-card: 12px;
  --r-pill: 999px;

  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 68px;
  --rail-w: 320px;
  --page-pad: 24px;
  --gap: 16px;

  --shadow-card: 0 1px 2px rgb(15 23 42 / 4%), 0 6px 16px rgb(15 23 42 / 4%);
  --shadow-pop: 0 4px 6px rgb(15 23 42 / 5%), 0 12px 32px rgb(15 23 42 / 10%);

  --fast: 140ms;
  --normal: 200ms;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
  flex: none;
}

img {
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/*
 * Sayı ve para asla bölünmez.
 *
 * Müşteri detayındaki "Çekler" satırında tutar sıkışınca "485.000" bir
 * satırda, "₺" bir altında kalıyordu. Para birimi rakamdan koparsa değer
 * bir an için yanlış okunur; bu satır hiçbir koşulda sarılmamalı.
 */
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- shell -- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.brandbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brandbar__logo {
  height: 30px;
  width: auto;
}

.brandbar__suffix {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary-text);
}

.topbar__divider {
  width: 1px;
  height: 26px;
  background: var(--border);
}

.topbar__title {
  font-size: 16px;
  font-weight: 500;
  color: #334155;
}

.topbar__spacer {
  flex: 1;
}

.topbar .topbar__burger {
  display: none;
}

.topbar__collapse {
  color: var(--muted);
  transition: color var(--fast), background var(--fast);
}

.topbar__collapse:hover {
  color: var(--text);
  background: var(--gray-soft);
}

.topbar__collapse svg {
  transition: transform 0.2s ease;
}

.topbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--canvas);
  color: var(--muted);
  transition: border-color var(--fast), background var(--fast);
}

.topbar__search:focus-within {
  border-color: var(--primary);
  background: var(--surface);
}

.topbar__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
}

/* ---- açılır menüler (details/summary — JS'siz de çalışır) ---- */

.menu {
  position: relative;
}

.menu > summary {
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu[open] > summary {
  background: var(--gray-soft);
}

.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  max-width: calc(100vw - 24px);
  z-index: 70;
  min-width: 232px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}

.menu--right .menu__panel {
  left: auto;
  right: 0;
}

.menu__panel--wide {
  min-width: 320px;
  max-width: min(360px, calc(100vw - 32px));
}

.menu__head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}

.menu__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.menu__sub {
  font-size: 12px;
  color: var(--muted);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-input);
  font-size: 13px;
  color: #334155;
  text-align: left;
  transition: background var(--fast);
}

.menu__item:hover {
  background: var(--gray-soft);
}

.menu__item--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.menu__itemtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.menu__itemsub {
  font-size: 11px;
  color: var(--muted);
}

.menu__item--danger {
  color: var(--red);
}

.menu__blank {
  padding: 18px 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-text);
}

.skiplink {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skiplink:focus {
  left: 12px;
  top: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--r-input);
}

.flash {
  margin-bottom: var(--gap);
}

/* --------------------------------------------- canlı sayfa gezinmesi -- */

.nav-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  pointer-events: none;
}

.nav-progress[hidden] {
  display: none;
}

.nav-progress > span {
  display: block;
  width: 38%;
  height: 100%;
  background: var(--primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 55%, transparent);
  animation: nav-progress 900ms ease-in-out infinite;
}

[data-live-root] {
  transition: opacity var(--fast);
}

[data-live-root][aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
}

@keyframes nav-progress {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(285%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-progress > span {
    width: 100%;
    animation: none;
  }

  [data-live-root] {
    transition: none;
  }
}

.drawer-scrim {
  display: none;
}

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

.orgswitch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  transition: border-color var(--fast);
}

/* Baş harfler yalnız firma adının gizlendiği dar ekranda görünür. */
.orgswitch__initials {
  display: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.orgswitch:hover {
  border-color: #cbd5e1;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-input);
  color: var(--muted);
  transition: background var(--fast), color var(--fast);
}

.iconbtn:hover {
  background: var(--gray-soft);
  color: var(--text);
}

.iconbtn__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.avatar--xs {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.usermenu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

/* -------------------------------------------------------------- sidebar -- */

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-input);
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--fast), color var(--fast);
}

.nav__item:hover {
  background: var(--gray-soft);
  color: var(--text);
}

.nav__item.is-active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
}

.nav__item.is-active svg {
  color: var(--primary-text);
}

.sidebar__spacer {
  flex: 1;
}

.nav__collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.nav__collapse:hover {
  background: var(--gray-soft);
}

/* ----------------------------------------------------------------- main -- */

.main {
  grid-area: main;
  min-width: 0;
  padding: var(--page-pad);
  background: var(--canvas);
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.page__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 12px;
}

.page__head--baseline {
  align-items: center;
}

.page__title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page__subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

/*
 * Sayfa başlığındaki tek başına düğme.
 *
 * Eylemler normalde `.page__actions` sarmalayıcısındadır ve o sarmalayıcı
 * `margin-left: auto` ile sağa yaslanır. "Proje Otomasyonları" ekranında
 * düğme sarmalayıcısız, doğrudan başlığın çocuğu: bu yüzden başlığın hemen
 * yanına yapışıyor, sağ yarı bomboş kalıyor ve diğer yirmi ekranın
 * yerleşiminden ayrılıyordu.
 */
.page__head > .btn:last-child {
  margin-left: auto;
}

.page__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  /*
   * Sayfa başlığındaki aksiyonlar (filtre, dışa aktar, yeni kayıt…) dar
   * ekranda sayfayı yatay kaydırıyordu; sığmazsa alt satıra iner.
   */
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 10px;
  min-width: 0;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}

/*
 * Birincil düğme zemini koyulaştırıldı.
 *
 * Beyaz yazı `#16a34a` üstünde 3.30:1 çıkıyordu — WCAG AA'nın küçük yazı
 * için istediği 4.5:1'in altında. Şantiyede güneş altında telefonda hiç
 * okunmuyor. `--primary-text` (#15803d) ile 5.02:1. Marka yeşili aynı aile,
 * yalnız bir ton derin.
 *
 * `--primary` zemin ya da çizgi olarak (ilerleme çubuğu, vurgu) yerinde
 * kalıyor; orada yazı taşımıyor.
 */
.btn--primary {
  background: var(--primary-text);
  color: #fff;
}

.btn--primary:hover {
  background: #12793b;
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: #334155;
}

.btn--ghost:hover {
  background: var(--gray-soft);
}

.btn--outline {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary-text);
}

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

.btn--square {
  width: 40px;
  padding: 0;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* --------------------------------------------------------------- inputs -- */

.auth__label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}

.field input,
.field select {
  flex: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 13px;
  color: var(--text);
}

.field input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.field:focus-within,
.select:focus-visible,
.textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 72%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.field:has(:user-invalid),
.select:user-invalid,
.textarea:user-invalid {
  border-color: var(--red);
}

.field--grow {
  display: flex;
  flex: 1;
}

.select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  padding: 0 38px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  appearance: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  outline: 0;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}

.select:hover:not(:disabled) {
  border-color: #b8c5d6;
  background-color: #fbfdff;
}

.select option {
  color: var(--text);
  background: var(--surface);
}

.textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}

.textarea[disabled],
.field:has(:disabled),
.select:disabled {
  cursor: not-allowed;
  background: var(--gray-soft);
  color: var(--muted);
}

.textarea__counter {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.textarea__counter.is-near-limit {
  color: var(--orange);
  font-weight: 600;
}

.linkbtn {
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 500;
}

/*
 * İkonlu bağlantı tek satırda kalmalı.
 *
 * Global sıfırlamada `svg { display: block }` var (satır içi SVG'nin taban
 * çizgisi boşluğunu keser). Ama `.linkbtn` bir flex kutunun çocuğu olunca
 * kendisi de bloklaşıyor; içindeki blok ikon metni ikinci satıra itiyordu.
 * Rehber panelindeki "Tüm rehberler ↗" 48 ekranın 45'inde iki satıra
 * bölünmüş durumdaydı — ikon yazının altında duruyordu.
 *
 * Yalnız ikon içeren bağlantılar hedeflenir; salt metin olanlar satır içi
 * akışta kalsın (tablo hücresinde `display:block` veren satır içi stiller
 * de bozulmasın).
 */
.linkbtn:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------------------- cards -- */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, white);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 3%);
}

/*
 * <details> kart olarak kullanıldığında (finans ters kayıt paneli gibi) .card
 * kuralındaki `display: flex` açılıp kapanma davranışını bozuyor: tarayıcı
 * yüksekliği kapalı hâle göre hesaplıyor, açık içerik kartın 239 px dışına
 * sarkıyordu. <details> blok akışında kalmalı.
 */
details.card {
  display: block;
}

details.card > summary {
  cursor: pointer;
}

/* Kart olarak kullanılan <details> kapalıyken gövdesi yine de yer kaplıyor ve
   kartın dışına sarkıyordu; kapalı durumda açıkça gizlenir. */
details.card:not([open]) > *:not(summary) {
  display: none;
}

.entity-link {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 3px;
}

.entity-link:hover {
  color: var(--primary-text);
  text-decoration: underline;
}

.table tbody tr:has(a[href]):hover {
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  /*
   * Başlıktaki araç grubu (filtre formu, dönem seçici, butonlar) kartın
   * dışına taşıyordu; sığmadığında alt satıra iner.
   */
  flex-wrap: wrap;
  row-gap: 10px;
  min-width: 0;
}

.card__head--tight {
  padding-bottom: 12px;
}

.card__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

/*
 * Başlığın başındaki ikon aynı satırda dursun. `svg { display: block }`
 * yüzünden ikon kendi satırını alıyor, başlık bir alt satıra düşüyordu
 * (finans "Sahadan masraf onay bekliyor", başlangıç "Sadece denemek
 * istiyorum"). Yalnız ikon taşıyan başlıklar flex'e alınır; düz metin
 * başlıklar ile içinde satır içi `<span>` taşıyanlar etkilenmesin diye
 * doğrudan çocuk SVG koşulu aranır.
 */
.card__title:has(> svg) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__title-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.card__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/*
 * Kart başlığındaki metin bağlantısı ("Tümünü Gör →", "Puantaj gir +").
 *
 * Bağlantı `card__tools` esnek kutusunun bir öğesiydi ve varsayılan
 * `flex-shrink: 1` ile içeriğinden dar kalabiliyordu: metin ilk satırda,
 * ok/artı işareti **alt satırda tek başına** kalıyor ve yanındaki düğmeyle
 * hizası bozuluyordu (proje detayında iki ayrı yerde). Bağlantı artık
 * küçülmez; sığmazsa bir bütün olarak alt satıra iner.
 */
.card__tools > .linkbtn,
.card__tools.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  white-space: nowrap;
}

.card__tools form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.card__body {
  /*
   * `min-height: 0` bir flex çocuğunun içeriğinden küçülmesine izin verir.
   * Tek gövdeli kartta zararsızdı, ama iki gövdeli kartta (üstte kalem
   * tablosu, altta ekleme formu) ikisi de `flex: 1` ile alanı paylaşıp
   * tabloda 136 px boşluk bırakıyor, formu ise 116 px dışarı taşırıyordu —
   * "Kalem Ekle" düğmesi kartın altında havada kalıyordu. `auto` ile her
   * gövde kendi içeriği kadar yer kaplar.
   */
  flex: 1;
  min-height: auto;
  padding: 0 20px 20px;
}

.card__body--flush {
  padding: 0;
}

/*
 * Kart altı.
 *
 * Esnek satır sarmıyordu: "Kalem eklemek için teklifi taslağa alın —
 * gönderilmiş teklif …" gibi tek satırlık bir açıklama 390 px'lik telefonda
 * 535 px yer kaplayıp sayfayı yana kaydırıyordu. Açıklama metni bir düğme
 * değil; sarması gerekir.
 */
.card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 500;
}

.card__foot > span {
  min-width: 0;
}

.card__foot--between {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Alt bağlantı metni ile ok işareti aynı satırda kalsın. */
.card__foot > span,
.card__foot > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ kpi -- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
}

.kpi-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi {
  padding: 18px 20px 0;
}

.kpi__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  min-width: 0;
}

/* Metin sütunu daralabilsin; uzun tutar kartı taşırmasın. */
.kpi__top > div {
  min-width: 0;
}

.kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  color: #fff;
  flex: none;
}

.kpi__icon--square {
  border-radius: 12px;
}

.kpi__label {
  font-size: 13px;
  color: var(--muted);
}

.kpi__value {
  margin-top: 2px;
  font-size: 32px;
  line-height: 35px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi__unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

/*
 * Kart altı: açıklama solda, değişim rozeti sağda.
 *
 * `align-items: center` iken rozet, solundaki metnin *bloğuna* göre
 * ortalanıyordu. "Aktif proje bütçesi / 66.608.080 ₺" gibi iki satırlı
 * açıklamalarda blok iki kat yüksek olduğu için rozet ~10 px aşağı kayıyor;
 * beş kartlık şeritte ilk üç kartın rozeti bir hizada, son ikisininki başka
 * bir hizada duruyordu. Rozet artık her zaman **ilk satırla** hizalanır.
 */
.kpi__foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.kpi__foot .delta {
  margin-left: auto;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.delta--up {
  color: var(--primary-text);
}

.delta--down {
  color: var(--red);
}

.delta--warn {
  color: var(--red);
}

.delta--muted {
  color: var(--muted);
}

/* ------------------------------------------------------------- surfaces -- */

.bg-green {
  background: var(--primary);
}

.bg-blue {
  background: var(--blue);
}

.bg-orange {
  background: var(--orange);
}

.bg-purple {
  background: var(--purple);
}

.bg-red {
  background: var(--red);
}

/* "Taslak" gibi nötr durumlar için: dört ekranda kullanılıyordu ama tanımı
   yoktu; beyaz ikon beyaz zeminde kayboluyordu. */
.bg-gray {
  background: var(--muted);
}

.soft-green {
  background: var(--green-soft);
  color: var(--primary-text);
}

.soft-blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.soft-orange {
  background: var(--orange-soft);
  color: #b45309;
}

.soft-red {
  background: var(--red-soft);
  color: #c81e1e;
}

.soft-purple {
  background: var(--purple-soft);
  color: var(--purple);
}

.soft-gray {
  background: var(--gray-soft);
  color: #475569;
}

/* --------------------------------------------------------------- badges -- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--pill {
  border-radius: var(--r-pill);
  height: 24px;
  padding: 0 10px;
}

.badge--lg {
  height: 26px;
  font-size: 12px;
  padding: 0 12px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  flex: none;
}

/* --------------------------------------------------------------- tables -- */

.table {
  font-size: 13px;
}

.table thead th {
  padding: 10px 16px;
  background: var(--canvas);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
}

.table td.wrap {
  white-space: normal;
}

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

/*
 * Toplam satırı (`tfoot`) gövdeyle aynı hizada dursun.
 *
 * Hücre dolgusu yalnız `tbody td` için tanımlıydı; `tfoot` hücreleri
 * tarayıcı varsayılanı olan 1 px ile çiziliyordu. Sonuç: toplam tutar
 * üstündeki tutar sütunundan ~15 px dışarı taşıyor ve kartın kenarına
 * yapışıyordu — proje detayındaki "Sahada Harcanan Zaman", "Maliyet &
 * Kârlılık", "Ekip & Taşeron Hakedişleri" ile cari ekstresi, metraj ve
 * rapor tablolarının hepsinde aynı kayma vardı.
 */
.table tfoot td,
.table tfoot th {
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody tr:hover td {
  background: #fbfdff;
}

/*
 * Pano tabloları — sütun genişlikleri.
 *
 * Genişlikler `<colgroup>` içinde satır içi `style` ile yazılıydı ve dar
 * pano kartında içeriği kesiyordu: proje adı 158 px isterken 111 px'e
 * sıkışıyor ("Atatürk İlkokulu…"), malzeme adı 133 px'e iniyor, buna
 * karşılık yalnız bir tarih ya da "Düşük" rozeti taşıyan sütunlar 154 ve
 * 120 px boş yer tutuyordu. Ölçüler adın ihtiyacına göre yeniden
 * dağıtıldı; bakımı da tek yerden yapılır.
 */
.dash-portfolio,
.dash-stock {
  table-layout: fixed;
}

/* Pano kartı dar; 16 px yan dolgu tek başına satır başına 96 px yiyordu. */
.dash-portfolio thead th,
.dash-portfolio tbody td,
.dash-stock thead th,
.dash-stock tbody td {
  padding-right: 12px;
  padding-left: 12px;
}

.dash-portfolio th:nth-child(1) { width: 57%; }
.dash-portfolio th:nth-child(2) { width: 20%; }
.dash-portfolio th:nth-child(3) { width: 23%; }

.dash-stock th:nth-child(1) { width: 51%; }
.dash-stock th:nth-child(2) { width: 25%; }
.dash-stock th:nth-child(3) { width: 24%; }

.table .num,
.table .ta-r {
  text-align: right;
}

.table .ta-c {
  text-align: center;
}

/* Bağımlılıksız, opt-in tablo iyileştirmesi (`data-smart-table`). */
.smart-table__toolbar,
.smart-table__controls,
.smart-table__pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smart-table__toolbar {
  justify-content: space-between;
  min-height: 50px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.smart-table__searchfield {
  width: min(280px, 48vw);
}

.smart-table__search {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.smart-table__size {
  min-width: 104px;
}

.smart-table__status {
  min-width: 82px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.smart-table__sort {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 5px;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: inherit;
  white-space: nowrap;
}

.smart-table__sortmark {
  color: var(--muted);
  font-size: 11px;
}

th[aria-sort="ascending"] .smart-table__sort,
th[aria-sort="descending"] .smart-table__sort {
  color: var(--text);
  font-weight: 600;
}

.smart-table__empty {
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.table tbody tr[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .smart-table__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .smart-table__controls,
  .smart-table__pager {
    justify-content: space-between;
  }

  .smart-table__searchfield {
    width: 100%;
  }
}

/* ------------------------------------------------------- quote details -- */

.quote-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.quote-detail-metrics .card__body {
  min-height: 82px;
}

.quote-items-body {
  flex: none;
}

.quote-item-add {
  flex: none;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border-soft);
  background: #fbfcfe;
}

.quote-item-add__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.quote-item-add__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
  align-items: end;
}

.quote-item-add__grid .field,
.quote-item-add__grid .select {
  width: 100%;
}

.quote-item-add__name {
  grid-column: span 3;
}

.quote-item-add__note {
  grid-column: span 2;
}

.quote-item-add__submit {
  width: 100%;
}

@media (max-width: 1120px) {
  .quote-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-item-add__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-item-add__name,
  .quote-item-add__note {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .quote-detail-metrics,
  .quote-item-add__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-item-add {
    padding: 16px;
  }

  .quote-item-add__head {
    flex-direction: column;
  }
}

.cell-media {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Metin sarmalayıcısına min-width:0 verilmezse flex çocuğu içeriğinden
   küçülemiyor; içteki .truncate hiç çalışmıyor ve e-posta hücreden taşıp
   sert kesiliyordu (üç nokta bile görünmüyordu). */
.cell-media > span:not(.avatar) {
  min-width: 0;
}

.thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--gray-soft);
  flex: none;
}

.thumb--lg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.thumb--xl {
  width: 72px;
  height: 72px;
  border-radius: 10px;
}

/*
 * Ad hücresi.
 *
 * Sınırsızken tek bir uzun kayıt adı ("… Sanayi ve Ticaret Anonim Şirketi
 * Bölge Müdürlüğü") tabloyu 851 px yana kaydırıyor ve **para sütununu
 * ekrandan atıyordu** — 1440 px'lik masaüstünde bile. Üstelik yalnız o
 * satır değil, listedeki bütün satırların tutarı görünmez oluyordu.
 *
 * Kırpma yerine sarma seçilmedi: sarınca satır yüksekliği bir kaydın
 * uzunluğuna göre üçe katlanıyor ve liste okunmaz hâle geliyor. Kırpılan
 * metnin tamamı zaten üstüne gelince balonda görünüyor (app.js, kesilen
 * metne kendiliğinden başlık ekliyor).
 */
.cell-title {
  max-width: 34ch;
  overflow: hidden;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * `cell-title` hem hücre içindeki bir `<span>` hem doğrudan `<td>` üzerinde
 * kullanılıyor. Kırpma için `display: block` verilince `<td>` tablo
 * düzeninden çıkıyor: satırın ilk hücresi diğerlerinden alçak kalıyor,
 * altında kopuk bir çizgi beliriyor ve sütun hizası kayıyordu. Metraj
 * tablosunda tam bu görüldü.
 *
 * Kırpma `<td>` üzerinde de `max-width` + `overflow` ile zaten çalışıyor;
 * hücrenin tablo davranışı korunuyor.
 */
/* Özgüllük, aşağıdaki `.page .table-wrap .cell-title` kuralını geçmeli;
   o kural `<td>`'yi de blok yapıyor ve hücre tablo düzeninden çıkıyor. */
td.cell-title,
.page .table-wrap td.cell-title,
.page .table-wrap td.cell-sub {
  display: table-cell;
  vertical-align: middle;
}

.cell-sub {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-sub {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------- progress -- */

/*
 * İlerleme çubuğu.
 *
 * `display` kuralı yoktu: işaretleme `<span>` kullanan ekranlarda çubuk
 * satır içi kalıyor, `width`/`height` hiç uygulanmıyor ve dolgu 0×0 px
 * çiziliyordu. Proje detayında yüzde "%100" yazan iş emirlerinin çubuğu
 * bomboş görünüyordu — sayı ile görsel birbirini yalanlıyordu. Etiketten
 * bağımsız çalışsın diye blok olarak sabitlendi.
 */
.progress {
  display: block;
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: #eef2f6;
  overflow: hidden;
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.progress--sm {
  height: 5px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-row .progress {
  flex: 1;
}

.progress-row__value {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* ----------------------------------------------------------------- grid -- */

.grid {
  display: grid;
  gap: var(--gap);
  /*
   * Izgara hücreleri varsayılan olarak birbirine eşitlenir (stretch). İki
   * sütunlu detay düzenlerinde bu, kısa içerikli kartı komşusunun boyuna
   * çekiyordu: müşteri detayında "Projeler" kartı 284 px içerikle 1509 px
   * yer kaplıyor, altında 1163 px boşluk kalıyordu. Her kart kendi içeriği
   * kadar yer kaplar.
   */
  align-items: start;
}

/* Referans 01: kart genişlikleri 455 / 350 / 323 px (1448 baseline).
   minmax(0, …): fr track'lerin içerikle birlikte büyüyüp sayfayı taşırmasını
   engeller (grid blowout). */
.grid--5-4-3 {
  grid-template-columns: minmax(0, 455fr) minmax(0, 350fr) minmax(0, 323fr);
}

.grid--4-4-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--8-4 {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--main-rail {
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);

  /* Flex/grid çocuğu varsayılan olarak içeriğinin en dar halinden küçülmez;
     içindeki geniş tablo yığını şişirip sayfayı yatayda taşırıyordu (araç
     gider defteri 390 px ekranda 633 px yer kaplıyordu). Tablo yine kendi
     .table-wrap kutusunda kayar, içerik kırpılmaz. */
  min-width: 0;
}

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

.row--between {
  justify-content: space-between;
}

.row--wrap {
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ list rows -- */

.listrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.listrow:last-child {
  border-bottom: 0;
}

.listrow__title {
  font-size: 13px;
  font-weight: 500;
}

.listrow__sub {
  font-size: 12px;
  color: var(--muted);
}

/*
 * Satır sonundaki rozet + tutar kümesi küçülmez.
 *
 * Küçülebildiği için tutar sıkışıp iki satıra bölünüyordu (müşteri
 * detayı → Çekler). Küçülmesi gereken taraf soldaki başlıktır; o zaten
 * `min-width: 0` ve `truncate` taşır.
 */
.listrow > .row {
  flex: none;
}

.listrow__meta {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.listrow__amount {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- activity -- */

.activity {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
}

.activity__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  flex: none;
}

.activity__title {
  font-size: 13px;
  font-weight: 500;
}

.activity__sub {
  font-size: 12px;
  color: var(--muted);
}

.activity__time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- suggestions -- */

.suggest {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transition: border-color var(--fast), box-shadow var(--fast);
}

.suggest:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.suggest__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
}

.suggest__title {
  font-size: 13px;
  font-weight: 600;
}

.suggest__body {
  margin-top: 2px;
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
}

.suggest__chev {
  margin-left: auto;
  color: var(--muted);
  align-self: center;
}

/* --------------------------------------------------------------- kanban -- */

.kanban {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

/*
 * İş emri panosu: 5 durum kolonu + sağda şablon rayı. Kolonlar eşit genişlikte
 * büyür; ekran daralınca pano yatay kaydırılır, kolonlar sıkışmaz.
 */
.wo-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(216px, 1fr)) minmax(232px, 268px);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1439px) {
  .wo-board {
    grid-template-columns: repeat(5, 240px) 260px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  .wo-board > * {
    scroll-snap-align: start;
  }
}

.kanban__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.kanban__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.kanban__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.wo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color var(--fast), box-shadow var(--fast);
}

.wo-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-card);
}

.wo-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.wo-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wo-card__code {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wo-card__title {
  font-size: 13px;
  font-weight: 600;
}

.wo-card__sub {
  font-size: 11px;
  color: var(--muted);
}

.wo-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.kanban__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.kanban__add:hover {
  background: var(--gray-soft);
  color: var(--text);
}

/* ---------------------------------------------------------------- tabs -- */

.tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--border-soft);
}

.tab {
  position: relative;
  padding: 10px 0 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.tab.is-active {
  color: var(--primary-text);
  font-weight: 600;
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.segmented__item {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.segmented__item.is-active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
}

/* -------------------------------------------------------------- stepper -- */

.stepper {
  display: flex;
  align-items: flex-start;
}

.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 96px;
  flex: none;
  text-align: center;
}

.stepper__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
}

.stepper__bullet--done {
  background: var(--primary);
  color: #fff;
}

.stepper__bullet--active {
  background: var(--primary);
  color: #fff;
}

.stepper__bullet--idle {
  background: var(--gray-soft);
  color: var(--muted);
}

.stepper__name {
  font-size: 13px;
  font-weight: 500;
}

.stepper__state {
  font-size: 11px;
  color: var(--muted);
}

.stepper__pct {
  font-size: 13px;
  font-weight: 600;
}

.stepper__line {
  flex: 1;
  height: 2px;
  margin-top: 16px;
  background: var(--border);
  border-radius: 2px;
}

.stepper__line.is-done {
  background: var(--primary);
}

/* ----------------------------------------------------------- pagination -- */

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: #475569;
  background: var(--surface);
}

.pagination__item.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.pagination__item.is-plain {
  border-color: transparent;
  background: none;
}

.pagination__item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* -------------------------------------------------------------- calendar */

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  text-align: center;
}

.calendar__dow {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.calendar__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.calendar__day--muted {
  color: var(--muted);
}

.calendar__day--today {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.calendar__mark {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.calendar__mark i {
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  display: block;
}

/* ------------------------------------------------------------- timeline -- */

.timeline {
  position: relative;
  padding-left: 18px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--primary-soft);
}

.timeline__item {
  position: relative;
  padding-bottom: 18px;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: -18px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--primary);
}

/* ---------------------------------------------------------- misc states -- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.empty__body {
  font-size: 13px;
  max-width: 46ch;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.skeleton {
  background: linear-gradient(90deg, #eef2f6 25%, #f6f8fb 37%, #eef2f6 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  animation: skeleton 1.4s ease infinite;
}

@keyframes skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--shadow-pop);
}

/* ------------------------------------------------------------ utilities -- */

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
  line-height: 17px;
}

.xsmall {
  font-size: 11px;
  line-height: 16px;
}

/*
 * Başında ikon olan küçük bilgi satırı tek satırda kalsın.
 *
 * Sıfırlamadaki `svg { display: block }` yüzünden ikon kendi satırını
 * alıyor, metin bir alt satıra düşüyordu — teklif detayında stok bağlantısı
 * ("KAB-NYM-325 · Elektrik Kablo…") ikonun altında ayrı satırdaydı.
 * Zaten `.row` verilmiş (flex) satırlar dışarıda bırakılır ki oradaki
 * boşluk sınıfları (`gap-8`) ezilmesin.
 */
.small:not(.row):has(> svg:first-child),
.xsmall:not(.row):has(> svg:first-child) {
  display: flex;
  align-items: center;
  gap: 5px;
}

.strong {
  font-weight: 600;
}

.green {
  color: var(--primary-text);
}

/*
 * Yazı için ayrı kırmızı/turuncu.
 *
 * Rozet ve grafik zemini olarak `--red`/`--orange` doğru; **yazı** olarak
 * ölçüldüğünde beyaz üstünde 3.76:1 ve 2.15:1 çıkıyor — ikisi de okunmuyor.
 * Turuncu özellikle kötüydü: "Montajda" gibi durum yazıları neredeyse
 * görünmüyordu.
 */
.red {
  color: #dc2626;
}

.orange {
  color: #b45309;
}

.blue {
  color: var(--blue);
}

.purple {
  color: var(--purple);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-auto {
  margin-left: auto;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.divider {
  height: 1px;
  background: var(--border-soft);
}

.scroll-x {
  overflow-x: auto;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1279px) {
  .topbar__title {
    display: none;
  }

  .topbar__search {
    max-width: 280px;
  }
}

/* Ana sütun + yan ray düzeni 1366 px sınıfı ekranlarda ana sütunu ~660 px'e
   düşürüyordu; metraj gibi altı sütunlu tablolar orada kolon başına 110 px'e
   inip okunmaz oluyordu. Bu genişliğin altında ray ana sütunun altına geçer. */
@media (max-width: 1365px) {
  .grid--main-rail,
  .grid--8-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  .topbar .topbar__burger {
    display: inline-flex;
  }

  .topbar__collapse {
    display: none;
  }

  /* Sidebar mobilde kayan çekmece olur. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 260px;
    height: 100dvh;
    padding-top: 18px;
    overflow-y: auto;
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  body.has-drawer .sidebar {
    transform: translateX(0);
  }

  .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    border: 0;
    background: rgb(15 23 42 / 40%);
  }

  .drawer-scrim[hidden] {
    display: none;
  }

  /* Daraltma yalnız masaüstünde anlamlı; çekmecede gizlenir. */
  .nav__collapse {
    display: none;
  }

  body.has-drawer {
    overflow: hidden;
  }

  .grid--5-4-3,
  .grid--4-4-4,
  .grid--8-4,
  .grid--main-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  /* İkili ızgara tablet altında tek kolona iner; kartlar ezilmez. */
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topbar__search {
    display: none;
  }

  /* Dar ekranda tüm açılır menüler sağa hizalanır, ekrandan taşmaz. */
  .menu__panel {
    left: auto;
    right: 0;
  }

  .orgswitch__initials {
    display: inline;
  }

  .orgswitch span:not(.orgswitch__initials) {
    display: none;
  }

  .orgswitch {
    padding: 0 10px;
  }
}

@media (max-width: 767px) {
  .main {
    /* Değişken üzerinden: tam genişliğe taşan sticky şeritler dolguyu
       buradan okuyor, sabit yazılırsa mobilde payı şaşıyor. */
    --page-pad: 16px;

    padding: var(--page-pad);
  }

  .topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .brandbar__suffix {
    display: none;
  }

  .topbar__divider {
    display: none;
  }

  /* Tek sütuna inince dört kart 596 px yer kaplıyor ve listeye ulaşmak
     1100 px kaydırma gerektiriyordu — telefon ekranının 1,3 katı. İkili
     ızgara ve kompakt kart, aynı bilgiyi ~240 px'de veriyor. */
  .kpi-grid,
  .kpi-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi {
    padding: 12px 12px 0;
  }

  .kpi__top {
    gap: 10px;
    padding-bottom: 10px;
  }

  .kpi__icon {
    width: 34px;
    height: 34px;
  }

  .kpi__icon svg {
    width: 18px;
    height: 18px;
  }


  .kpi__label {
    font-size: 11px;
  }

  /* Alt açıklama satırı ikili ızgarada okunmayacak kadar kısalıyor;
     asıl sayı ve etiket kalır. */
  .kpi__foot {
    display: none;
  }

  .page__head {
    flex-direction: column;
    align-items: stretch;
  }

  .page__actions {
    flex-wrap: wrap;
  }

  .page__actions > * {
    flex: 1 1 auto;
  }

  .card__head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .table-wrap,
  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* DİKKAT — bu kuralın sarmalayıcılı yarısı ÖLÜ, tuzak burada.
   *
   * Dosyanın ilerisindeki `.table-wrap > .table { min-width: 100% }` aynı
   * özgüllükte (0,2,0) ve sonra geldiği için kazanıyor; medya sorgusu
   * özgüllük eklemiyor. Yani `.table-wrap` içindeki bir tablo bu 620 px'i
   * hiç görmüyor. Yalnız sarmalayıcısız `.table` için canlı.
   *
   * Bugün görünür bir kusur üretmiyor: içerikle genişleyen tablolar
   * (`table-layout: auto`) zaten 620 px'i aşıyor ve kayıyor. Sıkışan tek
   * sınıf `table-layout: fixed` olanlar — onların hepsi kendi adıyla
   * yazılmış kurallarla korunuyor (`.staff-table`, `.dash-portfolio`,
   * `.dash-stock`, `service.css`'te `.sv-table`).
   *
   * **Yeni bir `table-layout: fixed` tablo eklerken** buraya güvenme:
   * telefonda 356 px'e sıkışır ve her hücre iki harfe iner ("Ah…", "Ayş…").
   * Dosyanın sonundaki `@media (max-width: 767px)` bloğunda tabloyu kendi
   * sınıf adıyla `.table-wrap > .senin-tablon { min-width: 620px }` diye
   * yaz — özgüllük (0,3,0) olur ve kural canlanır.
   *
   * Global kuralı canlandırmak 200 ekrandaki her tabloyu etkiler; ölçülmüş
   * bir kusur olmadan yapılmadı. */
  .table-wrap > .table,
  .table {
    min-width: 620px;
  }

  .kanban {
    grid-auto-flow: column;
    grid-auto-columns: 80vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .kanban__col {
    scroll-snap-align: start;
  }

  .wo-board {
    grid-template-columns: repeat(5, 80vw) 80vw;
    scroll-snap-type: x mandatory;
  }

  .card__tools {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .card__tools form {
    flex-wrap: wrap;
  }

  .daterange {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 8px;
  }

  .daterange input[type="date"] {
    width: auto;
    flex: 1;
    min-width: 104px;
  }

  .modal {
    padding: 0;
    align-items: flex-end;
  }

  .modal__panel {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
  }

  .daterange {
    width: 100%;
    justify-content: space-between;
  }

  /* Sabit genişlikli arama/seçim kutuları telefonu taşırmaz. */
  .page__actions .field,
  .page__actions .select,
  .card__head .field,
  .card__head .select,
  .card__tools .field,
  .card__tools .select {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  .page__actions form,
  .card__head form {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ------------------------------------------------------------------ modal -- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / 45%);
  backdrop-filter: blur(2px);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 64px);
  overflow: hidden auto;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}

.modal__panel--wide {
  max-width: 1040px;
}

.modal__panel--narrow {
  max-width: 520px;
}

.modal__loading,
.modal__error {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.modal__error {
  align-items: flex-start;
}

/*
 * Modal açıkken gövde yerinde sabitlenir.
 *
 * Yalnız `overflow: hidden` yetmiyordu: tarayıcı kaydırma konumunu kırpıp
 * sayfayı başa alıyor, modal kapanınca kullanıcı listenin başında kalıyordu.
 * `position: fixed` + JS'in sakladığı `top` değeri konumu birebir koruyor
 * (bkz. `kaydirmayiKilitle` / `kaydirmayiAc`).
 */
body.has-modal {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.modal__head {
  position: sticky;
  top: 0;
  /* İçerideki yapışkan tablo başlığı z-index: 2 taşıyor; modal başlığı 1'de
     kalınca kaydırırken tablo başlığı onun üstüne biniyordu. Modalin kendi
     başlığı ve alt barı her zaman en üstte durmalı. */
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.modal__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.modal__subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.modal__content {
  padding: 20px;
}

.modal__foot {
  /* Kısa ekranda (1440x700 gibi) uzun form panelin altını taşırıyor ve kaydet
     satırı yarı kesik kalıyordu; kullanıcı düğmeyi görmek için kaydırmak
     zorundaydı. Yapışkan alt bar her zaman görünür kalır. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-soft);
  /* Üç butonlu alt satır telefonda panelin dışına taşıyordu. */
  flex-wrap: wrap;
  row-gap: 10px;
}

/* --------------------------------------------------------- tablo taşması -- */

/* Kart içindeki tablolar kartı taşırmaz; kendi alanında yatay kayar. */
/*
 * Geniş tablo kaydırma ipucu.
 *
 * Metraj gibi on sütunlu tablolar ekrana sığmıyor ve sağ kenardan kesiliyor:
 * "Yeni Gerçekleşen" başlığı yarım kalıyor, Kaydet düğmesi hiç görünmüyordu.
 * Kaydırılabildiğini gösteren hiçbir işaret yoktu; kullanıcı tabloyu bozuk
 * sanıyordu.
 *
 * Kenarlardaki gölge yalnız o yönde içerik varken beliriyor: `local`
 * eklentili katman kaydırma sonuna gelince gölgeyi örtüyor. JavaScript
 * gerekmiyor.
 */
/*
 * Kenar gölgesi **görülebilir** olmalı.
 *
 * Mekanizma doğruydu (`local` katman kaydırma bitince gölgeyi örter) ama
 * gölge 12 px genişlikte ve %14 opaklıktaydı: ekranda hiç fark edilmiyordu.
 * Ölçüldü — müşteri listesinde 97 px, metraj kaleminde 120 px, puantaj
 * toplu girişinde 150 px, günlük şantiye raporlarında 575 px içerik sağda
 * kalıyor; kullanıcı "Top…" diye kesilmiş bir başlık görüyor ve tablonun
 * kaydırılabildiğini anlamıyordu. Dikey kaydırma çubuğu tablonun en altında
 * olduğu için üstteyken ipucu yok. Gölge 18 px / %24'e çıkarıldı.
 */
/*
 * Gölge yine de çıkmıyordu: `farthest-side` radyal gradyan, kutunun **tüm
 * yüksekliğini** yarıçap alıyor. Uzun bir listede (müşteriler ~1100 px)
 * elips o kadar yayvan oluyor ki dikey ortadan uzaklaşınca renk sıfıra
 * iniyor. Ölçüldü: sağ kenarda piksel 255 → 248, yani 7 tonluk fark —
 * ekranda görünmez. Doğrusal gradyan yükseklikten bağımsız, her satırda
 * aynı koyulukta çıkıyor (255 → 209).
 */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--surface) 60%, rgb(255 255 255 / 0%)) left center,
    linear-gradient(to left, var(--surface) 60%, rgb(255 255 255 / 0%)) right center,
    linear-gradient(to right, rgb(15 23 42 / 20%), rgb(15 23 42 / 0%)) left center,
    linear-gradient(to left, rgb(15 23 42 / 20%), rgb(15 23 42 / 0%)) right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

.table-wrap > .table {
  min-width: 100%;
}

.table-wrap::-webkit-scrollbar {
  height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  background: #d8dfe8;
}

.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------------------------------------------- ayarlar -- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-grid .field,
.settings-grid .select {
  width: 100%;
}

.settings-field--wide {
  grid-column: 1 / -1;
}

.checkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--canvas);
}

.checkrow input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.checkrow span {
  display: grid;
  min-width: 0;
}

.checkrow small {
  color: var(--muted);
}

/*
 * Sade onay kutusu satırı.
 *
 * `.check` on ekranda kullanılıyordu ama hiç kuralı yoktu: kutu ile etiket
 * arasında yalnız tarayıcının 3 px'lik varsayılan payı kalıyor, "☐zorunlu"
 * bitişik görünüyordu; kutu da metnin taban çizgisine oturduğu için yukarıda
 * duruyordu (iş emri detayı, teklif/satın alma şablonları, otomasyon formu).
 * Yeşil vurgu rengi `.checkrow` ile aynı — işaretli kutu her yerde aynı
 * renkte olsun.
 */
.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--green);
}

@media (max-width: 767px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- personel -- */

.staff-access {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--canvas);
}

.staff-access__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-reset {
  padding: 16px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--canvas);
}

/*
 * Personel listesi sütun genişlikleri.
 *
 * Genişlikler eskiden `<colgroup>` içinde satır içi `style` ile yazılıydı;
 * "Telefon" sütunu veri olmadığında kaldırılınca yüzdeler elle
 * kaydırılamıyordu. Artık iki hâl de burada: telefon yokken o sütunun
 * 13%'i "Rol"e eklenir, böylece "Operasyon Müdürü" / "Firma Yöneticisi"
 * rozetleri harf ortasından kesilmez (ölçüm: rozet 121 px istiyordu,
 * hücrede 90 px vardı).
 */
.staff-table {
  table-layout: fixed;
}

/*
 * Telefonda sabit yerleşim sıkıştırır, kaydırmaz.
 *
 * `.table` için yazılmış `min-width: 620px` mobil kuralı ölü: dosyanın
 * ilerisindeki `.table-wrap > .table { min-width: 100% }` aynı özgüllükte
 * ve sonra geldiği için onu eziyor. Sonuç 356 px'e sıkışan sabit tablo:
 * "Ahm…", "Şanti…", "Oper…", "Aktif" yerine "A". Sarmalayıcıyla yazıp
 * özgüllüğü yükseltmek kuralı bu üç tabloda geri getirir; tablo diğer
 * tablolar gibi yatay kayar.
 */
@media (max-width: 767px) {
  .table-wrap > .staff-table,
  .table-wrap > .dash-portfolio,
  .table-wrap > .dash-stock {
    min-width: 620px;
  }
}

.staff-table th:nth-child(1) { width: 28%; }
.staff-table th:nth-child(2) { width: 26%; }
.staff-table th:nth-child(3) { width: 13%; }
.staff-table th:nth-child(4) { width: 14%; }
.staff-table th:nth-child(5) { width: 11%; }
.staff-table th:nth-child(6) { width: 8%; }

.staff-table--phone th:nth-child(1) { width: 26%; }
.staff-table--phone th:nth-child(2) { width: 12%; }
.staff-table--phone th:nth-child(3) { width: 22%; }
.staff-table--phone th:nth-child(4) { width: 11%; }
.staff-table--phone th:nth-child(5) { width: 11%; }
.staff-table--phone th:nth-child(6) { width: 11%; }
.staff-table--phone th:nth-child(7) { width: 7%; }

/* Personel tablosu dar sütunlarda okunur kalsın */
.page .table-wrap .cell-title,
.page .table-wrap .cell-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ------------------------------------------------------- finans hareketi -- */

.fin-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fin-type {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}

.fin-type:hover {
  border-color: var(--border);
}

.fin-type input {
  margin-top: 2px;
  accent-color: var(--primary);
}

.fin-type:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}


/* Satır içi eylem düğmeleri satırı taşırmasın */
.listrow > form {
  flex: none;
}

.listrow__meta {
  min-width: 0;
}

/* ---------- Tarih aralığı seçici ---------- */
.daterange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
}

.daterange__icon {
  display: inline-flex;
  color: var(--muted);
}

.daterange input[type="date"] {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 0;
  width: 106px;
  cursor: pointer;
}

.daterange input[type="date"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.daterange__sep {
  color: var(--muted);
  font-size: 12px;
}

.daterange__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary-text);
  cursor: pointer;
}

.daterange__go:hover {
  background: var(--primary);
  color: #fff;
}

.btn--danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  margin-right: auto;
}

.btn--danger:hover {
  background: var(--red-soft);
}

/* ---------- grafik ipucu ---------- */

.charttip {
  position: absolute;
  z-index: 95;
  transform: translate(-50%, -100%);
  padding: 7px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgb(15 23 42 / 22%);
}

.charttip[hidden] {
  display: none;
}

.charttip b {
  font-weight: 600;
}

[data-tip] {
  cursor: pointer;
}

/* ---------- kanban sürükle-bırak ---------- */

[data-wo-card] {
  cursor: grab;
}

[data-wo-card].is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

[data-wo-card].is-saving {
  opacity: 0.6;
  pointer-events: none;
}

[data-wo-card].is-error {
  outline: 2px solid var(--red);
}

[data-wo-drop].is-dropover {
  background: var(--primary-soft);
  outline: 2px dashed var(--primary);
  outline-offset: -3px;
  border-radius: var(--r-card);
}

/* ---------- daraltılmış sidebar ---------- */

@media (min-width: 1200px) {
  body.is-collapsed .shell {
    grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
  }

  body.is-collapsed .nav__item span,
  body.is-collapsed .nav__collapse span {
    display: none;
  }

  body.is-collapsed .nav__item,
  body.is-collapsed .nav__collapse {
    justify-content: center;
    padding: 0;
  }

  body.is-collapsed .topbar__collapse svg {
    transform: rotate(180deg);
  }
}

/* ---------- rol izin matrisi ---------- */

.permgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

.permgroup {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 10px 12px 12px;
}

.permgroup__title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.permrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 4px;
  border-radius: 8px;
  cursor: pointer;
}

.permrow:hover {
  background: var(--gray-soft);
}

.permrow input {
  margin-top: 2px;
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
}

.permrow__name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.permrow__desc {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- geçici bildirim ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  transform: translate(-50%, 16px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 30px rgb(15 23 42 / 28%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- uzun listeleri sınırla ---------- */

/*
 * Metraj gibi uzayabilen tablolar kart içinde kaydırılır; sayfa aşağı doğru
 * sonsuz uzamaz, başlık satırı sabit kalır.
 */
.table-wrap--cap {
  max-height: 440px;
  overflow-y: auto;
}

.table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border-soft);
}

.scroll-cap {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

/*
 * Sabit yerleşimli (table-layout: fixed) tablolarda hücre içeriği sığmadığında
 * sessizce kesilirdi. Artık üç nokta ile kısalır; tam değer başlık (title)
 * niteliğinde ya da detay panelinde durur.
 */
.table[style*="table-layout"] th,
.table[style*="table-layout"] td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table[style*="table-layout"] th {
  white-space: nowrap;
}

/* Sekme şeridi kart sınırını aşmaz; sığmazsa yatay kaydırılır. */
.tabs {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs > .tab {
  flex: none;
}

/*
 * KPI kartı dar kaldığında (5'li ızgara ya da <1400px ekran) 32px'lik tutar
 * ikonun yanına sığmıyor, sağ dolguya taşıp kesiliyordu. Kart genişliğine göre
 * önce ikon ve boşluk, sonra yazı boyu küçülür — yerleşim (ikon solda) korunur.
 */
.kpi {
  container-type: inline-size;
}

@container (max-width: 245px) {
  .kpi__icon {
    width: 38px;
    height: 38px;
  }

  .kpi__icon svg {
    width: 19px;
    height: 19px;
  }

  .kpi__top {
    gap: 10px;
  }

  .kpi__value {
    font-size: 28px;
    line-height: 32px;
  }

  .kpi__unit {
    font-size: 13px;
  }
}

@container (max-width: 200px) {
  /* Telefonun ikili ızgarasında kart ~185 px; metin sütununa ~100 px kalıyor.
     "897.540 ₺" 24 puntoda 116 px sürüp taşıyordu. */
  .kpi__value {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.02em;
  }

  .kpi__unit {
    font-size: 12px;
  }
}

/* 360 px'lik telefonda kart ~168 px'e iner; yedi haneli tutar ("1.191.360 ₺")
   18 puntoda da sığmıyor. */
@container (max-width: 178px) {
  .kpi__value {
    font-size: 15px;
    line-height: 21px;
  }
}

/*
 * Halka grafik + açıklama: açıklama satırları nowrap olduğu için dar kartta
 * yan yana sığmıyor ve kartı taşırıyordu. 190px altına düşecekse alta iner.
 */
.donut-split {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.donut-split__legend {
  flex: 1 1 190px;
  min-width: 0;
}

/* Sağdaki tarih/сayı alanı metin sütununu ezmez, kendi genişliğini korur. */
.listrow__meta {
  flex: none;
}

/* ---------- sayfa rehberi ---------- */

.guide {
  margin-bottom: var(--gap);
}

.guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--fast), color var(--fast);
}

.guide__toggle::-webkit-details-marker {
  display: none;
}

.guide__toggle:hover {
  border-color: var(--primary);
  color: var(--primary-text);
}

.guide[open] .guide__toggle {
  border-color: var(--primary);
  color: var(--primary-text);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.guide__panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.guide__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--primary-soft);
}

.guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
}

.guide__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.guide__summary {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #3f5163;
  max-width: 86ch;
}

.guide__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
}

.guide__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.guide__step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
}

/* Adım ikonu ile adım adı yan yana. Blok SVG sıfırlaması yüzünden yardım
   sayfasındaki zincirde ikon başlığın üstünde ayrı bir satırda duruyordu. */
.guide__step-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.guide__step-body {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.guide__example {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--canvas);
}

.guide__example-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
}

.guide__example p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #3f5163;
}

.guide__tips {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-soft);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px;
}

.guide__tips li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.guide__tips svg {
  flex: none;
  margin-top: 2px;
  color: var(--primary-text);
}

.guide__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--canvas);
}

@media (max-width: 900px) {
  .guide__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Günlük işi rehber paneline saklamayan, görünür görev yolu. */
.task-path {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 2.28fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: var(--gap);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.task-path__intro {
  padding: 4px 6px;
}

.task-path__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--primary-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.task-path__title {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.task-path__summary {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.task-path__steps {
  display: grid;
  grid-template-columns: repeat(var(--task-count, 4), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-path__item {
  min-width: 0;
}

.task-path__link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  height: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--canvas);
  color: inherit;
  text-decoration: none;
}

a.task-path__link:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.task-path__item--current .task-path__link {
  border-color: #86efac;
  background: #f0fdf4;
}

.task-path__item--done .task-path__link {
  background: #f8fafc;
}

.task-path__number {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.task-path__item--current .task-path__number,
.task-path__item--done .task-path__number {
  background: var(--primary);
  color: #fff;
}

.task-path__copy {
  min-width: 0;
}

.task-path__copy strong,
.task-path__copy span {
  display: block;
}

.task-path__copy strong {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.35;
}

.task-path__copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.task-path__arrow {
  flex: none;
  margin-left: auto;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .task-path {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .task-path__steps {
    grid-template-columns: 1fr;
  }

  .task-path__link {
    min-height: 52px;
  }
}

/*
 * Tıklanabilir KPI kartı: sayının kaynağı olan filtreli listeye götürür.
 * Kartın tamamı hedeftir; içine ikinci bağlantı konmaz.
 */
.kpi--link {
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.kpi--link:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-pop);
}

.kpi--link:active {
  transform: translateY(1px);
}

.kpi--link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Özet kutusu ve depo kartı da aynı davranışı alır. */
a.sv-box,
a.inv-wh__card {
  transition: border-color var(--fast), box-shadow var(--fast);
}

a.sv-box:hover,
a.inv-wh__card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-card);
}

/* Tıklanabilir tablo satırı */
.table tbody tr.is-link {
  cursor: pointer;
}

.table tbody tr.is-link:hover td {
  background: var(--primary-soft);
}

/* Metraj tablosunda satır içi birim fiyat girişi */
.cell-price {
  width: 96px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  text-align: right;
}

.cell-price:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Puantaj — yoğun günlük giriş masaüstünde hızlı, mobilde taşmadan okunur. */
.timesheet-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 16px 18px;
}

.timesheet-filter__field {
  min-width: 0;
}

.timesheet-filter__field .field,
.timesheet-filter__field .select {
  width: 100%;
}

.timesheet-filter__submit {
  margin-bottom: 1px;
}

.timesheet-table {
  min-width: 850px;
}

.timesheet-table th:first-child {
  width: 25%;
}

.timesheet-table th:nth-child(2) {
  width: 15%;
}

.timesheet-table th:nth-child(3) {
  width: 9%;
}

.timesheet-table th:nth-child(4) {
  width: 13%;
}

.timesheet-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.timesheet-person > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.timesheet-person strong,
.timesheet-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-person small {
  margin-top: 2px;
  color: var(--muted);
}

.timesheet-status {
  width: 130px;
}

.timesheet-rate {
  width: 116px;
}

.timesheet-note {
  width: 100%;
  min-width: 190px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.timesheet-note:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.timesheet-foot > span {
  min-width: 0;
  white-space: normal;
}

.timesheet-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Kısa özet kartı komşusunun boyuna çekilip altında boşluk bırakıyordu. */
  align-items: start;
}

@media (max-width: 1050px) {
  .timesheet-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timesheet-filter__submit {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .timesheet-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .timesheet-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .timesheet-filter__submit {
    grid-column: auto;
    justify-self: stretch;
  }

  .timesheet-table {
    min-width: 0;
  }

  .timesheet-table thead {
    display: none;
  }

  .timesheet-table,
  .timesheet-table tbody,
  .timesheet-table tr,
  .timesheet-table td {
    display: block;
    width: 100%;
  }

  .timesheet-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
  }

  .timesheet-table tr:last-child {
    border-bottom: 0;
  }

  .timesheet-table tbody td,
  .timesheet-table tbody tr:last-child td {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: 0;
    text-align: left;
  }

  .timesheet-table tbody tr td:first-child,
  .timesheet-table tbody tr:last-child td:first-child {
    display: block;
    padding: 0 0 9px;
  }

  .timesheet-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }

  .timesheet-status,
  .timesheet-rate,
  .timesheet-table .cell-price,
  .timesheet-note {
    width: 100%;
    min-width: 0;
  }

  /*
   * Telefonda hücreler alt alta dizilip başlıklarını `::before` ile
   * yazıyor. Çalışma tipine göre gizlenen kutunun hücresi ekranda
   * kalıyordu: tam gün satırında "Saat / Miktar" yazısının yanı bomboş
   * duruyor, kullanıcı doldurulacak bir alan sanıp arıyordu. İçindeki
   * tek denetim gizliyse başlık da görünmez.
   */
  .timesheet-table tbody td:has(> input[hidden]:only-child) {
    display: none;
  }
}

/*
 * Form içindeki açılır listeler .select sınıfı almadığında tarayıcının
 * varsayılan görünümüyle çiziliyordu (gri kabartma, farklı yükseklik).
 * .field içindeki her select ortak dili paylaşır.
 */
.field > select,
.field select {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 26px 0 0;
  border: 0;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 15px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  outline: 0;
}

.field:focus-within {
  border-color: var(--primary);
}

.field > select:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Uzun seçenek listelerinde panel okunur kalsın (destekleyen tarayıcılarda). */
select option {
  padding: 6px 10px;
  font-size: 13px;
}

/*
 * Satın alma özet kartları. Markup .kpi-card sınıfını kullanıyordu ama karşılığı
 * yoktu: kartlar kenarlıksız, düz metin gibi görünüyordu. Ölçüler .kpi ile
 * aynı dili paylaşır, böylece iki bileşen yan yana geldiğinde ritim bozulmaz.
 */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

a.kpi-card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-pop);
}

a.kpi-card:active {
  transform: translateY(1px);
}

a.kpi-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.kpi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
}

.kpi-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.kpi-card__value {
  margin-top: 2px;
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.kpi-card__delta {
  margin-top: 2px;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dar kartta ikon ve sayı küçülür — .kpi ile aynı davranış. */
.kpi-card {
  container-type: inline-size;
}

@container (max-width: 245px) {
  .kpi-card__icon {
    width: 36px;
    height: 36px;
  }

  .kpi-card__value {
    font-size: 22px;
    line-height: 26px;
  }
}

/* ---------- bildirim merkezi ---------- */

.notif__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

/* Okunmamış olan soldaki şeritten ve dolu başlıktan ayırt edilir. */
.notif--unread {
  box-shadow: inset 3px 0 0 var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.notif--unread .listrow__title {
  font-weight: 600;
  color: var(--text);
}

.notif__time {
  flex: none;
}

/*
 * Bildirim metni. Daha önce .listrow__meta kullanılıyordu; o sınıf sağa
 * hizalı meta alanı için tasarlandığından başlık ve açıklama sağa yaslanıyordu.
 */
.notif__text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Uzun başlık/açıklama dar ekranda satırı taşırmaz. */
.notif .listrow__title,
.notif .listrow__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Kaydırılabilir tabloda kesilme yanılsaması: kenar gölgesi kuralı burada
 * ikinci kez tanımlanmıştı ve dosyada sonra geldiği için yukarıdaki
 * (düzeltilmiş) `.table-wrap` bildirimini sessizce eziyordu — gölge iki kez
 * güçlendirildiği hâlde ekranda hiç değişmemesinin sebebi buydu. Tek tanım
 * kaldı: bkz. "Kenar gölgesi **görülebilir** olmalı" bloğu.
 */

/* Belge uyarısı gibi çok kelimeli rozetler dar durum sütununda tek satıra
   sığmayıp kesiliyordu; bu hücrede rozet sarar ve alt alta dizilir. */
.cell-badges {
  white-space: normal;
}

.cell-badges .badge {
  display: inline-flex;
  white-space: normal;
  text-align: left;
  margin-bottom: 2px;
}

/* Birden çok eylem düğmesi taşıyan hücre: dar sütunda tek satıra zorlanmak
   yerine sarar, düğmeler sağa hizalı alt alta dizilir. */
.cell-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

/*
 * Dokunma hedefleri (tablet ve telefon).
 *
 * Parmakla basılan her kontrolün en az ~40 px'lik bir alanı olmalı. Tablo
 * hücresindeki metin bağlantıları doğal olarak 21 px yüksekliğinde; alanı
 * satırı şişirmeden büyütmek için dikey iç boşluk verilip aynı kadar dış
 * boşluk geri alınır — görsel yerleşim değişmez, basılabilir alan büyür.
 */
@media (hover: none), (max-width: 900px) {
  .table a.entity-link,
  .table a.linkbtn,
  .table a.cell-title,
  .table td > a {
    padding-block: 9px;
    margin-block: -9px;
  }

  /* Gerçek düğmeler alanı kendileri taşır. */
  /* Yalnız asgari ölçü verilir. `display` dayatmak, dar ekranda
     `display:none` ile gizlenmiş kontrolleri (üst şeritteki daralt düğmesi)
     geri getirip şeridi taşırıyordu. */
  .iconbtn,
  .smart-table__sort,
  .daterange__go,
  .kanban__add {
    min-height: 40px;
    min-width: 40px;
  }

  /* Sayfalama düğmeleri yan yana duruyor: genişlik dayatmak satırı taşırıp
     sayfanın tamamını yatay kaydırıyordu. Dokunma alanı yükseklikten gelir,
     sığmadığında da alt satıra sarar. */
  .pagination {
    flex-wrap: wrap;
  }

  .pagination__item {
    min-height: 40px;
  }

  /* Kart altı, adım listesi ve mobil bölüm başlığındaki eylem bağlantıları:
     hepsi tek satırlık metin, hepsi parmakla basılıyor. */
  .guide-card a,
  .card__foot a,
  /* Dokunma hedefi büyütme kuralı tek satırlık **metin** bağlantıları için.
     Adım kartına da uygulanınca `<a>` adımlara 9 px dolgu/negatif kenar
     biniyor, `<div>` adımlara binmiyordu: aynı satırdaki kartlar 12 px
     kayıyor ve üst üste geliyordu. Kart zaten `min-height: 52px`. */
  .task-path a:not(.task-path__link),
  .mob__section-head a,
  .empty a:not(.btn) {
    padding-block: 10px;
    margin-block: -10px;
  }

  /* Yalnız yükseklik: logoya genişlik dayatmak (min-width / flex-shrink:0)
     360 px'te üst şeridi 140 px taşırıyor. Daralan logo 20x40'lık bir alanla
     hâlâ basılabilir durumda. */
  .brandbar {
    min-height: 40px;
  }

  /* Kart gövdesindeki bağımsız metin bağlantıları (liste satırı, "tümünü gör",
     adım bağlantısı). Rozet ve düğmeler kendi alanlarını zaten taşır. */
  /* Alt bar (.card__foot) zaten 40 px yüksek bir bağlantı; ona dolgu eklemek
     tıklama alanını kartın 8 px dışına taşırıyordu. */
  .card a:not(.btn):not(.badge):not(.kpi):not(.cell-media):not(.card__foot):not([class*="__cta"]):not(.pagination__item),
  /* Dokunma hedefi büyütme kuralı tek satırlık **metin** bağlantıları için.
     Adım kartına da uygulanınca `<a>` adımlara 9 px dolgu/negatif kenar
     biniyor, `<div>` adımlara binmiyordu: aynı satırdaki kartlar 12 px
     kayıyor ve üst üste geliyordu. Kart zaten `min-height: 52px`. */
  .task-path a:not(.task-path__link),
  .ws-col__more {
    padding-block: 9px;
    margin-block: -9px;
  }

  /* Son eleman olan bağlantıda alt dolgu kartın 8 px dışına taşıyordu.
     Seçici, yukarıdaki dokunma kuralıyla aynı :not zincirini taşır; yoksa
     spesifiklik düşük kalıp ezilir. */
  .card__body > a:last-child:not(.btn):not(.badge):not(.kpi):not(.cell-media):not(.card__foot),
  .card__body > *:last-child > a:last-child:not(.btn):not(.badge):not(.kpi):not(.cell-media):not(.card__foot) {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Rozet biçimindeki filtre bağlantıları ve sayfa başındaki geri/kısayol
     bağları tıklanır ama 21-22 px yüksekliğinde. Rozetin `height` değeri sabit
     olduğu için iç boşluk yutuluyordu; mobilde yükseklik serbest bırakılıp
     dokunulabilir seviyeye çıkarılır. Salt bilgi veren <span> rozetler
     etkilenmez — yalnız bağlantı olanlar büyür. */
  a.badge {
    height: auto;
    min-height: 34px;
  }

  .page__head a:not(.btn),
  .finance-back {
    padding-block: 9px;
    margin-block: -9px;
  }

  .calendar__day--link {
    min-height: 40px;
  }
}

/*
 * Telefonda katlanan blok.
 *
 * İş emri ekranında başlık + görünüm sekmeleri + kayıtlı listeler + filtre
 * formu 527 px yer kaplıyor, 844 px'lik ekranda panoya 317 px kalıyordu.
 * Masaüstünde blok her zaman açık ve başlık gizli — düzen değişmez; telefonda
 * kapalı başlar, kullanıcı ihtiyaç duyunca açar.
 */
.collapsible > .collapsible__toggle {
  display: none;
}

@media (max-width: 900px) {
  .collapsible {
    margin-bottom: 2px;
  }

  .collapsible > .collapsible__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }

  .collapsible > .collapsible__toggle::-webkit-details-marker {
    display: none;
  }

  /* Son ikon (chevron) sağa yaslanır ve açıkken döner. */
  .collapsible > .collapsible__toggle > svg:last-child {
    margin-left: auto;
    transition: transform var(--fast);
  }

  .collapsible[open] > .collapsible__toggle > svg:last-child {
    transform: rotate(180deg);
  }

  .collapsible[open] > .collapsible__toggle {
    margin-bottom: 10px;
  }

  /* Katlanan içerikteki alanlar sabit genişlik yerine tam satır kaplar. */
  .collapsible .field,
  .collapsible .select {
    width: 100% !important;
  }
}

/*
 * Adım rehberi telefonda.
 *
 * Dört adımın açıklamalarıyla birlikte 335 px yer kaplaması, listeye ulaşmayı
 * yeniden bir ekran boyu uzaklaştırıyordu. Telefonda adım başlıkları kalır
 * (sıra bilgisi taşıyan asıl kısım), açıklama satırı gizlenir; ayrıntıya
 * "Nasıl kullanılır?" panelinden ulaşılır.
 */
@media (max-width: 900px) {
  /* Sağdaki koridor telefonda da kalır; ✕ ilk adım kartını örtmesin. */
  .task-path {
    padding: 14px 48px 14px 14px;
  }

  .task-path__summary {
    display: none;
  }

  /* Dört adım alt alta 240 px yer kaplıyordu; ikili ızgarada hepsi görünür
     kalırken yükseklik yarıya iner ve kaydırma gerekmez. */
  .task-path__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .task-path__link {
    padding: 8px 10px;
  }

  .task-path__copy span {
    display: none;
  }

  .task-path__number {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/*
 * Ekleme penceresindeki yönlendirme notu.
 *
 * Keşif, teklif ve iş emri iki aşamalı kayıtlar: pencerede yalnız künye
 * bilgisi alınır, kalemler kayıt açıldıktan sonra detay ekranında girilir.
 * Bu bilgi silik altyazıda kayboluyordu; kullanıcı "kalemleri nereye
 * gireceğim" sorusuyla baş başa kalıyordu.
 */
.modal__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 4px;
  padding: 11px 14px;
  border: 1px solid var(--blue-soft-border, #bfdbfe);
  border-radius: var(--r-input);
  background: var(--blue-soft, #eff6ff);
  color: #1e3a5f;
  font-size: 12.5px;
  line-height: 1.55;
}

.modal__note strong {
  font-weight: 650;
}

.modal__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal__note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
}

/* Aynı kartta liste ile ekleme formu art arda geldiğinde nerede bittiği,
   nerede başladığı belli olmuyordu. */
.card__body--divided {
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
}

.card__subtitle {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

/*
 * Aranabilir açılır liste (combobox).
 *
 * Yerel <select> form değeri olarak kalır ama görünmez; kullanıcı yazdıkça
 * eşleşen kayıtlar panelde listelenir. Önceden arama kutusu <select>'in
 * seçeneklerini gizliyordu ve liste kapalı olduğu için hiçbir şey olmuyormuş
 * gibi görünüyordu.
 */
.combo {
  position: relative;
}

.combo__native {
  position: absolute;
  /* Formların çoğunda select'e satır içi width:100% yazılı; o kural bunu
     ezince gizli select sayfayı yatayda taşırıyordu (tam sayfa formlarda
     1000px'i aşan kaydırma). Sınıf yalnız JS combobox'ı kurunca eklenir,
     JS yoksa select normal genişliğinde kalır. */
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.combo__input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.combo__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.combo__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  box-shadow: var(--shadow-pop);
}

.combo__option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.combo__option.is-active {
  background: var(--gray-soft);
}

.combo__option.is-selected {
  font-weight: 650;
  color: var(--primary-text);
}

.combo__empty {
  padding: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

/* İş emrinden projeye yazma kısayolları: hakediş ve maliyet aynı işin
   parçası, ayrı ekrana gidip proje aramak zorunda kalınmasın. */
.wo-quick-actions {
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-input);
  background: var(--gray-soft);
}

/* Saha fotoğrafı yükleme — kart içinde tek satır, dar ekranda alt alta. */
.pj-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pj-upload input[type="file"] { flex: 1 1 180px; font-size: 12px; }
.pj-upload input[type="text"] { flex: 1 1 140px; }

/* İş emri saha fotoğrafları — küçük ızgara, tıklayınca tam boy. */
.wo-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}

/*
 * Fotoğraf yokken görünen açıklama, ızgaranın 78 px'lik ilk sütununa
 * sıkışıp beş satıra bölünüyordu: "Bu iş emrinde / fotoğraf yok. / Usta
 * mobilden / ya da buradan / ekleyebilir." — yanında bomboş yer dururken.
 * Metin bir küçük resim değil; satırın tamamını kaplamalı.
 */
.wo-photos > p {
  grid-column: 1 / -1;
}

.wo-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Hakediş formunda iş emri seçimi.
   İç kaydırma YOK: kutu modalın yapışkan alt barının arkasına girdiğinde
   fare tekerleği paneli değil listeyi kaydırıyor ve satırlara ulaşılamıyordu.
   Görünür satır sayısı JS'te sınırlanır, gerisi aramayla daraltılır. */
.wo-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--canvas);
}

.wo-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-700, #15803d);
  background: var(--green-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.wo-chip:hover { border-color: currentColor; }

.wo-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--surface);
}

.wo-picker__search input {
  border: 0;
  padding: 9px 0;
  width: 100%;
  background: transparent;
  font: inherit;
}

.wo-picker__search input:focus { outline: none; }

.wo-picker__list {
  display: grid;
  gap: 2px;
}

.wo-picker__item {
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.wo-picker__item:hover { background: var(--surface); }

/* Dosya seçme alanı — ham input yerine sürükle-bırak kabul eden geniş hedef.
   Gerçek input görünmez ama erişilebilir kalır (klavye ve ekran okuyucu). */
.filedrop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  padding: 12px 14px;
  min-height: 56px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--canvas);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.filedrop:hover,
.filedrop:focus-within { border-color: var(--green); background: var(--surface); }

.filedrop.is-dragging {
  border-color: var(--green);
  border-style: solid;
  background: var(--green-soft);
}

.filedrop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filedrop__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  color: var(--green);
  background: var(--green-soft);
}

.filedrop__text { display: grid; gap: 2px; min-width: 0; }
.filedrop__text strong { font-size: 13px; overflow-wrap: anywhere; }
.filedrop__text small { font-size: 11px; color: var(--muted); }
.filedrop.is-filled { border-style: solid; border-color: var(--green); }

.pj-upload__caption { flex: 1 1 160px; }

/* Maliyet kutusu tıklanabilir olduğunda: bağlantı gibi değil kutu gibi dursun,
   ama tıklanabilirliği belli olsun. */
.pj-cost-cell--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.pj-cost-cell--link:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

.pj-cost-cell--link .kpi__label { display: flex; align-items: center; gap: 4px; }

/* Şablon kalemi: kâr göstergesi ve sıra düğmeleri. */
.text-green { color: var(--green); }
.text-red { color: var(--red); }

.quote-template-item__profit {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.quote-template-item__profit p { margin: 0; font-size: 14px; }

/* Hakediş formunda puantaj özeti kutusu. */
.payable-timesheet {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--canvas);
}

.payable-timesheet > div { flex: 1; min-width: 200px; }
.payable-timesheet p { margin: 2px 0 0; }

/* Müşteri puanı — yıldızlar. Radyo düğmeleri görünmez ama klavyeyle
   erişilebilir kalır; yıldızın kendisi etiketin içindedir.

   Boş yıldız yalnız kontur, dolu yıldız içi dolu: ince konturlu beş yıldız
   birbirinden ayırt edilemiyordu. */
.rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rating--lg { gap: 8px; }

.rating__star {
  display: inline-flex;
  color: var(--border);
  cursor: pointer;
  transition: color .14s ease, transform .12s ease;
}

.rating__star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__star.is-on { color: var(--orange); }
.rating__star.is-on svg { fill: currentColor; }
.rating--lg .rating__star:hover { transform: scale(1.12); }
.rating__star:focus-within { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* Fareyle gezerken o yıldıza kadar önizleme: seçmeden önce ne olacağı görünsün. */
.rating--lg.is-hovering .rating__star { color: var(--border); }
.rating--lg.is-hovering .rating__star svg { fill: none; }
.rating--lg.is-hovering .rating__star.is-preview { color: var(--orange); }
.rating--lg.is-hovering .rating__star.is-preview svg { fill: currentColor; }

.rating__label {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.rating__label strong { color: var(--primary); font-size: 15px; }
.rating-form .btn--block { justify-content: center; }

.rating--sm { gap: 1px; }
.rating--sm .rating__star { cursor: default; }
.rating--sm .rating__star:hover { transform: none; }

/*
 * Rozet uzun metinle satırını birkaç piksel taşırıyordu; kutusunda kalsın.
 *
 * `max-width` rozet **kutusunu** daraltıyordu ama içindeki yazıyı değil:
 * `white-space: nowrap` yüzünden metin pilin yuvarlak kenarını aşıp
 * hücreye taşıyor, hücrenin `overflow: hidden`ı da onu düz bir çizgiyle
 * kesiyordu. Personel listesinde "Operasyon Müdürü" ve "Firma Yöneticisi"
 * rozetleri tam da böyle, ortadan bıçakla kesilmiş gibi görünüyordu.
 * Taşma artık rozetin kendi içinde kırpılır; pilin biçimi bozulmaz.
 */
.badge {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/*
 * Kısalma üç noktayla anlatılır.
 *
 * `text-overflow` esnek kutuda çalışmaz: rozet `inline-flex` olduğu için
 * metin anonim bir esnek öğedir ve üç nokta hiç çizilmiyordu — kelime
 * harfin ortasından bıçakla kesiliyor, kullanıcı yazının devamı olduğunu
 * anlamıyordu. Yalnız **çocuk elemanı olmayan** (nokta, ikon taşımayan)
 * rozetler blok kutuya çevrilir; ikonlu rozetlerin dikey hizası esnek
 * kutuya bağlı olduğu için onlara dokunulmaz.
 */
.badge:not(:has(*)) {
  display: inline-block;
  line-height: 22px;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.badge--pill:not(:has(*)) {
  line-height: 24px;
}

.badge--lg:not(:has(*)) {
  line-height: 26px;
}

/*
 * Proje bölüm şeridi.
 *
 * Şerit KPI'ların hemen altında durur ve sayfayla birlikte kaydırılmaz —
 * kullanıcı uzun bir metraj tablosunun ortasındayken bölüm değiştirebilsin.
 */
/*
 * Bölüm şeridi **yapışkan değil**.
 *
 * Yapışkanken sayfa kaydırıldıkça kartların ortasından geçiyor ve satırı
 * ikiye kesiyordu: "İE-2026-0474 · Son neden…" satırının yarısı şeridin
 * altında kalıyordu. Tam genişlik ve gölge bandın *ne olduğunu* anlattı ama
 * kesme sorununu çözmedi — yapışkan bir çubuk altındaki içeriği her zaman
 * keser, bu kaçınılmaz.
 *
 * Şerit sayfanın en üstünde, KPI'ların hemen altında duruyor; bölüm
 * değiştirmek için oraya dönmek bir kaydırma sürüyor. Kesilen satır bundan
 * pahalı. Mimar iki kez kusur olarak işaretledi.
 */
.pj-tabs {
  margin: 0 calc(var(--page-pad) * -1) 4px;
  padding: 0 var(--page-pad);
  background: var(--canvas);
  border-bottom: 1px solid var(--border-soft);
}

.pj-tabs .tab {
  padding: 12px 2px 13px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.pj-tabs .tab svg {
  opacity: 0.65;
}

.pj-tabs .tab.is-active svg {
  opacity: 1;
}

/*
 * `.card` ve `.pj-work-orders` display:flex/grid taşıdığı için tarayıcının
 * `[hidden] { display: none }` kuralını yeniyorlar; sekme değişince kart
 * ekranda kalıyordu. Gizleme burada açıkça yazılır.
 */
[data-pj-tab][hidden],
.grid--main-rail > .stack[hidden] {
  display: none !important;
}

/* Sağ ray gizlendiğinde ana sütun boşluğu kaplasın, dar kalmasın. */
.grid--main-rail:has(> .stack[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Günlük şantiye raporları tablosu.
 *
 * Kart 320 px'lik yan raydan geniş kolona alındı; ama `.table tbody td`
 * genelinde `white-space: nowrap` olduğu için 90 karakterlik "Yapılan iş"
 * hücresi tabloyu hâlâ 893 px'e zorluyor ve kart içinde yatay kaydırma
 * bırakıyordu. Delil niteliğindeki iki sütun (yapılan iş, engel) tek
 * bakışta okunmalı: kısa sütunlar sabit genişlikte, uzun metin sarar.
 */
/*
 * Sabit yerleşim yalnız tablet ve üstünde. 390 px'te sabit sütun sarmayı
 * zorluyor ve tarih "3 / 1 / T / e / m" diye harf harf alt alta iniyordu;
 * telefonda tablo diğer tablolar gibi yatay kayar.
 */
@media (min-width: 768px) {
  .pj-daily {
    width: 100%;
    table-layout: fixed;
  }

  .pj-daily th:nth-child(1),
  .pj-daily td:nth-child(1) {
    width: 15%;
  }

  .pj-daily th:nth-child(2),
  .pj-daily td:nth-child(2) {
    width: 15%;
  }

  .pj-daily th:nth-child(3),
  .pj-daily td:nth-child(3) {
    width: 8%;
  }

  .pj-daily th:nth-child(4),
  .pj-daily td:nth-child(4) {
    width: 37%;
  }

  .pj-daily th:nth-child(5),
  .pj-daily td:nth-child(5) {
    width: 25%;
  }

  .pj-daily tbody td:nth-child(2),
  .pj-daily tbody td:nth-child(4),
  .pj-daily tbody td:nth-child(5) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /*
   * Engel rozeti serbest metin taşır (60 karaktere kadar) — durum sözcüğü
   * değil. Tek satıra zorlanınca "Beton gelmedi, 4 kişi öğle…" diye
   * kesiliyordu; oysa engelin ne olduğu bu tablonun tek sebebi. Sarsın.
   */
  .pj-daily tbody td:nth-child(5) .badge {
    height: auto;
    padding: 3px 8px;
    white-space: normal;
    line-height: 16px;
    text-align: left;
  }
}

/*
 * Menü grup başlığı.
 *
 * Yirmi bir madde tek blok hâlinde okunuyordu; başlıklar listeyi beş kısa
 * öbeğe böler. Kenar çubuğu daraltıldığında başlık yerine ince bir çizgi
 * kalır — ikon şeridinde metin yer kaplamasın ama grup sınırı görünsün.
 */
.nav__group {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 1200px) {
  body.is-collapsed .nav__group {
    height: 0;
    margin: 10px 10px 8px;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
  }
}

/*
 * Mobilde dokunma alanı.
 *
 * Sahadaki usta telefonu eldivenle kullanıyor. Formların üstündeki "geri
 * dön" bağlantısı 21 piksel yüksekliğindeydi ve 24 ekranda parmakla
 * ıskalanıyordu. Sektör ölçütü (Housecall Pro, Jobber) en az 40 piksel.
 * Yalnız mobil kırılımda büyütülür; masaüstü yerleşimi değişmez.
 */
@media (max-width: 640px) {
  .linkbtn,
  .card__tools .linkbtn,
  .page__actions .linkbtn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .iconbtn {
    min-width: 40px;
    min-height: 40px;
  }

  .tab {
    min-height: 44px;
  }

  /* Düğmeler de aynı ölçüte tabi; modal altındaki "Vazgeç" 21px kalıyordu. */
  .btn,
  .btn--sm {
    min-height: 40px;
  }

  /*
   * Gantt çubuğu iş emrini açan bağlantıdır, süs değil. Telefonda 30px
   * yükseklikle ıskalanıyordu.
   */
  .wo-gantt__bar {
    min-height: 40px;
  }

  .wo-gantt__row {
    min-height: 44px;
  }
}

/*
 * "Sırada ne var" — modül listelerinde sıradaki adım.
 *
 * İş emri detayında işe yarayan blok (bkz. work-orders.css `.wo-next`) modül
 * listelerinde yoktu: kullanıcı Stok ya da Satın Alma ekranını açıyor, tablo
 * görüyor ama ne yapması gerektiğini bilmiyordu. Rehber ("Nasıl kullanılır?")
 * genel anlatır; bu blok **o anki veriye** bakıp tek cümle söyler:
 * "3 kalem kritik seviyenin altında" gibi.
 */
.next-step {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  background: var(--primary-soft);
}

.next-step--warn {
  border-color: var(--orange-soft);
  border-left-color: var(--orange);
  background: var(--orange-soft);
}

.next-step--warn .next-step__icon {
  color: var(--orange);
}

.next-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  color: var(--primary-text);
}

.next-step__text {
  min-width: 0;
  flex: 1;
}

.next-step__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.next-step__body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .next-step {
    flex-wrap: wrap;
  }

  .next-step .btn {
    width: 100%;
  }
}

/*
 * Sahadan gelen mesai — onay bekleyenler kartı.
 *
 * Puantaj ekranının en üstünde durur. Bekleyen mesai onaylanmazsa o günün
 * işçiliği hiçbir projenin maliyetine yazılmaz; turuncu şerit bunu söyler.
 */
.field-pending {
  border-left: 3px solid var(--orange);
}

.field-pending .card__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-pending .cell-price {
  width: 86px;
}

/*
 * Geri bağlantısı ("← Satış Kataloğu").
 *
 * 15 görünümde kullanılıyordu ama yalnız üç modül CSS'inde tanımlıydı
 * (automation, quote-templates, quick-quote). O dosyaları yüklemeyen dokuz
 * sayfada stilsiz kalıyor, ok metinden kopup alt satıra düşüyordu. Tanım
 * her sayfada yüklenen app.css'e alındı; modül dosyalarındaki kopyalar
 * zararsız (aynı kurallar) ama artık gereksiz.
 */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.backlink:hover {
  color: var(--primary-text);
}

/*
 * Sol menü alt başlıkları.
 *
 * Menü modül adını gösteriyordu ama modülün **içinde ne olduğunu**
 * göstermiyordu: stok sayımına, satın alma şablonlarına, çeklere ancak
 * modüle girip ekrandaki sekmeyi bulunca ulaşılıyordu. Alt liste yalnız o
 * modüldeyken açık gelir; kapalıyken menü eskisi kadar sade.
 *
 * `<details>` kullanıldı: JavaScript kapalıyken de çalışır, klavyeyle
 * gezilebilir ve `open` durumu sunucudan gelir.
 */
.nav__tree {
  display: block;
}

.nav__item--parent {
  cursor: pointer;
  list-style: none;
  /* Ok en sağa; başlık ile arasına esneme payı. */
  justify-content: flex-start;
}

.nav__item--parent::-webkit-details-marker {
  display: none;
}

.nav__item--parent > span {
  flex: 1;
  min-width: 0;
}

.nav__item--parent > svg:last-child {
  flex: none;
  color: var(--muted);
  transition: transform var(--fast);
}

.nav__tree[open] > .nav__item--parent > svg:last-child {
  transform: rotate(180deg);
}

.nav__sub {
  display: flex;
  flex-direction: column;
  /* Ana maddenin ikonuyla hizalı; girinti hiyerarşiyi taşır. */
  margin: 2px 0 6px 22px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.nav__subitem {
  display: flex;
  align-items: center;
  /* Dokunma alanı 36 px: alt maddeler ikincil, ama parmakla da açılıyor. */
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-input);
  color: var(--muted);
  font-size: 13px;
  transition: background var(--fast), color var(--fast);
}

.nav__subitem:hover {
  background: var(--gray-soft);
  color: var(--text);
}

.nav__subitem.is-active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
}

/*
 * Ekip kartları.
 *
 * Ekip listesi tablo değil kart: satır sayısı az (bir firmada 3–10 ekip) ve
 * asıl bilgi bağlantı sayıları — üye, proje, açık iş. Tabloda bu üç rakam
 * sütun başlığı okumadan anlaşılmıyordu.
 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}

.team-card {
  display: block;
  padding: 18px;
  transition: border-color var(--fast), box-shadow var(--fast);
}

.team-card:hover {
  border-color: var(--primary);
}

.team-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card__stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.team-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
}

.team-card__stat b {
  color: var(--text);
  font-weight: 600;
}

/*
 * Tam sayfa form kabuğu.
 *
 * Bu formlar modal olarak tasarlandı; tam sayfa açılınca kart 1160 px
 * genişliyor ve alanlar onunla esniyordu. Ölçüm: e-posta kutusu 1092 px,
 * çek yönü seçimi 1118 px — tek satırlık girdide bu genişlik okunmuyor.
 * Aynı taramada 40 sayfada içerik altında 478–1004 px boş alan çıktı.
 *
 * Form okunur genişlikte kalır; boşluk zincir sütununa gider.
 */
.form-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--form-max, 760px)) minmax(280px, 340px);
  gap: var(--gap);
  align-items: start;
}

/* Zincir metni olmayan formlar ortalanır; sağda boş sütun bırakılmaz. */
.form-shell--solo {
  grid-template-columns: minmax(0, var(--form-max, 760px));
  justify-content: center;
}

.form-shell__side {
  position: sticky;
  top: 88px;
}

/*
 * Alanlar kartla birlikte esnemesin. `settings-field--wide` bir satırın
 * tamamını kaplar ama içindeki girdi okunur genişlikte kalır.
 */
.form-shell .field,
.form-shell .select,
.form-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-shell select {
  max-width: 100%;
}

.form-chain {
  padding: 16px 18px;
}

.form-chain__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.form-chain__head svg {
  color: var(--primary-text);
}

.form-chain__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.form-chain__list li {
  display: flex;
  gap: 10px;
}

.form-chain__no {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
}

.form-chain__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.form-chain__body {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 1px;
}

@media (max-width: 1100px) {
  .form-shell,
  .form-shell--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Dar ekranda zincir formun altına iner; yapışkanlık anlamını yitirir. */
  .form-shell__side {
    position: static;
  }
}

/*
 * Tek satırlık girdi genişliği.
 *
 * Ölçüldü: form ekranlarında e-posta kutusu 1092 px, çek yönü seçimi 1118 px
 * oluyordu. Bu genişlikte göz satır başını kaybediyor ve kutu boş görünüyor —
 * kullanıcının "kayma / görünümsel hata" dediği şeyin bir parçası buydu.
 *
 * Kural yalnız **form ızgarası** içindeki tek satırlık alanlara uygulanır;
 * kart başlığındaki arama kutusu ve tablo içi girdiler kendi kabına göre
 * zaten dar. Çok satırlı alan (textarea) kapsam dışı: metin blokları geniş
 * olabilir, hatta olmalı.
 */
.settings-grid .field,
.settings-grid > div > input,
.settings-grid > div > select,
.settings-field--wide > .field,
.settings-field--wide > input,
.settings-field--wide > select {
  max-width: 640px;
}

/* Yan yana iki alanın ızgara payını bozmasın. */
.settings-grid .field {
  width: 100%;
}

/*
 * Birleşik kutu (combobox) ve modül ızgaralarındaki tek satırlık alanlar.
 *
 * `.combo` kendi sarmalayıcısı olduğu için yukarıdaki kural onu yakalamıyordu;
 * "Proje ara…" kutusu 1118 px kalıyordu. Aynı şekilde satın alma şablonundaki
 * açıklama alanı kendi ızgarasında geniş kalıyordu.
 */
.settings-field--wide > .combo,
.procurement-meta__wide > .field {
  max-width: 640px;
}

/*
 * Arama ipuçları — boş arama ekranı.
 *
 * Ölçüldü: sayfa ekranın yalnız %13'ünü dolduruyordu; başlık, bir kutu ve
 * bir düğme. Ne aranabileceği yazmıyordu. Kartlar tıklanabilir: örnekle
 * denemek, ne bulunacağını göstermenin en hızlı yolu.
 */
.search-hints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.search-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  transition: border-color var(--fast);
}

.search-hint:hover {
  border-color: var(--primary);
}

.search-hint__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.search-hint__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.search-hint__body {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.search-hint__body b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}

/*
 * Geri bağlantısının dokunma alanı.
 *
 * Form kabuğuna geçince bu bağlantı 21 px yüksekliğe düştü ve `gorsel.py`
 * 13 mobil ekranda yakaladı. Masaüstünde fare ile 21 px sorun değil ama
 * telefonda parmakla ıskalanıyor — hele şantiyede eldivenle. Yükseklik
 * yalnız dar ekranda artırılır; masaüstünde ikincil bağlantı ince kalır.
 */
@media (max-width: 640px) {
  .backlink {
    min-height: 44px;
    align-items: center;
    /* Sol kenar hizası bozulmasın diye yalnız dikey pay. */
    padding: 0;
  }
}

/*
 * Form ızgaralarında sol kenar hizası.
 *
 * Modül ızgaraları `grid-column: span 2` kullanıyordu. `2fr 1fr 1fr` gibi bir
 * ızgarada iki sütun kaplayan bir alan, akışa göre **1. ya da 2. sütundan**
 * başlıyor; sonuç ölçüldü: teklif şablonu formunda **7 farklı sol kenar**.
 * Göz bunu "kaymış" görüyor — mimarın şikâyet ettiği şey buydu.
 *
 * `1 / -1` her zaman ilk sütundan başlar ve satırı doldurur. Geniş alan
 * artık daima sola hizalı; ızgara iki-üç düzenli sütuna oturuyor.
 *
 * Kural modül CSS'lerinden sonra yüklenen app.css'te; `!important`
 * gerekmiyor çünkü seçici özgüllüğü aynı ve sıra bizden yana.
 */
.quote-template-meta__wide,
.quote-template-meta__half,
.quick-quote-meta__wide,
.procurement-meta__wide,
.automation-meta__description,
.settings-field--wide {
  grid-column: 1 / -1;
}

/*
 * Geniş alanın içindeki tek satırlık girdi yine okunur genişlikte kalır;
 * satırı kaplamak alanın işi, girdinin değil.
 */
.quote-template-meta__wide > .field,
.quick-quote-meta__wide > .field,
.procurement-meta__wide > .field {
  max-width: 640px;
}

/*
 * Öğretici blok kapatma düğmesi.
 *
 * Blok dokuz ekranda çıkıyor ve her ziyarette çiziliyordu; mobilde ilk
 * ekranın yarısını kaplıyordu. Bir kez öğretir, yirminci ziyarette engeldir.
 * Silinmedi — yeni kullanıcı ilk girişte görmeli; kapatma modül bazında
 * `localStorage`a yazılıyor ve "Nasıl kullanılır?" düğmesinden geri geliyor.
 */
/*
 * `hidden` özniteliği `display: grid` tarafından eziliyordu: blok gizli
 * işaretleniyor ama ekranda duruyordu. Tarayıcının `[hidden]` varsayılanı
 * `display: none`dır ve sınıf seçicisi ondan daha güçlüdür — açıkça yazmak
 * şart. (İlk doğrulamam `e.hidden` özniteliğine bakıyordu; öznitelik doğru,
 * görünüm yanlıştı. Ölçüt görünürlük olmalı.)
 */
.task-path[hidden] {
  display: none;
}

/*
 * Kapatma düğmesi son adım kartının **üstüne biniyordu**.
 *
 * Şerit tam genişlikte bir ızgara; son adım kartı sağ kenara kadar
 * uzanıyor, mutlak konumlu ✕ ise aynı köşede duruyordu. Ekranda kartın sağ
 * üst köşesinde iki denetim üst üste görünüyor, ✕ kartın "Hakedişe aktar /
 * Onayla" başlığıyla çakışıyordu (dokuz ekranda birden). Şeride sağda bir
 * koridor açıldı; düğme o koridorda durur, kartlara değmez.
 */
.task-path {
  position: relative;
  padding-right: 48px;
}

.task-path__close {
  position: absolute;
  top: 10px;
  right: 8px;
  display: grid;
  place-items: center;
  /* Dokunma alanı 32 px: ikincil bir eylem ama parmakla da basılıyor. */
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}

.task-path__close:hover {
  background: var(--gray-soft);
  color: var(--text);
}

/*
 * Tarih aralığı seçicisinin adı.
 *
 * Seçici yalnız takvim ikonu ve iki tarih kutusuydu; ekranda "dönem"
 * kelimesi hiç geçmiyordu ve rehberdeki "Dönemi seçin" adımının karşılığı
 * bulunamıyordu. Kavramın adı yazılı olmalı.
 */
.daterange__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 4px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Dar ekranda etiket yer kaplamasın; ikon zaten anlamı taşıyor. */
  .daterange__label {
    display: none;
  }
}

/* Profil — rol ve yetki listesi okunabilir cümleler halinde. */
.profile-role + .profile-role { margin-top: 12px; }

.profile-perms {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  max-height: 320px;
  overflow-y: auto;
}

/*
 * Filtre kutusu etiketi.
 *
 * Filtreler etiketsizdi: kutu boşken içindeki "Öncelik" yazısı etiket görevi
 * görüyor, ama bir değer seçilince kutu "Yüksek" yazıyor ve neyin filtresi
 * olduğu kayboluyordu. Etiket artık kutunun solunda kalıcı duruyor; satır
 * yüksekliği değişmiyor.
 */
.filter-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.filter-field > span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.filter-field .select { min-width: 0; }

/* Dar ekranda etiket üste geçsin, kutular ezilmesin. */
@media (max-width: 720px) {
  .filter-field { flex-direction: column; align-items: flex-start; gap: 3px; }
  .filter-field .select { width: 100%; }
}

/*
 * Modal parçası tam sayfa açıldığında modal kabuğu kaldırılır.
 *
 * Bu formlar hem modal hem tam sayfa açılıyor. Tam sayfada üstte "×", altta
 * "Kapat" ve zaten açık olan sayfaya götüren "Sayfada Aç" düğmesi duruyordu:
 * kullanıcı neyi kapatacağını, nereye gideceğini anlamıyordu. Aynı parça iki
 * bağlamda doğru görünsün diye kapsayıcıya göre gizleniyor.
 */
.form-shell [data-close],
.wo-page-detail [data-close],
.form-shell [data-modal-only],
.wo-page-detail [data-modal-only] {
  display: none;
}

/*
 * Alt çubuk yalnız **içi boşaldıysa** gizlenir.
 *
 * İlk denemede tamamı gizlendi: "Yeni Müşteri" ve "Yeni İş Emri" ekranları
 * kaydetme düğmesiz kaldı — ekran görüntüsüyle yakalandı. Kaydet düğmesi ya
 * da gerçek bir bağlantı varsa çubuk durur.
 */
.form-shell .modal__foot:not(:has(button[type="submit"], input[type="submit"], a:not([data-modal-only]))),
.wo-page-detail .modal__foot:not(:has(button[type="submit"], input[type="submit"], a:not([data-modal-only]))) {
  display: none;
}

/*
 * Alt çubuğun tamamı gizlenemez: form kabuğunda **Kaydet** düğmesi orada
 * duruyor. İlk denemede tamamı gizlendi ve "Yeni Müşteri" ekranı kaydetme
 * düğmesiz kaldı — ekran görüntüsüyle yakalandı. Yalnız kapatma düğmeleri
 * gizlenir; iş emri detayında alt çubukta zaten yalnız onlar var.
 */

/* Modal başlığı tam sayfada sayfa başlığı gibi okunmalı. */
.wo-page-detail .modal__title,
.form-shell .modal__title {
  font-size: 22px;
  line-height: 1.25;
}

/*
 * İlk gün kılavuzu — yalnız hiç proje yokken panonun en üstünde.
 *
 * Ürün müşteriye özel fork olarak kuruluyor; her müşteri boş başlıyor ve
 * boş panoda nereden başlayacağını söyleyen tek cümle yoktu.
 */
.ilkgun {
  margin-bottom: var(--gap);
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 62%);
}

.ilkgun__title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.ilkgun__body {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.ilkgun__list {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ilkgun__step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}

.ilkgun__no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 700;
}

.ilkgun__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.ilkgun__step-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
}

.ilkgun__step-body {
  font-size: 12px;
  color: var(--muted);
}

.ilkgun__foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .ilkgun__step { flex-wrap: wrap; }
  .ilkgun__step .btn { width: 100%; }
}

/* Arama sonucu satırı — asıl içerik solda. */
.search-hit {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/*
 * Modal içinde kaydırma arka plana zincirlenmesin.
 *
 * Uzun bir modalin sonuna gelince kaydırma hareketi arkadaki listeye geçiyor
 * ve kullanıcı modalı kapattığında bambaşka bir yerde buluyor kendini —
 * telefonda en görünür hâliyle. `contain` zinciri keser.
 */
.modal__panel,
.modal__body {
  overscroll-behavior: contain;
}

/* Düzenlenemeyen künye alanı (ör. iş emrinin projesi). Alan gibi görünür
   ama tıklanmaz — kullanıcı değiştirmeye çalışıp boşuna uğraşmasın. */
.field--readonly {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 0 11px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--canvas);
  font-size: 13px;
}

/*
 * Grafiğin son X ekseni etiketi viewBox'ın 4 px dışına düşüyor (etiket
 * merkezi 320, viewBox 330, sağ dolgu 10 birim). SVG'nin varsayılan
 * `overflow: hidden` değeri son harfi kesiyordu: "5 Ağu" → "5 Ağı".
 * Kart dolgusu 20 px, taşan 4 px'i sorunsuz alıyor. 390 px'e özgü değil;
 * 1440 px'te de aynı kesilme oluyordu.
 */
svg[role="img"] {
  overflow: visible;
}

@media (max-width: 640px) {
  /* Kimlik sütunu 356 px'in 351'ini yiyordu: tabloda tek sütun görünüyor,
     kalan yedi sütun için 900 px yatay kaydırmak gerekiyordu. Sınırlanınca
     ikinci sütun kenardan görünüyor ve kaydırılabilirlik anlaşılıyor. */
  .table-wrap > .table td .cell-media {
    max-width: 200px;
  }
}