/* =============================================================================
   Muhasebe Yatırım — tasarım sistemi (katman 2: düzen ve bileşenler)
   theme.css içindeki token'ları kullanır; burada hiçbir ham renk yoktur.
   ========================================================================== */

@layer layout, components, responsive, print;

@layer layout {
  /* --- Uygulama kabuğu -------------------------------------------------- */
  .shell {
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    overflow: hidden;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-5) var(--space-3) var(--space-3);
    background: var(--surface-sidebar);
    color: var(--ink);
    border-right: 1px solid var(--line);
  }

  .main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  .topbar {
    flex: none;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--content-gutter);
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
    z-index: 3;
  }

  .topline {
    display: flex;
    width: 100%;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  #content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-6) var(--content-gutter) var(--space-10);
    scrollbar-gutter: stable;
  }

  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  .workspace.is-split {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.92fr);
  }

  .master-pane {
    min-width: 0;
  }

  /* Detay paneli açıkken ana liste daralır: ikincil sütunlar gizlenir ki
     kalan sütunlar kırpılmadan okunabilsin. */
  .is-split .vehicle-list th:nth-child(2),
  .is-split .vehicle-list td:nth-child(2),
  .is-split .vehicle-list th:nth-child(4),
  .is-split .vehicle-list td:nth-child(4),
  .is-split .people-list th:nth-child(3),
  .is-split .people-list td:nth-child(3) {
    display: none;
  }

  .is-split th,
  .is-split td {
    padding: var(--space-3);
  }

  .is-split .vehicle-mark,
  .is-split .person-cell .avatar {
    display: none;
  }
}

@layer components {
  /* --- Kenar çubuğu ----------------------------------------------------- */
  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--ink-strong);
  }

  .sidebar > div:first-child {
    padding: var(--space-1) var(--space-3) var(--space-6);
  }

  .sidebar > div:first-child small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    color: var(--ink-muted);
  }

  .sidebar > div:first-child small.release {
    margin-top: var(--space-1);
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
  }

  .nav-section-label {
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--ink-muted);
  }

  .sidebar nav {
    display: grid;
    gap: var(--space-1);
  }

  .sidebar nav button {
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 42px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font-size: var(--text-sm);
    font-weight: 550;
    text-align: left;
  }

  .sidebar nav button:hover:not(:disabled) {
    background: var(--surface-sunken);
    color: var(--ink-strong);
  }

  /* Seçili sayfa: yeşil yalnız ince sol ray ve metin rengi olarak görünür. */
  .sidebar nav button.selected {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--brand);
  }

  .sidebar nav button.selected .nav-icon {
    color: var(--brand);
  }

  .nav-icon {
    display: inline-flex;
    flex: none;
    width: 18px;
  }

  .nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sidebar .account {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--space-1);
  }

  .sidebar .account > div:first-child {
    position: relative;
    min-height: 40px;
    padding: 0 var(--space-2) var(--space-3) 46px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--ink-strong);
  }

  .sidebar .account small {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--ink-muted);
  }

  .sidebar .account button {
    justify-content: flex-start;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    font-weight: 500;
  }

  .sidebar .account button:hover:not(:disabled) {
    background: var(--surface-sunken);
    color: var(--ink-strong);
  }

  .avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .sidebar .account .avatar {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* --- Üst çubuk -------------------------------------------------------- */
  .page-heading {
    min-width: 0;
  }

  .page-kicker {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--ink-muted);
  }

  .page-heading small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  .actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .report-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: var(--text-xs);
  }

  .company-strip {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--content-gutter);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
    margin: 0;
  }

  .company-strip select {
    width: auto;
    max-width: 60%;
    margin: 0;
    min-height: 36px;
    font-size: var(--text-xs);
  }

  /* --- Bölüm başlıkları -------------------------------------------------- */
  .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .section-kicker {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--ink-muted);
  }

  .scope-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  .scope-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--positive);
  }

  /* --- Özet kartları ---------------------------------------------------- */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .stat {
    min-width: 0;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
  }

  .stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .stat .stat-heading small {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--ink-soft);
  }

  .stat-heading .nav-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--ink-soft);
  }

  .stat-heading .nav-icon svg {
    width: 14px;
    height: 14px;
  }

  .stat strong {
    display: block;
    font-size: clamp(1.05rem, 1.5vw, 1.5rem);
    font-weight: 640;
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    color: var(--ink-strong);
    /* Tutarlar bölünmez: rakam ortasından satır kesmek finansal veriyi bozar. */
    white-space: nowrap;
  }

  .stat-caption {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-muted);
  }

  /* Değer yönü renkle değil, işaretle de anlatılır. */
  .is-negative {
    color: var(--negative);
  }

  .trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-2xs);
    font-weight: 650;
  }

  .trend.up {
    color: var(--positive);
  }

  .trend.down {
    color: var(--negative);
  }

  /* --- Paneller --------------------------------------------------------- */
  .panel {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
  }

  .panel > h3 {
    margin-bottom: var(--space-4);
  }

  .panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) 0;
  }

  .panel-heading h2 {
    font-size: var(--text-sm);
  }

  .panel-heading > .nav-icon {
    color: var(--ink-muted);
  }

  .panel-footnote {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: var(--text-2xs);
    line-height: var(--leading-loose);
    color: var(--ink-muted);
  }

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
  }

  /* --- Listeler --------------------------------------------------------- */
  .vehicle-list,
  .people-list {
    padding: 0;
    overflow: hidden;
  }

  .list-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
  }

  .list-heading h2 {
    font-size: var(--text-sm);
  }

  .list-heading small {
    font-size: var(--text-xs);
  }

  .count-badge {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    font-size: var(--text-2xs);
    color: var(--ink-soft);
    white-space: nowrap;
  }

  /* Liste başlığında arama solda, araçlar sağda durur. */
  .list-search-row {
    gap: var(--space-3);
    background: var(--surface-raised);
  }

  .list-tools {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .list-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
  }

  .list-search input {
    margin: 0;
    min-height: 36px;
    padding-left: var(--space-8);
    font-size: var(--text-xs);
    background: var(--surface-card);
  }

  /* Arama ikonu DOM'da bir <span class="nav-icon"> olarak gelir. */
  .list-search > .nav-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    pointer-events: none;
  }

  .list-search > .nav-icon svg {
    width: 15px;
    height: 15px;
  }

  .list-tools select {
    width: auto;
    margin: 0;
    min-height: 36px;
    font-size: var(--text-xs);
  }

  .list-result-count {
    margin-left: auto;
    font-size: var(--text-2xs);
    color: var(--ink-muted);
  }

  /* Detay açıkken liste daralır: arama tam satır olur, araçlar alta iner. */
  .is-split .list-search-row {
    flex-wrap: wrap;
  }

  .is-split .list-search {
    flex-basis: 100%;
  }

  .is-split .list-tools {
    width: 100%;
  }

  .is-split .list-result-count {
    margin-left: 0;
    margin-right: auto;
  }

  .table-wrap {
    overflow: auto;
    max-height: 62vh;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    text-align: left;
  }

  th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    color: var(--ink);
  }

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

  tbody tr {
    transition: background var(--duration-fast) var(--ease);
  }

  .vehicle-list tbody tr,
  .people-list tbody tr {
    cursor: pointer;
  }

  .vehicle-list tbody tr:hover,
  .people-list tbody tr:hover {
    background: var(--surface-raised);
  }

  .active-row {
    background: var(--brand-soft) !important;
    box-shadow: inset 3px 0 0 var(--brand);
  }

  td button {
    min-height: 30px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-2xs);
  }

  .vehicle-cell,
  .person-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .vehicle-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: var(--text-md);
    font-weight: 650;
  }

  .vehicle-cell strong,
  .person-cell strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-strong);
  }

  .vehicle-cell small,
  .person-cell small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-2xs);
  }

  /* --- Rozetler --------------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--positive-soft);
    color: var(--positive);
    font-size: var(--text-2xs);
    font-weight: 650;
    white-space: nowrap;
  }

  .badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: currentcolor;
  }

  .badge.open {
    background: var(--warning-soft);
    color: var(--warning);
  }

  .badge.sold {
    background: var(--surface-sunken);
    color: var(--ink-soft);
  }

  .badge.inactive {
    background: var(--surface-sunken);
    color: var(--ink-muted);
  }

  .share-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--ink-strong);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
  }

  /* --- Sayfalama -------------------------------------------------------- */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--surface-raised);
  }

  .pagination small {
    font-size: var(--text-xs);
  }

  .pagination small:first-child {
    margin-right: auto;
  }

  .pagination button {
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-2xs);
  }

  /* --- Filtreler -------------------------------------------------------- */
  .filters {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
  }

  .filters label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--ink-muted);
  }

  /* Girdi, seçim ve düğme aynı yükseklikte olur; etiketler aynı hizada kalır. */
  .filters input,
  .filters select {
    min-width: 140px;
    height: 40px;
    min-height: 40px;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
  }

  .filters button {
    height: 40px;
    min-height: 40px;
  }

  /* --- Detay paneli ----------------------------------------------------- */
  .detail-pane {
    position: sticky;
    top: 0;
    min-width: 0;
    max-height: calc(100dvh - var(--topbar-height) - var(--space-10));
    overflow: auto;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow);
    animation: slide-in var(--duration) var(--ease);
  }

  @keyframes slide-in {
    from {
      opacity: 0;
      transform: translateX(8px);
    }
  }

  .detail-heading {
    position: sticky;
    top: calc(var(--space-5) * -1);
    z-index: 2;
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
    padding: var(--space-5);
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
  }

  .detail-heading .toolbar {
    align-items: flex-start;
    margin-bottom: var(--space-3);
  }

  .detail-heading h2 {
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
  }

  /* Başlık yalnız ekran okuyucu duyurusu için odaklanır; görünür halka
     kullanıcıyı yanıltacağından bastırılır. */
  .detail-heading h2:focus {
    outline: none;
  }

  .detail-heading small {
    font-size: var(--text-xs);
  }

  .detail-pane .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-5);
  }

  .detail-pane .stat {
    padding: var(--space-3);
  }

  .detail-pane .stat strong {
    font-size: var(--text-md);
  }

  .detail-pane .stat-caption {
    display: none;
  }

  .detail-pane .panel {
    padding: var(--space-4) 0 0;
    margin-bottom: var(--space-5);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .detail-pane th,
  .detail-pane td {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
  }

  .detail-pane .table-wrap {
    max-height: none;
  }

  .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
  }

  .details-grid strong {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--ink-strong);
    overflow-wrap: anywhere;
  }

  /* --- Sekmeler --------------------------------------------------------- */
  .tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .tabs button:hover:not(:disabled) {
    background: transparent;
    color: var(--ink);
  }

  .tabs button.selected {
    color: var(--brand-ink);
    box-shadow: inset 0 -2px 0 var(--brand);
  }

  /* --- İçgörü ızgarası -------------------------------------------------- */
  .insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }

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

  .insight-grid small {
    display: block;
    font-size: var(--text-2xs);
  }

  .insight-grid strong {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
  }

  .manager-insights {
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
  }

  summary {
    font-size: var(--text-xs);
    font-weight: 650;
    color: var(--ink-strong);
    cursor: pointer;
  }

  summary::marker {
    color: var(--brand);
  }

  .manager-insights[open] summary {
    margin-bottom: var(--space-3);
  }

  /* --- Sermaye dağılımı ------------------------------------------------- */
  .overview-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }

  .overview-grid > .panel {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .overview-grid .panel-footnote {
    margin-top: auto;
  }

  .allocation-content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-5);
  }

  .allocation-ring {
    --allocation: 0%;
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 124px;
    height: 124px;
    border-radius: var(--radius-pill);
    background: conic-gradient(
      var(--brand) 0 var(--allocation),
      var(--surface-sunken) var(--allocation) 100%
    );
  }

  .allocation-ring::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-card);
  }

  .allocation-ring > div {
    position: relative;
    text-align: center;
  }

  .allocation-ring strong {
    font-size: var(--text-xl);
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--ink-strong);
  }

  .allocation-ring small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-2xs);
  }

  .allocation-ring.no-allocation {
    background: var(--surface-sunken);
  }

  .allocation-legend {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
  }

  .allocation-legend > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .legend-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 2px;
    background: var(--brand);
  }

  .legend-dot.available {
    background: var(--surface-sunken);
    border: 1px solid var(--line-strong);
  }

  .allocation-legend small {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
  }

  .allocation-legend strong {
    font-size: var(--text-md);
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .control-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 var(--space-5);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
  }

  .control-fact:last-of-type {
    border-bottom: 0;
  }

  .control-fact span {
    display: block;
    font-size: var(--text-xs);
    color: var(--ink);
  }

  .control-fact small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-2xs);
  }

  .control-fact > strong {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--ink-strong);
    font-size: var(--text-xs);
    font-weight: 650;
    white-space: nowrap;
  }

  .control-fact.attention > strong {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, var(--line));
    color: var(--warning);
  }

  /* --- Grafik ----------------------------------------------------------- */
  .chart {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .chart svg {
    display: block;
    width: 100%;
    height: 168px;
    overflow: visible;
  }

  .chart .bar {
    fill: var(--brand);
    opacity: 0.85;
  }

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

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

  .chart .zero-line {
    stroke: var(--line-strong);
    stroke-width: 1;
  }

  .chart-axis {
    fill: var(--ink-muted);
    font-size: 10px;
  }

  .chart-legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: var(--text-2xs);
    color: var(--ink-muted);
  }

  /* --- Geçmiş akışı ----------------------------------------------------- */
  .history-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
  }

  .history-item:last-child {
    border-bottom: 0;
  }

  .history-item small {
    display: block;
    margin-top: var(--space-1);
  }

  .history-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: var(--radius-pill);
    background: var(--brand);
  }

  .history-amount {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* --- Muhasebe (kasa defteri) ------------------------------------------ */
  .treasury-accounts {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .treasury-accounts .stat {
    position: relative;
    padding-bottom: var(--space-10);
  }

  .treasury-accounts .stat.is-closed {
    background: var(--surface-sunken);
    color: var(--ink-muted);
  }

  .treasury-accounts .stat.is-closed strong {
    color: var(--ink-muted);
  }

  .treasury-accounts .account-edit {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-2);
    min-height: 28px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
    color: var(--ink-soft);
  }

  .treasury-total {
    border-color: var(--line-strong);
    background: var(--surface-raised);
  }

  .badge.bank {
    background: var(--info-soft);
    color: var(--info);
  }

  .badge.cash {
    background: var(--warning-soft);
    color: var(--warning);
  }

  /* Gelir ve gider işaretle de ayrılır; renk tek başına anlam taşımaz. */
  .is-income {
    color: var(--positive);
  }

  .is-expense {
    color: var(--negative);
  }

  .treasury-filters {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface-raised);
  }

  .treasury-filters .treasury-search {
    flex: 1 1 260px;
  }

  .treasury-filters .treasury-search input {
    margin: 0;
    height: 40px;
    padding-left: var(--space-8);
    background: var(--surface-card);
  }

  .treasury-filters .amount-range {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .treasury-filters .amount-range input {
    min-width: 96px;
    margin-top: 0;
  }

  /* Seçilen kayıtların toplamı: filtre neyi kapsıyor, tabloya bakmadan okunur. */
  .treasury-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
  }

  .treasury-summary small {
    display: block;
    font-size: var(--text-2xs);
  }

  .treasury-summary strong {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-md);
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
  }

  .treasury-ledger td:nth-child(2) {
    font-variant-numeric: tabular-nums;
  }

  .treasury-ledger td:nth-child(6) {
    max-width: 220px;
    white-space: normal;
    color: var(--ink-soft);
  }

  /* --- Boş ve yükleniyor durumları -------------------------------------- */
  .empty {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    padding: var(--space-10) var(--space-5);
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }

  .empty strong {
    font-size: var(--text-md);
    color: var(--ink-strong);
  }

  .skeleton {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .skeleton-line {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
      90deg,
      var(--surface-sunken) 25%,
      var(--surface-raised) 37%,
      var(--surface-sunken) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }

  .skeleton-line.wide {
    height: 44px;
  }

  @keyframes shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }

  .detail-loading {
    padding: var(--space-8);
    color: var(--ink-muted);
  }

  /* --- Formlar ---------------------------------------------------------- */
  .field {
    margin-bottom: var(--space-4);
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
  }

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

  .form-grid > .row-start {
    grid-column: 1;
  }

  .form-required-note {
    margin-bottom: var(--space-4);
    font-size: var(--text-2xs);
    color: var(--ink-muted);
  }

  .field-requirement {
    margin-left: var(--space-1);
    color: var(--negative);
    font-weight: 700;
  }

  /* İsteğe bağlı alan bir uyarı değildir; zorunluluk işaretiyle aynı görünmez. */
  .field-requirement.optional {
    color: var(--ink-muted);
    font-weight: 500;
  }

  .field-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
    color: var(--ink-muted);
  }

  .field-error {
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
    color: var(--negative);
  }

  .field-error:empty {
    display: none;
  }

  .error {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--negative) 30%, var(--line));
    border-radius: var(--radius-sm);
    background: var(--negative-soft);
    color: var(--negative);
    font-size: var(--text-xs);
    white-space: pre-wrap;
  }

  .error:empty {
    display: none;
  }

  .password-control {
    position: relative;
    display: flex;
    align-items: center;
  }

  .password-control input {
    padding-right: 76px;
  }

  .password-toggle {
    position: absolute;
    right: var(--space-1);
    min-height: 30px;
    padding: var(--space-1) var(--space-2);
    border: 0;
    background: transparent;
    color: var(--brand-ink);
    font-size: var(--text-2xs);
  }

  /* --- Diyalog ---------------------------------------------------------- */
  dialog {
    width: min(660px, calc(100vw - var(--space-8)));
    max-height: 88dvh;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  dialog::backdrop {
    background: var(--surface-overlay);
    backdrop-filter: blur(3px);
  }

  #dialog-content {
    max-height: 88dvh;
    overflow: auto;
    padding: var(--space-6);
  }

  .dialog-top {
    position: sticky;
    top: calc(var(--space-6) * -1);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
  }

  dialog form {
    margin-top: var(--space-5);
  }

  dialog .actions {
    justify-content: flex-end;
    margin-top: var(--space-4);
  }

  /* --- Giriş ekranı ----------------------------------------------------- */
  /* Kimlik ekranı tek bir kart olduğu için görüntü alanının ortasına yerleşir. */
  #app:has(.login) {
    display: grid;
    place-items: center;
    height: 100%;
    overflow: auto;
    padding: var(--space-6) var(--space-4);
    background: var(--surface-page);
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    flex: none;
  }

  /* Logo, yeşilin marka rengi olarak göründüğü tek yüzeydir. */
  .brand-mark-plate {
    fill: var(--brand);
  }

  .brand-mark-glyph {
    fill: none;
    stroke: var(--ink-on-brand);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .brand-mark-dot {
    fill: var(--ink-on-brand);
  }

  .login .brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .login-note {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
    color: var(--ink-muted);
  }

  .login {
    width: min(440px, 100%);
    margin: auto;
    padding: var(--space-10);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow);
  }

  .login .brand {
    margin-bottom: var(--space-8);
    color: var(--ink-strong);
    font-size: var(--text-xl);
  }

  .login h1 {
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
  }

  .login form {
    margin-top: var(--space-6);
  }

  .login .form-grid {
    grid-template-columns: 1fr;
  }

  .login button.primary {
    width: 100%;
    min-height: 44px;
    font-size: var(--text-sm);
  }

  .login > button {
    width: 100%;
    margin-top: var(--space-2);
  }

  .login ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin: var(--space-5) 0;
    padding-left: var(--space-5);
  }

  .login li {
    font-size: var(--text-xs);
  }

  .login code {
    overflow-wrap: anywhere;
  }

  .qr {
    display: block;
    width: 220px;
    height: 220px;
    max-width: 100%;
    margin: var(--space-5) auto;
    border-radius: var(--radius-sm);
    background: #fff;
  }

  .secret {
    font-family: var(--font-mono);
    font-size: var(--text-xs) !important;
    overflow-wrap: anywhere;
  }

  /* --- Bildirim --------------------------------------------------------- */
  #notification {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 20;
    max-width: min(420px, calc(100vw - var(--space-8)));
    border-radius: var(--radius);
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-lg);
  }

  #notification:not(:empty) {
    padding: var(--space-4) var(--space-5);
    animation: rise var(--duration) var(--ease);
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  #sale-preview-result {
    margin-top: var(--space-5);
  }

  #notification span {
    display: block;
    padding-right: var(--space-8);
  }

  .notice-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    min-height: 26px;
    padding: var(--space-1) var(--space-2);
    color: var(--ink-on-inverse-soft);
    font-size: var(--text-2xs);
  }

  .notice-close:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ink-on-inverse) 12%, transparent);
    color: var(--ink-on-inverse);
    border-color: transparent;
  }

  #notification:not(:empty) {
    position: fixed;
  }

  .loading-block {
    padding: var(--space-6) 0;
  }

  .loading-block .skeleton {
    padding: var(--space-4) 0 0;
  }

  /* Tema anahtarı: kenar çubuğunda hesap bölümünde durur. */
  .theme-toggle {
    gap: var(--space-2);
  }
}

@layer responsive {
  @media (max-width: 1280px) {
    :root {
      --sidebar-width: 216px;
      --content-gutter: var(--space-5);
    }

    .workspace.is-split {
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    }
  }

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

    .workspace.is-split {
      grid-template-columns: minmax(0, 1fr);
    }

    .detail-pane {
      position: static;
      max-height: none;
      grid-row: 1;
    }

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

  /* Telefon: kenar çubuğu alt gezinme çubuğuna dönüşür. */
  @media (max-width: 820px) {
    .insight-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :root {
      --topbar-height: 84px;
      --content-gutter: var(--space-4);
    }

    .shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
    }

    /* Grid öğeleri varsayılan olarak min-content genişliğinin altına inmez;
       bu sınır kaldırılmazsa alt çubuk sayfayı yatayda taşırır. */
    .sidebar,
    .main {
      min-width: 0;
    }

    .sidebar {
      order: 2;
      flex-direction: row;
      overflow: hidden;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-2) var(--space-2)
        max(var(--space-2), env(safe-area-inset-bottom));
      border-right: 0;
      border-top: 1px solid var(--line);
    }

    .sidebar > div:first-child,
    .nav-section-label,
    .sidebar .account > div:first-child {
      display: none;
    }

    .sidebar nav {
      flex: 1;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 0;
    }

    .sidebar nav button {
      flex-direction: column;
      justify-content: center;
      gap: var(--space-1);
      min-width: 0;
      min-height: 52px;
      padding: var(--space-1);
      font-size: 10px;
      font-weight: 600;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar nav button.selected {
      box-shadow: inset 0 3px 0 var(--brand);
    }

    .sidebar .account {
      margin: 0;
      padding: 0 0 0 var(--space-2);
      border: 0;
      border-left: 1px solid var(--line);
      grid-auto-flow: column;
      gap: 0;
    }

    .sidebar .account button {
      flex-direction: column;
      justify-content: center;
      gap: var(--space-1);
      min-width: 0;
      min-height: 52px;
      padding: var(--space-1);
      font-size: 0;
    }

    /* Uzun etiketler dar çubuğa sığmaz; erişilebilir ad metin düğümünde kalır,
       görünen etiket kısaltılır. */
    .sidebar .account button::after {
      content: attr(data-short);
      font-size: 10px;
      font-weight: 600;
    }

    .main {
      order: 1;
    }

    .topbar {
      padding: var(--space-4) var(--content-gutter);
    }

    .topline {
      gap: var(--space-3);
    }

    .page-heading small {
      display: none;
    }

    .report-date {
      display: none;
    }

    .stats {
      grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    }

    .allocation-content {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-5);
    }

    .allocation-ring {
      justify-self: center;
      margin: 0 auto;
    }

    .table-wrap {
      max-height: none;
    }

    dialog {
      width: 100vw;
      max-width: 100vw;
      max-height: 92dvh;
      margin: auto 0 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    #notification {
      right: var(--space-3);
      left: var(--space-3);
      bottom: calc(60px + var(--space-3));
      max-width: none;
    }
  }

  @media (max-width: 560px) {
    .stats {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: var(--space-2);
    }

    .stat {
      padding: var(--space-3);
    }

    .stat strong {
      font-size: var(--text-md);
    }

    .stat-caption {
      display: none;
    }

    .form-grid {
      grid-template-columns: 1fr;
    }

    .form-grid > .row-start {
      grid-column: auto;
    }

    .login {
      margin: 0 auto;
      padding: var(--space-6);
      border: 0;
      border-radius: 0;
      min-height: 100dvh;
    }

    .login ol {
      grid-template-columns: 1fr;
    }

    .list-heading,
    .list-tools {
      flex-wrap: wrap;
    }

    .list-result-count {
      margin-left: 0;
    }

    th,
    td {
      padding: var(--space-3);
    }

    .detail-pane {
      padding: var(--space-4);
    }

    .detail-heading {
      margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
      padding: var(--space-4);
      top: calc(var(--space-4) * -1);
    }
  }
}

@layer print {
  @media print {
    :root {
      --surface-page: #fff;
      --surface-card: #fff;
      --surface-raised: #fff;
      --ink: #000;
      --ink-strong: #000;
      --line: #999;
    }

    body {
      overflow: visible;
    }

    .shell {
      display: block;
      height: auto;
    }

    .sidebar,
    .company-strip,
    .actions,
    .pagination,
    .list-tools,
    #notification,
    .skip-link,
    button {
      display: none !important;
    }

    .main,
    #content,
    .detail-pane,
    .table-wrap {
      overflow: visible;
      height: auto;
      max-height: none;
    }

    .panel,
    .stat {
      break-inside: avoid;
      box-shadow: none;
    }

    th {
      position: static;
    }
  }
}