:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --ink: #202024;
  --muted: #71717a;
  --line: #e6e7eb;
  --brand: #ce2188;
  --brand-dark: #70144d;
  --brand-soft: #fbe8f4;
  --brand-faint: #fff7fb;
  --gold: #f2ba25;
  --green: #058c50;
  --green-soft: #e9f7f0;
  --red: #b32843;
  --shadow: 0 18px 46px rgba(50, 32, 45, 0.1);
  --radius: 20px;
  --ui-font-step: 0px;
  font-family: Inter, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    sans-serif;
}

/* 2026-10 güvenli arşiv geliştirmeleri */
.property-folder-note {
  margin: 10px 0;
  border: 1px solid #d8e1e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.property-folder-note summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}

.property-folder-note summary::-webkit-details-marker {
  display: none;
}

.property-folder-note summary span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.property-folder-note summary small,
.property-folder-note summary em,
.property-folder-note form small {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
  font-style: normal;
}

.property-folder-note form {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.property-folder-note textarea {
  width: 100%;
  min-height: 66px;
  resize: vertical;
}

.property-folder-note form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.property-permits-top-save {
  min-height: 40px;
  padding-inline: 18px;
}

@media (max-width: 700px) {
  .property-folder-note summary span {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .property-folder-note form > div {
    align-items: stretch;
    flex-direction: column;
  }

  .property-permits-top-save {
    width: 100%;
  }
}

html[data-ui-font-size="small"] {
  --ui-font-step: -1px;
}

html[data-ui-font-size="large"] {
  --ui-font-step: 2px;
}

html[data-ui-font-size="xlarge"] {
  --ui-font-step: 4px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 94% 5%, rgba(206, 33, 136, 0.11), transparent 28rem),
    radial-gradient(circle at 72% 100%, rgba(5, 140, 80, 0.06), transparent 24rem),
    repeating-linear-gradient(135deg, rgba(112, 20, 77, 0.018) 0 1px, transparent 1px 18px),
    var(--bg);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.boot-screen,
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 24px;
  text-align: center;
}

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

.boot-brand-orbit {
  position: relative;
  width: 250px;
  height: 210px;
  margin: 0 auto 4px;
}

.boot-brand-orbit .brand-logo-lg {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 18px 42px rgba(228, 86, 79, 0.24);
  transform: translate(-50%, -50%);
}

.boot-object {
  position: absolute;
  width: 43px;
  height: 43px;
  padding: 6px;
  color: #e4564f;
  border: 1px solid rgba(228, 86, 79, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(54, 46, 45, 0.1);
  animation: boot-object-float 2.8s ease-in-out infinite;
}

.boot-object svg { width: 100%; height: 100%; }
.boot-object :where(rect, path) { fill: #fff; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.boot-object circle { fill: currentColor; stroke: currentColor; }
.boot-object-plan { top: 0; left: 103px; }
.boot-object-folder { top: 63px; right: 0; animation-delay: -.7s; }
.boot-object-photo { left: 104px; bottom: 0; animation-delay: -1.4s; }
.boot-object-doc { top: 63px; left: 0; animation-delay: -2.1s; }
.boot-screen > strong { display: block; color: var(--ink); font-size: 20px; letter-spacing: .12em; }
.boot-screen > p { margin: 8px 0 0; }

@keyframes boot-object-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: white;
}

.brand-logo-lg {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  padding: 3px;
  box-shadow: 0 14px 36px rgba(228, 86, 79, 0.2);
}

.auth-card {
  width: min(100%, 460px);
  padding: 34px;
  border: 1px solid rgba(112, 20, 77, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(25px, 5vw, 34px);
  font-weight: 780;
  line-height: 1.12;
  letter-spacing: -0.9px;
}

.auth-card > p {
  margin: 12px 0 28px;
  color: var(--muted);
  line-height: 1.5;
}

.remote-disabled-card {
  text-align: center;
}

.remote-disabled-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 14px;
  padding: 0 12px;
  border-radius: 999px;
  color: #9e183d;
  background: #fff0f1;
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.neighborhood-setup-card {
  width: min(100%, 620px);
  text-align: left;
}

.neighborhood-setup-card .brand-logo,
.neighborhood-setup-card > h1,
.neighborhood-setup-card > p,
.neighborhood-setup-card > .neighborhood-setup-badge {
  text-align: center;
}

.neighborhood-setup-badge {
  width: max-content;
  min-height: 30px;
  display: flex;
  align-items: center;
  margin: 0 auto 14px;
  padding: 0 12px;
  border-radius: 999px;
  color: #08704c;
  background: #e9f7f0;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.neighborhood-setup-card textarea {
  min-height: 230px;
}

.neighborhood-setup-summary {
  margin: -6px 0 16px;
  color: var(--green);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 750;
}

.neighborhood-setup-notice {
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid rgba(179, 40, 67, 0.16);
  border-radius: 14px;
  color: #76132f;
  background: #fff7f8;
  font-size: calc(13px + var(--ui-font-step));
  line-height: 1.55;
}

.initial-neighborhood-field textarea {
  min-height: 140px;
}

.remote-disabled-message {
  margin: 24px 0 12px;
  padding: 18px;
  border: 1px solid rgba(158, 24, 61, 0.18);
  border-radius: 16px;
  color: #76132f;
  background: #fff7f8;
  font-size: calc(16px + var(--ui-font-step));
  font-weight: 700;
  line-height: 1.55;
}

.auth-card > .remote-disabled-help {
  margin: 0 0 20px;
  font-size: calc(13px + var(--ui-font-step));
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}

.field > span {
  color: #544843;
  font-size: calc(13px + var(--ui-font-step));
  font-weight: 700;
}

.field-hint {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.4;
}

.auth-card form > .button + .button {
  margin-top: 8px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  color: var(--ink);
  background: white;
  transition: border-color 160ms, box-shadow 160ms;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(206, 33, 136, 0.1);
}

textarea {
  min-height: 118px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
  line-height: 1.5;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  color: white;
  background: var(--brand);
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(112, 20, 77, 0.16);
}

.button:hover {
  background: var(--brand-dark);
}

.button.secondary {
  color: var(--brand);
  background: var(--brand-soft);
  box-shadow: none;
}

.button.ghost {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.button.danger {
  background: var(--red);
}

.button.wide {
  width: 100%;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  color: #fff8f0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(155deg, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(180deg, #ce2188 0%, #70144d 100%);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 28px;
}

.sidebar-brand .brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin: 0;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 6px 18px rgba(36, 0, 24, 0.24);
}

.brand-copy strong,
.brand-copy span {
  display: block;
}

.brand-copy strong {
  font-size: calc(15px + var(--ui-font-step));
  font-weight: 780;
  line-height: 1.15;
  letter-spacing: -0.25px;
}

.brand-copy span {
  margin-top: 3px;
  color: rgba(244, 251, 255, 0.72);
  font-size: calc(12px + var(--ui-font-step));
}

.nav {
  display: grid;
  gap: 7px;
}

.nav-button {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 13px;
  color: rgba(244, 251, 255, 0.8);
  background: transparent;
  font-weight: 650;
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  color: white;
  background: rgba(255, 255, 255, 0.13);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-content: center;
  flex: 0 0 20px;
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button .nav-count {
  min-width: 22px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: #f2ba25;
  font-size: calc(11px + var(--ui-font-step));
  text-align: center;
}

.nav-button .nav-count.empty {
  display: none;
}

.sidebar-footer {
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-system-status .connection {
  margin-bottom: 8px;
}

.sidebar-harddisk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: rgba(247, 252, 255, 0.88);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
}

.sidebar-harddisk-status.ready .connection-dot {
  background: #65d69c;
  box-shadow: 0 0 0 4px rgba(101, 214, 156, 0.13);
}

.sidebar-harddisk-status.unavailable {
  color: rgba(247, 252, 255, 0.6);
}

.sidebar-archive-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 11px;
}

.sidebar-archive-stats > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-archive-stats span,
.sidebar-archive-stats strong {
  display: block;
}

.sidebar-archive-stats span {
  overflow: hidden;
  color: rgba(247, 252, 255, 0.68);
  font-size: calc(9px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-archive-stats strong {
  margin-top: 3px;
  color: white;
  font-size: calc(15px + var(--ui-font-step));
  line-height: 1;
}

.sidebar-capacity-list {
  display: grid;
  gap: 11px;
}

.sidebar-capacity {
  display: grid;
  gap: 5px;
}

.sidebar-capacity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(247, 252, 255, 0.92);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
}

.sidebar-capacity-head strong {
  color: white;
  font-size: calc(10px + var(--ui-font-step));
}

.sidebar-capacity-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.sidebar-capacity-meter span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, #44c4e7);
  transition: width 260ms ease;
}

.sidebar-capacity.backup .sidebar-capacity-meter span {
  background: linear-gradient(90deg, #ffd753, #72ddb0);
}

.sidebar-capacity small {
  overflow: hidden;
  color: rgba(247, 252, 255, 0.65);
  font-size: calc(9px + var(--ui-font-step));
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-capacity.unavailable {
  opacity: 0.62;
}

.connection {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(244, 251, 255, 0.78);
  font-size: calc(12px + var(--ui-font-step));
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2aa55;
}

.connection.online .connection-dot {
  background: #65d69c;
  box-shadow: 0 0 0 4px rgba(101, 214, 156, 0.13);
}

.mobile-archive-connection {
  display: none;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  color: var(--brand-dark);
  background: #e6f4fb;
  font-weight: 800;
}

.user-chip strong,
.user-chip span {
  display: block;
}

.user-chip strong {
  max-width: 140px;
  overflow: hidden;
  font-size: calc(13px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip span {
  margin-top: 2px;
  color: rgba(244, 251, 255, 0.66);
  font-size: calc(11px + var(--ui-font-step));
}

.main {
  min-width: 0;
  padding: 36px clamp(20px, 4vw, 58px) 80px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.page-kicker {
  margin: 0 0 7px;
  color: var(--brand);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 41px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.2px;
}

.page-subtitle {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 1px solid #cce9da;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 750;
}

.status-pill.bad {
  border-color: #ead0c9;
  color: var(--red);
  background: #fff0ed;
}

.grid {
  display: grid;
  gap: 18px;
}

.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 24px;
}

.stat-card,
.panel {
  border: 1px solid rgba(50, 32, 45, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 8px 30px rgba(50, 32, 45, 0.05);
}

.stat-card {
  padding: 22px;
}

.stat-card span {
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 700;
}

.stat-card strong {
  display: block;
  margin-top: 7px;
  font-size: calc(26px + var(--ui-font-step));
  font-weight: 800;
  line-height: 1;
}

.panel {
  padding: 24px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panel h2,
.panel h3 {
  margin: 0;
  font-weight: 780;
  letter-spacing: -0.35px;
}

.panel h2 {
  font-size: calc(22px + var(--ui-font-step));
}

.panel h3 {
  font-size: calc(18px + var(--ui-font-step));
}

.album-filter {
  width: min(100%, 280px);
}

.archive-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin: -2px 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #faf9fb;
}

.archive-filters .field {
  margin: 0;
}

.archive-clear {
  margin-bottom: 1px;
  white-space: nowrap;
}

.property-search > input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #faf9fb;
  font: inherit;
  font-size: calc(16px + var(--ui-font-step));
  outline: none;
}

.property-search > input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.property-results {
  max-height: 310px;
  display: grid;
  gap: 7px;
  margin: 10px 0 22px;
  overflow-y: auto;
}

.property-result {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.property-result:hover {
  border-color: #e4bfd6;
  background: var(--brand-faint);
}

.property-result span,
.property-result em,
.property-no-result {
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  font-style: normal;
}

.property-result-details {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.35;
}

.property-result-owner {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  color: var(--brand-dark);
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.35;
}

.property-result-owner b {
  flex: 0 0 auto;
  font-weight: 700;
}

.property-result-owner span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-property {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.selected-property span {
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
}

.selected-property-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-button {
  min-height: 38px;
  padding: 8px 13px;
  text-decoration: none;
}

.archive-navigation-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
}

.archive-breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  margin: 0;
  overflow-x: auto;
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  white-space: nowrap;
  scrollbar-width: none;
}

.archive-breadcrumb::-webkit-scrollbar {
  display: none;
}

.archive-breadcrumb button {
  max-width: min(60vw, 340px);
  min-height: 30px;
  overflow: hidden;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-faint);
  font: inherit;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.archive-breadcrumb button:hover {
  background: var(--brand-soft);
}

.archive-breadcrumb .archive-home-crumb {
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  flex: 0 0 54px;
  border-radius: 14px;
  background: var(--brand-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.archive-home-crumb svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: none;
}

.archive-breadcrumb .archive-home-crumb:hover {
  color: var(--brand-dark);
}

.archive-breadcrumb strong {
  overflow: hidden;
  color: var(--ink);
  font-size: calc(12px + var(--ui-font-step));
  text-overflow: ellipsis;
}

.archive-nav-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.compact-tool-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.compact-tool-button:hover {
  background: #fff;
}

.compact-tool-button.primary {
  color: #fff;
  background: var(--brand);
}

.compact-tool-button.danger {
  color: var(--red);
  background: #fff0ed;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
}

.category-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font: inherit;
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.category-tab.selected {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

.folder-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}

.folder-section-head span {
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
}

.property-folder-list,
.category-folder-grid {
  display: grid;
  gap: 8px;
}

.category-folder-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.property-folder-entry {
  position: relative;
  min-width: 0;
}

.folder-sort-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  color: var(--muted);
}

.folder-sort-tools[hidden],
.folder-sort-tools [hidden] {
  display: none;
}

.category-folder-grid[data-folder-reorder="true"] .category-folder {
  cursor: grab;
  user-select: none;
}

.category-folder-grid .folder-dragging {
  opacity: 0.4;
}

.folder-drag-preview {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 38px 10px 14px;
  text-align: center;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.category-folder-grid .folder-drop-before::before,
.category-folder-grid .folder-drop-after::after {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  content: "";
  pointer-events: none;
}

.category-folder-grid .folder-drop-before::before { left: -6px; }
.category-folder-grid .folder-drop-after::after { right: -6px; }

.property-folder-entry .category-folder {
  min-width: 0;
  min-height: 168px;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding: 38px 10px 14px;
  text-align: center;
}

.category-folder .folder-icon {
  width: min(94px, 100%);
  height: auto;
  aspect-ratio: 94 / 62;
  flex: none;
  background: #e9a815;
  border-radius: 6px 8px 8px 8px;
  box-shadow: 0 7px 10px rgba(49, 77, 97, 0.1);
}

.category-folder .folder-icon::before {
  top: -13%;
  left: 0;
  width: 40%;
  height: 21%;
  border-radius: 7px 9px 0 0;
  background: #e9a815;
}

.category-folder .folder-paper {
  position: absolute;
  display: block;
  left: 8%;
  right: 8%;
  top: 0;
  height: 68%;
  border: 1px solid #cad3d9;
  border-radius: 4px;
  background: #fffefa;
  transform: rotate(-4deg);
}

.category-folder .folder-paper-second {
  top: 8%;
  transform: rotate(3deg);
}

.category-folder .folder-icon::after {
  content: "";
  position: absolute;
  inset: 21% -1px -1px;
  border-radius: 5px 6px 8px 8px;
  background: linear-gradient(155deg, #ffdb66, #f1b52c);
  box-shadow: inset 0 1px 0 #fffefa, inset 0 -3px 0 rgba(49, 77, 97, 0.1);
}

.category-folder .folder-copy {
  width: 100%;
  flex: none;
}

.category-folder .folder-copy strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.4;
}

.property-folder-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  color: var(--red);
  background: transparent;
  font: inherit;
  font-size: calc(21px + var(--ui-font-step));
  font-weight: 750;
  cursor: pointer;
}

.property-folder-delete:hover {
  background: #ffe2dc;
}

.archive-folder {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.archive-folder:hover {
  border-color: #e4bfd6;
  background: var(--brand-faint);
}

.finder-drop-help {
  display: flex;
  align-items: center;
  gap: 7px;
}

.finder-drop-help::before {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  border: 1px solid rgba(112, 20, 77, 0.18);
  border-radius: 7px;
  color: var(--brand-dark);
  background: var(--brand-faint);
  content: "⇩";
  font-size: 13px;
  font-weight: 900;
}

[data-finder-drop-album] {
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

body.finder-file-drag-active [data-finder-drop-album] {
  border-color: rgba(112, 20, 77, 0.42);
  border-style: dashed;
}

.category-folder.finder-drop-target,
.photo-grid.finder-drop-target,
.property-permits-workspace.finder-drop-target {
  position: relative;
  isolation: isolate;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(112, 20, 77, 0.12), 0 16px 34px rgba(7, 55, 88, 0.12);
}

.category-folder.finder-drop-target {
  transform: translateY(-3px);
}

.category-folder.finder-drop-target::after,
.photo-grid.finder-drop-target::after,
.property-permits-workspace.finder-drop-target::after {
  position: absolute;
  z-index: 40;
  inset: 6px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 2px dashed rgba(112, 20, 77, 0.62);
  border-radius: 13px;
  color: var(--brand-dark);
  background: rgba(255, 252, 254, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  content: attr(data-finder-drop-label);
  font-size: calc(13px + var(--ui-font-step));
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.archive-folder .property-folder-owner {
  overflow: hidden;
  color: var(--brand-dark);
  font-size: calc(11px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-folder .property-folder-owner b {
  font-weight: 800;
}

.archive-folder .property-folder-history {
  min-width: 0;
  display: grid;
  gap: 1px;
  margin-top: 3px;
}

.archive-folder .property-folder-history small {
  margin-top: 0;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 650;
  line-height: 12px;
}

.archive-folder .property-folder-permits {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-left: 13px;
  border-left: 1px solid var(--line);
}

.property-folder-permits > b {
  color: var(--brand-dark);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.property-folder-permit-list {
  min-width: 0;
  max-height: 62px;
  display: grid;
  grid-auto-rows: 14px;
  align-content: start;
  gap: 2px;
  overflow: hidden;
}

.property-folder-permit-list small {
  position: relative;
  display: block;
  overflow: hidden;
  padding-left: 10px;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 650;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-folder-permit-list small::before {
  position: absolute;
  left: 0;
  color: var(--brand);
  content: "•";
}

.archive-folder .property-folder-note-summary {
  min-width: 0;
  align-self: stretch;
  display: -webkit-box;
  overflow: hidden;
  padding-left: 13px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 600;
  line-height: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.folder-row,
.photo-card-wrap {
  position: relative;
  min-width: 0;
}

.folder-row {
  display: flex;
  gap: 7px;
}

.folder-row .archive-folder {
  flex: 1;
}

.folder-delete {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--red);
  background: #fff0ed;
  font: inherit;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
}

.folder-delete.icon-only {
  width: 38px;
  flex: 0 0 38px;
  padding: 0;
  font-size: calc(20px + var(--ui-font-step));
}

.property-note-file {
  margin: 0 0 10px;
}

.property-folder-form {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px dashed #e4bfd6;
  border-radius: 12px;
  background: var(--brand-faint);
}

.property-folder-form[hidden] {
  display: none;
}

.property-structure-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.3fr) auto;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 12px;
  background: var(--brand-faint);
}

.property-structure-form[hidden] {
  display: none;
}

.property-structure-form input,
.property-structure-form .button,
.property-folder-form select {
  min-height: 40px;
}

.property-folder-form select {
  width: min(210px, 34vw);
  flex: 0 0 auto;
}

.property-structure-groups {
  display: grid;
  gap: 14px;
}

.property-structure-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.66);
}

.property-structure-group.is-general {
  background: color-mix(in srgb, var(--surface) 86%, var(--brand-faint));
}

.property-structure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.property-structure-copy {
  min-width: 0;
  flex: 1 1 180px;
}

.property-structure-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.property-structure-head strong,
.property-structure-head small {
  display: block;
}

.property-structure-head strong {
  color: var(--ink);
  font-size: calc(14px + var(--ui-font-step));
  font-weight: 800;
}

.property-structure-head small,
.property-structure-empty {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.property-structure-head small {
  margin-top: 2px;
}

.property-structure-empty {
  grid-column: 1 / -1;
  margin: 4px;
}

.property-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.folder-add-trigger {
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--brand);
  font-size: calc(24px + var(--ui-font-step));
  line-height: 1;
  box-shadow: 0 7px 16px rgba(112, 20, 77, 0.17);
}

.property-folder-form input {
  min-width: 0;
  flex: 1;
  min-height: 40px;
}

.property-folder-form .button {
  width: 42px;
  min-height: 40px;
  padding: 0;
  font-size: calc(18px + var(--ui-font-step));
  white-space: nowrap;
}

@media (max-width: 700px) {
  .property-structure-form,
  .property-folder-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .property-folder-form select {
    width: 100%;
  }

  .property-folder-form .button,
  .property-structure-form .button {
    width: 100%;
  }

  .property-structure-head {
    align-items: flex-start;
  }

  .property-structure-actions {
    width: 100%;
    margin-left: 0;
  }

  .property-structure-actions .compact-tool-button {
    min-height: 40px;
  }
}

.property-identity-card {
  margin: 0 0 10px;
  padding: 13px 14px;
  border: 1px solid #f8e8f2;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, var(--brand-faint));
}

.property-identity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.property-identity-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.property-identity-head strong {
  font-size: calc(13px + var(--ui-font-step));
}

.property-identity-head small,
.property-owner-badge {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.property-owner-badge {
  max-width: 42%;
  overflow: hidden;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-identity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 11px 0 0;
}

.property-identity-list div {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.property-identity-list dt,
.property-identity-list dd {
  margin: 0;
}

.property-identity-list dt {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 750;
  text-transform: uppercase;
}

.property-identity-list dd {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 750;
}

.property-details-form {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.property-details-intro h3,
.property-details-intro p {
  margin: 0;
}

.property-details-intro h3 {
  font-size: calc(17px + var(--ui-font-step));
}

.property-details-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.property-location-editor {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #f8e8f2;
  border-radius: 14px;
  background: var(--brand-faint);
}

.property-location-editor > strong,
.property-details-section-title strong {
  font-size: calc(12px + var(--ui-font-step));
}

.property-details-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.property-details-section-title small {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.property-merge-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dcc2d2;
  border-radius: 12px;
  background: #fff;
}

.property-merge-warning[hidden] {
  display: none;
}

.property-merge-warning > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.property-merge-warning strong {
  color: var(--red);
  font-size: calc(12px + var(--ui-font-step));
}

.property-merge-warning small {
  overflow-wrap: anywhere;
  font-weight: 750;
}

.property-merge-warning p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
  line-height: 1.4;
}

.property-merge-warning .button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  font-size: calc(11px + var(--ui-font-step));
}

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

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

.property-details-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.property-details-actions small {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.property-permits-editor {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e4bfd6;
  border-radius: 13px;
  background: #fff7fb;
}

.property-optional-details > .property-permits-editor {
  margin: 0 13px 13px;
}

.property-permits-head,
.property-permit-row {
  display: flex;
  align-items: end;
  gap: 8px;
}

.property-permits-head {
  align-items: center;
  justify-content: space-between;
}

.property-permits-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-permits-head strong {
  font-size: calc(12px + var(--ui-font-step));
}

.property-permits-head small {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-rows {
  display: grid;
  gap: 8px;
}

.property-permit-row > .field {
  min-width: 0;
  flex: 1 1 0;
}

.property-permit-remove {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border: 1px solid #e4bfd6;
  border-radius: 10px;
  color: var(--red);
  background: #fff;
  font: inherit;
  font-size: calc(19px + var(--ui-font-step));
  cursor: pointer;
}

.file-icon {
  width: 34px;
  height: 42px;
  display: grid;
  place-content: center;
  flex: 0 0 34px;
  border: 1px solid #d9c7a7;
  border-radius: 4px;
  color: #8a6422;
  background:
    repeating-linear-gradient(#fffdf7 0 7px, #eadfca 8px);
  font-size: calc(20px + var(--ui-font-step));
  font-weight: 800;
}

.notebook {
  overflow: hidden;
  border: 1px solid #e4d7c2;
  border-radius: 15px;
  background: #fffdf7;
}

.notebook-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-bottom: 1px solid #eadfca;
}

.notebook-head h3,
.notebook-head p {
  margin: 0;
}

.notebook-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.notebook textarea {
  min-height: 260px;
  padding: 16px 16px 16px 38px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 28px, #f1b8b8 29px, transparent 30px),
    repeating-linear-gradient(#fffdf7 0 29px, #ead5e2 30px);
  line-height: 30px;
}

.notebook-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border-top: 1px solid #eadfca;
}

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

.photo-card-wrap .photo-card {
  width: 100%;
  height: 100%;
}

.photo-quick-delete {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(179, 40, 67, 0.92);
  font-size: calc(19px + var(--ui-font-step));
  line-height: 1;
}

.photo-quick-download {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 9px;
  color: white;
  background: rgba(17, 55, 78, 0.88);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(5px);
}

.photo-quick-download:hover {
  background: var(--brand);
}

.photo-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--brand-faint);
}

.photo-upload-card {
  width: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border: 1px dashed #d9b5cc;
  border-radius: 16px;
  color: var(--brand-dark);
  background: linear-gradient(145deg, #fff, var(--brand-faint));
  font: inherit;
  text-align: center;
  appearance: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.photo-upload-choice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.photo-upload-choice .photo-upload-card {
  min-height: 150px;
}

.photo-upload-action-icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 50%;
  color: white;
  background: var(--brand);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.photo-upload-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 24px rgba(112, 20, 77, 0.1);
}

.photo-upload-card strong,
.photo-upload-card small {
  display: block;
}

.photo-upload-card small {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.photo-upload-plus {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--brand);
  font-size: calc(34px + var(--ui-font-step));
  font-weight: 300;
  line-height: 1;
}

.offline-staging-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #f6d7ea;
  border-radius: 13px;
  color: var(--brand-dark);
  background: var(--brand-faint);
}

.offline-staging-notice strong {
  flex: 0 0 auto;
  font-size: calc(12px + var(--ui-font-step));
}

.offline-staging-notice span {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.35;
}

.photo-selection-bar span {
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 700;
}

.photo-selection-summary {
  display: flex;
  align-items: center;
  gap: 9px;
}

.photo-select-all {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 9px;
  color: var(--brand-dark);
  background: #fff;
  font: inherit;
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 800;
  cursor: pointer;
}

.photo-selection-bar .button {
  min-height: 36px;
  padding: 0 11px;
  font-size: calc(11px + var(--ui-font-step));
}

.photo-batch-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.photo-uploader {
  overflow: hidden;
  color: #70636b !important;
  font-size: 9px !important;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-select-control {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(32, 32, 36, 0.16);
}

.photo-select-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.photo-select-control span {
  color: #aab6be;
  font-size: calc(15px + var(--ui-font-step));
  font-weight: 900;
}

.photo-select-control:has(input:checked) {
  background: var(--brand);
}

.photo-select-control:has(input:checked) span {
  color: #fff;
}

.trash-archive-panel {
  min-height: 420px;
}

.trash-summary {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 700;
}

.trash-windows-list {
  display: grid;
  gap: 8px;
}

.trash-windows-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(112, 20, 77, 0.11);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 5px 16px rgba(50, 32, 45, 0.06);
}

.trash-windows-folder-icon {
  justify-self: center;
  width: 46px;
  height: 34px;
}

.trash-windows-folder-icon::before {
  width: 21px;
}

.trash-windows-photo-select {
  position: relative;
  width: 64px;
  height: 58px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}

.trash-windows-photo-select:has(input:checked) {
  border-color: var(--brand);
}

.trash-windows-photo-select input {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: 19px;
  min-height: 19px;
  accent-color: var(--brand);
}

.trash-windows-photo-select img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.trash-file-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.trash-file-preview.is-pdf {
  background: #e8e8ea;
}

.trash-file-preview.is-pdf img {
  object-fit: contain;
}

.trash-file-preview.is-dwg {
  display: grid;
  place-content: center;
  color: #70144d;
  background: linear-gradient(145deg, #faf8fa, #eceff2);
}

.trash-dwg-mark {
  font-size: calc(16px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.08em;
}

.trash-file-preview .photo-type-badge {
  top: 4px;
  right: 4px;
  min-height: 18px;
  padding: 0 5px;
  border-radius: 7px;
  font-size: calc(8px + var(--ui-font-step));
}

.trash-windows-copy {
  min-width: 0;
}

.trash-windows-copy strong,
.trash-windows-copy span,
.trash-windows-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-windows-copy strong {
  color: var(--text);
  font-size: calc(14px + var(--ui-font-step));
}

.trash-windows-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 700;
}

.trash-windows-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.trash-windows-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trash-windows-actions .button {
  min-height: 38px;
  padding: 0 10px;
  font-size: calc(10px + var(--ui-font-step));
}

.trash-photo-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 7px 22px rgba(50, 32, 45, 0.09);
  cursor: pointer;
}

.trash-photo-card input {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  width: 22px;
  min-height: 22px;
  accent-color: var(--brand);
}

.trash-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.trash-photo-card > span {
  display: block;
  overflow: hidden;
  padding: 9px;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trash-photo-card > span small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 600;
  text-overflow: ellipsis;
}

.photo-move-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(34, 24, 31, 0.48);
  backdrop-filter: blur(8px);
}

.photo-move-dialog {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid rgba(112, 20, 77, 0.12);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(36, 0, 24, 0.24);
}

.photo-move-head,
.photo-move-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-move-head {
  margin-bottom: 20px;
}

.photo-move-head h2,
.photo-move-head p {
  margin: 0;
}

.photo-move-help {
  margin: 2px 0 18px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.5;
}

.photo-move-actions {
  justify-content: flex-end;
}

.trash-photo-card:has(input:checked) {
  border-color: var(--brand);
}

.trash-folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.trash-folder-row > .button {
  min-height: 44px;
  padding: 0 10px;
  font-size: calc(11px + var(--ui-font-step));
}

.folder-icon {
  position: relative;
  width: 34px;
  height: 25px;
  flex: 0 0 34px;
  border-radius: 4px 5px 5px 5px;
  background: #f2ba25;
  box-shadow: inset 0 -3px 0 rgba(112, 80, 0, 0.09);
}

.folder-icon::before {
  position: absolute;
  top: -5px;
  left: 2px;
  width: 15px;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background: #f2ba25;
  content: "";
}

.folder-copy {
  min-width: 0;
  flex: 1;
}

.folder-copy strong,
.folder-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.folder-arrow {
  color: var(--muted);
  font-size: calc(25px + var(--ui-font-step));
  line-height: 1;
}

.folder-back {
  margin: 0 0 8px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  color: var(--brand);
  background: var(--brand-soft);
  font: inherit;
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 800;
}

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

.inline-form input {
  flex: 1;
}

.photo-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .property-result {
    grid-template-columns: 1fr auto;
  }

  .property-result span {
    grid-column: 1 / -1;
  }

  .selected-property {
    display: grid;
  }
}

.display-settings {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  font-family: Inter, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

.display-settings-panel[hidden] {
  display: none;
}

.display-settings-panel {
  width: 282px;
  padding: 11px;
  border: 1px solid rgba(112, 20, 77, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 45px rgba(7, 55, 88, 0.2);
  backdrop-filter: blur(18px);
}

.display-settings-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 9px;
}

.display-settings-heading strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.display-settings-heading small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.display-settings-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: var(--brand-faint);
}

.display-settings-options button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
}

.display-settings-options button b {
  font-size: 14px;
  line-height: 1;
}

.display-settings-options button span {
  font-size: 8px;
  font-weight: 700;
}

.display-settings-options button:hover,
.display-settings-options button.active {
  border-color: rgba(206, 33, 136, 0.2);
  color: var(--brand-dark);
  background: #fff;
  box-shadow: 0 4px 12px rgba(112, 20, 77, 0.1);
}

.display-appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: var(--brand-faint);
}

.display-settings-section + .display-settings-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.display-appearance-options button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 780;
  line-height: 1;
}

.display-appearance-options button :is(svg, .display-appearance-icon) {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-appearance-options button:hover,
.display-appearance-options button.active,
.display-appearance-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  color: var(--brand-dark);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(18, 59, 82, 0.09);
}

.display-settings-toggle {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 28px rgba(112, 20, 77, 0.28);
}

.display-settings-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-settings-toggle:hover {
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .display-settings {
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .display-settings-toggle {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .display-settings-panel {
    width: min(282px, calc(100vw - 24px));
  }
}

/* Taşınmaz çalışma alanı: Ruhsatlar, Dosyalar, Harita ve Taşınmaz Bilgisi. */
.property-workspace-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px;
  border: 1px solid rgba(206, 33, 136, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(206, 33, 136, 0.045), rgba(255, 255, 255, 0.94)),
    #fff;
  box-shadow: 0 9px 30px rgba(7, 63, 105, 0.055);
}

.property-workspace-tab {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.property-workspace-tab:hover {
  color: var(--brand-dark);
  background: var(--brand-faint);
}

.property-workspace-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: 0 8px 20px rgba(206, 33, 136, 0.2);
}

.property-workspace-tab-number {
  min-width: 27px;
  color: var(--brand);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.08em;
}

.property-workspace-tab.active .property-workspace-tab-number {
  color: rgba(255, 255, 255, 0.66);
}

.property-workspace-tab > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-workspace-tab strong,
.property-workspace-tab small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-workspace-tab strong {
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 800;
}

.property-workspace-tab small {
  color: inherit;
  font-size: calc(8px + var(--ui-font-step));
  opacity: 0.72;
}

.property-permits-workspace,
.property-details-workspace,
.property-map-workspace {
  overflow: hidden;
  border: 1px solid #ead5e2;
  border-radius: 18px;
  background: #fff;
}

.property-workspace-section-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border-bottom: 1px solid #f5f0f3;
  background:
    radial-gradient(circle at 92% 0, rgba(206, 33, 136, 0.1), transparent 240px),
    linear-gradient(135deg, #faf9fb, #faf9fb);
}

.property-workspace-section-head > div:first-child {
  min-width: 0;
}

.property-workspace-section-head h3,
.property-workspace-section-head p {
  margin: 0;
}

.property-workspace-section-head h3 {
  margin-top: 2px;
  color: var(--ink);
  font-size: calc(17px + var(--ui-font-step));
  letter-spacing: -0.02em;
}

.property-workspace-section-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.property-workspace-eyebrow {
  color: var(--brand);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.16em;
}

.property-permit-counts {
  display: flex;
  gap: 6px;
}

.property-permit-counts span {
  min-width: 70px;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border: 1px solid rgba(206, 33, 136, 0.12);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.8);
  font-size: calc(8px + var(--ui-font-step));
  text-transform: uppercase;
}

.property-permit-counts b {
  color: var(--brand-dark);
  font-size: calc(15px + var(--ui-font-step));
}

.property-inline-status {
  margin: 12px 16px 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--brand-dark);
  background: var(--brand-faint);
  font-size: calc(10px + var(--ui-font-step));
}

#property-permits-form {
  display: grid;
  gap: 9px;
  padding: 11px 13px 13px;
}

.property-permit-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.property-permit-create-actions .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: calc(10px + var(--ui-font-step));
}

.property-permit-records {
  display: grid;
  gap: 6px;
}

.property-permit-record {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 39px 9px 7px;
  border: 1px solid #ead3e2;
  border-radius: 15px;
  background: #faf9fb;
}

.property-permit-record-accent {
  border-radius: 999px;
  background: var(--brand);
}

.property-permit-record-accent.occupancy {
  background: #e6a42c;
}

.property-permit-record-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(145px, .36fr) minmax(0, 1.64fr);
  align-items: start;
  gap: 8px;
}

.property-permit-record-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(100px, 0.72fr) minmax(130px, 0.9fr) minmax(140px, 1fr);
  gap: 5px;
}

.property-permit-record .field span {
  font-size: calc(8px + var(--ui-font-step));
}

.property-permit-record .field input,
.property-permit-record .field select {
  min-height: 33px;
  padding: 6px 8px;
  font-size: calc(10px + var(--ui-font-step));
}

.property-permit-description-field small,
.property-permit-quality-field small {
  color: var(--muted);
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 600;
}

.property-permit-documents {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
}

.property-permit-document-list {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-items: center;
}

.property-permit-document-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #ead5e2;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.property-permit-document-preview {
  position: relative;
  width: 54px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  background-color: var(--brand-dark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.property-permit-document-preview b {
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(7, 63, 105, .78);
  font-size: calc(6px + var(--ui-font-step));
  letter-spacing: .04em;
}

.property-permit-document-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-permit-document-copy b {
  color: var(--brand);
  font-size: calc(7px + var(--ui-font-step));
}

.property-permit-document-copy small {
  overflow: hidden;
  color: var(--ink);
  font-size: calc(8px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-document-list > small {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-document-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.property-permit-upload-button {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, #ead5e2);
  border-radius: 8px;
  color: var(--brand-dark);
  background: var(--brand-faint);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 850;
  cursor: pointer;
}

.property-permit-upload-button:hover,
.property-permit-upload-button:focus-within {
  border-color: var(--brand);
  outline: none;
}

.property-permit-upload-button.busy {
  opacity: .6;
  pointer-events: none;
}

.property-permit-upload-button > span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: var(--brand);
  font-size: calc(13px + var(--ui-font-step));
  line-height: 1;
}

.property-permit-file-picker {
  min-width: 0;
  flex: 1 1 auto;
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-file-picker summary {
  color: var(--brand);
  font-weight: 800;
  cursor: pointer;
}

.property-permit-file-picker > div {
  max-height: 170px;
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #ead5e2;
  border-radius: 10px;
  background: #fff;
}

.property-permit-file-picker label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 7px;
}

.property-permit-file-picker label:hover {
  background: var(--brand-faint);
}

.property-permit-file-picker label > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.property-permit-file-picker b,
.property-permit-file-picker small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-file-picker small,
.property-permit-file-picker p {
  margin: 0;
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
}

.property-permit-record-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--red);
  background: #fff0ed;
  font: inherit;
  font-size: calc(17px + var(--ui-font-step));
  cursor: pointer;
}

.property-permit-record-index {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: #b6aeb3;
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 900;
}

.property-permit-readonly-title {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 40px;
}

.property-permit-readonly-title span {
  color: var(--brand);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-permit-readonly-title strong {
  font-size: calc(12px + var(--ui-font-step));
}

.property-permit-readonly-title small {
  color: var(--brand-dark);
  font-size: calc(9px + var(--ui-font-step));
  line-height: 1.35;
}

.property-permit-readonly-title p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  line-height: 1.4;
}

.property-permits-empty,
.property-map-status {
  min-height: 210px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 25px;
  color: var(--muted);
  text-align: center;
}

.property-permits-empty[hidden] {
  display: none;
}

.property-permits-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--brand);
  background: var(--brand-faint);
  font-size: calc(25px + var(--ui-font-step));
}

.property-permits-empty strong,
.property-map-status strong {
  color: var(--ink);
  font-size: calc(13px + var(--ui-font-step));
}

.property-permits-empty small,
.property-map-status small {
  max-width: 420px;
  font-size: calc(9px + var(--ui-font-step));
  line-height: 1.45;
}

.property-permits-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #f5f0f3;
}

.property-permits-savebar small {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permits-savebar .button {
  min-height: 36px;
  padding: 0 14px;
  font-size: calc(10px + var(--ui-font-step));
}

.property-map-workspace {
  position: relative;
}

.property-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 430;
  overflow: hidden;
  background:
    linear-gradient(rgba(206, 33, 136, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 33, 136, 0.06) 1px, transparent 1px),
    #faf8fa;
  background-size: 32px 32px;
}

.property-map-tile {
  position: absolute;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: saturate(0.72) contrast(0.96) brightness(1.03);
}

.property-map-stage svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.property-map-stage polygon {
  fill: rgba(206, 33, 136, 0.32);
  stroke: var(--brand-dark);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.property-map-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  color: #fff;
  background: rgba(7, 63, 105, 0.88);
  box-shadow: 0 8px 24px rgba(7, 63, 105, 0.18);
  backdrop-filter: blur(10px);
}

.property-map-badge strong {
  font-size: calc(11px + var(--ui-font-step));
}

.property-map-badge small {
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(8px + var(--ui-font-step));
}

.property-map-attribution {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  color: #70636b;
  background: rgba(255, 255, 255, 0.82);
  font-size: calc(7px + var(--ui-font-step));
}

.property-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  color: var(--muted);
  background: #fff;
  font-size: calc(8px + var(--ui-font-step));
}

.property-map-footer a {
  color: var(--brand);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 800;
  text-decoration: none;
}

.property-details-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
  gap: 10px;
  padding: 14px;
}

.property-details-workspace-grid > .property-identity-card,
.property-details-workspace-grid > .property-note-file {
  min-height: 96px;
  margin: 0;
}

.property-details-workspace-grid > .property-note-file {
  align-items: flex-start;
  padding: 13px;
}

.property-details-workspace-grid .property-note-summary {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.property-workspace-notebook {
  margin: 0;
}

@media (max-width: 980px) {
  .property-workspace-tab {
    min-height: 50px;
    padding: 7px 8px;
  }

  .property-workspace-tab small {
    display: none;
  }

  .property-permit-record-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .property-workspace-tabs {
    gap: 4px;
    margin-bottom: 9px;
    padding: 4px;
    border-radius: 14px;
  }

  .property-workspace-tab {
    min-height: 48px;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 10px;
    text-align: center;
  }

  .property-workspace-tab-number {
    display: none;
  }

  .property-workspace-tab strong {
    font-size: calc(9px + var(--ui-font-step));
    white-space: normal;
  }

  .property-workspace-section-head {
    min-height: 0;
    align-items: flex-start;
    padding: 12px;
  }

  .property-workspace-section-head p {
    display: none;
  }

  .property-permit-counts span {
    min-width: 52px;
    padding: 6px 7px;
  }

  #property-permits-form {
    padding: 10px;
  }

  .property-permit-create-actions {
    justify-content: stretch;
  }

  .property-permit-create-actions .button {
    flex: 1 1 0;
  }

  .property-permit-record {
    grid-template-columns: 4px minmax(0, 1fr) 26px;
    gap: 7px;
    padding: 9px 8px 10px 7px;
  }

  .property-permit-record-main,
  .property-permit-record-fields {
    grid-template-columns: 1fr;
  }

  .property-permits-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  .property-permits-savebar .button {
    width: 100%;
  }

  .property-map-stage {
    aspect-ratio: 4 / 3;
  }

  .property-details-workspace-grid {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .property-map-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Sol durum kartı: menü sabit kalır, son arşiv işlemleri kartın içinde akar. */
@media (min-width: 861px) {
  .sidebar {
    overflow: hidden;
  }

  .sidebar-brand,
  .sidebar > .nav {
    flex: 0 0 auto;
  }

  .sidebar-footer {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .sidebar-footer::-webkit-scrollbar {
    display: none;
  }
}

.sidebar-status-summary {
  min-width: 0;
}

.sidebar-activity {
  min-width: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sidebar-activity-head > strong {
  color: #fff;
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-activity-head > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-activity-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #65d69c;
  box-shadow: 0 0 0 3px rgba(101, 214, 156, 0.12);
}

.sidebar-activity-viewport {
  height: clamp(78px, 18vh, 186px);
  overflow: hidden;
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}

.sidebar-activity-track.rolling {
  animation: sidebar-activity-scroll var(--activity-duration, 36s) linear infinite;
}

.sidebar-activity:hover .sidebar-activity-track,
.sidebar-activity:focus-within .sidebar-activity-track {
  animation-play-state: paused;
}

.sidebar-activity-group {
  display: grid;
}

.sidebar-activity-item {
  position: relative;
  height: 62px;
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 7px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
}

.sidebar-activity-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 850;
}

.sidebar-activity-copy {
  min-width: 0;
  padding-right: 43px;
}

.sidebar-activity-copy p {
  max-height: 28px;
  margin: 0;
  overflow: hidden;
  font-size: calc(9px + var(--ui-font-step));
  line-height: 1.45;
}

.sidebar-activity-copy p strong {
  color: #fff;
  font-weight: 750;
}

.sidebar-activity-copy small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.52);
  font-size: calc(8px + var(--ui-font-step));
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-activity-item time {
  position: absolute;
  top: 9px;
  right: 4px;
  width: 39px;
  color: rgba(255, 255, 255, 0.47);
  font-size: calc(7px + var(--ui-font-step));
  line-height: 1.25;
  text-align: right;
}

.sidebar-activity-empty {
  min-height: 78px;
  display: grid;
  place-content: center;
  padding: 12px;
  color: rgba(255, 255, 255, 0.54);
  font-size: calc(9px + var(--ui-font-step));
  text-align: center;
}

@keyframes sidebar-activity-scroll {
  to {
    transform: translateY(-50%);
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  .sidebar-activity-viewport {
    height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-activity-track.rolling {
    animation: none;
  }

  .sidebar-activity-viewport {
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sidebar-activity-group[aria-hidden="true"] {
    display: none;
  }
}

.photo-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: #edeef0;
  box-shadow: 0 8px 24px rgba(50, 32, 45, 0.1);
  text-align: left;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform 220ms ease;
}

.photo-card img.pdf-thumbnail {
  object-fit: contain;
  background: #e8e8ea;
}

.photo-dwg-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #70144d;
  background:
    linear-gradient(135deg, rgba(206, 33, 136, 0.12), rgba(255, 255, 255, 0.88)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(112, 20, 77, 0.055) 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(112, 20, 77, 0.055) 24px);
}

.photo-dwg-preview strong {
  font-size: calc(27px + var(--ui-font-step));
  letter-spacing: 0.12em;
}

.photo-dwg-preview span {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
}

.photo-archive-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #2f5d73;
  background:
    linear-gradient(135deg, rgba(47, 93, 115, 0.13), rgba(255, 255, 255, 0.92)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(47, 93, 115, 0.045) 13px);
}

.photo-archive-preview strong {
  font-size: calc(27px + var(--ui-font-step));
  letter-spacing: 0.12em;
}

.photo-archive-preview span {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
}

.photo-type-badge {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 45px;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(206, 33, 136, 0.92);
  box-shadow: 0 4px 12px rgba(112, 20, 77, 0.2);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.08em;
}

.photo-meta .photo-file-name {
  overflow: visible;
  color: #70144d;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  font-weight: 750;
}

.photo-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: none;
  place-content: center;
  color: var(--muted);
  background:
    linear-gradient(145deg, var(--brand-faint), #f1f2f4);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 750;
}

.photo-fallback.visible {
  display: grid;
}

.photo-card:hover img {
  transform: scale(1.03);
}

.photo-meta {
  padding: 12px;
  background: var(--surface-raised);
}

.photo-meta strong,
.photo-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-meta strong {
  font-size: calc(13px + var(--ui-font-step));
}

.photo-meta span {
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.photo-meta .photo-note-preview {
  width: fit-content;
  max-width: 100%;
  overflow: visible;
  margin-top: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 800;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.archive-context-menu {
  position: fixed;
  z-index: 12000;
  width: min(260px, calc(100vw - 20px));
  overflow: hidden;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #fff);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(31, 38, 45, 0.2), 0 3px 12px rgba(31, 38, 45, 0.1);
  backdrop-filter: blur(18px);
}

.archive-interaction-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 650;
  letter-spacing: 0.01em;
}

.archive-context-menu-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--line);
}

.archive-context-menu-head strong,
.archive-context-menu-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-context-menu-head strong {
  color: var(--ink);
  font-size: calc(12px + var(--ui-font-step));
}

.archive-context-menu-head small {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.archive-context-menu-actions {
  display: grid;
  gap: 1px;
  padding-top: 5px;
}

.archive-context-menu-actions button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.archive-context-menu-actions button:hover,
.archive-context-menu-actions button:focus-visible {
  outline: none;
  background: var(--brand-faint);
}

.archive-context-menu-actions button span {
  color: var(--brand);
  font-size: calc(15px + var(--ui-font-step));
  text-align: center;
}

.archive-context-menu-actions button b {
  overflow: hidden;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-context-menu-actions button.danger,
.archive-context-menu-actions button.danger span {
  color: var(--red);
}

.archive-context-menu-actions button.danger:hover,
.archive-context-menu-actions button.danger:focus-visible {
  background: #fff0ed;
}

.archive-context-menu-separator {
  height: 1px;
  margin: 4px 7px;
  background: var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .photo-selection-bar:not(.has-selection) {
    display: none;
  }

  .photo-quick-download,
  .photo-quick-delete,
  .property-folder-delete,
  .property-permit-pdf-delete,
  .photo-select-control {
    display: none;
  }

  .photo-card-wrap.is-selected .photo-select-control,
  .property-permit-record.is-selected .photo-select-control {
    display: grid;
    pointer-events: none;
  }

  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 10px;
  }

  .photo-card,
  .photo-upload-card {
    border-radius: 13px;
  }

  .photo-card {
    cursor: default;
    box-shadow: 0 5px 15px rgba(50, 32, 45, 0.08);
    transition: box-shadow 150ms ease, transform 150ms ease, outline-color 150ms ease;
  }

  .photo-card-wrap.is-selected .photo-card,
  .property-permit-record.is-selected {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 18%, transparent);
  }

  .photo-meta {
    padding: 9px 10px 10px;
  }

  .photo-meta span {
    margin-top: 3px;
  }

  .photo-upload-card {
    min-height: 160px;
    padding: 12px;
  }

  .photo-upload-plus {
    width: 44px;
    height: 44px;
    font-size: calc(29px + var(--ui-font-step));
  }

  .category-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
  }

  .property-folder-entry .category-folder {
    min-height: 142px;
    gap: 9px;
    padding: 27px 9px 11px;
    cursor: default;
  }

  .category-folder .folder-icon {
    width: min(78px, 100%);
  }

  .archive-folder {
    padding: 9px 11px;
    border-radius: 12px;
  }

  .archive-folder.is-selected {
    border-color: var(--brand);
    outline: 2px solid color-mix(in srgb, var(--brand) 22%, transparent);
    outline-offset: 1px;
    background: var(--brand-faint);
  }

  .property-structure-group {
    padding: 10px;
    border-radius: 13px;
  }

  .property-structure-groups {
    gap: 10px;
  }

  .property-permit-record {
    transition: outline-color 150ms ease, box-shadow 150ms ease;
  }

  .photo-type-badge {
    right: 9px;
  }
}

.trash-windows-photo .trash-windows-copy strong,
.trash-photo-card > span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.empty {
  padding: 46px 20px;
  border: 1px dashed #e4bfd6;
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.upload-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 20px;
}

.upload-drop {
  min-height: 300px;
  display: grid;
  place-content: center;
  padding: 34px;
  border: 2px dashed #dcc2d2;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(206, 33, 136, 0.1), transparent 17rem),
    var(--surface);
  text-align: center;
}

.upload-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-content: center;
  margin: 0 auto 16px;
  border-radius: 20px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: calc(26px + var(--ui-font-step));
}

.upload-drop h2 {
  margin: 0;
  font-size: calc(24px + var(--ui-font-step));
  font-weight: 780;
  letter-spacing: -0.4px;
}

.upload-drop p {
  max-width: 430px;
  margin: 10px auto 20px;
  color: var(--muted);
  line-height: 1.5;
}

.upload-location-card {
  width: min(100%, 680px);
  margin: 0 auto 18px;
  padding: 18px;
  border: 1px solid #f8e8f2;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.upload-drop .location-step {
  margin: 0 0 12px;
  color: var(--brand-dark);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 800;
}

.upload-location-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(100px, 0.75fr) minmax(100px, 0.75fr);
  gap: 10px;
}

.upload-location-grid .field,
.upload-album-field {
  margin-bottom: 0;
}

.property-create-shell {
  width: min(100%, 760px);
  margin: 0 auto;
}

.property-create-card {
  display: grid;
  gap: 20px;
  padding: 28px;
}

.property-create-intro {
  display: flex;
  align-items: center;
  gap: 15px;
}

.property-create-intro h2,
.property-create-intro p {
  margin: 0;
}

.property-create-intro h2 {
  font-size: calc(21px + var(--ui-font-step));
}

.property-create-intro p {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(13px + var(--ui-font-step));
}

.property-create-icon {
  width: 50px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 5px 9px 9px 9px;
  background: linear-gradient(145deg, #ffc331, #eca90c);
  box-shadow: inset 0 -3px 0 rgba(114, 68, 0, 0.12);
  position: relative;
}

.property-create-icon::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 4px;
  width: 21px;
  height: 9px;
  border-radius: 5px 5px 0 0;
  background: #f2b51b;
}

.property-create-fields {
  grid-template-columns: minmax(220px, 1.5fr) minmax(110px, 0.75fr) minmax(110px, 0.75fr);
}

.property-create-form input[name="ownerName"],
.property-details-form input[name="ownerName"] {
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: .015em;
}

.property-create-result {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid #f8e8f2;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 650;
}

.property-create-result.existing {
  border-color: #bfe2ce;
  color: #176a3e;
  background: #effaf4;
}

.property-create-submit {
  width: 100%;
}

.property-optional-details {
  border: 1px solid #f8e8f2;
  border-radius: 14px;
  background: var(--surface-soft);
}

.property-optional-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  color: var(--brand-dark);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.property-optional-details summary::-webkit-details-marker {
  display: none;
}

.property-optional-details summary::after {
  content: "+";
  font-size: calc(19px + var(--ui-font-step));
  line-height: 1;
}

.property-optional-details[open] summary::after {
  content: "−";
}

.property-optional-details summary span {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: calc(9px + var(--ui-font-step));
}

.property-optional-details .property-details-grid {
  padding: 0 13px 13px;
}

.upload-album-field {
  margin-top: 2px;
}

.legacy-queue-warning {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e8d0a7;
  border-radius: 14px;
  color: #694915;
  background: #fff8e8;
}

.legacy-queue-warning strong,
.legacy-queue-warning p {
  display: block;
  margin: 0;
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.45;
}

.legacy-queue-warning p {
  margin: 6px 0 12px;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}


.hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.queue-list,
.settings-stack {
  display: grid;
  gap: 12px;
}

.settings-disclosure summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.settings-disclosure summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure summary strong,
.settings-disclosure summary small {
  display: block;
}

.settings-disclosure summary strong {
  font-size: calc(18px + var(--ui-font-step));
}

.settings-disclosure summary small {
  margin-top: 3px;
  color: var(--muted);
}

.disclosure-arrow {
  color: var(--brand);
  font-size: calc(22px + var(--ui-font-step));
  transition: transform 160ms;
}

.settings-disclosure[open] .disclosure-arrow {
  transform: rotate(180deg);
}

.admin-drawer-stack {
  display: grid;
  gap: 9px;
}

.admin-drawer-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(50, 32, 45, 0.035);
}

.admin-drawer > summary {
  min-height: 58px;
  padding: 10px 16px;
  transition: background-color 160ms, border-color 160ms;
}

.admin-drawer > summary:hover {
  background: color-mix(in srgb, var(--panel) 90%, var(--brand-faint) 10%);
}

.admin-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, var(--brand-faint) 6%);
}

.admin-drawer > summary strong {
  font-size: calc(15px + var(--ui-font-step));
}

.admin-drawer > summary small {
  margin-top: 2px;
  font-size: calc(11px + var(--ui-font-step));
}

.admin-drawer-content {
  padding: 16px;
  border-top: 0;
}

.admin-drawer-content > .panel-head:first-child {
  margin-bottom: 14px;
}

.admin-drawer-content > .panel-head:first-child h2 {
  font-size: calc(16px + var(--ui-font-step));
}

@media (max-width: 680px) {
  .admin-drawer-stack {
    gap: 7px;
  }

  .admin-drawer-panel {
    border-radius: 14px;
  }

  .admin-drawer > summary {
    min-height: 54px;
    padding: 9px 13px;
  }

  .admin-drawer > summary small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 100px);
  }

  .admin-drawer-content {
    padding: 13px;
  }
}

.permit-vision-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.permit-vision-form {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(360px, 1.15fr);
  gap: 18px 24px;
  align-items: end;
}

.permit-vision-copy {
  align-self: stretch;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #2b7da7 16%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, #e9f5fa 6%);
}

.permit-vision-copy strong {
  display: block;
  margin-bottom: 5px;
}

.permit-vision-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.permit-vision-copy .permit-vision-migration-status {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}

.permit-vision-migration-status[data-status="running"],
.permit-vision-migration-status[data-status="pending"] {
  color: var(--brand-strong);
}

.permit-vision-migration-status[data-status="failed"] {
  color: var(--danger);
}

.permit-vision-fields {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.8fr);
  gap: 12px;
}

.permit-vision-fields .field small {
  color: var(--muted);
  line-height: 1.35;
}

.permit-vision-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 900px) {
  .permit-vision-form,
  .permit-vision-fields {
    grid-template-columns: 1fr;
  }
}

.disclosure-content {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.compact-add-form {
  display: flex;
  gap: 8px;
}

.compact-add-form input {
  min-width: 0;
  flex: 1;
}

.scrollable-settings-list {
  max-height: 370px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.recent-admin-item {
  border-color: var(--brand);
  background: var(--brand-faint);
  animation: recent-admin-pulse 1.8s ease;
}

@keyframes recent-admin-pulse {
  0%, 100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 4px rgba(206, 33, 136, 0.14);
  }
}

.queue-row,
.user-row,
.trash-row,
.log-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}

.queue-thumb {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: cover;
  border-radius: 12px;
  background: #eff0f2;
}

.queue-copy,
.row-copy {
  min-width: 0;
  flex: 1;
}

.queue-copy strong,
.queue-copy span,
.row-copy strong,
.row-copy span {
  display: block;
}

.queue-copy strong,
.row-copy strong {
  overflow: hidden;
  font-size: calc(13px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-copy span,
.row-copy span {
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.queue-copy .queue-location {
  color: var(--brand-dark);
}

.queue-copy .queue-error {
  color: var(--red);
  font-weight: 700;
}

.progress {
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #f5f0f3;
}

.progress span {
  height: 100%;
  display: block;
  margin: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width 180ms;
}

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

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  font-size: calc(12px + var(--ui-font-step));
}

.check-card input {
  width: 17px;
  min-height: 17px;
  margin: 0;
}

.badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 800;
}

.badge.success {
  color: #137a55;
  background: #e5f6ee;
}

.badge.warning {
  color: #9a5b08;
  background: #fff1d9;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.personnel-list-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

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

.admin-user-role {
  min-width: 165px;
}

.admin-user-role select {
  min-height: 42px;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions {
  display: flex;
  gap: 8px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--brand-faint);
}

.profile-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.profile-logout {
  margin-top: 18px;
  color: var(--red);
}

.pwa-entry-hint {
  display: grid;
  gap: 3px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(206, 33, 136, 0.18);
  border-radius: 14px;
  color: var(--brand-dark);
  background: var(--brand-faint);
  text-align: left;
}

.pwa-entry-hint strong {
  font-size: calc(12px + var(--ui-font-step));
}

.pwa-entry-hint span {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.pwa-install-panel {
  grid-column: 1 / -1;
}

.pwa-install-copy,
.pwa-install-note,
.pwa-installed-state p {
  margin: 0;
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.5;
}

.pwa-install-button {
  width: 100%;
  margin: 14px 0;
}

.pwa-install-button[hidden] {
  display: none;
}

.pwa-manual-install {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(112, 20, 77, 0.12);
  border-radius: 14px;
  background: var(--brand-faint);
}

.pwa-manual-install > strong {
  display: block;
  color: var(--brand-dark);
  font-size: calc(12px + var(--ui-font-step));
}

.pwa-manual-install .pwa-install-steps {
  margin-bottom: 0;
}

.pwa-install-steps {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.45;
}

.pwa-installed-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(45, 136, 92, 0.2);
  border-radius: 14px;
  background: #eef9f3;
}

.pwa-installed-state > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 50%;
  color: white;
  background: #2d885c;
  font-weight: 900;
}

.pwa-installed-state strong {
  display: block;
  margin-bottom: 3px;
  font-size: calc(13px + var(--ui-font-step));
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  flex: 0 0 36px;
  border: 0;
  border-radius: 11px;
  color: var(--brand);
  background: var(--brand-soft);
}

.icon-button.danger {
  color: var(--red);
  background: #fff0ed;
}

.storage-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edeef1;
}

.storage-meter span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #38afd3);
}

.storage-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.panel-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
}

.storage-backup-panel {
  padding: 0;
  overflow: hidden;
}

.storage-backup-panel > .storage-backup-panel-head {
  margin: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}

.storage-backup-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(440px, 1.18fr);
}

.storage-backup-section {
  min-width: 0;
  padding: 20px;
}

.backup-storage-section {
  border-left: 1px solid var(--line);
}

.storage-backup-section > .panel-head {
  margin-bottom: 16px;
}

.primary-selection-summary {
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(45, 136, 92, 0.18);
  border-radius: 12px;
  color: #256c4c;
  background: #f2faf6;
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.45;
}

.primary-selection-summary[data-kind="empty"],
.primary-selection-summary[data-kind="pending"] {
  border-color: rgba(48, 112, 197, 0.18);
  color: #255e9e;
  background: #f2f7fd;
}

.primary-selection-summary[data-kind="invalid"] {
  border-color: rgba(187, 50, 61, 0.18);
  color: var(--red);
  background: #fff3f1;
}

.primary-storage-note {
  margin-top: 14px;
}

.primary-activate-button {
  margin-top: 14px;
}

.backup-settings-form {
  display: grid;
  gap: 16px;
}

.storage-target-actions,
.backup-target-actions,
.restore-target-actions,
.setup-path-actions,
.backup-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.storage-target-actions input,
.backup-target-actions select,
.restore-target-actions input,
.setup-path-actions input,
.setup-path-actions select {
  min-width: 0;
  flex: 1;
}

.backup-capacity {
  margin-top: -8px;
}

.backup-warning,
.backup-error,
.backup-note,
.backup-next-time,
.backup-progress p {
  margin: 0;
  line-height: 1.5;
}

.backup-warning,
.backup-error {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: calc(12px + var(--ui-font-step));
}

.backup-warning {
  color: #6d4a11;
  background: #fff7dc;
}

.backup-error {
  color: var(--red);
  background: #fff0ed;
}

.backup-schedule-box {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft, #faf9fb);
}

.backup-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
}

.backup-switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.backup-schedule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.backup-schedule-grid [hidden] {
  display: none;
}

.backup-next-time {
  margin-top: 10px;
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
}

.backup-progress {
  padding: 14px;
  border-radius: 14px;
  background: var(--brand-faint);
}

.backup-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.backup-progress p {
  margin-top: 7px;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.backup-last {
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #f3faf6;
}

.backup-last.bad {
  color: var(--red);
  background: #fff0ed;
}

.backup-last code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.backup-note {
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
}

.setup-existing-archive,
.setup-recovery-box,
.backup-restore-box {
  border: 1px solid rgba(112, 20, 77, 0.14);
  border-radius: 15px;
  background: var(--brand-faint, #fff7fb);
}

.backup-restore-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
}

.backup-restore-copy {
  min-width: 0;
}

.backup-restore-copy strong {
  display: block;
  margin-bottom: 4px;
}

.backup-restore-copy p {
  margin: 0;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.45;
}

.setup-existing-archive {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.setup-existing-archive[hidden] {
  display: none;
}

.setup-existing-archive p,
.setup-recovery-content p,
.backup-restore-content p {
  margin: 0;
  color: var(--muted);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.5;
}

.setup-recovery-box summary,
.backup-restore-box summary {
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 750;
}

.setup-recovery-content,
.backup-restore-content {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.backup-restore-box {
  margin-top: 2px;
  background: #fffaf8;
}

@media (max-width: 760px) {
  .storage-target-actions,
  .backup-target-actions,
  .restore-target-actions,
  .setup-path-actions,
  .backup-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .storage-target-actions > *,
  .backup-target-actions > *,
  .restore-target-actions > *,
  .setup-path-actions > *,
  .backup-buttons > * {
    width: 100%;
  }

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

  .backup-restore-compact {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1080px) {
  .storage-backup-layout {
    grid-template-columns: 1fr;
  }

  .backup-storage-section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

.mobile-bar {
  display: none;
}

html.viewer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.viewer-open {
  position: fixed;
  top: var(--viewer-scroll-offset, 0);
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.lightbox {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(23, 14, 12, 0.9);
  overscroll-behavior: none;
}

.lightbox-content {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: #171216;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
}

.lightbox-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  background: #120f11;
}

.lightbox-media-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.lightbox-media-transform {
  --viewer-scale: 1;
  --viewer-rotation: 0deg;
  --viewer-pan-x: 0px;
  --viewer-pan-y: 0px;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  transform: translate3d(var(--viewer-pan-x), var(--viewer-pan-y), 0)
    scale(var(--viewer-scale)) rotate(var(--viewer-rotation));
  transform-origin: center;
  transition: transform 120ms ease-out;
}

.lightbox-media-viewport.pannable {
  cursor: grab;
  touch-action: none;
}

.lightbox-media-viewport.pannable.dragging {
  cursor: grabbing;
}

.lightbox-media-viewport.dragging .lightbox-media-transform {
  transition: none;
}

.lightbox-media-viewport.pannable .lightbox-photo {
  touch-action: none;
}

.lightbox-paged .lightbox-media-viewport {
  overflow: auto;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.lightbox-paged .lightbox-media-viewport.dragging,
.lightbox-paged .lightbox-media-viewport.pinching {
  cursor: grabbing;
  scroll-behavior: auto;
}

.lightbox-paged .lightbox-media-transform {
  width: max-content;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  display: block;
  transform: none;
  transition: none;
}

.lightbox-document-pages {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 78px 32px 82px;
}

.lightbox-document-page {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  transition: width 100ms ease-out, height 100ms ease-out;
}

.lightbox-document-page-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(var(--document-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--document-rows, 1), minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: white;
  transform-origin: center;
}

.tiff-quick-preview {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
  transition: opacity 180ms ease;
}

.lightbox-document-segment {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 140ms ease;
}

.lightbox-document-segment.ready {
  opacity: 1;
}

.lightbox-document-page.high-resolution-ready .tiff-quick-preview {
  opacity: 0;
}

/* Üst bilgi şeridi yerine sol menüde toplanan oturum ve yedek bilgileri. */
.desktop-contextbar {
  display: none !important;
}

/* İlk tasarımın bütün masaüstü sayfalarına yayılan ortak görünüm dili. */
.desktop-contextbar {
  display: none;
}

@media (min-width: 861px) {
  body.app-shell-active {
    background:
      radial-gradient(circle at 96% 4%, rgba(206, 33, 136, 0.1), transparent 27rem),
      repeating-linear-gradient(135deg, rgba(112, 20, 77, 0.016) 0 1px, transparent 1px 18px),
      #faf8fa;
  }

  .app-shell {
    background: transparent;
  }

  .sidebar {
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 1.1px) 0 0 / 18px 18px,
      linear-gradient(120deg, transparent 0 46%, rgba(255, 255, 255, 0.035) 46.5% 47%, transparent 47.5% 100%) 0 0 / 180px 180px,
      linear-gradient(160deg, #551039, #74144f);
  }

  .sidebar-brand {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .sidebar-brand .brand-logo {
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f6d7ea);
  }

  .brand-copy strong,
  .nav-button,
  .sidebar-system-status .connection {
    font-weight: 600;
  }

  .sidebar-footer {
    margin-top: 22px;
    padding: 0 4px;
    border-top: 0;
  }

  .sidebar-system-status {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(20, 16, 19, 0.22);
  }

  .sidebar-system-status .connection {
    margin-bottom: 10px;
  }

  .sidebar-harddisk-status {
    margin-bottom: 12px;
    font-weight: 600;
  }

  .sidebar-archive-stats strong,
  .sidebar-capacity-head,
  .sidebar-capacity-head strong {
    font-weight: 600;
  }

  .sidebar-footer > .user-chip {
    display: none;
  }

  .main {
    padding: 18px 22px 48px;
  }

  .desktop-contextbar {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px 16px;
    border-bottom: 1px solid #ead5e2;
  }

  .desktop-context-copy small,
  .desktop-context-copy strong,
  .desktop-user-card strong,
  .desktop-user-card small {
    display: block;
  }

  .desktop-context-copy small {
    color: var(--muted);
    font-size: calc(10px + var(--ui-font-step));
  }

  .desktop-context-copy strong {
    margin-top: 2px;
    font-size: calc(14px + var(--ui-font-step));
    font-weight: 600;
  }

  .desktop-user-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 9px 5px 5px;
    border: 1px solid #ead5e2;
    border-radius: 13px;
    background: #fff;
  }

  .desktop-user-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    color: #fff;
    background: var(--brand);
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 700;
  }

  .desktop-user-card > span:last-child {
    min-width: 0;
  }

  .desktop-user-card strong {
    max-width: 180px;
    overflow: hidden;
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-user-card small {
    max-width: 180px;
    overflow: hidden;
    margin-top: 1px;
    color: var(--muted);
    font-size: calc(9px + var(--ui-font-step));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar {
    min-height: 0;
    align-items: flex-end;
    margin: 0;
    padding: 24px 2px 18px;
    border-bottom: 0;
  }

  .page-kicker {
    margin-bottom: 5px;
    font-weight: 600;
  }

  .page-title {
    font-size: calc(27px + var(--ui-font-step));
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.55px;
  }

  .page-subtitle {
    margin-top: 6px;
    font-size: calc(12px + var(--ui-font-step));
  }

  .status-pill {
    padding: 8px 11px;
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .grid {
    gap: 12px;
  }

  .main .split {
    gap: 12px;
  }

  .main .panel,
  .main .stat-card {
    border-color: #ead5e2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 28px rgba(50, 32, 45, 0.045);
  }

  .main .panel {
    padding: 18px;
  }

  .main .panel-head {
    margin-bottom: 16px;
  }

  .main .panel h2 {
    font-size: calc(16px + var(--ui-font-step));
    font-weight: 600;
    letter-spacing: -0.2px;
  }

  .main .panel h3,
  .settings-disclosure summary strong {
    font-size: calc(14px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .field > span {
    color: #544843;
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .field > input,
  .main .field > select,
  .main .field > textarea,
  .main .property-search > input,
  .main .compact-add-form > input,
  .main .property-folder-form > input,
  .main .backup-target-actions select,
  .main .restore-target-actions input,
  .main .setup-path-actions input,
  .main .setup-path-actions select {
    min-height: 42px;
    border-color: #ead5e2;
    border-radius: 11px;
    background: #f6fafc;
    font-size: calc(12px + var(--ui-font-step));
  }

  .main .field > textarea {
    padding-block: 11px;
  }

  .main .button {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 600;
    box-shadow: 0 9px 24px rgba(206, 33, 136, 0.14);
  }

  .main .button.secondary,
  .main .button.ghost {
    box-shadow: none;
  }

  .archive-add-property {
    min-height: 40px;
    font-weight: 600;
  }

  .archive-main .archive-searchbar {
    box-shadow: none;
  }

  .archive-main .archive-searchbar .property-search {
    position: relative;
  }

  .archive-main .archive-searchbar .property-search::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    width: 10px;
    height: 10px;
    border: 1.8px solid #68737e;
    border-radius: 50%;
    content: "";
    transform: translateY(-60%);
    pointer-events: none;
  }

  .archive-main .archive-searchbar .property-search::after {
    position: absolute;
    z-index: 1;
    top: calc(50% + 5px);
    left: 24px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: #68737e;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
  }

  .archive-main .archive-searchbar .property-search > input {
    padding-left: 39px;
  }

  .archive-main .archive-smart-sort {
    gap: 7px;
  }

  .archive-main .archive-smart-sort::before {
    color: var(--brand);
    content: "☷";
    font-size: calc(15px + var(--ui-font-step));
    line-height: 1;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy strong {
    font-weight: 600;
  }

  .archive-main .panel:not(.archive-panel-open) .archive-folder .property-folder-owner {
    font-weight: 500;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-arrow {
    font-size: 0;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-arrow::before {
    content: "↗";
    font-size: calc(16px + var(--ui-font-step));
    font-weight: 500;
  }

  .property-folder-list > .archive-folder .folder-icon {
    isolation: isolate;
    overflow: visible;
    background: #e9a815;
  }

  .property-folder-list > .archive-folder .folder-icon::before {
    z-index: 0;
  }

  .property-folder-list > .archive-folder .folder-icon::after {
    z-index: 3;
    inset: 14px -1px -1px;
    border-radius: 7px 8px 11px 11px;
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 7px),
      linear-gradient(155deg, #ffdb66, #f1b52c);
    opacity: 1;
    box-shadow: inset 0 1px 0 #fff3bb, inset 0 -5px 0 rgba(112, 80, 0, 0.08);
  }

  .property-folder-list > .archive-folder .folder-paper {
    position: absolute;
    z-index: 1;
    top: -2px;
    right: 7px;
    left: 7px;
    height: 36px;
    display: block;
    border: 1px solid #cad3d9;
    border-radius: 4px;
    background:
      repeating-linear-gradient(#fffefa 0 6px, #e5ebef 7px);
    transform: rotate(-4deg);
  }

  .property-folder-list > .archive-folder .folder-paper-second {
    top: 3px;
    transform: rotate(3deg);
  }

  .archive-main .archive-panel-open {
    padding: 18px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ead5e2;
  }

  .archive-main .archive-panel-open .property-identity-card,
  .archive-main .archive-panel-open .property-details-form,
  .archive-main .archive-panel-open .notebook {
    border-color: #ead5e2;
    background: #fff;
    box-shadow: none;
  }

  .archive-main .archive-panel-open .category-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 12px;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder {
    min-height: 164px;
    border-color: #ead5e2;
    border-radius: 16px;
    background:
      radial-gradient(circle at top right, #f8e8f2, transparent 40%),
      #fff;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover {
    transform: translateY(-2px);
    border-color: #dca9c8;
    box-shadow: 0 13px 32px rgba(7, 63, 105, 0.09);
  }

  .archive-main .archive-panel-open .category-folder .folder-copy strong {
    font-weight: 600;
  }

  .archive-main .archive-panel-open .category-folder .folder-icon.is-filled .folder-paper {
    background:
      repeating-linear-gradient(#fffefa 0 8px, #e5ebef 9px);
  }

  .archive-main .photo-card {
    border: 1px solid #ead5e2;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(50, 32, 45, 0.07);
  }

  .archive-main .photo-meta {
    border-top: 1px solid #edf2f5;
  }

  .property-create-shell {
    width: min(100%, 980px);
    margin: 0;
  }

  .property-create-card {
    gap: 16px;
    padding: 22px;
  }

  .property-create-intro h2 {
    font-size: calc(16px + var(--ui-font-step));
    font-weight: 600;
  }

  .property-create-intro p {
    font-size: calc(11px + var(--ui-font-step));
  }

  .property-optional-details,
  .property-create-result,
  .property-location-editor,
  .backup-schedule-box,
  .backup-progress,
  .pwa-manual-install,
  .profile-card {
    border-color: #ead5e2;
    border-radius: 13px;
    background: #f6fafc;
  }

  .property-optional-details summary,
  .backup-switch,
  .property-details-section-title strong {
    font-weight: 600;
  }

  .admin-main .admin-primary-grid,
  .admin-main .admin-directory-grid,
  .profile-main > .split {
    gap: 12px;
  }

  .settings-disclosure summary {
    min-height: 42px;
  }

  .settings-disclosure summary small,
  .panel-subtitle,
  .backup-note,
  .relay-copy p {
    font-size: calc(11px + var(--ui-font-step));
  }

  .queue-row,
  .user-row,
  .trash-row,
  .log-row,
  .trash-windows-item {
    border-color: #ead5e2;
    border-radius: 13px;
    background: #faf9fb;
  }

  .trash-main .trash-archive-panel,
  .queue-main > .panel,
  .admin-main > .panel,
  .profile-main .panel {
    overflow: hidden;
  }

  .relay-card {
    gap: 18px;
  }

  .relay-qr {
    border-color: #ead5e2;
    border-radius: 14px;
  }
}

/* Eski dar masaüstü denemesi devre dışı; 860 px altı mobil kalır. */
@media not all {
  .app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    padding: 18px 12px;
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 1.1px) 0 0 / 18px 18px,
      linear-gradient(120deg, transparent 0 46%, rgba(255, 255, 255, 0.035) 46.5% 47%, transparent 47.5% 100%) 0 0 / 180px 180px,
      linear-gradient(160deg, #551039, #74144f);
  }

  .sidebar-brand {
    display: flex;
    justify-content: center;
    padding: 0 0 18px;
  }

  .sidebar-brand .brand-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f6d7ea);
  }

  .sidebar .brand-copy,
  .sidebar .nav-label,
  .sidebar-footer {
    display: none;
  }

  .sidebar .nav {
    gap: 5px;
  }

  .sidebar .nav-button,
  .sidebar .nav-button.desktop-only {
    min-height: 42px;
    display: flex !important;
    justify-content: center;
    padding: 0;
    border-radius: 13px;
  }

  .sidebar .nav-icon,
  .sidebar .nav-icon svg {
    width: 19px;
    height: 19px;
  }

  .mobile-bar {
    display: none;
  }

  .main {
    min-width: 0;
    padding: 12px 14px 32px;
  }

  .desktop-contextbar {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px;
    border-bottom: 1px solid #ead5e2;
  }

  .desktop-context-copy small,
  .desktop-context-copy strong,
  .desktop-user-card strong,
  .desktop-user-card small {
    display: block;
  }

  .desktop-context-copy small {
    color: var(--muted);
    font-size: calc(9px + var(--ui-font-step));
  }

  .desktop-context-copy strong {
    margin-top: 2px;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 600;
  }

  .desktop-user-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 7px 4px 4px;
    border: 1px solid #ead5e2;
    border-radius: 12px;
    background: #fff;
  }

  .desktop-user-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 8px;
    color: #fff;
    background: var(--brand);
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 700;
  }

  .desktop-user-card > span:last-child {
    min-width: 0;
  }

  .desktop-user-card strong,
  .desktop-user-card small {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-user-card strong {
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 600;
  }

  .desktop-user-card small {
    margin-top: 1px;
    color: var(--muted);
    font-size: calc(8px + var(--ui-font-step));
  }

  .topbar {
    min-height: 0;
    align-items: flex-end;
    margin: 0;
    padding: 18px 2px 14px;
    border-bottom: 0;
  }

  .page-kicker {
    margin-bottom: 4px;
    color: var(--brand-dark);
    font-size: calc(9px + var(--ui-font-step));
    font-weight: 600;
  }

  .page-title {
    font-size: calc(23px + var(--ui-font-step));
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.45px;
  }

  .page-subtitle {
    margin-top: 5px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .status-pill,
  .archive-add-property {
    min-height: 36px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .panel,
  .main .stat-card {
    border-color: #ead5e2;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 26px rgba(50, 32, 45, 0.045);
  }

  .main .panel {
    padding: 15px;
  }

  .main .panel-head {
    margin-bottom: 13px;
  }

  .main .panel h2 {
    font-size: calc(15px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .panel h3,
  .settings-disclosure summary strong {
    font-size: calc(13px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .field > span {
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 600;
  }

  .main .field > input,
  .main .field > select,
  .main .field > textarea,
  .main .property-search > input,
  .main .compact-add-form > input,
  .main .property-folder-form > input,
  .main .backup-target-actions select,
  .main .restore-target-actions input,
  .main .setup-path-actions input,
  .main .setup-path-actions select {
    min-height: 40px;
    border-color: #ead5e2;
    border-radius: 10px;
    background: #f6fafc;
    font-size: calc(11px + var(--ui-font-step));
  }

  .main .button {
    min-height: 38px;
    padding-inline: 12px;
    border-radius: 11px;
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 600;
  }

  .archive-main .panel:not(.archive-panel-open) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .archive-main .panel:not(.archive-panel-open) > .panel-head {
    display: none;
  }

  .archive-main .archive-searchbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #ead5e2;
    border-radius: 14px;
    background: #fff;
  }

  .archive-main .archive-searchbar .property-search {
    position: relative;
  }

  .archive-main .archive-searchbar .property-search::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    width: 9px;
    height: 9px;
    border: 1.7px solid #68737e;
    border-radius: 50%;
    content: "";
    transform: translateY(-60%);
    pointer-events: none;
  }

  .archive-main .archive-searchbar .property-search::after {
    position: absolute;
    z-index: 1;
    top: calc(50% + 4px);
    left: 22px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: #68737e;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
  }

  .archive-main .archive-searchbar .property-search > input {
    min-height: 38px;
    padding: 0 10px 0 36px;
    border: 0;
    background: #f6fafc;
  }

  .archive-main .archive-smart-sort {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #ead5e2;
    border-radius: 10px;
    color: var(--muted);
    background: #fff;
    font-size: calc(9px + var(--ui-font-step));
    white-space: nowrap;
  }

  .archive-main .archive-smart-sort::before {
    color: var(--brand);
    content: "☷";
    font-size: calc(14px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head {
    margin: 16px 2px 9px;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head strong {
    font-size: calc(13px + var(--ui-font-step));
    font-weight: 600;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head span {
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder {
    position: relative;
    min-height: 112px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-color: #ead5e2;
    border-radius: 16px;
    background:
      radial-gradient(circle at top right, #f8e8f2, transparent 36%),
      #fff;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy strong {
    overflow: visible;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 600;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-owner {
    margin-top: 6px;
    color: var(--brand-dark);
    font-size: calc(10px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy small:last-child {
    margin-top: 6px;
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-arrow {
    align-self: start;
    margin-top: -2px;
    font-size: 0;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-arrow::before {
    content: "↗";
    font-size: calc(15px + var(--ui-font-step));
  }

  .property-folder-list > .archive-folder .folder-icon {
    width: 56px;
    height: 44px;
    flex-basis: 56px;
    isolation: isolate;
    overflow: visible;
    border-radius: 8px 10px 10px 10px;
    background: #e9a815;
  }

  .property-folder-list > .archive-folder .folder-icon::before {
    top: -7px;
    left: 5px;
    width: 26px;
    height: 13px;
    z-index: 0;
  }

  .property-folder-list > .archive-folder .folder-icon::after {
    position: absolute;
    z-index: 3;
    inset: 13px -1px -1px;
    border-radius: 6px 7px 10px 10px;
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 7px),
      linear-gradient(155deg, #ffdb66, #f1b52c);
    box-shadow: inset 0 1px 0 #fff3bb, inset 0 -4px 0 rgba(112, 80, 0, 0.08);
    content: "";
  }

  .property-folder-list > .archive-folder .folder-paper {
    position: absolute;
    z-index: 1;
    top: -2px;
    right: 6px;
    left: 6px;
    height: 33px;
    display: block;
    border: 1px solid #cad3d9;
    border-radius: 4px;
    background: repeating-linear-gradient(#fffefa 0 6px, #e5ebef 7px);
    transform: rotate(-4deg);
  }

  .property-folder-list > .archive-folder .folder-paper-second {
    top: 3px;
    transform: rotate(3deg);
  }

  .archive-main .archive-panel-open {
    padding: 15px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ead5e2;
  }

  .archive-main .archive-panel-open .category-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder {
    min-height: 156px;
    border-color: #ead5e2;
    border-radius: 15px;
    background:
      radial-gradient(circle at top right, #f8e8f2, transparent 40%),
      #fff;
  }

  .property-create-shell {
    width: 100%;
    margin: 0;
  }

  .property-create-card {
    gap: 14px;
    padding: 18px;
  }

  .property-create-intro h2 {
    font-size: calc(15px + var(--ui-font-step));
    font-weight: 600;
  }

  .property-optional-details,
  .property-create-result,
  .property-location-editor,
  .backup-schedule-box,
  .backup-progress,
  .pwa-manual-install,
  .profile-card {
    border-color: #ead5e2;
    background: #f6fafc;
  }

  .queue-row,
  .user-row,
  .trash-row,
  .log-row,
  .trash-windows-item {
    border-color: #ead5e2;
    background: #faf9fb;
  }
}

/* Taşınmaz özeti ve künye aynı, kompakt bilgi bandında görünür. */
.property-overview-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.68fr) minmax(300px, 1.32fr);
  align-items: stretch;
  gap: 8px;
  margin: 0 0 10px;
}

.property-overview-grid > .property-identity-card,
.property-overview-grid > .property-note-file {
  min-height: 76px;
  height: 100%;
  margin: 0;
}

.property-overview-grid > .property-identity-card {
  padding: 9px 10px;
}

.property-overview-grid .property-identity-head > div {
  gap: 1px;
}

.property-overview-grid .property-identity-head > div > small {
  display: none;
}

.property-overview-grid .property-owner-badge {
  max-width: 48%;
  padding: 3px 6px;
  font-size: calc(9px + var(--ui-font-step));
}

.property-overview-grid .property-identity-list {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.property-overview-grid .property-identity-list div {
  padding: 5px 6px;
  border-radius: 7px;
}

.property-overview-grid .property-identity-list dt {
  font-size: calc(8px + var(--ui-font-step));
}

.property-overview-grid .property-identity-list dd {
  margin-top: 1px;
  font-size: calc(11px + var(--ui-font-step));
}

.property-overview-grid > .property-note-file {
  gap: 8px;
  padding: 9px 10px;
  align-items: flex-start;
}

.property-overview-grid > .property-note-file .folder-copy {
  min-width: 0;
  align-self: stretch;
}

.property-overview-grid .property-note-summary {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0;
  color: var(--text);
  font-size: calc(11px + var(--ui-font-step));
  line-height: 1.4;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.property-overview-grid > .property-note-file .file-icon {
  width: 28px;
  height: 34px;
  flex-basis: 28px;
  font-size: calc(16px + var(--ui-font-step));
}

.property-overview-grid > .property-note-file .folder-arrow {
  display: none;
}

@media (max-width: 640px) {
  .property-overview-grid {
    grid-template-columns: minmax(116px, 0.42fr) minmax(0, 1fr);
    gap: 6px;
  }

  .archive-main .property-overview-grid .property-identity-head {
    align-items: center;
    flex-direction: row;
    gap: 5px;
  }

  .archive-main .property-overview-grid .property-owner-badge {
    max-width: 48%;
  }

  .archive-main .property-overview-grid .property-identity-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 5px;
  }

  .property-overview-grid > .property-note-file {
    padding: 7px 8px;
  }

  .property-overview-grid .property-note-summary {
    font-size: calc(10px + var(--ui-font-step));
    -webkit-line-clamp: 5;
  }
}

/* Hafif teknolojik web tasarımı — masaüstü. Mobil düzen bilerek korunur. */
.archive-smart-sort {
  display: none;
}

@media (min-width: 861px) {
  body.app-shell-active {
    background:
      radial-gradient(circle at 96% 4%, rgba(206, 33, 136, 0.12), transparent 26rem),
      repeating-linear-gradient(135deg, rgba(112, 20, 77, 0.018) 0 1px, transparent 1px 18px),
      #faf8fa;
    background-attachment: fixed;
  }

  .app-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .sidebar {
    padding: 22px 18px;
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 18px 18px,
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 18px),
      linear-gradient(155deg, rgba(255, 255, 255, 0.08), transparent 45%),
      linear-gradient(160deg, rgba(85, 16, 57, 0.9) 0%, rgba(116, 20, 79, 0.86) 100%);
    border-right: 1px solid rgba(112, 20, 77, 0.2);
    box-shadow: 14px 0 34px rgba(71, 16, 51, 0.08);
    -webkit-backdrop-filter: saturate(120%);
    backdrop-filter: saturate(120%);
  }

  .sidebar-brand {
    gap: 11px;
    padding: 0 4px 20px;
  }

  .sidebar-brand .brand-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
  }

  .brand-copy strong {
    font-size: calc(14px + var(--ui-font-step));
    font-weight: 700;
  }

  .brand-copy span {
    font-size: calc(11px + var(--ui-font-step));
  }

  .nav {
    gap: 5px;
  }

  .sidebar .nav-button {
    min-height: 42px;
    gap: 11px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: calc(13px + var(--ui-font-step));
    font-weight: 700;
  }

  .nav-icon,
  .nav-icon svg {
    width: 17px;
    height: 17px;
  }

  .sidebar-footer {
    padding-inline: 4px;
  }

  .sidebar-system-status {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(20, 16, 19, 0.22);
  }

  .sidebar-system-status .connection {
    font-weight: 700;
  }

  .sidebar-harddisk-status {
    margin-bottom: 12px;
  }

  .sidebar-archive-stats {
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .sidebar-archive-stats > div {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .sidebar-archive-stats span {
    margin-top: 2px;
    font-size: calc(9px + var(--ui-font-step));
    text-transform: uppercase;
  }

  .sidebar-archive-stats strong {
    margin: 0;
    font-size: calc(16px + var(--ui-font-step));
  }

  .sidebar-capacity-list {
    gap: 14px;
  }

  .sidebar-capacity-head {
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 600;
  }

  .sidebar-capacity-meter {
    height: 5px;
  }

  .sidebar-capacity-meter span,
  .sidebar-capacity.backup .sidebar-capacity-meter span {
    background: linear-gradient(90deg, #46bde9, #68e2b1);
  }

  .sidebar-capacity small {
    font-size: calc(9px + var(--ui-font-step));
  }

  .user-chip {
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
  }

  .main {
    min-width: 0;
    padding: 18px 22px 38px;
  }

  .topbar {
    align-items: flex-end;
    margin-bottom: 0;
    padding: 24px 2px 18px;
    border-bottom: 1px solid #ead5e2;
  }

  .page-kicker {
    margin-bottom: 5px;
    color: #811943;
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 700;
  }

  .page-title {
    font-size: calc(27px + var(--ui-font-step));
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.55px;
  }

  .page-subtitle {
    margin-top: 6px;
    font-size: calc(12px + var(--ui-font-step));
  }

  .archive-add-property {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 700;
    white-space: nowrap;
  }

  .archive-main .panel:not(.archive-panel-open) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .archive-main .panel:not(.archive-panel-open) > .panel-head {
    display: none;
  }

  .archive-main .archive-searchbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding: 10px;
    border: 1px solid #ead5e2;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 28px rgba(50, 32, 45, 0.04);
  }

  .archive-main .property-search > input {
    min-height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: #f6fafc;
    font-size: calc(13px + var(--ui-font-step));
  }

  .archive-main .property-search > input:focus {
    box-shadow: 0 0 0 3px rgba(206, 33, 136, 0.1);
  }

  .archive-main .archive-smart-sort {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #ead5e2;
    border-radius: 11px;
    color: var(--muted);
    background: #fff;
    font-size: calc(11px + var(--ui-font-step));
    white-space: nowrap;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head {
    margin: 20px 2px 11px;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head strong {
    font-size: calc(14px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-section-head span {
    font-size: calc(10px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder {
    position: relative;
    min-height: 128px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-color: #ead5e2;
    border-radius: 17px;
    background:
      radial-gradient(circle at top right, #f8e8f2, transparent 34%),
      #fff;
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder:hover {
    transform: translateY(-2px);
    border-color: #dca9c8;
    background:
      radial-gradient(circle at top right, #f8e8f2, transparent 38%),
      #fff;
    box-shadow: 0 13px 32px rgba(7, 63, 105, 0.1);
  }

  .archive-main .panel:not(.archive-panel-open) .folder-icon {
    width: 62px;
    height: 48px;
    flex-basis: 62px;
    border-radius: 9px 11px 11px 11px;
    background: linear-gradient(145deg, #ffd35c, #f4b821);
    box-shadow: inset 0 -6px 0 rgba(185, 119, 2, 0.12), 0 8px 17px rgba(151, 99, 3, 0.16);
  }

  .archive-main .panel:not(.archive-panel-open) .folder-icon::before {
    top: -8px;
    left: 6px;
    width: 29px;
    height: 15px;
    border-radius: 7px 7px 2px 2px;
    background: #f8c43b;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-icon::after {
    position: absolute;
    inset: 8px 7px 7px;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0 1px, transparent 1px 7px);
    content: "";
    opacity: 0.23;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy strong {
    overflow: visible;
    font-size: calc(13px + var(--ui-font-step));
    font-weight: 700;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .archive-main .panel:not(.archive-panel-open) .archive-folder .property-folder-owner {
    margin-top: 7px;
    color: #811943;
    font-size: calc(11px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy small:last-child {
    margin-top: 7px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .archive-main .panel:not(.archive-panel-open) .folder-arrow {
    align-self: start;
    margin-top: -3px;
    font-size: calc(22px + var(--ui-font-step));
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 14px;
  }

  .main {
    padding-inline: 18px;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: 1fr;
  }
}

.lightbox-document-page img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-document-full-page {
  grid-column: 1;
  grid-row: 1;
}

.lightbox-document-page figcaption {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  color: white;
  background: rgba(20, 16, 19, 0.66);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 750;
  pointer-events: none;
}

.lightbox-media-loading,
.lightbox-document-page-error {
  min-width: min(320px, calc(100vw - 40px));
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 24px;
  border-radius: 18px;
  color: white;
  background: rgba(42, 35, 40, 0.88);
  text-align: center;
}

.lightbox-media-loading small,
.lightbox-document-page-error span {
  color: rgba(255, 255, 255, 0.68);
  font-size: calc(12px + var(--ui-font-step));
}

.lightbox-media-loading.error,
.lightbox-document-page.error {
  background: rgba(126, 34, 56, 0.92);
}

.lightbox-dwg-placeholder {
  width: min(520px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  color: white;
  background: rgba(17, 55, 78, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.lightbox-dwg-mark {
  width: 82px;
  height: 82px;
  display: grid;
  place-content: center;
  border-radius: 18px;
  color: white;
  background: var(--brand);
  box-shadow: 0 12px 30px rgba(206, 33, 136, 0.25);
  font-size: calc(22px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: 0.1em;
}

.lightbox-dwg-placeholder small {
  max-width: 430px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.viewer-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.24);
  border-top-color: var(--brand-soft);
  border-radius: 50%;
  animation: viewer-spin 720ms linear infinite;
}

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

.tiff-preview-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 10px;
  border-radius: 9px;
  color: white;
  background: rgba(23, 18, 22, 0.78);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
}

.lightbox .lightbox-photo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.lightbox .lightbox-photo.ready {
  opacity: 1;
}

@media (min-width: 861px) {
  .lightbox:not(.lightbox-paged) .lightbox-photo {
    width: var(--viewer-image-width, auto);
    height: var(--viewer-image-height, auto);
    max-width: 100%;
    max-height: 100%;
  }
}

.lightbox-image-loading {
  grid-area: 1 / 1;
  z-index: 1;
  min-width: min(280px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  border-radius: 16px;
  color: white;
  background: rgba(42, 35, 40, 0.84);
  text-align: center;
}

.lightbox-image-loading small {
  color: rgba(255, 255, 255, 0.7);
}

.lightbox-image-loading.error {
  background: rgba(126, 34, 56, 0.92);
}

.lightbox-viewer-controls {
  position: absolute;
  z-index: 7;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: white;
  background: rgba(15, 11, 14, 0.68);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox-viewer-controls button {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: transparent;
  font: inherit;
  font-size: calc(20px + var(--ui-font-step));
  font-weight: 800;
  cursor: pointer;
}

.lightbox-viewer-controls button:hover,
.lightbox-viewer-controls button:focus-visible,
.lightbox-viewer-controls button[aria-expanded="true"] {
  background: rgba(206, 33, 136, 0.88);
}

.lightbox-viewer-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.lightbox-viewer-controls span {
  min-width: 44px;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
  text-align: center;
}

.lightbox-viewer-controls .viewer-scale-button {
  width: auto;
  min-width: 50px;
  padding: 0 5px;
  font-size: calc(11px + var(--ui-font-step));
}

.lightbox-viewer-controls .viewer-scale-button span {
  min-width: 0;
}

.lightbox-viewer-controls .lightbox-options-button {
  width: auto;
  padding: 0 12px;
  font-size: calc(12px + var(--ui-font-step));
}

.lightbox-viewer-controls .lightbox-print-button {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: calc(12px + var(--ui-font-step));
}

.lightbox-viewer-controls .lightbox-print-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox-viewer-controls .lightbox-print-button span {
  min-width: 0;
}

.lightbox-options-drawer {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, 92vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 24px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.22);
  transform: translateX(105%);
  transition: transform 190ms ease;
}

.lightbox-options-drawer.open {
  transform: translateX(0);
}

.lightbox-options-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.lightbox-options-head h2 {
  max-width: 285px;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: calc(18px + var(--ui-font-step));
  line-height: 1.3;
}

.lightbox-options-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-alt);
  font: inherit;
  font-size: calc(22px + var(--ui-font-step));
  cursor: pointer;
}

.lightbox-options-close:hover,
.lightbox-options-close:focus-visible {
  color: white;
  background: var(--brand);
}

.photo-note-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.lightbox-drawer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.lightbox-drawer-actions .button,
.lightbox-drawer-actions .lightbox-replace,
.lightbox-drawer-actions .lightbox-delete,
.lightbox-drawer-actions .lightbox-share {
  width: 100%;
  min-height: 42px;
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--line);
  font: inherit;
  font-size: calc(12px + var(--ui-font-step));
  cursor: pointer;
}

.lightbox-drawer-actions .danger {
  color: var(--red);
  background: #fff0ed;
}

.lightbox-details {
  overflow-y: auto;
  padding: 26px;
  color: var(--ink);
  background: white;
}

.lightbox-mobile-summary {
  display: none;
}

.lightbox-details h2 {
  margin: 0 0 20px;
  font-size: calc(21px + var(--ui-font-step));
  line-height: 1.25;
}

.photo-details-list {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.photo-details-list div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.photo-details-list dt,
.photo-details-list dd {
  margin: 0;
  font-size: calc(12px + var(--ui-font-step));
}

.photo-details-list dt {
  color: var(--muted);
  font-weight: 700;
}

.photo-details-list dd {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.photo-note-form .field {
  margin-bottom: 10px;
}

.note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.note-help {
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
}

.photo-note-view {
  padding: 14px;
  border-radius: 14px;
  background: var(--brand-faint);
}

.photo-note-view strong {
  font-size: calc(12px + var(--ui-font-step));
}

.photo-note-view p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: calc(12px + var(--ui-font-step));
  line-height: 1.55;
  white-space: pre-wrap;
}

.remember-login {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 15px;
  color: var(--muted);
  font-size: calc(13px + var(--ui-font-step));
  font-weight: 650;
}

.remember-login input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.photo-action-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: rgba(34, 24, 31, 0.48);
  backdrop-filter: blur(6px);
}

.photo-action-sheet {
  width: min(100%, 460px);
  display: grid;
  gap: 8px;
  margin: 0 auto max(4px, env(safe-area-inset-bottom));
  padding: 16px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 24px 60px rgba(36, 0, 24, 0.28);
}

.photo-action-sheet strong {
  padding: 4px 6px 9px;
}

.photo-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-action-head .photo-action-close {
  width: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  padding: 0;
  border-radius: 999px;
  font-size: calc(22px + var(--ui-font-step));
}

.photo-action-sheet button,
.photo-action-sheet label[role="button"] {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  color: var(--ink);
  background: var(--surface-alt);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.photo-action-sheet button.danger {
  color: var(--red);
  background: #fff0ed;
}

.photo-action-note-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}

.photo-action-note-editor[hidden] {
  display: none;
}

.photo-action-note-editor textarea {
  min-height: 112px;
  resize: vertical;
}

.photo-action-note-editor small {
  color: var(--muted);
  text-align: center;
}

.photo-action-sheet .photo-action-note-save {
  color: white;
  background: var(--brand);
}

.lightbox-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  background: rgba(15, 11, 14, 0.58);
  font-size: calc(24px + var(--ui-font-step));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 48px;
  height: 58px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  color: white;
  background: rgba(15, 11, 14, 0.58);
  font: inherit;
  font-size: calc(38px + var(--ui-font-step));
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.lightbox-prev {
  left: 14px;
}

.lightbox-next {
  right: 14px;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible,
.lightbox-close:hover,
.lightbox-close:focus-visible {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(206, 33, 136, 0.88);
}

.lightbox-position {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  left: 50%;
  padding: 6px 10px;
  border-radius: 999px;
  color: white;
  background: rgba(15, 11, 14, 0.62);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 750;
  transform: translateX(-50%);
  pointer-events: none;
}

.lightbox-toolbar {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 8px;
}

.lightbox-delete,
.lightbox-download,
.lightbox-replace,
.lightbox-share {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: white;
  font-weight: 750;
  text-decoration: none;
}

.lightbox-replace {
  background: rgba(206, 33, 136, 0.86);
  cursor: pointer;
}

.lightbox-share {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.lightbox-delete {
  background: rgba(179, 40, 67, 0.9);
}

.lightbox-download {
  background: rgba(255, 255, 255, 0.16);
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  max-width: 360px;
  padding: 13px 16px;
  border-radius: 13px;
  color: white;
  background: #332420;
  box-shadow: var(--shadow);
  font-size: calc(13px + var(--ui-font-step));
  animation: toast-in 180ms ease-out;
}

.toast.error {
  background: var(--red);
}

.relay-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.relay-qr {
  width: 180px;
  height: 180px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.relay-copy {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.relay-copy > strong {
  font-size: calc(19px + var(--ui-font-step));
}

.relay-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.relay-copy code {
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--plum);
  background: var(--surface-soft);
}

.relay-copy .relay-error {
  color: var(--red);
}

.empty.compact {
  min-height: 130px;
}

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

@media (max-width: 860px) {
  #property-create-form .property-optional-details {
    display: block;
    border: 0;
    background: transparent;
  }

  #property-create-form .property-optional-details > summary,
  #property-create-form .property-optional-details > .property-file-editor,
  #property-create-form .property-details-grid > .field:not(:first-child) {
    display: none;
  }

  #property-create-form .property-optional-details .property-details-grid {
    display: block;
    padding: 0;
  }

  html,
  body {
    touch-action: pan-x pan-y;
  }

  input,
  select,
  textarea {
    font-size: calc(16px + var(--ui-font-step));
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .main {
    padding: 24px 17px 100px;
  }

  .topbar {
    align-items: center;
  }

  .page-subtitle {
    font-size: calc(13px + var(--ui-font-step));
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .stat-card {
    padding: 15px 12px;
  }

  .stat-card strong {
    font-size: calc(20px + var(--ui-font-step));
  }

  .panel {
    padding: 17px;
  }

  .upload-hero,
  .split,
  .relay-card,
  .lightbox-content {
    grid-template-columns: 1fr;
  }

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

  .archive-clear {
    grid-column: 1 / -1;
  }

  .lightbox {
    padding: 0;
  }

  .lightbox-content {
    height: 100dvh;
    max-height: none;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 0;
  }

  .lightbox-stage {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .lightbox-document-pages {
    gap: 3px;
    padding: 62px 10px 72px;
  }

  .lightbox-document-page {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  }

  .lightbox-viewer-controls {
    top: 9px;
    right: 58px;
    left: 9px;
    width: max-content;
    max-width: calc(100% - 68px);
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
  }

  .lightbox-viewer-controls button {
    min-width: 34px;
    height: 34px;
    padding: 0 7px;
    font-size: calc(18px + var(--ui-font-step));
  }

  .lightbox-viewer-controls span {
    min-width: 38px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .lightbox-viewer-controls .lightbox-options-button {
    padding: 0 9px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .lightbox-viewer-controls .lightbox-print-button {
    min-width: 34px;
    padding: 0 7px;
  }

  .lightbox-viewer-controls .lightbox-print-button span {
    display: none;
  }

  .lightbox-options-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: min(58dvh, 500px);
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(105%);
  }

  .lightbox-options-drawer.open {
    transform: translateY(0);
  }

  .lightbox-options-head h2 {
    max-width: calc(100vw - 82px);
    margin-top: 1px;
    overflow: hidden;
    font-size: calc(13px + var(--ui-font-step));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lightbox-options-head {
    align-items: center;
    margin-bottom: 8px;
  }

  .lightbox-options-head .page-kicker {
    font-size: calc(9px + var(--ui-font-step));
  }

  .lightbox-options-close {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .photo-details-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  .photo-details-list div {
    display: block;
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: var(--brand-faint);
  }

  .photo-details-list div:first-child {
    grid-column: 1 / -1;
  }

  .photo-details-list div:nth-child(3),
  .photo-details-list div:nth-child(4),
  .photo-details-list div:nth-child(5) {
    display: none;
  }

  .photo-details-list dt,
  .photo-details-list dd {
    overflow: hidden;
    font-size: calc(10px + var(--ui-font-step));
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .photo-details-list dd {
    margin-top: 2px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .photo-note-form {
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
  }

  .photo-note-form .field {
    margin-bottom: 4px;
  }

  .photo-note-form textarea {
    min-height: 64px;
    height: 64px;
    padding: 9px 10px;
  }

  .photo-note-form .note-help {
    display: none;
  }

  .photo-note-form .note-actions {
    justify-content: flex-end;
  }

  .photo-note-form .note-actions .button {
    min-height: 36px;
    padding: 8px 18px;
  }

  .lightbox-drawer-actions {
    display: none;
  }

  .lightbox .lightbox-photo {
    max-height: 100%;
  }

  .lightbox-mobile-summary {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px 14px;
    color: white;
    background: #171216;
  }

  .lightbox-mobile-summary strong,
  .lightbox-mobile-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lightbox-mobile-summary strong {
    font-size: calc(13px + var(--ui-font-step));
  }

  .lightbox-mobile-summary span {
    color: rgba(255, 255, 255, 0.66);
    font-size: calc(11px + var(--ui-font-step));
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .relay-card {
    justify-items: center;
    text-align: center;
  }

  .relay-copy {
    justify-items: center;
  }

  .mobile-bar {
    position: fixed;
    z-index: 30;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 1.2px) 0 0 / 16px 16px,
      linear-gradient(135deg, rgba(206, 33, 136, 0.97), rgba(112, 20, 77, 0.97));
    box-shadow: 0 16px 50px rgba(112, 20, 77, 0.24);
    backdrop-filter: blur(18px);
  }

  .mobile-bar .nav-button {
    min-height: 50px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .mobile-bar .nav-icon {
    width: 20px;
    height: 20px;
  }

  .mobile-bar .nav-count {
    position: absolute;
    margin: -35px 0 0 34px;
  }

  .desktop-only {
    display: none !important;
  }
}

@media (max-width: 520px) {
  html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.app-shell-active {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.app-shell-active #app,
  body.app-shell-active .app-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .auth-card {
    padding: 28px 22px;
  }

  .topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .page-title {
    font-size: calc(31px + var(--ui-font-step));
  }

  .status-pill {
    margin-top: 14px;
  }

  .lightbox-nav {
    width: 42px;
    height: 52px;
    border-radius: 13px;
    font-size: calc(34px + var(--ui-font-step));
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

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

  .stats-grid .stat-card:last-child {
    grid-column: 1 / -1;
  }

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

  .photo-selection-bar {
    position: sticky;
    z-index: 6;
    top: 0;
    margin-bottom: 8px;
    padding: 7px 8px;
    box-shadow: 0 7px 18px rgba(112, 20, 77, 0.12);
  }

  .photo-selection-bar span {
    font-size: calc(10px + var(--ui-font-step));
  }

  .photo-selection-bar .button {
    min-height: 32px;
    padding: 0 8px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .photo-select-control {
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
  }

  .photo-move-overlay {
    place-items: end center;
    padding: 10px;
  }

  .photo-move-dialog {
    padding: 18px;
    border-radius: 20px;
  }

  .photo-upload-choice {
    gap: 9px;
  }

  .photo-upload-choice .photo-upload-card {
    min-height: 132px;
    padding: 11px 7px;
  }

  .photo-upload-action-icon {
    width: 42px;
    height: 42px;
    padding: 9px;
  }

  .photo-upload-choice .photo-upload-card strong {
    font-size: calc(12px + var(--ui-font-step));
  }

  .archive-filters,
  .upload-location-grid {
    grid-template-columns: 1fr;
  }

  .archive-clear {
    width: 100%;
  }

  .upload-location-card {
    padding: 14px;
  }

  .photo-meta {
    padding: 9px;
  }

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

  .album-filter {
    width: 100%;
  }

  .queue-row {
    align-items: flex-start;
  }

  .row-actions {
    flex-direction: column;
  }

  .admin-user-row {
    align-items: flex-start;
  }

  .admin-user-role,
  .admin-user-actions {
    width: 100%;
  }

  .admin-user-actions .button {
    flex: 1 1 140px;
  }

  /* Telefonda her bölüm uygulama gibi tek görünüm içinde çalışır. */
  .main {
    height: 100dvh;
    overflow: hidden;
    padding: 10px 12px calc(79px + env(safe-area-inset-bottom));
  }

  .archive-main {
    display: flex;
    flex-direction: column;
  }

  .archive-main > .topbar,
  .archive-main > .mobile-archive-connection {
    flex: 0 0 auto;
  }

  .main .topbar {
    margin-bottom: 8px;
  }

  .main .page-kicker,
  .main .page-subtitle,
  .main .status-pill,
  .upload-drop > .upload-icon,
  .upload-drop > h2,
  .upload-drop > p:not(.location-step) {
    display: none;
  }

  .main .page-title {
    font-size: calc(22px + var(--ui-font-step));
    letter-spacing: -0.5px;
  }

  .mobile-archive-connection {
    display: flex;
    width: max-content;
    margin: -3px 0 8px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
  }

  .mobile-archive-connection .connection {
    color: var(--muted);
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 750;
  }

  .main .panel {
    padding: 12px;
    border-radius: 15px;
  }

  .main .panel-head {
    min-height: 32px;
    margin-bottom: 8px;
  }

  .main .panel h2 {
    font-size: calc(17px + var(--ui-font-step));
  }

  .upload-hero {
    display: block;
  }

  .upload-drop {
    min-height: 0;
    display: block;
    padding: 10px;
    border-width: 1px;
    border-radius: 16px;
    background: var(--surface);
  }

  .upload-location-card {
    margin: 0 0 8px;
    padding: 10px;
    border-radius: 13px;
  }

  .upload-drop .location-step {
    margin-bottom: 6px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .upload-location-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .upload-location-grid .field:first-child {
    grid-column: 1 / -1;
  }

  .property-create-card {
    gap: 12px;
    padding: 14px;
  }

  .property-create-intro {
    gap: 10px;
  }

  .property-create-intro h2 {
    font-size: calc(17px + var(--ui-font-step));
  }

  .property-create-intro p {
    font-size: calc(11px + var(--ui-font-step));
    line-height: 1.35;
  }

  .property-create-icon {
    width: 40px;
    height: 34px;
  }

  .property-create-result {
    min-height: 38px;
    padding: 8px 10px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .upload-album-field {
    margin-top: 6px;
  }

  .upload-main .field > span {
    margin-bottom: 3px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .upload-main input,
  .upload-main select {
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: calc(14px + var(--ui-font-step));
  }

  .upload-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .upload-actions .button {
    min-height: 42px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: calc(13px + var(--ui-font-step));
  }

  .upload-status-panel {
    display: none;
  }

  .archive-main .stats-grid {
    display: none;
  }

  .archive-main > .panel {
    height: auto;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  .archive-main .property-search {
    flex: 0 0 auto;
  }

  .archive-main .property-search > input {
    min-height: 42px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: calc(14px + var(--ui-font-step));
  }

  .archive-main .property-results {
    max-height: 32dvh;
    gap: 5px;
    margin: 6px 0;
  }

  .archive-main .property-result {
    gap: 4px 8px;
    padding: 8px 10px;
  }

  .archive-main .property-gallery {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .archive-main .selected-property {
    gap: 2px;
    margin-bottom: 7px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .archive-main .archive-panel-open {
    padding: 10px;
  }

  .archive-main .archive-navigation-row {
    gap: 4px;
    margin-bottom: 6px;
  }

  .archive-main .archive-breadcrumb {
    font-size: calc(11px + var(--ui-font-step));
  }

  .archive-main .archive-breadcrumb button {
    min-height: 28px;
    padding: 0 7px;
  }

  .archive-main .archive-breadcrumb .archive-home-crumb {
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0;
    flex-basis: 54px;
  }

  .archive-main .compact-tool-button {
    min-height: 28px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .archive-main .category-tabs {
    margin-bottom: 8px;
  }

  .archive-main .category-tab {
    min-height: 34px;
    padding: 0 11px;
  }

  .archive-main .empty {
    padding: 22px 12px;
  }

  .archive-main .folder-section-head {
    margin-top: 2px;
  }

  .archive-main .archive-folder {
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
  }

  .archive-main .category-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
  }

  .archive-main .category-folder {
    padding: 44px 8px 14px;
  }

  .archive-main .property-folder-delete {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .archive-main .property-identity-card {
    padding: 10px;
    border-radius: 11px;
  }

  .archive-main .property-identity-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .archive-main .property-owner-badge {
    max-width: 100%;
  }

  .archive-main .property-identity-list,
  .property-details-grid {
    grid-template-columns: 1fr;
  }

  .property-details-wide {
    grid-column: auto;
  }

  .archive-main .property-details-form {
    gap: 11px;
    padding: 12px;
  }

  .property-details-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .property-merge-warning {
    align-items: stretch;
    flex-direction: column;
  }

  .property-merge-warning .button {
    width: 100%;
  }

  .property-details-actions .button {
    width: 100%;
  }

  .archive-main .notebook textarea {
    min-height: calc(100dvh - 315px);
  }

  .archive-main .folder-upload-bar {
    padding: 8px 9px;
  }

  .archive-main .folder-upload-bar .button {
    min-height: 37px;
    padding: 0 10px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .archive-main .property-folder-form {
    padding: 7px;
  }

  .archive-main .property-folder-form input,
  .archive-main .property-folder-form .button {
    min-height: 38px;
  }

  .queue-main > .panel {
    height: calc(100dvh - 119px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .queue-main .panel-head {
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
  }

  .queue-main .panel-head .button {
    min-height: 38px;
    padding: 0 11px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .queue-main .queue-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .queue-main .queue-row {
    gap: 9px;
    padding: 9px;
  }

  .queue-main .queue-thumb {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .profile-main > .split {
    height: calc(100dvh - 119px - env(safe-area-inset-bottom));
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .profile-main .profile-card {
    padding: 10px;
  }

  .profile-main .profile-logout {
    min-height: 34px;
    margin-top: 6px;
  }

  .profile-main .field {
    margin-bottom: 7px;
  }

  .profile-main input {
    min-height: 39px;
  }

  .profile-main form > .button {
    min-height: 40px;
    width: 100%;
  }

  .trash-main > .trash-archive-panel {
    height: calc(100dvh - 119px - env(safe-area-inset-bottom));
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .trash-main .trash-folder-list,
  .trash-main .category-folder-grid,
  .trash-main .photo-grid,
  .trash-main .trash-windows-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .trash-main .trash-windows-item {
    grid-template-columns: 50px minmax(0, 1fr) 35px 35px;
    gap: 7px;
    padding: 8px;
  }

  .trash-main .trash-windows-folder-icon {
    width: 38px;
    height: 28px;
  }

  .trash-main .trash-windows-photo-select {
    width: 50px;
    height: 50px;
  }

  .trash-main .trash-windows-actions {
    display: contents;
  }

  .trash-main .trash-windows-actions .button {
    min-height: 38px;
    overflow: hidden;
    padding: 0;
    font-size: 0;
  }

  .trash-main .trash-windows-actions .button.secondary::before {
    content: "↶";
    font-size: calc(17px + var(--ui-font-step));
  }

  .trash-main .trash-windows-actions .button.danger::before {
    content: "×";
    font-size: calc(20px + var(--ui-font-step));
  }

  .trash-main .panel-head {
    align-items: center;
    flex-direction: row;
  }

  .trash-main .panel-head .button {
    min-height: 36px;
    padding: 0 9px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .trash-main .trash-folder-row {
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    gap: 5px;
  }

  .trash-main .trash-folder-row > .button {
    min-height: 42px;
    overflow: hidden;
    padding: 0 4px;
    font-size: 0;
  }

  .trash-main .trash-folder-row > .button.secondary::before {
    content: "↶";
    font-size: calc(18px + var(--ui-font-step));
  }

  .trash-main .trash-folder-row > .button.danger::before {
    content: "×";
    font-size: calc(20px + var(--ui-font-step));
  }
}
.hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* Mobil sayfalar doğrudan içerik paneliyle başlar. */
@media (max-width: 860px) {
  .archive-main > .topbar,
  .trash-main > .topbar,
  .profile-main > .topbar,
  .upload-main > .topbar {
    display: none;
  }
}

/* Son yerleşim önceliği: üst bilgi yok, bilgiler sol menüde. */
@media (min-width: 861px) {
  .sidebar {
    overflow-y: auto;
  }

  .sidebar-footer {
    margin-top: auto;
    flex: 0 0 auto;
  }

  .sidebar-footer > .user-chip {
    display: flex;
  }
}

@media not all {
  .app-shell {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    overflow-y: auto;
    padding: 18px 12px;
  }

  .mobile-bar {
    display: none;
  }

  .main {
    min-width: 0;
    padding: 14px 15px 34px;
  }

  .sidebar-brand {
    justify-content: flex-start;
    gap: 9px;
  }

  .sidebar-brand .brand-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .sidebar .brand-copy,
  .sidebar .nav-label,
  .sidebar .sidebar-footer {
    display: block;
  }

  .sidebar .brand-copy strong {
    font-size: calc(11px + var(--ui-font-step));
  }

  .sidebar .brand-copy span {
    font-size: calc(9px + var(--ui-font-step));
  }

  .sidebar .nav-button,
  .sidebar .nav-button.desktop-only {
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 12px 4px 0;
    flex: 0 0 auto;
  }

  .sidebar-system-status {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    background: rgba(20, 16, 19, 0.2);
  }

  .sidebar-archive-stats {
    gap: 5px;
  }

  .sidebar-capacity-list {
    gap: 9px;
  }

  .sidebar-footer .user-chip {
    gap: 7px;
    margin-top: 12px;
    padding: 7px;
  }

  .sidebar-footer .avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: calc(11px + var(--ui-font-step));
  }

  .sidebar-footer .user-chip strong {
    max-width: 92px;
    font-size: calc(10px + var(--ui-font-step));
  }

  .sidebar-footer .user-chip span {
    max-width: 92px;
    overflow: hidden;
    font-size: calc(9px + var(--ui-font-step));
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Taşınmaz kartında ruhsatlar, mal sahibi metninden ayrı bir liste alanındadır. */
@media (min-width: 861px) {
  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder {
    grid-template-columns: 64px minmax(135px, 1.1fr) minmax(140px, 0.82fr)
      minmax(120px, 0.72fr) auto;
  }

  .property-folder-list > .archive-folder > .folder-icon { grid-column: 1; }
  .property-folder-list > .archive-folder > .folder-copy { grid-column: 2; }
  .property-folder-list > .archive-folder > .property-folder-permits { grid-column: 3; }
  .property-folder-list > .archive-folder > .property-folder-note-summary { grid-column: 4; }
  .property-folder-list > .archive-folder > .folder-arrow { grid-column: 5; }

  .archive-folder .property-folder-note-summary {
    align-items: center;
  }
}

@media (max-width: 860px) {
  .property-folder-list > .archive-folder {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
  }

  .property-folder-list > .archive-folder > .folder-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .property-folder-list > .archive-folder > .folder-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .property-folder-list > .archive-folder > .folder-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .property-folder-list > .archive-folder > .property-folder-permits {
    grid-column: 2 / 4;
    align-self: start;
    gap: 0;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .property-folder-permits > b {
    display: none;
  }

  .property-folder-permit-list {
    max-height: 30px;
  }

  .property-folder-permit-list small:nth-child(n + 3) {
    display: none;
  }

  .property-folder-list > .archive-folder > .property-folder-note-summary {
    grid-column: 2 / 4;
    align-self: start;
    max-height: 38px;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
    -webkit-line-clamp: 2;
  }
}

/* Taşınmaz içinde arşiv kartlarıyla aynı başlıksız, değer odaklı sütunlar. */
.archive-main .property-identity-card.property-identity-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}

.property-identity-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 10px;
}

.property-identity-column + .property-identity-column {
  border-left: 1px solid rgba(206, 33, 136, 0.14);
}

.property-identity-column strong,
.property-identity-column span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.property-identity-column strong {
  color: var(--brand-dark);
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
}

.property-identity-column span {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 650;
}

.property-identity-old::before,
.property-identity-file::before,
.property-identity-permit::before {
  margin-right: 4px;
  color: var(--brand);
  font-weight: 900;
}

.property-identity-old::before {
  content: "↶";
}

.property-identity-file::before {
  content: "▤";
}

.property-identity-permit::before {
  content: "◫";
}

@media (max-width: 640px) {
  .archive-main .property-overview-grid .property-identity-columns {
    grid-template-columns: 1fr;
  }

  .archive-main .property-overview-grid .property-identity-column {
    padding: 7px 8px;
  }

  .archive-main .property-overview-grid .property-identity-column + .property-identity-column {
    border-top: 1px solid rgba(206, 33, 136, 0.12);
    border-left: 0;
  }
}

/* Menü her ekran yüksekliğinde görünür; yalnız alt bilgi alanı gerektiğinde kayar. */
@media (min-width: 861px) {
  .sidebar {
    overflow: hidden;
  }

  .sidebar-footer {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .sidebar-footer::-webkit-scrollbar {
    display: none;
  }
}

/* Son kural: tek sonuçta da kart genişlemeden iki sütun izi korunur. */
@media (min-width: 1320px) {
  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Taşınmaz bilgi bandı: bilgiler yüzde 60, not defteri yüzde 40. */
.archive-main .property-overview-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.archive-main .property-overview-grid .property-identity-columns {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.property-identity-permits {
  align-content: center;
}

.property-identity-permit-more {
  color: var(--brand) !important;
  font-weight: 800 !important;
}

@media (max-width: 640px) {
  .archive-main .property-overview-grid {
    grid-template-columns: minmax(0, 3fr) minmax(104px, 2fr);
  }

  .archive-main .property-overview-grid .property-identity-columns {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }

  .archive-main .property-overview-grid .property-identity-column + .property-identity-column {
    border-top: 0;
    border-left: 0;
  }
}

/* Taşınmaz bölümleri — ana arşiv tasarımıyla uyumlu sade çalışma alanı. */
.archive-main .property-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ead5e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.archive-main .property-workspace-tab {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid #f5f0f3;
  border-radius: 0;
  color: #70636b;
  background: #fff;
  box-shadow: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.archive-main .property-workspace-tab:last-child {
  border-right: 0;
}

.archive-main .property-workspace-tab:hover {
  color: var(--brand-dark);
  background: #fff7fb;
  transform: none;
}

.archive-main .property-workspace-tab.active {
  color: var(--brand-dark);
  background: var(--brand-faint);
  box-shadow: inset 0 -3px 0 var(--brand);
}

.archive-main .property-workspace-tab-icon {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  color: currentColor;
}

.archive-main .property-workspace-tab-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.archive-main .property-workspace-tab > strong {
  min-width: 0;
  overflow: hidden;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-main .property-workspace-tab-number,
.archive-main .property-workspace-tab > span:last-child small,
.archive-main .property-workspace-eyebrow {
  display: none;
}

.archive-main .property-permits-workspace,
.archive-main .property-details-workspace,
.archive-main .property-map-workspace {
  overflow: hidden;
  border: 1px solid #ead5e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.archive-main .property-workspace-section-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #f5f0f3;
  background: #fff;
}

.archive-main .property-workspace-section-head h3,
.archive-main .property-workspace-section-head p {
  margin: 0;
}

.archive-main .property-workspace-section-head h3 {
  color: var(--ink);
  font-size: calc(14px + var(--ui-font-step));
  letter-spacing: -0.01em;
}

.archive-main .property-workspace-section-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-permit-counts {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.archive-main .property-permit-counts span {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #ead5e2;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: calc(8px + var(--ui-font-step));
  text-transform: none;
}

.archive-main .property-permit-counts b {
  color: var(--brand-dark);
  font-size: calc(11px + var(--ui-font-step));
}

.archive-main #property-permits-form {
  gap: 7px;
  padding: 8px 9px 9px;
}

.archive-main .property-permit-create-actions {
  justify-content: flex-start;
  gap: 6px;
}

.archive-main .property-permit-create-actions .button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-permit-records {
  gap: 5px;
}

.archive-main .property-permit-record {
  grid-template-columns: 3px minmax(0, 1fr);
  gap: 7px;
  padding: 7px 36px 7px 6px;
  border: 1px solid #ead3e2;
  border-radius: 11px;
  background: #fff;
}

.archive-main .property-permit-record-accent {
  border-radius: 999px;
}

.archive-main .property-permit-record-main {
  grid-template-columns: minmax(145px, .34fr) minmax(0, 1.66fr);
  gap: 7px;
}

.archive-main .property-permit-record-fields {
  grid-template-columns:
    minmax(86px, .55fr)
    minmax(112px, .68fr)
    minmax(125px, .78fr)
    minmax(220px, 1.35fr)
    minmax(210px, 1.3fr);
  gap: 4px;
}

.archive-main .property-permit-record .field input,
.archive-main .property-permit-record .field select {
  min-height: 31px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-permit-document-card {
  padding: 3px;
  border-radius: 8px;
  box-shadow: none;
}

.archive-main .property-permit-record-remove {
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: calc(15px + var(--ui-font-step));
}

.archive-main .property-permit-record-index {
  display: none;
}

.archive-main .property-permits-empty,
.archive-main .property-map-status {
  min-height: 180px;
}

.archive-main .property-permits-empty > span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: calc(21px + var(--ui-font-step));
}

.archive-main .property-permits-savebar {
  padding-top: 8px;
}

.archive-main .property-permits-savebar .button {
  min-height: 33px;
}

.archive-main .property-map-stage {
  aspect-ratio: 960 / 430;
}

.archive-main .property-map-tile {
  filter: saturate(.62) contrast(.94) brightness(1.05);
}

.archive-main .property-map-stage polygon {
  fill: rgba(206, 33, 136, .24);
  stroke-width: 3;
}

.archive-main .property-map-badge {
  top: 11px;
  left: 11px;
  padding: 7px 9px;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(7, 63, 105, .13);
}

.archive-main .property-details-workspace-grid {
  gap: 8px;
  padding: 10px;
}

.archive-main .property-details-workspace-grid > .property-identity-card,
.archive-main .property-details-workspace-grid > .property-note-file {
  min-height: 86px;
}

.archive-main .property-details-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  align-items: stretch;
  gap: 8px;
  padding: 10px;
}

.archive-main .property-details-editor-pane {
  min-width: 0;
}

.archive-main .property-details-editor-grid .property-details-form {
  height: 100%;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}

.archive-main .property-details-editor-grid .property-details-intro h3 {
  font-size: calc(14px + var(--ui-font-step));
}

.archive-main .property-details-editor-grid .property-details-intro p {
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-details-editor-grid .property-location-editor {
  gap: 7px;
  padding: 9px;
  border-radius: 10px;
}

.archive-main .property-details-editor-grid .property-details-grid {
  gap: 7px;
}

.archive-main .property-details-editor-grid .property-permits-editor {
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
}

.archive-main .property-details-editor-grid .property-details-actions {
  margin-top: auto;
}

.archive-main .property-details-notebook {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
}

.archive-main .property-details-notebook form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
}

.archive-main .property-details-notebook textarea {
  width: 100%;
  height: 100%;
  min-height: 260px;
  resize: vertical;
}

@media (max-width: 980px) {
  .archive-main .property-workspace-tab {
    min-height: 42px;
  }

  .archive-main .property-permit-record-main {
    grid-template-columns: 1fr;
  }

  .archive-main .property-permit-record-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .archive-main .property-details-editor-grid {
    grid-template-columns: 1fr;
    padding: 7px;
  }

  .archive-main .property-details-notebook {
    min-height: 0;
  }

  .archive-main .property-details-notebook form {
    grid-template-rows: auto auto;
  }

  .archive-main .property-details-notebook textarea {
    height: auto;
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .archive-main .property-workspace-tabs {
    margin-bottom: 7px;
    border-radius: 11px;
  }

  .archive-main .property-workspace-tab {
    min-height: 44px;
    gap: 3px;
    padding: 4px 2px;
    flex-direction: column;
  }

  .archive-main .property-workspace-tab-icon,
  .archive-main .property-workspace-tab-icon svg {
    width: 15px;
    height: 15px;
  }

  .archive-main .property-workspace-tab > strong {
    max-width: 100%;
    font-size: calc(8px + var(--ui-font-step));
    white-space: normal;
  }

  .archive-main .property-workspace-section-head {
    min-height: 50px;
    align-items: center;
    padding: 9px 10px;
  }

  .archive-main .property-workspace-section-head p {
    display: none;
  }

  .archive-main .property-permit-counts span {
    padding: 4px 6px;
  }

  .archive-main #property-permits-form {
    padding: 8px;
  }

  .archive-main .property-permit-record {
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 5px;
    padding: 6px 33px 7px 5px;
  }

  .archive-main .property-permit-record-main,
  .archive-main .property-permit-record-fields {
    grid-template-columns: 1fr;
  }

  .property-permit-document-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .property-permit-upload-button {
    min-height: 36px;
    justify-content: center;
  }

  .archive-main .property-map-stage {
    aspect-ratio: 4 / 3;
  }

  .archive-main .property-details-workspace-grid {
    grid-template-columns: 1fr;
    padding: 7px;
  }
}

/* Ruhsat kartları: düzenli alan grupları ve görünür kronolojik sıra. */
.archive-main .property-permit-create-actions {
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid #f5f0f3;
  border-radius: 10px;
  background: #faf9fb;
}

.archive-main .property-permit-add-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.archive-main .property-permit-sort-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 700;
}

.archive-main .property-permit-sort-note b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: calc(13px + var(--ui-font-step));
}

.archive-main .property-permit-records {
  gap: 8px;
}

.archive-main .property-permit-record {
  gap: 8px;
  padding: 8px 38px 8px 7px;
  border-color: #ead5e2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(7, 63, 105, .035);
}

.archive-main .property-permit-record-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.archive-main .property-permit-record-header {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #edf2f5;
}

.archive-main .property-permit-record-header small {
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 650;
}

.archive-main .property-permit-record-type {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 850;
}

.archive-main .property-permit-record-type.occupancy {
  color: #7d5200;
  background: #fff3d9;
}

.archive-main .property-permit-record-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(175px, .38fr) minmax(0, 1.62fr);
  align-items: start;
  gap: 9px;
}

.archive-main .property-permit-record-fields {
  grid-template-columns:
    minmax(95px, .72fr)
    minmax(125px, .9fr)
    minmax(125px, .9fr)
    minmax(155px, 1.15fr);
  gap: 6px;
}

.archive-main .property-permit-description-field {
  grid-column: 1 / -1;
}

.archive-main .property-permit-description-field input {
  width: 100%;
}

.archive-main .property-permit-record-remove {
  top: 8px;
  right: 8px;
}

@media (max-width: 1100px) {
  .archive-main .property-permit-record-body {
    grid-template-columns: 1fr;
  }

  .archive-main .property-permit-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .archive-main .property-permit-create-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .archive-main .property-permit-add-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-main .property-permit-record-fields {
    grid-template-columns: 1fr;
  }

  .archive-main .property-permit-description-field {
    grid-column: auto;
  }
}

/* Ruhsat ve iskan: masaüstünde her kayıt tek satır, küçük resim yerine evrak ikonu. */
.archive-main .property-permit-record {
  padding: 7px 38px 7px 7px;
}

.archive-main .property-permit-record-main {
  gap: 0;
}

.archive-main .property-permit-record-body {
  grid-template-columns: minmax(250px, .9fr) minmax(0, 2.1fr);
  align-items: end;
  gap: 8px;
}

.archive-main .property-permit-record-fields {
  grid-template-columns:
    minmax(76px, .6fr)
    minmax(116px, .9fr)
    minmax(94px, .75fr)
    minmax(120px, 1fr)
    minmax(140px, 1.2fr);
  align-items: end;
  gap: 5px;
}

.archive-main .property-permit-record .field {
  gap: 4px;
  margin: 0;
}

.archive-main .property-permit-description-field {
  grid-column: auto;
}

.archive-main .property-permit-documents {
  grid-template-columns: minmax(105px, 1fr) auto;
  align-items: end;
  gap: 5px;
}

.archive-main .property-permit-document-list {
  min-height: 36px;
}

.archive-main .property-permit-document-card {
  min-height: 36px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  padding: 3px 6px 3px 3px;
  border-radius: 8px;
}

.archive-main .property-permit-document-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.archive-main .property-permit-document-icon svg {
  width: 17px;
  height: 20px;
  fill: rgba(206, 33, 136, .08);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.archive-main .property-permit-document-copy {
  gap: 1px;
}

.archive-main .property-permit-document-copy b {
  font-size: calc(7px + var(--ui-font-step));
}

.archive-main .property-permit-document-copy small {
  font-size: calc(8px + var(--ui-font-step));
}

.archive-main .property-permit-document-actions {
  gap: 5px;
}

.archive-main .property-permit-upload-button {
  min-height: 31px;
  padding: 4px 7px;
  white-space: nowrap;
}

.archive-main .property-permit-file-picker {
  white-space: nowrap;
}

/* Ruhsat evrakı seçimi: klasör içeriğini ayrı ve odaklı bir pencerede gösterir. */
.property-permit-picker-button {
  min-width: 0;
  min-height: 31px;
  flex: 1 1 auto;
  padding: 4px 7px;
  overflow: hidden;
  border: 0;
  color: var(--brand);
  background: transparent;
  font: inherit;
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 850;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.property-permit-picker-button:hover,
.property-permit-picker-button:focus-visible {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.property-permit-picker-open {
  overflow: hidden;
}

.property-permit-picker-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 36, 57, .42);
  backdrop-filter: blur(5px);
}

.property-permit-picker-dialog {
  width: min(680px, 100%);
  max-height: min(720px, calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(5, 36, 57, .26);
}

.property-permit-picker-head {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #f5f0f3;
  background: linear-gradient(135deg, #faf9fb, #fff);
}

.property-permit-picker-head div {
  display: grid;
  gap: 2px;
}

.property-permit-picker-head small {
  color: var(--brand);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.property-permit-picker-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: calc(18px + var(--ui-font-step));
}

.property-permit-picker-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: #faf8fa;
  font: inherit;
  font-size: calc(20px + var(--ui-font-step));
  cursor: pointer;
}

.property-permit-picker-list {
  min-height: 150px;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 12px;
  overflow-y: auto;
  background: #faf9fb;
}

.property-permit-picker-option {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #ead5e2;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.property-permit-picker-option:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, #ead5e2);
}

.property-permit-picker-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-faint);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent);
}

.property-permit-picker-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.property-permit-picker-option:focus-within {
  outline: 2px solid color-mix(in srgb, var(--brand) 42%, transparent);
  outline-offset: 2px;
}

.property-permit-picker-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.property-permit-picker-icon svg {
  width: 19px;
  height: 23px;
  fill: rgba(206, 33, 136, .08);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-permit-picker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-permit-picker-copy b,
.property-permit-picker-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-picker-copy b {
  color: var(--ink);
  font-size: calc(10px + var(--ui-font-step));
}

.property-permit-picker-copy small {
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
}

.property-permit-picker-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #e5c8d9;
  border-radius: 999px;
  color: transparent;
  background: #fff;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 900;
}

.property-permit-picker-option:has(input:checked) .property-permit-picker-check {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

.property-permit-picker-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.property-permit-picker-empty strong {
  color: var(--ink);
}

.property-permit-picker-empty p,
.property-permit-picker-limit {
  margin: 0;
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-picker-limit {
  padding: 6px 14px 0;
  background: #fff;
}

.property-permit-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 13px;
  border-top: 1px solid #f5f0f3;
  background: #fff;
}

@media (max-width: 860px) {
  .archive-main .property-permit-record-body,
  .archive-main .property-permit-record-fields,
  .archive-main .property-permit-documents {
    grid-template-columns: 1fr;
  }

  .archive-main .property-permit-description-field {
    grid-column: auto;
  }

  .archive-main .property-permit-document-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .property-permit-picker-overlay {
    place-items: end center;
    padding: 10px 0 0;
  }

  .property-permit-picker-dialog {
    width: 100%;
    max-height: 82dvh;
    border-radius: 18px 18px 0 0;
  }

  .property-permit-picker-list {
    grid-template-columns: 1fr;
  }

  .property-permit-picker-actions {
    padding-bottom: max(11px, env(safe-area-inset-bottom));
  }
}

/* Ruhsat arşivi: iki gerçek klasör, özet kart ve tıklanınca açılan düzenleyici. */
.archive-main .property-permit-library-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand-faint) 46%, #fff);
}

.property-permit-library-head > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.property-permit-library-head strong {
  color: var(--ink);
  font-size: calc(13px + var(--ui-font-step));
}

.property-permit-library-head small,
.property-permit-library-head > span {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-library-head > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 750;
}

.archive-main #property-permits-form {
  gap: 10px;
  padding: 10px;
}

.property-permit-folder-grid {
  display: grid;
  gap: 10px;
}

.property-permit-folder {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-faint) 22%, #fff);
}

.property-permit-folder-head {
  min-height: 62px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.property-permit-folder-head .folder-icon {
  width: 46px;
  height: 36px;
}

.property-permit-folder-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-permit-folder-copy strong {
  color: var(--ink);
  font-size: calc(12px + var(--ui-font-step));
  font-weight: 850;
}

.property-permit-folder-copy small {
  color: var(--muted);
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-folder-copy b {
  color: var(--brand-dark);
}

.property-permit-folder-head .button {
  min-height: 34px;
  padding: 0 11px;
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-permit-folder .property-permit-records {
  gap: 7px;
  padding: 8px;
}

.archive-main .property-permit-folder .property-permit-record {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(7, 63, 105, .035);
}

.property-permit-record > [hidden],
.property-permit-card-editor[hidden] {
  display: none !important;
}

.property-permit-card-summary {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 46px minmax(170px, 1.5fr) minmax(110px, .75fr)
    minmax(110px, .75fr) minmax(135px, .95fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  color: var(--ink);
  background: #fff;
  font: inherit;
  text-align: left;
}

button.property-permit-card-summary {
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}

button.property-permit-card-summary:hover,
button.property-permit-card-summary:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--brand-faint) 48%, #fff);
  box-shadow: inset 3px 0 0 var(--brand);
}

.property-permit-card-document {
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #faf9fb;
}

.property-permit-card-document.has-document {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.property-permit-card-document svg {
  width: 22px;
  height: 26px;
  fill: color-mix(in srgb, var(--brand) 8%, transparent);
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-permit-card-primary,
.property-permit-card-person,
.property-permit-card-file {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.property-permit-card-primary small {
  color: var(--brand);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: .08em;
}

.property-permit-card-primary strong {
  overflow: hidden;
  font-size: calc(11px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-card-primary > span,
.property-permit-card-person small,
.property-permit-card-file small {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-card-person,
.property-permit-card-file {
  align-self: stretch;
  align-content: center;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.property-permit-card-person strong,
.property-permit-card-file strong {
  overflow: hidden;
  font-size: calc(9px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-card-arrow {
  color: var(--brand);
  font-size: calc(24px + var(--ui-font-step));
  font-weight: 500;
}

.property-permit-card-editor {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: color-mix(in srgb, var(--brand-faint) 23%, #fff);
}

.property-permit-editor-document {
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(330px, 1.3fr);
  align-items: end;
  gap: 8px;
}

.property-permit-editor-document .property-permit-document-list {
  min-height: 38px;
}

.property-permit-editor-document .property-permit-document-actions {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.property-permit-read-button {
  min-height: 31px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand-dark);
  background: #fff;
  font: inherit;
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 800;
  cursor: pointer;
}

.property-permit-read-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: .55;
}

.archive-main .property-permit-card-editor .property-permit-record-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
}

.archive-main .property-permit-card-editor .property-permit-description-field {
  grid-column: auto;
}

.property-permit-owner-field small,
.property-permit-contractor-field small {
  color: var(--muted);
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 600;
}

.property-permit-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 2px;
}

.archive-main .property-permit-editor-actions .property-permit-record-remove {
  position: static;
  width: auto;
  height: 34px;
  padding: 0 10px;
  font-size: calc(9px + var(--ui-font-step));
}

.property-permit-editor-actions .button {
  min-height: 34px;
  padding: 0 11px;
  font-size: calc(9px + var(--ui-font-step));
}

.archive-main .property-permit-folder .property-permits-empty {
  min-height: 92px;
  padding: 14px;
}

.archive-main .property-permit-folder .property-permits-empty > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: calc(18px + var(--ui-font-step));
}

.archive-main .property-permit-folder .property-permits-empty strong {
  font-size: calc(11px + var(--ui-font-step));
}

.property-permit-record.is-reading {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent);
}

@media (max-width: 1100px) {
  .property-permit-card-summary {
    grid-template-columns: 44px minmax(170px, 1.4fr) minmax(110px, .8fr)
      minmax(110px, .8fr) 22px;
  }

  .property-permit-card-file {
    display: none;
  }

  .property-permit-editor-document {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .property-permit-library-head small {
    display: none;
  }

  .property-permit-folder-head {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px;
  }

  .property-permit-folder-head .folder-icon {
    width: 39px;
    height: 31px;
  }

  .property-permit-folder-head .button {
    min-height: 32px;
    padding: 0 8px;
  }

  .property-permit-card-summary {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 7px;
    padding: 8px;
  }

  .property-permit-card-document {
    grid-column: 1;
    grid-row: 1;
    width: 38px;
    height: 44px;
  }

  .property-permit-card-primary {
    grid-column: 2;
    grid-row: 1;
  }

  .property-permit-card-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .property-permit-card-person {
    grid-column: 1 / -1;
    padding: 6px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .property-permit-card-person + .property-permit-card-person {
    margin-top: -5px;
  }

  .property-permit-card-file {
    display: none;
  }

  .property-permit-editor-document .property-permit-document-actions,
  .archive-main .property-permit-card-editor .property-permit-record-fields {
    grid-template-columns: 1fr;
  }

  .property-permit-editor-document .property-permit-document-actions {
    align-items: stretch;
  }

  .property-permit-picker-button,
  .property-permit-read-button {
    min-height: 36px;
    text-align: center;
  }

  .property-permit-editor-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .property-permit-editor-actions > * {
    width: 100% !important;
  }
}

/* Akıllı arşiv sıralaması ve yönetimden belirlenen başlangıç klasör sırası. */
.archive-main .archive-searchbar {
  position: relative;
  overflow: visible;
}

.archive-sort-menu {
  position: relative;
  z-index: 12;
  min-width: 172px;
}

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

.archive-main .archive-sort-menu > .archive-smart-sort {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.archive-smart-sort small {
  margin-left: auto;
  color: var(--brand-dark);
  font-size: inherit;
  font-weight: 800;
}

.archive-smart-sort i {
  margin-left: 3px;
  color: var(--brand);
  font-style: normal;
  transition: transform 150ms ease;
}

.archive-sort-menu[open] > .archive-smart-sort {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-faint);
}

.archive-sort-menu[open] .archive-smart-sort i {
  transform: rotate(180deg);
}

.archive-sort-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(370px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border: 1px solid #ead5e2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(48, 24, 39, .16);
  backdrop-filter: blur(14px);
}

.archive-sort-popover button {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #544843;
  background: transparent;
  font: inherit;
  font-size: calc(11px + var(--ui-font-step));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.archive-sort-popover button:hover,
.archive-sort-popover button:focus-visible {
  color: var(--brand-dark);
  background: var(--brand-faint);
  outline: none;
}

.archive-sort-popover button.selected {
  color: #fff;
  background: var(--brand);
}

.archive-sort-popover button b {
  flex: 0 0 auto;
  font-size: calc(13px + var(--ui-font-step));
}

.admin-folder-order-intro {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.admin-folder-order-intro strong,
.admin-folder-order-intro p {
  margin: 0;
}

.admin-folder-order-intro strong {
  font-size: calc(12px + var(--ui-font-step));
}

.admin-folder-order-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
  line-height: 1.4;
}

.admin-folder-order-list.is-saving {
  opacity: .62;
  pointer-events: none;
}

.admin-category-row {
  gap: 8px;
  padding: 9px;
}

.admin-category-position {
  width: 20px;
  flex: 0 0 20px;
  color: var(--muted);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 800;
  text-align: center;
}

.admin-category-order-buttons {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
}

.admin-category-order-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand-dark);
  background: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-category-order-button:hover:not(:disabled),
.admin-category-order-button:focus-visible:not(:disabled) {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
  outline: none;
}

.admin-category-order-button:disabled {
  opacity: .28;
  cursor: default;
}

.admin-category-row > input {
  min-width: 120px;
  flex: 1 1 160px;
}

@media (max-width: 620px) {
  .archive-sort-menu {
    min-width: 112px;
  }

  .archive-smart-sort span {
    display: none;
  }

  .archive-smart-sort small {
    margin-left: 0;
  }

  .archive-sort-popover {
    width: min(340px, calc(100vw - 28px));
    grid-template-columns: 1fr;
  }

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

  .admin-category-row > input {
    order: -1;
    width: calc(100% - 28px);
    flex-basis: calc(100% - 28px);
  }
}

/* Ruhsat kartları: sabit önizleme, doğrudan alan düzenleme ve tür rengi. */
.archive-main .property-permit-library-head {
  min-height: 52px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.property-permit-library-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 5px;
}

.property-permit-library-counts,
.property-permit-library-buttons {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.property-permit-library-buttons {
  gap: 12px;
}

.property-permit-structure-picker {
  min-width: 126px;
  display: grid;
  gap: 2px;
}

.property-permit-structure-picker > span {
  color: var(--muted);
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 760;
  line-height: 1;
}

.property-permit-structure-picker select {
  width: 100%;
  min-height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface-soft, #faf9fb);
  font: inherit;
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 760;
}

.property-permit-upload-action {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.property-permit-side-count {
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 700;
}

.property-permit-upload-action:first-child .property-permit-side-count b {
  color: var(--brand-dark);
}

.property-permit-upload-action:nth-child(2) .property-permit-side-count b {
  color: #a8660d;
}

.property-permit-library-counts > span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: calc(7px + var(--ui-font-step));
  white-space: nowrap;
}

.property-permit-library-counts > span:first-child b {
  color: var(--brand-dark);
}

.property-permit-library-counts > span:nth-child(2) b {
  color: #a8660d;
}

.property-permit-library-actions .button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 820;
}

.property-permit-library-actions .button.secondary {
  border-color: #edcf9f;
  color: #8b570f;
  background: #fff7e8;
}

.property-permit-direct-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.property-permit-direct-upload.busy {
  pointer-events: none;
  opacity: .64;
}

.archive-main #property-permits-form {
  gap: 8px;
  padding: 9px;
}

.archive-main #property-permits-form > .property-permit-records {
  display: grid;
  gap: 7px;
}

.archive-main .property-permit-selection-bar {
  margin: 8px 9px 0;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
}

.archive-main .property-permit-record {
  --permit-card-accent: var(--brand);
  --permit-card-soft: color-mix(in srgb, var(--brand-faint) 42%, #fff);
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--permit-card-accent) 25%, var(--line));
  border-left: 4px solid var(--permit-card-accent);
  border-radius: 13px;
  background: linear-gradient(100deg, var(--permit-card-soft), #fff 30%);
  box-shadow: 0 4px 14px rgba(18, 48, 70, .045);
}

.archive-main .property-permit-record[data-permit-type="occupancy"] {
  --permit-card-accent: #d99122;
  --permit-card-soft: #fff7e8;
}

.archive-main .property-permit-record:has([data-select-photo]:checked) {
  border-color: color-mix(in srgb, var(--permit-card-accent) 48%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--permit-card-accent) 12%, transparent),
    0 6px 18px rgba(18, 48, 70, .07);
}

.property-permit-select-control {
  top: 14px;
  left: 14px;
  width: 27px;
  height: 27px;
  cursor: pointer;
}

.property-permit-select-control:has(input:checked) {
  background: var(--permit-card-accent);
}

.property-permit-preview-slot {
  min-width: 0;
  align-self: stretch;
}

.property-permit-card-preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 112px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--permit-card-accent) 26%, var(--line));
  border-radius: 10px;
  color: var(--permit-card-accent);
  background: #fff;
}

button.property-permit-card-preview {
  cursor: pointer;
}

button.property-permit-card-preview:hover,
button.property-permit-card-preview:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--permit-card-accent) 28%, transparent);
  outline-offset: 1px;
}

.property-permit-card-preview img,
.property-permit-card-preview .photo-dwg-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-permit-card-preview .photo-fallback {
  position: absolute;
  inset: 0;
  place-items: center;
  padding: 8px;
  background: var(--permit-card-soft);
}

.property-permit-card-preview .photo-fallback.visible {
  display: grid;
}

.property-permit-card-preview .photo-type-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
}

.property-permit-card-preview.is-empty {
  align-content: center;
  gap: 6px;
  background: var(--permit-card-soft);
}

.property-permit-card-preview.is-empty svg {
  width: 27px;
  fill: rgba(255, 255, 255, .55);
  stroke: currentColor;
  stroke-width: 1.45;
}

.property-permit-card-preview.is-empty small {
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
}

.property-permit-preview-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  padding: 17px 5px 5px;
  color: #fff;
  background: linear-gradient(transparent, rgba(9, 24, 36, .82));
  font-size: calc(7px + var(--ui-font-step));
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-card-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.property-permit-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.property-permit-card-head > div:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.property-permit-card-head strong {
  color: var(--permit-card-accent);
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 900;
  letter-spacing: .045em;
}

.property-permit-card-head small,
.property-permit-card-head > span {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(7px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-card-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.property-permit-card-tools > span {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(7px + var(--ui-font-step));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-permit-pdf-delete {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #f0d6da;
  border-radius: 8px;
  color: #a64352;
  background: #fff5f6;
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 760;
  cursor: pointer;
}

.property-permit-pdf-delete:hover,
.property-permit-pdf-delete:focus-visible {
  border-color: #d9aeb5;
  background: #ffedef;
}

.archive-main .property-permit-card-content .property-permit-record-fields {
  display: grid;
  grid-template-columns: minmax(105px, .7fr) minmax(90px, .62fr) minmax(115px, .8fr)
    minmax(150px, 1.2fr) minmax(135px, 1fr) minmax(135px, 1fr);
  align-items: stretch;
  gap: 5px;
}

.archive-main .property-permit-card-content [data-inline-permit-field] {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: default;
  transition: border-color 120ms ease, background 120ms ease;
}

.archive-main .property-permit-card-content [data-inline-permit-field]:hover {
  border-color: color-mix(in srgb, var(--permit-card-accent) 16%, var(--line));
  background: rgba(255, 255, 255, .72);
}

.archive-main .property-permit-card-content [data-inline-permit-field].is-editing {
  border-color: var(--permit-card-accent);
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--permit-card-accent) 10%, transparent);
}

.archive-main .property-permit-card-content .field > span {
  color: var(--muted);
  font-size: calc(8px + var(--ui-font-step));
  font-weight: 800;
}

.archive-main .property-permit-card-content .field input,
.archive-main .property-permit-card-content .field select {
  width: 100%;
  min-height: 23px;
  overflow: hidden;
  padding: 1px 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-size: calc(10px + var(--ui-font-step));
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-main .property-permit-card-content .field input[readonly] {
  cursor: default;
}

.archive-main .property-permit-card-content .field select:disabled {
  appearance: none;
  pointer-events: none;
  opacity: 1;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.archive-main .property-permit-card-content .field input[readonly]::-webkit-calendar-picker-indicator {
  display: none;
}

.archive-main .property-permit-card-content .field.is-editing input,
.archive-main .property-permit-card-content .field.is-editing select {
  cursor: text;
}

.archive-main .property-permit-card-content .field.is-editing select {
  cursor: pointer;
}

.archive-main .property-permit-card-content .property-permit-document-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 1px;
}

.archive-main .property-permit-card-content .property-permit-upload-button,
.archive-main .property-permit-card-content .property-permit-picker-button,
.archive-main .property-permit-card-content .property-permit-read-button,
.archive-main .property-permit-card-content .property-permit-record-remove {
  position: static;
  width: auto;
  min-height: 28px;
  height: auto;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: calc(8px + var(--ui-font-step));
}

.archive-main .property-permit-card-content .property-permit-record-remove {
  margin-left: auto;
}

.archive-main .property-permits-empty {
  min-height: 105px;
}

.archive-main .property-permit-record-index {
  display: none;
}

@media (max-width: 1200px) {
  .archive-main .property-permit-card-content .property-permit-record-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .archive-main .property-permit-library-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .property-permit-library-head > div:first-child small,
  .property-permit-card-head > span {
    display: none;
  }

  .property-permit-library-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .property-permit-structure-picker {
    min-width: 108px;
  }

  .property-permit-library-actions .button {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 11px;
  }

  .property-permit-library-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }

  .archive-main .property-permit-record {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .archive-main .property-permit-selection-bar {
    margin: 7px 7px 0;
  }

  .property-permit-select-control {
    top: 11px;
    left: 11px;
  }

  .property-permit-card-preview {
    min-height: 94px;
  }

  .property-permit-card-head > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .property-permit-card-tools > span {
    display: none;
  }

  .archive-main .property-permit-card-content .property-permit-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-main .property-permit-card-content .property-permit-description-field {
    grid-column: 1 / -1;
  }

  .archive-main .property-permit-card-content .property-permit-document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-main .property-permit-card-content .property-permit-record-remove {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .archive-main .property-permit-library-head {
    align-items: stretch;
    flex-direction: column;
  }

  .property-permit-library-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .property-permit-structure-picker {
    width: 100%;
  }

  .property-permit-library-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .archive-main .property-permit-record {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .archive-main .property-permit-card-content .property-permit-owner-field,
  .archive-main .property-permit-card-content .property-permit-contractor-field {
    grid-column: 1 / -1;
  }

  .archive-main .property-permit-card-content .property-permit-document-actions {
    grid-template-columns: 1fr;
  }
}

/* Açık kurumsal yüzen yan panel — taşınmaz kartlarının hafif ve sakin yüzeyinden esinlenir. */
@media (min-width: 861px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr);
  }

  .sidebar {
    --sidebar-accent: #a43d73;
    --sidebar-ink: #342b31;
    --sidebar-muted: #756871;
    --sidebar-line: rgba(112, 20, 77, 0.12);
    --sidebar-surface: rgba(255, 255, 255, 0.74);
    --sidebar-glow: rgba(206, 33, 136, 0.075);
    position: sticky;
    top: 10px;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    margin-left: 10px;
    padding: 18px 16px;
    overflow: hidden;
    color: var(--sidebar-ink);
    border: 1px solid var(--sidebar-line);
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 2%, var(--sidebar-glow), transparent 190px),
      linear-gradient(160deg, rgba(255, 255, 255, 0.985) 0%, rgba(255, 250, 253, 0.975) 58%, rgba(248, 243, 246, 0.97) 100%);
    box-shadow:
      0 18px 44px rgba(66, 43, 56, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(105%);
    backdrop-filter: blur(14px) saturate(105%);
  }

  .sidebar::before {
    display: none;
    content: none;
  }

  .sidebar::after {
    display: none;
    content: none;
  }

  .sidebar > * {
    position: relative;
    z-index: 1;
  }

  .sidebar-brand {
    margin: 0 2px 12px;
    padding: 0 2px 18px;
    border-bottom: 1px solid var(--sidebar-line);
  }

  .sidebar-brand .brand-logo {
    border: 1px solid rgba(112, 20, 77, 0.1);
    box-shadow: 0 8px 20px rgba(78, 49, 66, 0.12);
  }

  .sidebar .brand-copy strong {
    color: var(--sidebar-ink);
  }

  .sidebar .brand-copy span {
    color: var(--sidebar-muted);
  }

  .sidebar .nav-button {
    position: relative;
    border: 1px solid transparent;
    color: var(--sidebar-muted);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease,
      box-shadow 160ms ease;
  }

  .sidebar .nav-button:hover {
    border-color: var(--sidebar-line);
    color: var(--sidebar-ink);
    background: rgba(255, 255, 255, 0.72);
    transform: none;
  }

  .sidebar .nav-button.active {
    border-color: rgba(164, 61, 115, 0.2);
    color: var(--brand-dark);
    background: linear-gradient(90deg, var(--brand-soft), rgba(255, 255, 255, 0.76));
    box-shadow: inset 3px 0 0 var(--sidebar-accent);
  }

  .sidebar .nav-button.active::after {
    display: none;
    content: none;
  }

  .sidebar-system-status {
    border-color: var(--sidebar-line);
    background: var(--sidebar-surface);
    box-shadow: none;
  }

  .sidebar-archive-stats > div,
  .sidebar-footer .user-chip {
    border: 1px solid var(--sidebar-line);
    background: var(--sidebar-surface);
  }

  .sidebar .nav-count {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .sidebar-capacity-meter {
    background: rgba(62, 45, 55, 0.1);
  }

  .sidebar-capacity-meter span,
  .sidebar-capacity.backup .sidebar-capacity-meter span {
    background: var(--sidebar-accent);
  }

  .sidebar .connection-dot {
    background: #b6a16f;
    box-shadow: none;
  }

  .sidebar-system-status .connection,
  .sidebar-harddisk-status,
  .sidebar-capacity-head,
  .sidebar-capacity-head strong,
  .sidebar-archive-stats strong,
  .sidebar .user-chip strong {
    color: var(--sidebar-ink);
  }

  .sidebar-harddisk-status.unavailable,
  .sidebar-archive-stats span,
  .sidebar-capacity small,
  .sidebar .user-chip span {
    color: var(--sidebar-muted);
  }

  .sidebar-activity {
    border-top-color: var(--sidebar-line);
  }

  .sidebar-activity-head > strong,
  .sidebar-activity-copy p strong {
    color: var(--sidebar-ink);
  }

  .sidebar-activity-head > span,
  .sidebar-activity-item,
  .sidebar-activity-copy small,
  .sidebar-activity-item time,
  .sidebar-activity-empty {
    color: var(--sidebar-muted);
  }

  .sidebar-activity-item {
    border-bottom-color: var(--sidebar-line);
  }

  .sidebar-activity-avatar {
    color: var(--brand-dark);
    border-color: rgba(164, 61, 115, 0.16);
    background: var(--brand-soft);
  }

  .sidebar-footer .avatar {
    color: var(--brand-dark);
    border: 1px solid rgba(164, 61, 115, 0.14);
    background: var(--brand-soft);
  }

  .sidebar .connection.online .connection-dot,
  .sidebar-harddisk-status.ready .connection-dot,
  .sidebar-activity-head i {
    background: #86a992;
    box-shadow: none;
  }

  .main {
    padding-left: 16px;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .sidebar {
    margin-left: 8px;
    padding-inline: 14px;
  }

  .nav-button.active::after {
    right: -15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-button {
    transition: none;
  }
}

/* Gezilebilir parsel haritası: altlık ve TKGM geometrisi tek koordinat sisteminde. */
.archive-main .property-map-stage {
  isolation: isolate;
  min-height: 360px;
  background: var(--brand-faint);
}

.property-interactive-map {
  position: absolute;
  inset: 0;
  outline: none;
  cursor: grab;
}

.property-interactive-map:active {
  cursor: grabbing;
}

.property-interactive-map:focus-visible {
  box-shadow: inset 0 0 0 3px var(--brand);
}

.property-map-stage .ol-viewport {
  filter: saturate(.74) contrast(.96) brightness(1.035);
}

.property-map-stage .ol-control {
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 24px rgba(27, 42, 52, .14);
  backdrop-filter: blur(10px);
}

.property-map-stage .ol-control button {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 7px;
  color: var(--brand-dark);
  background: transparent;
  font-weight: 800;
}

.property-map-stage .ol-control button:hover,
.property-map-stage .ol-control button:focus {
  color: #fff;
  background: var(--brand);
}

.property-map-stage .ol-zoom {
  top: 12px;
  left: 12px;
  overflow: hidden;
}

.property-map-stage .ol-attribution {
  right: 8px;
  bottom: 7px;
  max-width: calc(100% - 190px);
  border-radius: 7px;
  font-size: calc(8px + var(--ui-font-step));
}

.archive-main .property-map-badge {
  top: auto;
  bottom: 38px;
  left: 12px;
  pointer-events: none;
}

.property-map-toolstrip {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 11px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(27, 42, 52, .14);
  backdrop-filter: blur(10px);
}

.property-map-toolstrip button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: var(--brand-dark);
  background: transparent;
  font: inherit;
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 800;
  cursor: pointer;
}

.property-map-basemap-picker {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 9px;
  border-right: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: calc(9px + var(--ui-font-step));
  font-weight: 800;
}

.property-map-basemap-picker select {
  min-width: 92px;
  height: 27px;
  padding: 0 22px 0 7px;
  border: 1px solid rgba(7, 90, 150, .16);
  border-radius: 7px;
  color: var(--brand-dark);
  background-color: rgba(247, 251, 253, .92);
  font: inherit;
  cursor: pointer;
}

.property-map-basemap-picker select:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
  outline: none;
}

.property-map-toolstrip button:hover,
.property-map-toolstrip button:focus-visible {
  color: #fff;
  background: var(--brand);
  outline: none;
}

.property-map-gesture-hint {
  position: absolute;
  z-index: 3;
  bottom: 8px;
  left: 10px;
  padding: 4px 7px;
  border-radius: 7px;
  color: #53616a;
  background: rgba(255, 255, 255, .84);
  font-size: calc(8px + var(--ui-font-step));
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.property-map-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  background: #eef2f4;
}

@media (max-width: 700px) {
  .archive-main .property-map-stage {
    min-height: 330px;
  }

  .property-map-toolstrip button {
    width: 32px;
    justify-content: center;
    padding: 0;
    font-size: 14px;
  }

  .property-map-toolstrip button span,
  .property-map-gesture-hint {
    display: none;
  }

  .property-map-basemap-picker > span {
    display: none;
  }

  .property-map-basemap-picker {
    padding-left: 4px;
  }

  .property-map-basemap-picker select {
    min-width: 82px;
  }

  .archive-main .property-map-badge {
    bottom: 34px;
  }

  .property-map-stage .ol-attribution {
    max-width: calc(100% - 110px);
  }
}

/* Yüzde 100 masaüstü görünümü: puntoları koruyup yalnız boşlukları sıkılaştırır. */
@media (min-width: 1201px) {
  .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .sidebar {
    top: 8px;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    margin-left: 8px;
    padding: 14px 12px;
    border-radius: 20px;
  }

  .sidebar-brand {
    margin-bottom: 8px;
    padding-bottom: 12px;
  }

  .nav {
    gap: 3px;
  }

  .nav-button {
    min-height: calc(38px + var(--ui-font-step));
    padding-inline: 10px;
  }

  .main {
    padding: 12px 16px 28px 12px;
  }

  .topbar {
    padding: 14px 2px 12px;
  }

  .archive-main .archive-panel-open {
    padding: 12px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .archive-main .archive-breadcrumb .archive-home-crumb {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
  }

  .archive-main .archive-home-crumb svg {
    width: 22px;
    height: 22px;
  }

  .archive-main .property-workspace-tabs {
    margin-bottom: 8px;
  }

  .archive-main .property-workspace-tab {
    min-height: calc(40px + var(--ui-font-step));
  }

  .archive-main .property-permit-library-head {
    min-height: 48px;
    padding: 6px 10px;
  }

  .archive-main #property-permits-form {
    gap: 6px;
    padding: 7px;
  }

  .archive-main #property-permits-form > .property-permit-records {
    gap: 6px;
  }

  .archive-main .property-permit-record {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }

  .archive-main .property-permit-card-preview {
    min-height: 94px;
  }

  .archive-main .property-permit-card-content {
    gap: 5px;
  }

  .archive-main .property-permit-card-content [data-inline-permit-field] {
    padding: 3px 5px;
  }

  .archive-main .property-permits-savebar {
    padding-top: 6px;
  }
}

/* Bütünleşik sol menü — içerik doğrudan sayfa fonunda, kart adası olmadan durur. */
@media (min-width: 861px) {
  .sidebar {
    top: 0;
    height: 100vh;
    height: 100dvh;
    margin-left: 0;
    padding: 18px 16px 14px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar-footer {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 10px 4px 0;
    overflow: hidden;
    border: 0;
  }

  .sidebar-system-status {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .sidebar-status-summary {
    flex: 0 0 auto;
    padding: 0 2px 12px;
    border-bottom: 1px solid var(--sidebar-line);
  }

  .sidebar-archive-stats {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sidebar-line);
  }

  .sidebar-archive-stats > div {
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .sidebar-footer > .user-chip {
    display: none;
  }

  .sidebar-activity {
    min-height: 110px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 0 2px;
    border: 0;
  }

  .sidebar-activity-viewport {
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    border-radius: 0;
  }

  .sidebar-activity-track:not(.rolling) {
    height: 100%;
  }

  .sidebar-activity-track:not(.rolling) .sidebar-activity-group {
    min-height: 100%;
    align-content: end;
  }

  .sidebar-activity-track.rolling {
    will-change: transform;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  .sidebar {
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .sidebar-footer {
    margin-top: 8px;
    padding-top: 8px;
  }

  .sidebar-activity {
    min-height: 82px;
  }
}

/* Mac masaüstü: Finder benzeri yoğun ve sade arşiv görünümü. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .archive-main .archive-panel-open {
    padding: 10px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .archive-main .property-workspace-tabs {
    margin-bottom: 7px;
    border-radius: 11px;
  }

  .archive-main .property-workspace-tab {
    min-height: calc(36px + var(--ui-font-step));
  }

  .archive-main .property-structure-groups {
    gap: 8px;
  }

  .archive-main .property-structure-group {
    padding: 8px;
    border-radius: 12px;
  }

  .archive-main .property-structure-head {
    gap: 7px;
    margin-bottom: 6px;
  }

  .archive-main .property-structure-head strong {
    font-size: calc(12px + var(--ui-font-step));
  }

  .archive-main .property-structure-head small {
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .folder-sort-tools {
    margin: 6px 0;
  }

  .archive-main .archive-interaction-hint {
    margin-bottom: 6px;
    font-size: calc(8px + var(--ui-font-step));
    line-height: 1.25;
  }

  .archive-main .finder-drop-help::before {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .archive-main .archive-panel-open .category-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder {
    min-height: 126px;
    gap: 7px;
    padding: 22px 7px 8px;
    border-radius: 12px;
  }

  .archive-main .archive-panel-open .category-folder .folder-icon {
    width: min(66px, 100%);
  }

  .archive-main .archive-panel-open .category-folder .folder-copy strong {
    font-size: calc(10px + var(--ui-font-step));
    line-height: 1.25;
  }

  .archive-main .archive-panel-open .category-folder .folder-copy small {
    margin-top: 2px;
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }

  .archive-main .photo-upload-card {
    min-height: 138px;
    gap: 5px;
    padding: 10px;
    border-radius: 11px;
  }

  .archive-main .photo-upload-plus {
    width: 36px;
    height: 36px;
    font-size: calc(24px + var(--ui-font-step));
  }

  .archive-main .photo-card {
    border-radius: 11px;
    box-shadow: 0 4px 13px rgba(50, 32, 45, 0.07);
  }

  .archive-main .photo-meta {
    min-height: 49px;
    padding: 7px 8px 8px;
  }

  .archive-main .photo-meta span {
    margin-top: 2px;
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .photo-meta .photo-file-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: calc(10px + var(--ui-font-step));
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .archive-main .photo-uploader {
    display: none !important;
  }

  .archive-main .photo-type-badge {
    top: 6px;
    right: 6px;
    min-height: 21px;
    padding: 0 7px;
    font-size: calc(8px + var(--ui-font-step));
  }

  .archive-main .photo-selection-bar {
    position: sticky;
    z-index: 8;
    top: 4px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    box-shadow: 0 6px 16px rgba(50, 32, 45, 0.08);
  }

  .archive-main .photo-selection-bar .button {
    min-height: 30px;
    padding: 0 8px;
  }

  .archive-main .photo-select-all {
    min-height: 28px;
  }

  .archive-main .property-permit-library-head {
    padding: 5px 8px;
  }

  .archive-main #property-permits-form {
    padding: 6px;
  }

  .archive-main .archive-folder:focus-visible,
  .archive-main .photo-card:focus-visible,
  .archive-main [data-permit-open-photo]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

/*
 * Mac modern preview v262
 * Apple'in ferah urun kartlari ile WhatsApp'in sicak, sakin ve yesil vurgu
 * dilinden esinlenen yalnizca masaustu temasi. Etkilesim ve mobil duzen korunur.
 */
@media screen and (min-width: 861px) {
  :root {
    --bg: #f4f3ef;
    --surface: #ffffff;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(29, 29, 31, 0.1);
    --brand: #147a5d;
    --brand-dark: #0b4b3b;
    --brand-soft: #e7f4ee;
    --brand-faint: #f3faf7;
    --green: #147a5d;
    --green-soft: #e7f4ee;
    --red: #a93247;
    --shadow: 0 20px 56px rgba(29, 29, 31, 0.08);
    --radius: 26px;
  }

  body {
    color: var(--ink);
    background:
      radial-gradient(circle at 100% 0, rgba(211, 238, 226, 0.82), transparent 31rem),
      radial-gradient(circle at 47% 100%, rgba(248, 226, 199, 0.5), transparent 36rem),
      var(--bg);
    background-attachment: fixed;
  }

  body.app-shell-active {
    background:
      radial-gradient(circle at 100% -5%, rgba(205, 235, 222, 0.76), transparent 34rem),
      radial-gradient(circle at 58% 110%, rgba(248, 229, 202, 0.56), transparent 40rem),
      repeating-linear-gradient(135deg, rgba(20, 122, 93, 0.016) 0 1px, transparent 1px 22px),
      #f6f5f1;
    background-attachment: fixed;
  }

  .app-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .sidebar {
    --sidebar-accent: #147a5d;
    --sidebar-ink: #1d1d1f;
    --sidebar-muted: #73736f;
    --sidebar-line: rgba(29, 29, 31, 0.09);
    --sidebar-surface: rgba(255, 255, 255, 0.68);
    --sidebar-glow: transparent;
    top: 0;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 22px 18px 16px;
    color: var(--sidebar-ink);
    border: 0;
    border-right: 1px solid var(--sidebar-line);
    border-radius: 0;
    background: rgba(250, 250, 247, 0.76);
    box-shadow: none;
    -webkit-backdrop-filter: blur(26px) saturate(125%);
    backdrop-filter: blur(26px) saturate(125%);
  }

  .sidebar-brand {
    gap: 11px;
    margin: 0 0 16px;
    padding: 2px 5px 18px;
    border-bottom: 1px solid var(--sidebar-line);
  }

  .sidebar-brand .brand-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border: 1px solid rgba(29, 29, 31, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(29, 29, 31, 0.09);
  }

  .sidebar .brand-copy strong {
    color: var(--sidebar-ink);
    font-weight: 820;
    letter-spacing: -0.035em;
  }

  .sidebar .brand-copy span {
    color: var(--sidebar-muted);
    font-weight: 640;
  }

  .nav {
    gap: 5px;
  }

  .sidebar .nav-button {
    min-height: 42px;
    gap: 11px;
    padding: 0 12px;
    border: 0;
    border-radius: 13px;
    color: #666763;
    font-weight: 720;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
  }

  .sidebar .nav-button:hover {
    border: 0;
    color: var(--sidebar-ink);
    background: rgba(29, 29, 31, 0.055);
    transform: translateX(2px);
  }

  .sidebar .nav-button.active {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #173f35, #147a5d);
    box-shadow: 0 9px 22px rgba(20, 122, 93, 0.2);
  }

  .sidebar .nav-button.active .nav-icon {
    color: #c9f2df;
  }

  .sidebar .nav-button.active::before,
  .sidebar .nav-button.active::after {
    display: none;
    content: none;
  }

  .sidebar-footer {
    padding: 12px 4px 0;
    border-top: 1px solid var(--sidebar-line);
  }

  .sidebar-system-status,
  .sidebar-archive-stats > div,
  .sidebar-footer .user-chip {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .sidebar-status-summary {
    border-bottom-color: var(--sidebar-line);
  }

  .sidebar-archive-stats {
    border-top-color: var(--sidebar-line);
  }

  .sidebar-capacity-meter {
    height: 5px;
    background: rgba(29, 29, 31, 0.09);
  }

  .sidebar-capacity-meter span,
  .sidebar-capacity.backup .sidebar-capacity-meter span {
    background: linear-gradient(90deg, #147a5d, #55b493);
  }

  .sidebar .connection.online .connection-dot,
  .sidebar-harddisk-status.ready .connection-dot,
  .sidebar-activity-head i {
    background: #31b87b;
    box-shadow: 0 0 0 4px rgba(49, 184, 123, 0.12);
  }

  .sidebar-activity-avatar,
  .sidebar-footer .avatar {
    color: var(--brand-dark);
    border-color: rgba(20, 122, 93, 0.13);
    background: var(--brand-soft);
  }

  .main {
    padding: 26px clamp(24px, 3.2vw, 54px) 58px;
  }

  .topbar {
    align-items: center;
    margin-bottom: 24px;
    padding: 8px 2px 4px;
  }

  .page-kicker {
    margin-bottom: 8px;
    color: var(--brand);
    font-size: calc(11px + var(--ui-font-step));
    font-weight: 850;
    letter-spacing: 0.14em;
  }

  .page-title {
    font-size: clamp(31px, 3vw, 48px);
    font-weight: 860;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .page-subtitle {
    margin-top: 10px;
    color: #6f706d;
    font-size: calc(14px + var(--ui-font-step));
    line-height: 1.45;
  }

  .button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    background: #147a5d;
    font-weight: 780;
    box-shadow: 0 8px 20px rgba(20, 122, 93, 0.16);
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
  }

  .button:hover {
    background: #0b4b3b;
    box-shadow: 0 10px 24px rgba(20, 122, 93, 0.2);
    transform: translateY(-1px);
  }

  .button.secondary {
    border-color: rgba(29, 29, 31, 0.09);
    color: #313331;
    background: #f1f2ef;
    box-shadow: none;
  }

  .button.secondary:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .button.ghost {
    color: #3e403e;
    background: transparent;
    box-shadow: none;
  }

  .button.danger {
    color: #fff;
    background: var(--red);
    box-shadow: 0 8px 20px rgba(169, 50, 71, 0.12);
  }

  .archive-add-property {
    min-height: 46px;
    padding-inline: 22px;
    color: #fff;
    background: #1d1d1f;
    box-shadow: 0 10px 28px rgba(29, 29, 31, 0.15);
  }

  .archive-add-property:hover {
    background: #147a5d;
  }

  input,
  select,
  textarea {
    border-color: transparent;
    border-radius: 14px;
    background: #f2f3f0;
  }

  input:hover,
  select:hover,
  textarea:hover {
    background: #edefeb;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(20, 122, 93, 0.42);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20, 122, 93, 0.1);
  }

  .stat-card,
  .panel {
    border: 1px solid rgba(29, 29, 31, 0.075);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 48px rgba(29, 29, 31, 0.065);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    backdrop-filter: blur(16px) saturate(110%);
  }

  .panel {
    padding: 22px;
  }

  .panel-head {
    margin-bottom: 18px;
  }

  .panel h2,
  .panel h3 {
    color: var(--ink);
    font-weight: 820;
    letter-spacing: -0.035em;
  }

  .status-pill,
  .badge {
    border-color: rgba(20, 122, 93, 0.14);
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .archive-searchbar {
    gap: 10px;
    padding: 7px;
    border: 1px solid rgba(29, 29, 31, 0.075);
    border-radius: 20px;
    background: #f4f5f2;
  }

  .archive-main .archive-searchbar .property-search > input {
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(29, 29, 31, 0.045);
  }

  .archive-main .archive-sort-menu > .archive-smart-sort {
    border: 0;
    border-radius: 15px;
    color: #3a3c39;
    background: transparent;
  }

  .archive-sort-menu[open] > .archive-smart-sort,
  .archive-main .archive-sort-menu > .archive-smart-sort:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .archive-sort-popover,
  .archive-context-menu {
    border-color: rgba(29, 29, 31, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(29, 29, 31, 0.18);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .folder-section-head {
    margin: 18px 2px 12px;
  }

  .folder-section-head > strong {
    color: var(--ink);
    font-size: calc(17px + var(--ui-font-step));
    font-weight: 820;
    letter-spacing: -0.025em;
  }

  .property-folder-list {
    gap: 10px;
  }

  .archive-main .archive-folder:not(.category-folder) {
    min-height: 92px;
    padding: 15px 17px;
    border-color: rgba(29, 29, 31, 0.075);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 23px rgba(29, 29, 31, 0.04);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder {
    border-color: rgba(29, 29, 31, 0.075);
    background: #fff;
  }

  .archive-main .archive-folder:not(.category-folder):hover {
    border-color: rgba(20, 122, 93, 0.24);
    background: #fff;
    box-shadow: 0 16px 34px rgba(29, 29, 31, 0.085);
    transform: translateY(-2px);
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder:hover {
    border-color: rgba(20, 122, 93, 0.24);
    background:
      radial-gradient(circle at 100% 0, rgba(215, 239, 228, 0.56), transparent 42%),
      #fff;
    box-shadow: 0 16px 34px rgba(29, 29, 31, 0.085);
  }

  .archive-folder .folder-copy > strong {
    color: var(--ink);
    font-weight: 820;
    letter-spacing: -0.018em;
  }

  .archive-folder .property-folder-owner,
  .archive-folder .property-folder-owner b,
  .property-folder-permits > b {
    color: var(--brand-dark);
  }

  .property-folder-permit-list small::before {
    color: var(--brand);
  }

  .folder-arrow {
    color: #8a8b87;
  }

  .archive-main .archive-panel-open {
    border-radius: 26px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    border-bottom-color: var(--line);
  }

  .archive-main .archive-breadcrumb .archive-home-crumb {
    color: #fff;
    border: 0;
    background: #147a5d;
    box-shadow: 0 8px 20px rgba(20, 122, 93, 0.18);
  }

  .archive-main .property-workspace-tabs {
    padding: 4px;
    border-color: rgba(29, 29, 31, 0.075);
    border-radius: 16px;
    background: #f1f2ef;
  }

  .archive-main .property-workspace-tab {
    border: 0;
    border-radius: 12px;
    color: #686a66;
    background: transparent;
  }

  .archive-main .property-workspace-tab:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.68);
  }

  .archive-main .property-workspace-tab.active {
    color: var(--brand-dark);
    background: #fff;
    box-shadow: 0 4px 14px rgba(29, 29, 31, 0.07);
  }

  .archive-main .property-workspace-tab.active::after {
    display: none;
    content: none;
  }

  .archive-main .category-folder,
  .archive-main .photo-card,
  .archive-main .property-structure-group,
  .archive-main .property-identity-card,
  .archive-main .property-note-file,
  .archive-main .property-map-stage,
  .archive-main .property-permit-record {
    border-color: rgba(29, 29, 31, 0.08);
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.055);
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder {
    border-color: rgba(29, 29, 31, 0.09);
    background:
      radial-gradient(circle at 100% 0, rgba(215, 239, 228, 0.66), transparent 48%),
      #fff;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover {
    border-color: rgba(20, 122, 93, 0.28);
    background:
      radial-gradient(circle at 100% 0, rgba(201, 237, 220, 0.82), transparent 50%),
      #fff;
    box-shadow: 0 16px 34px rgba(29, 29, 31, 0.09);
  }

  .archive-main .archive-folder.is-selected,
  .archive-main .photo-card-wrap.is-selected .photo-card {
    border-color: var(--brand);
    outline-color: rgba(20, 122, 93, 0.22);
    background-color: var(--brand-faint);
  }

  .archive-main .category-folder:hover,
  .archive-main .photo-card:hover {
    border-color: rgba(20, 122, 93, 0.24);
    box-shadow: 0 16px 34px rgba(29, 29, 31, 0.09);
  }

  .archive-main .property-permit-record {
    --permit-card-accent: #147a5d;
    --permit-card-soft: #eef8f3;
    background: linear-gradient(105deg, var(--permit-card-soft), #fff 34%);
  }

  .archive-main .property-permit-record[data-permit-type="occupancy"] {
    --permit-card-accent: #b57a28;
    --permit-card-soft: #fff7e8;
  }

  .archive-main .photo-selection-bar,
  .archive-main .property-permit-selection-bar {
    border-color: rgba(20, 122, 93, 0.16);
    border-radius: 15px;
    background: rgba(244, 250, 247, 0.96);
    box-shadow: 0 10px 28px rgba(29, 29, 31, 0.08);
  }

  .archive-main .property-permit-library-head {
    min-height: 46px;
    gap: 10px;
    padding: 6px 8px;
    background: #fff;
  }

  .property-permit-library-copy {
    flex: 1 1 auto;
    padding-left: 2px;
  }

  .property-permit-library-copy strong {
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 850;
  }

  .property-permit-library-copy small {
    font-size: calc(8px + var(--ui-font-step));
  }

  .archive-main .property-permit-library-actions {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(29, 29, 31, 0.075);
    border-radius: 13px;
    background: #f1f2ef;
  }

  .property-permit-structure-picker {
    min-width: 104px;
    gap: 1px;
    padding-left: 4px;
  }

  .property-permit-structure-picker > span {
    font-size: calc(7px + var(--ui-font-step));
  }

  .property-permit-structure-picker select {
    min-height: 30px;
    padding-left: 8px;
    border: 0;
    border-radius: 9px;
    background: #fff;
  }

  .property-permit-library-buttons {
    gap: 4px;
    padding-left: 4px;
    border-left: 1px solid rgba(29, 29, 31, 0.08);
  }

  .property-permit-upload-action {
    gap: 2px;
    padding: 0;
  }

  .property-permit-library-actions .button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: calc(9px + var(--ui-font-step));
    box-shadow: none;
  }

  .property-permit-side-count {
    width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(29, 29, 31, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0;
  }

  .property-permit-side-count b {
    font-size: calc(9px + var(--ui-font-step));
  }

  .property-permit-save-action {
    margin-left: 2px;
    white-space: nowrap;
    color: #fff;
    background: #1d1d1f;
  }

  .property-permit-save-action:hover {
    background: var(--brand-dark);
  }

  .archive-main .property-permits-savebar {
    display: none;
  }

  .storage-meter {
    background: #e8eae6;
  }

  .storage-meter > span {
    background: linear-gradient(90deg, #147a5d, #55b493);
  }

  .backup-schedule-box,
  .backup-last,
  .backup-restore-box,
  .settings-disclosure,
  .relay-card {
    border-color: rgba(29, 29, 31, 0.08);
    border-radius: 18px;
    background: #f6f7f4;
  }

  .display-settings-toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.36);
    background: #147a5d;
    box-shadow: 0 12px 34px rgba(20, 122, 93, 0.24);
  }

  .display-settings-panel {
    border-color: rgba(29, 29, 31, 0.09);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(29, 29, 31, 0.16);
  }

  .toast {
    border-color: rgba(20, 122, 93, 0.2);
    background: #143f34;
    box-shadow: 0 18px 48px rgba(20, 54, 46, 0.24);
  }
}

/*
 * Mac Evernote-inspired refinement v264
 * Evernote'un sicak yuzey, guclu tipografi ve olculu yesil vurgu dilini
 * belediye arsivinin kompakt masaustu akisina uyarlar. Islev ve mobil ayni kalir.
 */
@media screen and (min-width: 861px) {
  :root {
    --bg: #f8f6f1;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --ink: #171717;
    --muted: #6b6b66;
    --line: rgba(20, 20, 18, 0.1);
    --brand: #147a5d;
    --brand-dark: #0b513d;
    --brand-soft: #e8f3ee;
    --brand-faint: #f4faf7;
    --green: #147a5d;
    --green-soft: #e8f3ee;
    --red: #a93247;
    --shadow: 0 12px 32px rgba(20, 20, 18, 0.07);
    --radius: 20px;
  }

  body,
  body.app-shell-active {
    color: var(--ink);
    background:
      radial-gradient(circle at 96% 2%, rgba(214, 235, 224, 0.58), transparent 27rem),
      #f8f6f1;
    background-attachment: fixed;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .app-shell {
    grid-template-columns: 238px minmax(0, 1fr);
  }

  .app-shell > .sidebar {
    --sidebar-ink: #171717;
    --sidebar-muted: #74736d;
    --sidebar-line: rgba(20, 20, 18, 0.1);
    width: auto;
    padding: 20px 16px 15px;
    border-right: 1px solid var(--sidebar-line);
    color: var(--sidebar-ink);
    background: #f5f2ec;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar-brand {
    gap: 10px;
    margin-bottom: 12px;
    padding: 2px 4px 17px;
  }

  .sidebar-brand .brand-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-color: rgba(20, 20, 18, 0.09);
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(20, 20, 18, 0.08);
  }

  .sidebar .brand-copy strong {
    color: var(--sidebar-ink);
    font-weight: 790;
    letter-spacing: -0.035em;
  }

  .sidebar .brand-copy span {
    color: var(--sidebar-muted);
    font-weight: 560;
  }

  .sidebar .nav {
    gap: 3px;
  }

  .sidebar .nav-button {
    position: relative;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 10px;
    color: #63645f;
    font-weight: 680;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }

  .sidebar .nav-button:hover {
    color: #171717;
    background: rgba(20, 20, 18, 0.055);
    transform: none;
  }

  .sidebar .nav-button.active {
    color: var(--brand-dark);
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
  }

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

  .sidebar-footer {
    padding: 11px 3px 0;
    border-top-color: var(--sidebar-line);
  }

  .sidebar .connection,
  .sidebar-harddisk-status,
  .sidebar-capacity-head,
  .sidebar-activity-item {
    color: #464742;
  }

  .sidebar-archive-stats span,
  .sidebar-capacity small,
  .sidebar-activity-copy small,
  .sidebar-activity-item time,
  .sidebar-activity-head > span,
  .sidebar-activity-empty {
    color: #777872;
  }

  .sidebar-archive-stats strong,
  .sidebar-activity-head > strong,
  .sidebar-activity-copy p strong {
    color: #171717;
  }

  .sidebar-status-summary,
  .sidebar-archive-stats,
  .sidebar-activity {
    border-color: var(--sidebar-line);
  }

  .sidebar-activity-item {
    border-bottom-color: rgba(20, 20, 18, 0.075);
  }

  .sidebar-capacity-meter {
    height: 4px;
    background: rgba(20, 20, 18, 0.1);
  }

  .sidebar-capacity-meter span,
  .sidebar-capacity.backup .sidebar-capacity-meter span {
    background: var(--brand);
  }

  .sidebar-activity-avatar,
  .sidebar-footer .avatar {
    color: var(--brand-dark);
    border-color: rgba(20, 122, 93, 0.14);
    background: var(--brand-soft);
  }

  .main {
    padding: 24px clamp(26px, 3.2vw, 52px) 58px;
  }

  .topbar {
    align-items: center;
    margin-bottom: 22px;
    padding: 7px 1px 22px;
    border-bottom: 1px solid var(--line);
  }

  .page-kicker {
    margin-bottom: 7px;
    color: var(--brand);
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 820;
    letter-spacing: 0.16em;
  }

  .page-title {
    color: #111;
    font-size: clamp(34px, 3.1vw, 46px);
    font-weight: 780;
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .page-subtitle {
    max-width: 760px;
    margin-top: 9px;
    color: var(--muted);
    font-size: calc(13px + var(--ui-font-step));
    line-height: 1.45;
  }

  body.app-shell-active .button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background: var(--brand-dark);
    font-weight: 730;
    box-shadow: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  body.app-shell-active .button:hover {
    background: var(--brand);
    box-shadow: none;
    transform: translateY(-1px);
  }

  body.app-shell-active .button.secondary {
    border-color: var(--line);
    color: #272724;
    background: #fff;
  }

  body.app-shell-active .button.secondary:hover {
    border-color: rgba(20, 122, 93, 0.25);
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  body.app-shell-active .button.ghost {
    color: #3f403c;
    background: transparent;
  }

  body.app-shell-active .button.danger {
    color: #fff;
    background: var(--red);
  }

  body.app-shell-active .archive-add-property {
    min-height: 44px;
    padding-inline: 20px;
    border-radius: 10px;
    color: #fff;
    background: #151515;
    box-shadow: 0 8px 20px rgba(20, 20, 18, 0.12);
  }

  body.app-shell-active .archive-add-property:hover {
    background: var(--brand-dark);
  }

  .main input,
  .main select,
  .main textarea {
    border-color: transparent;
    border-radius: 11px;
    background: #f4f4f0;
  }

  .main input:hover,
  .main select:hover,
  .main textarea:hover {
    background: #efefea;
  }

  .main input:focus,
  .main select:focus,
  .main textarea:focus {
    border-color: rgba(20, 122, 93, 0.44);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 122, 93, 0.11);
  }

  .main .stat-card,
  .main .panel {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 20, 18, 0.035);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .main .panel {
    padding: 20px;
  }

  .panel h2,
  .panel h3 {
    color: #171717;
    font-weight: 760;
    letter-spacing: -0.035em;
  }

  .status-pill,
  .badge {
    border-color: rgba(20, 122, 93, 0.15);
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .archive-main .panel:not(.archive-panel-open) {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .archive-main .archive-searchbar {
    gap: 8px;
    margin-top: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 20, 18, 0.045);
  }

  .archive-main .archive-searchbar .property-search > input {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: #f5f5f1;
    box-shadow: none;
  }

  .archive-main .archive-searchbar .property-search > input:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 122, 93, 0.11);
  }

  .archive-main .archive-sort-menu > .archive-smart-sort {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: #50514d;
    background: transparent;
  }

  .archive-sort-menu[open] > .archive-smart-sort,
  .archive-main .archive-sort-menu > .archive-smart-sort:hover {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .archive-sort-popover,
  .archive-context-menu {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 48px rgba(20, 20, 18, 0.14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .folder-section-head {
    margin: 18px 2px 10px;
  }

  .folder-section-head > strong {
    color: #171717;
    font-size: calc(15px + var(--ui-font-step));
    font-weight: 760;
    letter-spacing: -0.025em;
  }

  .property-folder-list {
    gap: 10px;
  }

  .archive-main .archive-folder:not(.category-folder) {
    min-height: 108px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 20, 18, 0.035);
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease, box-shadow 160ms ease;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder {
    min-height: 108px;
    padding: 14px 16px;
    border-color: var(--line);
    border-radius: 16px;
    background: #fff;
  }

  .archive-main .archive-folder:not(.category-folder):hover,
  .archive-main .panel:not(.archive-panel-open) .property-folder-list > .archive-folder:hover {
    border-color: rgba(20, 122, 93, 0.3);
    background: #fff;
    box-shadow: 0 10px 28px rgba(20, 20, 18, 0.075);
    transform: translateY(-1px);
  }

  .archive-main .panel:not(.archive-panel-open) .folder-icon {
    background: #e8aa24;
    box-shadow: inset 0 -5px 0 rgba(126, 82, 0, 0.1), 0 5px 12px rgba(126, 82, 0, 0.12);
  }

  .archive-main .panel:not(.archive-panel-open) .folder-icon::before {
    background: #e8aa24;
  }

  .archive-main .panel:not(.archive-panel-open) .folder-copy strong,
  .archive-folder .folder-copy > strong {
    color: #171717;
    font-weight: 760;
    letter-spacing: -0.018em;
  }

  .archive-folder .property-folder-owner,
  .archive-folder .property-folder-owner b,
  .property-folder-permits > b {
    color: var(--brand-dark);
  }

  .folder-arrow {
    color: #7d7e78;
  }

  .archive-main .archive-panel-open {
    border-radius: 20px;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    border-bottom-color: var(--line);
  }

  .archive-main .archive-breadcrumb .archive-home-crumb {
    color: #fff;
    border: 0;
    border-radius: 10px;
    background: #171717;
    box-shadow: none;
  }

  .archive-main .archive-breadcrumb .archive-home-crumb:hover {
    background: var(--brand-dark);
  }

  .archive-main .property-workspace-tabs {
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f2f1ec;
    box-shadow: none;
  }

  .archive-main .property-workspace-tab {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    color: #6a6b66;
    background: transparent;
  }

  .archive-main .property-workspace-tab:hover {
    color: #171717;
    background: rgba(255, 255, 255, 0.64);
  }

  .archive-main .property-workspace-tab.active {
    color: #171717;
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--brand), 0 1px 3px rgba(20, 20, 18, 0.07);
  }

  .archive-main .property-workspace-tab.active .property-workspace-tab-number {
    color: var(--brand);
  }

  .archive-main .category-folder,
  .archive-main .photo-card,
  .archive-main .property-structure-group,
  .archive-main .property-identity-card,
  .archive-main .property-note-file,
  .archive-main .property-map-stage,
  .archive-main .property-permit-record {
    border: 1px solid var(--line);
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(20, 20, 18, 0.035);
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder,
  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover {
    border-color: var(--line);
    background: #fff;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover,
  .archive-main .category-folder:hover,
  .archive-main .photo-card:hover {
    border-color: rgba(20, 122, 93, 0.28);
    box-shadow: 0 10px 26px rgba(20, 20, 18, 0.075);
  }

  .archive-main .archive-folder.is-selected,
  .archive-main .photo-card-wrap.is-selected .photo-card {
    border-color: var(--brand);
    outline: 3px solid rgba(20, 122, 93, 0.14);
    background-color: var(--brand-faint);
  }

  .archive-main .property-permit-record {
    --permit-card-accent: #147a5d;
    --permit-card-soft: #f4faf7;
    background: #fff;
  }

  .archive-main .property-permit-record[data-permit-type="occupancy"] {
    --permit-card-accent: #b57a28;
    --permit-card-soft: #fff8ea;
    background: #fffdf8;
  }

  .archive-main .photo-selection-bar,
  .archive-main .property-permit-selection-bar {
    border: 1px solid rgba(20, 122, 93, 0.16);
    border-radius: 12px;
    background: rgba(244, 250, 247, 0.98);
    box-shadow: 0 6px 18px rgba(20, 20, 18, 0.06);
  }

  .archive-main .property-permit-library-head {
    min-height: 46px;
    background: #fff;
  }

  .archive-main .property-permit-library-actions {
    border-color: var(--line);
    border-radius: 11px;
    background: #f2f1ec;
  }

  .archive-main .property-permit-library-actions .button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: calc(9px + var(--ui-font-step));
  }

  .archive-main .property-permit-save-action {
    color: #fff;
    background: #171717;
  }

  .archive-main .property-permit-save-action:hover {
    background: var(--brand-dark);
  }

  .backup-schedule-box,
  .backup-last,
  .backup-restore-box,
  .settings-disclosure,
  .relay-card {
    border-color: var(--line);
    border-radius: 14px;
    background: #f5f4ef;
  }

  .storage-meter {
    background: #e8e7e1;
  }

  .storage-meter > span {
    background: var(--brand);
  }

  .display-settings-toggle {
    border-color: rgba(255, 255, 255, 0.76);
    border-radius: 12px;
    background: #171717;
    box-shadow: 0 10px 26px rgba(20, 20, 18, 0.14);
  }

  .display-settings-toggle:hover {
    background: var(--brand-dark);
  }

  .display-settings-panel {
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(20, 20, 18, 0.14);
  }

  .toast {
    border-color: rgba(20, 122, 93, 0.2);
    border-radius: 12px;
    background: #171717;
    box-shadow: 0 16px 40px rgba(20, 20, 18, 0.2);
  }

  body.app-shell-active :where(button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

/*
 * Mac reference-site refinement v265
 * Koyu kurumsal menü, mint çalışma zemini, mavi eylemler ve yalın beyaz
 * kartlar yalnız masaüstü Mac arayüzüne uygulanır. Arşiv davranışları değişmez.
 */
@media screen and (min-width: 861px) {
  :root {
    --bg: #edf4f0;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --ink: #10201b;
    --muted: #5d6c66;
    --line: rgba(16, 32, 27, 0.11);
    --brand: #1677ff;
    --brand-dark: #0f5fc7;
    --brand-soft: #eaf3ff;
    --brand-faint: #f3f8ff;
    --green: #18a96b;
    --green-soft: #e8f7f0;
    --red: #b13b4d;
    --shadow: 0 14px 32px rgba(18, 59, 82, 0.08);
    --radius: 18px;
  }

  body,
  body.app-shell-active {
    color: var(--ink);
    background:
      radial-gradient(circle at 86% 7%, rgba(69, 183, 135, 0.1), transparent 27rem),
      #edf4f0;
    background-attachment: fixed;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .app-shell {
    grid-template-columns: 238px minmax(0, 1fr);
    background: transparent;
  }

  .app-shell > .sidebar {
    --sidebar-ink: #ffffff;
    --sidebar-muted: #b7c9d4;
    --sidebar-line: rgba(255, 255, 255, 0.12);
    width: auto;
    padding: 20px 14px 14px;
    border-right: 0;
    color: var(--sidebar-ink);
    background:
      radial-gradient(circle at 18% 2%, rgba(65, 160, 190, 0.18), transparent 16rem),
      #123b52;
    box-shadow: 8px 0 28px rgba(11, 26, 43, 0.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar-brand {
    gap: 11px;
    margin-bottom: 15px;
    padding: 3px 5px 19px;
    border-bottom-color: var(--sidebar-line);
  }

  .sidebar-brand .brand-logo {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(3, 18, 30, 0.2);
  }

  .sidebar .brand-copy strong {
    color: #fff;
    font-weight: 780;
    letter-spacing: -0.03em;
  }

  .sidebar .brand-copy span {
    color: #c2d1d9;
    font-weight: 570;
  }

  .sidebar .nav {
    gap: 4px;
  }

  .sidebar .nav-button {
    position: relative;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #c6d5dd;
    font-weight: 680;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  }

  .sidebar .nav-button:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
    transform: none;
  }

  .sidebar .nav-button.active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }

  .sidebar .nav-button.active::before {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #5fd69f;
    content: "";
  }

  .sidebar .nav-button.active .nav-icon {
    color: #73e0ad;
  }

  .sidebar-footer {
    padding: 12px 3px 0;
    border-top-color: var(--sidebar-line);
  }

  .sidebar-system-status {
    border: 0;
    background: transparent;
  }

  .sidebar .connection,
  .sidebar-harddisk-status,
  .sidebar-capacity-head,
  .sidebar-activity-item {
    color: #e5eef2;
  }

  .sidebar-archive-stats span,
  .sidebar-capacity small,
  .sidebar-activity-copy small,
  .sidebar-activity-item time,
  .sidebar-activity-head > span,
  .sidebar-activity-empty {
    color: #9eb5c1;
  }

  .sidebar-archive-stats strong,
  .sidebar-activity-head > strong,
  .sidebar-activity-copy p strong {
    color: #fff;
  }

  .sidebar-status-summary,
  .sidebar-archive-stats,
  .sidebar-activity,
  .sidebar-activity-item {
    border-color: var(--sidebar-line);
  }

  .sidebar-capacity-meter {
    height: 4px;
    background: rgba(255, 255, 255, 0.13);
  }

  .sidebar-capacity-meter span,
  .sidebar-capacity.backup .sidebar-capacity-meter span {
    background: #54d69a;
  }

  .sidebar-activity-avatar,
  .sidebar-footer .avatar {
    color: #dff8ec;
    border-color: rgba(95, 214, 159, 0.24);
    background: rgba(95, 214, 159, 0.13);
  }

  .connection-dot,
  .connection.online .connection-dot,
  .sidebar-harddisk-status.ready .connection-dot {
    background: #49d792;
    box-shadow: 0 0 0 4px rgba(73, 215, 146, 0.12);
  }

  .main {
    padding: 24px clamp(24px, 3vw, 46px) 58px;
    background:
      radial-gradient(circle at 88% 4%, rgba(69, 183, 135, 0.09), transparent 25rem),
      transparent;
  }

  .topbar {
    align-items: center;
    margin-bottom: 21px;
    padding: 6px 1px 21px;
    border-bottom: 1px solid rgba(16, 32, 27, 0.1);
  }

  .page-kicker {
    margin-bottom: 7px;
    color: #08784a;
    font-size: calc(9px + var(--ui-font-step));
    font-weight: 850;
    letter-spacing: 0.15em;
  }

  .page-title {
    color: #10201b;
    font-size: clamp(34px, 3vw, 44px);
    font-weight: 790;
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .page-subtitle {
    max-width: 780px;
    margin-top: 8px;
    color: var(--muted);
    font-size: calc(13px + var(--ui-font-step));
    line-height: 1.45;
  }

  body.app-shell-active .button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #fff;
    background: #1677ff;
    font-weight: 740;
    box-shadow: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  }

  body.app-shell-active .button:hover {
    background: #0f65dc;
    box-shadow: none;
    transform: translateY(-1px);
  }

  body.app-shell-active .button.secondary {
    border-color: #d6e0db;
    color: #263a33;
    background: #fff;
  }

  body.app-shell-active .button.secondary:hover {
    border-color: #a9c9ba;
    color: #08784a;
    background: #f2faf6;
  }

  body.app-shell-active .button.ghost {
    color: #40544c;
    background: transparent;
  }

  body.app-shell-active .button.danger {
    color: #fff;
    background: var(--red);
  }

  body.app-shell-active .archive-add-property {
    min-height: 44px;
    padding-inline: 20px;
    border-radius: 12px;
    color: #fff;
    background: #1677ff;
    box-shadow: 0 10px 24px rgba(22, 119, 255, 0.2);
  }

  body.app-shell-active .archive-add-property:hover {
    background: #0f65dc;
  }

  .main input,
  .main select,
  .main textarea {
    border-color: #dbe5e0;
    border-radius: 11px;
    background: #f6f8f5;
  }

  .main input:hover,
  .main select:hover,
  .main textarea:hover {
    border-color: #c8d8d0;
    background: #fff;
  }

  .main input:focus,
  .main select:focus,
  .main textarea:focus {
    border-color: rgba(22, 119, 255, 0.48);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
  }

  .main .stat-card,
  .main .panel {
    border: 1px solid #d8e1dd;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 59, 82, 0.03);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .main .panel {
    padding: 18px;
  }

  .panel h2,
  .panel h3 {
    color: #10201b;
    font-weight: 770;
    letter-spacing: -0.035em;
  }

  .status-pill,
  .badge {
    border-color: rgba(24, 169, 107, 0.2);
    color: #08784a;
    background: #e8f7f0;
  }

  .archive-main .panel:not(.archive-panel-open) {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .archive-main .archive-searchbar {
    gap: 7px;
    margin-top: 0;
    padding: 6px;
    border: 1px solid #d6e0db;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(18, 59, 82, 0.045);
  }

  .archive-main .archive-searchbar .property-search > input {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: #f5f8f6;
    box-shadow: none;
  }

  .archive-main .archive-searchbar .property-search > input:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
  }

  .archive-main .archive-sort-menu > .archive-smart-sort {
    min-width: 168px;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: #425850;
    background: transparent;
  }

  .archive-sort-menu[open] > .archive-smart-sort,
  .archive-main .archive-sort-menu > .archive-smart-sort:hover {
    color: #0f5fc7;
    background: #eaf3ff;
  }

  .archive-sort-popover,
  .archive-context-menu {
    border: 1px solid #d5dfda;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 48px rgba(11, 26, 43, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .folder-section-head {
    margin: 18px 2px 11px;
  }

  .folder-section-head > strong {
    color: #10201b;
    font-size: calc(15px + var(--ui-font-step));
    font-weight: 780;
    letter-spacing: -0.025em;
  }

  .folder-section-head > span {
    color: #697b74;
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 690;
  }

  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .property-card-shell {
    position: relative;
    min-width: 0;
    min-height: 125px;
    display: flex;
  }

  .archive-main .property-card-shell > .archive-folder {
    min-height: 125px;
    height: 100%;
    padding: 16px 48px 16px 16px;
    border: 1px solid #d8e1dd;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 59, 82, 0.025);
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease, box-shadow 160ms ease;
  }

  .archive-main .panel:not(.archive-panel-open) .property-card-shell > .archive-folder {
    display: grid;
    grid-template-columns: 58px minmax(125px, 1.08fr) minmax(128px, 0.82fr)
      minmax(105px, 0.7fr);
    align-items: center;
    border-color: #d8e1dd;
    background: #fff;
  }

  .archive-main .property-card-shell > .archive-folder:hover {
    border-color: rgba(22, 119, 255, 0.45);
    background: #fff;
    box-shadow: 0 13px 26px rgba(18, 59, 82, 0.08);
    transform: translateY(-2px);
  }

  .archive-main .property-card-shell > .archive-folder.is-selected {
    border-color: #1677ff;
    outline: 3px solid rgba(22, 119, 255, 0.13);
    background: #f7fbff;
  }

  .property-card-shell .folder-icon {
    width: 54px;
    height: 43px;
    background: #f2bd3f;
    box-shadow: inset 0 -5px 0 rgba(137, 87, 0, 0.08), 0 6px 12px rgba(137, 87, 0, 0.11);
  }

  .property-card-shell .folder-icon::before {
    background: #f2bd3f;
  }

  .property-card-shell .folder-icon::after {
    background: linear-gradient(155deg, #ffdf73, #f6c856);
  }

  .property-card-shell .folder-copy > strong {
    color: #10201b;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 780;
    letter-spacing: -0.018em;
  }

  .property-card-shell .folder-copy > small,
  .property-card-shell .property-folder-history small,
  .property-card-shell .property-folder-note-summary,
  .property-card-shell .property-folder-permit-list small {
    color: #64766f;
    font-size: calc(9px + var(--ui-font-step));
  }

  .property-card-shell .property-folder-owner,
  .property-card-shell .property-folder-owner b,
  .property-card-shell .property-folder-permits > b {
    color: #08784a;
  }

  .property-card-shell .property-folder-permits,
  .property-card-shell .property-folder-note-summary {
    border-left-color: #e2e9e5;
  }

  .property-card-shell .property-folder-permit-list small::before {
    color: #1677ff;
  }

  .property-card-shell .folder-arrow {
    color: #7a8a84;
  }

  .property-card-edit {
    position: absolute;
    z-index: 4;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #d9e3de;
    border-radius: 9px;
    color: #547067;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 14px rgba(18, 59, 82, 0.08);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transform: translateY(-2px);
    transition: opacity 150ms ease, transform 150ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease;
  }

  .property-card-edit svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .property-card-shell:hover .property-card-edit,
  .property-card-shell:focus-within .property-card-edit,
  .archive-folder.is-selected + .property-card-edit {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .property-card-edit:hover,
  .property-card-edit:focus-visible {
    color: #0f5fc7;
    border-color: #9fc7eb;
    background: #eef7ff;
  }

  .archive-main .archive-panel-open {
    border-color: #d8e1dd;
    border-radius: 18px;
    background: #fff;
  }

  .archive-main .archive-panel-open .archive-navigation-row {
    border-bottom-color: #e1e9e5;
  }

  .archive-main .archive-breadcrumb .archive-home-crumb {
    color: #fff;
    border: 0;
    border-radius: 11px;
    background: #1677ff;
    box-shadow: 0 8px 18px rgba(22, 119, 255, 0.18);
  }

  .archive-main .archive-breadcrumb .archive-home-crumb:hover {
    background: #0f65dc;
  }

  .archive-main .property-workspace-tabs {
    padding: 4px;
    border: 1px solid #d8e1dd;
    border-radius: 14px;
    background: #edf3f0;
    box-shadow: none;
  }

  .archive-main .property-workspace-tab {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    color: #60726b;
    background: transparent;
  }

  .archive-main .property-workspace-tab:hover {
    color: #10201b;
    background: rgba(255, 255, 255, 0.7);
  }

  .archive-main .property-workspace-tab.active {
    color: #0f5fc7;
    background: #fff;
    box-shadow: 0 2px 6px rgba(18, 59, 82, 0.07), inset 0 -2px 0 #1677ff;
  }

  .archive-main .property-workspace-tab.active .property-workspace-tab-number {
    color: #1677ff;
  }

  .archive-main .category-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .archive-main .category-folder,
  .archive-main .photo-card,
  .archive-main .property-structure-group,
  .archive-main .property-identity-card,
  .archive-main .property-note-file,
  .archive-main .property-map-stage,
  .archive-main .property-permit-record,
  .archive-main .property-permits-workspace,
  .archive-main .property-details-workspace,
  .archive-main .property-map-workspace {
    border: 1px solid #d8e1dd;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(18, 59, 82, 0.025);
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder,
  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover {
    border-color: #d8e1dd;
    background: #fff;
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder:hover,
  .archive-main .category-folder:hover,
  .archive-main .photo-card:hover {
    border-color: rgba(22, 119, 255, 0.42);
    box-shadow: 0 12px 25px rgba(18, 59, 82, 0.075);
  }

  .archive-main .category-folder .folder-icon {
    background: #f2bd3f;
  }

  .archive-main .category-folder .folder-icon::before {
    background: #f2bd3f;
  }

  .archive-main .category-folder .folder-icon::after {
    background: linear-gradient(155deg, #ffdf73, #f6c856);
  }

  .archive-main .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
  }

  .archive-main .photo-card-wrap.is-selected .photo-card,
  .archive-main .property-permit-record:has([data-select-photo]:checked) {
    border-color: #1677ff;
    outline: 3px solid rgba(22, 119, 255, 0.13);
    background-color: #f7fbff;
  }

  .archive-main .property-permit-record {
    --permit-card-accent: #1677ff;
    --permit-card-soft: #f1f7ff;
    background: #fff;
  }

  .archive-main .property-permit-record[data-permit-type="occupancy"] {
    --permit-card-accent: #b57a28;
    --permit-card-soft: #fff8ea;
    background: #fffdf8;
  }

  .archive-main .photo-selection-bar,
  .archive-main .property-permit-selection-bar {
    display: none !important;
  }

  .archive-main .property-permit-library-head,
  .archive-main .property-workspace-section-head {
    background: #fff;
    border-bottom-color: #e3ebe7;
  }

  .archive-main .property-permit-library-actions {
    border-color: #d8e1dd;
    border-radius: 11px;
    background: #edf3f0;
  }

  .archive-main .property-permit-save-action {
    color: #fff;
    background: #1677ff;
  }

  .archive-main .property-permit-save-action:hover {
    background: #0f65dc;
  }

  .backup-schedule-box,
  .backup-last,
  .backup-restore-box,
  .settings-disclosure,
  .relay-card {
    border-color: #d8e1dd;
    border-radius: 14px;
    background: #f5f8f6;
  }

  .storage-meter {
    background: #dfe9e4;
  }

  .storage-meter > span {
    background: #18a96b;
  }

  .display-settings-toggle {
    border-color: rgba(255, 255, 255, 0.76);
    border-radius: 12px;
    background: #1677ff;
    box-shadow: 0 10px 24px rgba(22, 119, 255, 0.22);
  }

  .display-settings-toggle:hover {
    background: #0f65dc;
  }

  .display-settings-panel {
    border-color: #d8e1dd;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(11, 26, 43, 0.15);
  }

  .toast {
    border-color: rgba(22, 119, 255, 0.2);
    border-radius: 12px;
    background: #0b1a2b;
    box-shadow: 0 16px 40px rgba(11, 26, 43, 0.24);
  }

  body.app-shell-active :where(button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #1677ff;
    outline-offset: 2px;
  }
}

/* Mac masaüstü v266: odaklı taşınmaz pencereleri ve eş boyutlu arşiv kartları. */
body.property-editor-open {
  overflow: hidden;
}

@media screen and (min-width: 861px) {
  .property-editor-overlay {
    position: fixed;
    z-index: 140;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(9, 30, 43, 0.46);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .property-editor-dialog {
    width: min(760px, calc(100vw - 48px));
    max-height: min(820px, calc(100dvh - 48px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(9, 30, 43, 0.26);
  }

  .property-editor-dialog.property-create-dialog {
    width: min(820px, calc(100vw - 48px));
  }

  .property-editor-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2eae6;
    background: linear-gradient(135deg, #f5faf7, #fff);
  }

  .property-editor-head > div {
    min-width: 0;
  }

  .property-editor-head small {
    color: #1677ff;
    font-size: calc(9px + var(--ui-font-step));
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .property-editor-head h2 {
    margin: 3px 0 0;
    color: #10201b;
    font-size: calc(20px + var(--ui-font-step));
    letter-spacing: -0.025em;
  }

  .property-editor-head p {
    margin: 4px 0 0;
    color: #64766f;
    font-size: calc(11px + var(--ui-font-step));
  }

  .property-editor-head .icon-button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #d8e1dd;
    border-radius: 11px;
    color: #526961;
    background: #fff;
  }

  .property-editor-head .icon-button:hover {
    color: #0f5fc7;
    border-color: #9fc7eb;
    background: #eef7ff;
  }

  .property-editor-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 20px;
  }

  .property-editor-scroll .property-details-form,
  .property-editor-scroll .property-create-card {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .property-editor-scroll .property-create-card {
    background: transparent;
  }

  .property-editor-loading {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #64766f;
    font-weight: 720;
  }

  .archive-main .archive-panel-open {
    --archive-tile-width: 160px;
    --archive-tile-height: 172px;
    --archive-tile-preview-height: 108px;
  }

  .archive-main .archive-panel-open :is(.category-folder-grid, .photo-grid) {
    grid-template-columns: repeat(auto-fill, minmax(var(--archive-tile-width), var(--archive-tile-width)));
    grid-auto-rows: var(--archive-tile-height);
    justify-content: start;
    align-items: start;
    gap: 10px;
  }

  .archive-main .archive-panel-open .property-folder-entry,
  .archive-main .archive-panel-open .photo-card-wrap,
  .archive-main .archive-panel-open .photo-upload-card {
    width: var(--archive-tile-width);
    min-height: var(--archive-tile-height);
    height: var(--archive-tile-height);
  }

  .archive-main .archive-panel-open .property-folder-entry .category-folder {
    min-height: var(--archive-tile-height);
    height: var(--archive-tile-height);
    gap: 9px;
    padding: 27px 8px 9px;
  }

  .archive-main .archive-panel-open .photo-card {
    height: var(--archive-tile-height);
    display: grid;
    grid-template-rows: var(--archive-tile-preview-height) minmax(0, 1fr);
  }

  .archive-main .archive-panel-open .photo-card > img,
  .archive-main .archive-panel-open .photo-card > .photo-dwg-preview,
  .archive-main .archive-panel-open .photo-card > .photo-archive-preview,
  .archive-main .archive-panel-open .photo-card > .photo-fallback {
    width: 100%;
    height: var(--archive-tile-preview-height);
    aspect-ratio: auto;
  }

  .archive-main .archive-panel-open .photo-meta {
    min-height: 0;
    height: calc(var(--archive-tile-height) - var(--archive-tile-preview-height));
    overflow: hidden;
    padding: 7px 8px;
  }

  .archive-main .archive-panel-open .photo-meta .photo-file-name {
    -webkit-line-clamp: 2;
  }
}

@media screen and (min-width: 861px) and (max-width: 1179px) {
  .archive-main .panel:not(.archive-panel-open) .property-folder-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (min-width: 861px) and (prefers-reduced-motion: reduce) {
  body.app-shell-active *,
  body.app-shell-active *::before,
  body.app-shell-active *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Mac mobile simple v263
 * Dokunmatik kullanım tek dokunuşla açma ve iki temel ekleme akışına iner.
 * Renk sistemi masaüstündeki açık yüzey ve kurumsal yeşille aynıdır.
 */
@media screen and (max-width: 860px) {
  :root {
    --bg: #f4f3ef;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(29, 29, 31, 0.1);
    --brand: #147a5d;
    --brand-dark: #0b4b3b;
    --brand-soft: #e7f4ee;
    --brand-faint: #f3faf7;
    --green: #147a5d;
    --green-soft: #e7f4ee;
    --red: #a93247;
    --shadow: 0 16px 42px rgba(29, 29, 31, 0.08);
  }

  .property-folder-list > .property-card-shell {
    display: contents;
  }

  .property-card-shell > .archive-folder {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
  }

  .property-card-shell > .archive-folder > .folder-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .property-card-shell > .archive-folder > .folder-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .property-card-shell > .archive-folder > .property-folder-permits,
  .property-card-shell > .archive-folder > .property-folder-note-summary {
    grid-column: 2;
    align-self: start;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .property-card-shell > .archive-folder > .property-folder-permits {
    gap: 0;
  }

  .property-card-shell > .archive-folder > .property-folder-note-summary {
    max-height: 38px;
    -webkit-line-clamp: 2;
  }

  .property-card-edit {
    display: none !important;
  }

  body,
  body.app-shell-active {
    color: var(--ink);
    background:
      radial-gradient(circle at 100% 0, rgba(205, 235, 222, 0.7), transparent 24rem),
      radial-gradient(circle at 15% 100%, rgba(248, 229, 202, 0.46), transparent 28rem),
      #f6f5f1;
    background-attachment: fixed;
  }

  .mobile-bar {
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(29, 29, 31, 0.09);
    background: rgba(250, 250, 247, 0.92);
    box-shadow: 0 14px 40px rgba(29, 29, 31, 0.14);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
  }

  .mobile-bar .nav-button {
    color: #666763;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
  }

  .mobile-bar .nav-button.active {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #173f35, #147a5d);
    box-shadow: 0 8px 20px rgba(20, 122, 93, 0.2);
  }

  .mobile-bar .nav-button.active .nav-icon {
    color: #c9f2df;
  }

  .mobile-bar .nav-button.active::before,
  .mobile-bar .nav-button.active::after {
    display: none;
    content: none;
  }

  .mobile-simple-archive .mobile-bar [data-page="trash"] {
    display: none;
  }

  .main .panel,
  .archive-main .archive-folder,
  .archive-main .property-structure-group,
  .archive-main .property-permit-record,
  .archive-main .photo-card {
    border-color: rgba(29, 29, 31, 0.08);
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(29, 29, 31, 0.055);
  }

  .archive-main .archive-breadcrumb button,
  .archive-main .property-workspace-tab.active {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .mobile-simple-archive .archive-main .archive-nav-actions,
  .mobile-simple-archive .archive-main .property-structure-actions,
  .mobile-simple-archive .archive-main .property-folder-delete,
  .mobile-simple-archive .archive-main .photo-selection-bar,
  .mobile-simple-archive .archive-main .photo-select-control,
  .mobile-simple-archive .archive-main .photo-quick-download,
  .mobile-simple-archive .archive-main .archive-interaction-hint {
    display: none !important;
  }

  .archive-main .mobile-simple-photo-add {
    grid-column: 1 / -1;
    min-height: 108px;
    gap: 5px;
    border: 1px dashed rgba(20, 122, 93, 0.35);
    border-radius: 15px;
    color: var(--brand-dark);
    background: linear-gradient(145deg, #fff, var(--brand-faint));
    box-shadow: none;
  }

  .archive-main .mobile-simple-photo-add .photo-upload-plus {
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 8px 18px rgba(20, 122, 93, 0.18);
  }

  .archive-main .mobile-simple-photo-add strong {
    color: var(--brand-dark);
    font-weight: 820;
  }

  .archive-main .mobile-simple-photo-add small {
    color: var(--muted);
  }
}

/* Mac masaüstü v267: tek satır taşınmaz başlığı ve sağ tık işlemleri. */
@media screen and (min-width: 861px) {
  /* Blok işlemleri masaüstünde sağ tık menüsündedir; başlığı sade tut. */
  .archive-main .property-structure-actions {
    display: none !important;
  }

  /* Klasör içinde taşınmaz ve malik adı eksiksiz görünür; dar alanda başlık
     kesilmek yerine kendi gezinme satırında yatay kaydırılabilir. */
  .archive-main .archive-breadcrumb button[data-archive-crumb="property"] {
    max-width: none;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
  }

  .archive-main .archive-navigation-row[data-property-workspace-context-menu] {
    min-height: 50px;
    gap: 12px;
    margin-bottom: 9px;
    padding-bottom: 8px;
  }

  .archive-main [data-property-workspace-context-menu] > .archive-breadcrumb {
    flex: 1 1 300px;
  }

  .archive-main [data-property-workspace-context-menu] > .archive-breadcrumb strong {
    cursor: context-menu;
  }

  .archive-main .archive-nav-actions:has(.property-workspace-tabs.is-compact) {
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  .archive-main .property-workspace-tabs.is-compact {
    width: auto;
    min-width: 330px;
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border-radius: 11px;
    background: #edf3f0;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab {
    min-width: 0;
    min-height: 34px;
    flex: 1 1 auto;
    gap: 5px;
    padding: 0 9px;
    border-radius: 8px;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab-icon,
  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab-icon svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab > strong {
    font-size: calc(10px + var(--ui-font-step));
    font-weight: 780;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab.active {
    box-shadow: 0 1px 5px rgba(18, 59, 82, 0.08);
  }
}

@media screen and (min-width: 861px) and (max-width: 1080px) {
  .archive-main .property-workspace-tabs.is-compact {
    min-width: 174px;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab {
    width: 38px;
    flex: 0 0 38px;
    padding: 0;
  }

  .archive-main .property-workspace-tabs.is-compact .property-workspace-tab > strong {
    display: none;
  }
}

/* Mac masaüstü v272: not defteri klasör/evrak sırasında 2x2 yer kaplar. */
@media screen and (min-width: 861px) {
  .archive-main .archive-notebook-grid {
    width: min(100%, calc(var(--archive-tile-width, 160px) + var(--archive-tile-width, 160px) + 10px));
    display: grid;
    grid-template-columns: repeat(2, var(--archive-tile-width, 160px));
    grid-template-rows: repeat(2, var(--archive-tile-height, 172px));
    gap: 10px;
    margin: 0 0 10px;
  }

  .archive-main .archive-notebook-card {
    box-sizing: border-box;
    width: calc(var(--archive-tile-width, 160px) + var(--archive-tile-width, 160px) + 10px) !important;
    max-width: calc(var(--archive-tile-width, 160px) + var(--archive-tile-width, 160px) + 10px) !important;
    height: calc(var(--archive-tile-height, 172px) + var(--archive-tile-height, 172px) + 10px) !important;
    min-height: calc(var(--archive-tile-height, 172px) + var(--archive-tile-height, 172px) + 10px) !important;
    max-height: calc(var(--archive-tile-height, 172px) + var(--archive-tile-height, 172px) + 10px) !important;
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    align-self: start;
    justify-self: start;
    overflow: hidden;
    border: 1px solid rgba(36, 80, 67, 0.15);
    border-radius: 15px;
    color: #1f302a;
    background:
      linear-gradient(rgba(30, 116, 87, 0.075) 1px, transparent 1px) 0 66px / 100% 24px,
      linear-gradient(145deg, #fffdf4, #fbfaf2);
    box-shadow: 0 8px 22px rgba(37, 60, 52, 0.065);
  }

  .archive-main .archive-notebook-card > form {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr) 30px;
  }

  .archive-main .archive-notebook-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px 5px;
    border-bottom: 1px solid rgba(36, 80, 67, 0.1);
    background: rgba(255, 255, 255, 0.62);
  }

  .archive-main .archive-notebook-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #17664f;
    font-size: 17px;
    font-weight: 900;
    background: #e5f2ec;
  }

  .archive-main .archive-notebook-head > span:last-child {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .archive-main .archive-notebook-head strong {
    color: #18372d;
    font-size: calc(12px + var(--ui-font-step));
    font-weight: 840;
  }

  .archive-main .archive-notebook-head small {
    min-width: 0;
    overflow: hidden;
    color: #71817b;
    font-size: calc(9px + var(--ui-font-step));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archive-main .archive-notebook-card textarea {
    width: 100%;
    min-width: 0;
    min-height: 0;
    resize: none;
    overflow: auto;
    padding: 7px 11px 5px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: #283a34;
    font: 650 calc(12px + var(--ui-font-step))/1.45 var(--font);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: transparent;
    box-shadow: none;
  }

  .archive-main .archive-notebook-card textarea:focus {
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 0 0 2px rgba(30, 116, 87, 0.14);
  }

  .archive-main .archive-notebook-card textarea[readonly] {
    cursor: text;
  }

  .archive-main .archive-notebook-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 7px 4px 11px;
    border-top: 1px solid rgba(36, 80, 67, 0.09);
    background: rgba(255, 255, 255, 0.5);
  }

  .archive-main .archive-notebook-footer small {
    overflow: hidden;
    color: #7a8782;
    font-size: calc(8px + var(--ui-font-step));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archive-main .archive-notebook-save {
    min-width: 56px;
    min-height: 23px;
    padding: 3px 10px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: calc(9px + var(--ui-font-step));
    font-weight: 820;
    background: #176e55;
    box-shadow: 0 3px 9px rgba(23, 110, 85, 0.18);
  }

  .archive-main .archive-notebook-save:hover {
    background: #105540;
  }
}

@media screen and (min-width: 861px) and (max-width: 1180px) {
  .archive-main .archive-panel-open :is(.category-folder-grid, .photo-grid)
    > .archive-notebook-card {
    width: calc(var(--archive-tile-width, 160px) + var(--archive-tile-width, 160px) + 10px) !important;
  }
}

.server-unavailable-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 8%, rgba(95, 183, 150, 0.2), transparent 34%),
    linear-gradient(145deg, #f8fbf9 0%, #eef6f2 100%);
}

.server-unavailable-card {
  width: min(100%, 560px);
  padding: clamp(30px, 6vw, 52px);
  border: 1px solid rgba(31, 92, 72, 0.14);
  border-radius: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 80px rgba(24, 68, 54, 0.12);
  backdrop-filter: blur(20px);
}

.server-unavailable-card .brand-logo {
  margin-inline: auto;
}

.server-unavailable-card h1,
.server-availability-guard h2 {
  margin: 10px 0 12px;
  color: #172620;
}

.server-unavailable-card p:not(.eyebrow),
.server-availability-guard p {
  margin: 0 auto 24px;
  max-width: 44ch;
  color: #65736d;
  line-height: 1.65;
}

.server-availability-guard {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(235, 242, 239, 0.78);
  backdrop-filter: blur(18px);
}

.server-availability-guard > section {
  width: min(100%, 470px);
  padding: 34px;
  border: 1px solid rgba(31, 92, 72, 0.14);
  border-radius: 28px;
  text-align: center;
  background: #fff;
  box-shadow: 0 24px 70px rgba(24, 68, 54, 0.16);
}

.server-availability-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 850;
  background: #b85a4f;
}

/*
 * Koyu görünüm v279
 * Açık kurumsal görünümü değiştirmeden, kullanıcının görünüm seçimiyle etkinleşen
 * lacivert-yeşil arşiv teması. Belge sayfaları, medya, harita altlığı ve logo
 * özgün renklerinde bırakılır.
 */
html[data-appearance="dark"] {
  color-scheme: dark;
  --bg: #081411;
  --surface: #101d19;
  --surface-raised: #152520;
  --surface-alt: #182923;
  --surface-soft: #13231f;
  --panel: #101d19;
  --text: #edf7f3;
  --ink: #edf7f3;
  --muted: #a7bab3;
  --line: rgba(219, 240, 232, 0.13);
  --brand: #73adff;
  --brand-dark: #9bc8ff;
  --brand-strong: #9bc8ff;
  --brand-soft: #172d42;
  --brand-faint: #101f2a;
  --green: #55d6a4;
  --green-soft: #123026;
  --red: #ff91a1;
  --danger: #ff91a1;
  --shadow: 0 20px 58px rgba(0, 0, 0, 0.38);
}

html[data-appearance="dark"],
html[data-appearance="dark"] body,
html[data-appearance="dark"] body.app-shell-active {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 1%, rgba(58, 151, 124, 0.14), transparent 30rem),
    radial-gradient(circle at 18% 108%, rgba(65, 115, 181, 0.09), transparent 36rem),
    #081411;
  background-attachment: fixed;
}

html[data-appearance="dark"] ::selection {
  color: #f7fbff;
  background: rgba(66, 137, 232, 0.7);
}

html[data-appearance="dark"] :where(input, select, textarea) {
  color: var(--ink);
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] :where(input, select, textarea):hover {
  border-color: rgba(167, 186, 179, 0.3);
  background: #172923;
}

html[data-appearance="dark"] :where(input, select, textarea):focus {
  color: var(--ink);
  border-color: rgba(115, 173, 255, 0.7);
  background: #182923;
  box-shadow: 0 0 0 3px rgba(115, 173, 255, 0.14);
}

html[data-appearance="dark"] :where(input, textarea)::placeholder {
  color: #718780;
  opacity: 1;
}

html[data-appearance="dark"] select option {
  color: var(--ink);
  background: #13231f;
}

html[data-appearance="dark"] :where(.auth-card, .neighborhood-setup-card) {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(16, 29, 25, 0.96);
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.42);
}

html[data-appearance="dark"] .brand-logo-lg {
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.32);
}

html[data-appearance="dark"] .field > span {
  color: #c7d8d1;
}

html[data-appearance="dark"] :where(.remote-disabled-badge, .remote-disabled-message,
  .neighborhood-setup-notice) {
  color: #ffadba;
  border-color: rgba(255, 145, 161, 0.24);
  background: #351b21;
}

html[data-appearance="dark"] .neighborhood-setup-badge {
  color: #74dfb4;
  background: #123026;
}

html[data-appearance="dark"] .display-settings-panel {
  color: var(--ink);
  border-color: rgba(219, 240, 232, 0.15);
  background: rgba(16, 29, 25, 0.97);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
}

html[data-appearance="dark"] :where(.display-settings-options, .display-appearance-options) {
  background: #0c1916;
}

html[data-appearance="dark"] .display-appearance-options {
  border-color: var(--line);
}

html[data-appearance="dark"] :where(.display-settings-options, .display-appearance-options) button {
  color: var(--muted);
}

html[data-appearance="dark"] :where(.display-settings-options, .display-appearance-options) button:hover,
html[data-appearance="dark"] :where(.display-settings-options, .display-appearance-options) button.active,
html[data-appearance="dark"] :where(.display-settings-options, .display-appearance-options) button[aria-pressed="true"] {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.36);
  background: #1a2e28;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

html[data-appearance="dark"] .display-settings-toggle {
  color: #f7fbff;
  border-color: rgba(195, 220, 255, 0.25);
  background: linear-gradient(145deg, #326fc4, #21599f);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}

html[data-appearance="dark"] .display-settings-toggle:hover {
  background: linear-gradient(145deg, #4181d9, #2868ba);
}

html[data-appearance="dark"] .app-shell {
  background: transparent;
}

html[data-appearance="dark"] .app-shell > .sidebar {
  --sidebar-ink: #f1f8f5;
  --sidebar-muted: #9db5ae;
  --sidebar-line: rgba(219, 240, 232, 0.11);
  color: var(--sidebar-ink);
  border-right-color: rgba(219, 240, 232, 0.08);
  background:
    radial-gradient(circle at 15% 0, rgba(72, 157, 188, 0.14), transparent 18rem),
    #0a222c;
  box-shadow: 9px 0 30px rgba(0, 0, 0, 0.16);
}

html[data-appearance="dark"] .sidebar-brand .brand-logo {
  border-color: rgba(219, 240, 232, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

html[data-appearance="dark"] .sidebar :where(.brand-copy strong,
  .sidebar-archive-stats strong, .sidebar-activity-head > strong,
  .sidebar-activity-copy p strong) {
  color: #f1f8f5;
}

html[data-appearance="dark"] .sidebar :where(.brand-copy span,
  .sidebar-archive-stats span, .sidebar-capacity small,
  .sidebar-activity-copy small, .sidebar-activity-item time,
  .sidebar-activity-head > span, .sidebar-activity-empty) {
  color: #91aaa2;
}

html[data-appearance="dark"] .sidebar :where(.connection, .sidebar-harddisk-status,
  .sidebar-capacity-head, .sidebar-activity-item) {
  color: #cbdad5;
}

html[data-appearance="dark"] .sidebar .nav-button {
  color: #adc2bc;
}

html[data-appearance="dark"] .sidebar .nav-button:hover {
  color: #f5fbf8;
  border-color: rgba(219, 240, 232, 0.08);
  background: rgba(237, 247, 243, 0.075);
}

html[data-appearance="dark"] .sidebar .nav-button.active {
  color: #f5fbf8;
  border-color: rgba(115, 173, 255, 0.18);
  background: rgba(115, 173, 255, 0.15);
}

html[data-appearance="dark"] .sidebar .nav-button.active::before {
  background: #55d6a4;
}

html[data-appearance="dark"] .sidebar .nav-button.active .nav-icon {
  color: #74dfb4;
}

html[data-appearance="dark"] .sidebar :where(.sidebar-brand, .sidebar-footer,
  .sidebar-status-summary, .sidebar-archive-stats, .sidebar-activity,
  .sidebar-activity-item) {
  border-color: var(--sidebar-line);
}

html[data-appearance="dark"] .sidebar-capacity-meter {
  background: rgba(237, 247, 243, 0.11);
}

html[data-appearance="dark"] .sidebar-activity-avatar,
html[data-appearance="dark"] .sidebar-footer .avatar {
  color: #b9efda;
  border-color: rgba(85, 214, 164, 0.2);
  background: rgba(85, 214, 164, 0.12);
}

html[data-appearance="dark"] .main {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 1%, rgba(62, 153, 125, 0.09), transparent 27rem),
    transparent;
}

html[data-appearance="dark"] .topbar {
  border-bottom-color: var(--line);
}

html[data-appearance="dark"] :where(.page-title, .panel h2, .panel h3,
  .folder-section-head > strong) {
  color: var(--ink);
}

html[data-appearance="dark"] .page-kicker {
  color: #6fe0b5;
}

html[data-appearance="dark"] body.app-shell-active .button:not(.danger) {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] body.app-shell-active .button:not(.danger):hover {
  color: #071510;
  background: #91bfff;
}

html[data-appearance="dark"] body.app-shell-active .button.secondary {
  color: #d8e8e2;
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] body.app-shell-active .button.secondary:hover {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.38);
  background: #172d42;
}

html[data-appearance="dark"] body.app-shell-active .button.ghost {
  color: #cbdad5;
  background: transparent;
}

html[data-appearance="dark"] body.app-shell-active .button.danger {
  color: #fff6f7;
  background: #b9485c;
}

html[data-appearance="dark"] body.app-shell-active .archive-add-property {
  color: #071510;
  background: #73adff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.27);
}

html[data-appearance="dark"] body.app-shell-active .archive-add-property:hover {
  background: #91bfff;
}

html[data-appearance="dark"] .main :where(.stat-card, .panel),
html[data-appearance="dark"] .archive-main :where(.archive-panel-open,
  .property-permits-workspace, .property-details-workspace,
  .property-map-workspace, .property-structure-group,
  .property-identity-card, .property-note-file) {
  color: var(--ink);
  border-color: var(--line);
  background-color: #101d19;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .archive-main .panel:not(.archive-panel-open) {
  background: transparent;
}

html[data-appearance="dark"] :where(.status-pill, .badge) {
  color: #74dfb4;
  border-color: rgba(85, 214, 164, 0.23);
  background: #123026;
}

html[data-appearance="dark"] :where(.status-pill.bad, .backup-last.bad) {
  color: #ffadba;
  border-color: rgba(255, 145, 161, 0.22);
  background: #351b21;
}

html[data-appearance="dark"] .archive-main .archive-searchbar {
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .archive-main .archive-searchbar .property-search > input {
  color: var(--ink);
  background: #13231f;
}

html[data-appearance="dark"] .archive-main .archive-searchbar .property-search > input:focus {
  background: #182923;
  box-shadow: 0 0 0 3px rgba(115, 173, 255, 0.14);
}

html[data-appearance="dark"] .archive-main .archive-sort-menu > .archive-smart-sort {
  color: #b8cbc4;
}

html[data-appearance="dark"] .archive-sort-menu[open] > .archive-smart-sort,
html[data-appearance="dark"] .archive-main .archive-sort-menu > .archive-smart-sort:hover {
  color: #c9e0ff;
  background: #172d42;
}

html[data-appearance="dark"] :where(.archive-sort-popover, .archive-context-menu) {
  color: var(--ink);
  border-color: rgba(219, 240, 232, 0.15);
  background: rgba(16, 29, 25, 0.98);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.43);
}

html[data-appearance="dark"] .archive-sort-popover button {
  color: #c4d4ce;
}

html[data-appearance="dark"] :where(.archive-sort-popover button,
  .archive-context-menu-actions button):hover,
html[data-appearance="dark"] :where(.archive-sort-popover button,
  .archive-context-menu-actions button):focus-visible {
  color: #c9e0ff;
  background: #172d42;
}

html[data-appearance="dark"] .archive-sort-popover button.selected {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] .archive-context-menu-actions button.danger,
html[data-appearance="dark"] .archive-context-menu-actions button.danger span {
  color: #ff91a1;
}

html[data-appearance="dark"] .archive-context-menu-actions button.danger:hover,
html[data-appearance="dark"] .archive-context-menu-actions button.danger:focus-visible {
  background: #351b21;
}

html[data-appearance="dark"] .archive-context-menu-head,
html[data-appearance="dark"] .archive-context-menu-separator {
  border-color: var(--line);
}

html[data-appearance="dark"] .archive-main .property-card-shell > .archive-folder,
html[data-appearance="dark"] .archive-main .panel:not(.archive-panel-open)
  .property-card-shell > .archive-folder {
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-appearance="dark"] .archive-main .property-card-shell > .archive-folder:hover {
  border-color: rgba(115, 173, 255, 0.48);
  background: #14251f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

html[data-appearance="dark"] .archive-main .property-card-shell > .archive-folder.is-selected {
  border-color: #73adff;
  outline-color: rgba(115, 173, 255, 0.2);
  background: #101f2a;
}

html[data-appearance="dark"] .property-card-shell :where(.folder-copy > strong,
  .property-folder-owner, .property-folder-owner b,
  .property-folder-permits > b) {
  color: #edf7f3;
}

/* Masaüstü kart stilleri daha yüksek özgüllükle açık renk atadığı için
   taşınmaz kimliğini koyu görünümde doğrudan ve okunaklı tut. */
html[data-appearance="dark"] .archive-main .property-card-shell
  .folder-copy > strong {
  color: #edf7f3;
}

html[data-appearance="dark"] .archive-main .property-card-shell
  .property-folder-owner {
  color: #d7e6e0 !important;
}

html[data-appearance="dark"] .archive-main .property-card-shell
  .property-folder-owner > b {
  color: #55d6a4 !important;
}

html[data-appearance="dark"] .archive-main .property-card-shell
  .property-folder-permits > b {
  color: #91bfff;
}

html[data-appearance="dark"] .archive-main .folder-section-head > span {
  color: #9fb6ae !important;
}

html[data-appearance="dark"] .property-card-shell :where(.folder-copy > small,
  .property-folder-history small, .property-folder-note-summary,
  .property-folder-permit-list small) {
  color: var(--muted);
}

html[data-appearance="dark"] .property-card-shell :where(.property-folder-permits,
  .property-folder-note-summary) {
  border-left-color: var(--line);
}

html[data-appearance="dark"] .property-card-edit {
  color: #b7cbc3;
  border-color: var(--line);
  background: rgba(21, 37, 32, 0.97);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}

html[data-appearance="dark"] .property-card-edit:hover,
html[data-appearance="dark"] .property-card-edit:focus-visible {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.46);
  background: #172d42;
}

html[data-appearance="dark"] .archive-main :where(.category-folder, .photo-card) {
  color: var(--ink);
  border-color: var(--line);
  background-color: #101d19;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.21);
}

html[data-appearance="dark"] .archive-main .archive-panel-open
  .property-folder-entry .category-folder,
html[data-appearance="dark"] .archive-main .archive-panel-open
  .property-folder-entry .category-folder:hover {
  border-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] .archive-main :where(.category-folder, .photo-card):hover {
  border-color: rgba(115, 173, 255, 0.46);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

html[data-appearance="dark"] .archive-main :where(.category-folder .folder-copy strong,
  .archive-folder .folder-copy > strong, .photo-meta .photo-file-name) {
  color: var(--ink);
}

html[data-appearance="dark"] .photo-meta {
  color: var(--ink);
  background: #152520;
}

html[data-appearance="dark"] .photo-fallback {
  color: var(--muted);
  background: linear-gradient(145deg, #101f2a, #182923);
}

html[data-appearance="dark"] :where(.photo-dwg-preview, .photo-archive-preview) {
  color: #c9e0ff;
  background:
    linear-gradient(135deg, rgba(115, 173, 255, 0.12), rgba(16, 29, 25, 0.92)),
    repeating-linear-gradient(135deg, transparent 0 12px,
      rgba(115, 173, 255, 0.05) 13px);
}

html[data-appearance="dark"] .photo-type-badge {
  color: #071510;
  background: rgba(115, 173, 255, 0.94);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

html[data-appearance="dark"] .photo-upload-card {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.36);
  background: linear-gradient(145deg, #13231f, #101f2a);
}

html[data-appearance="dark"] .photo-upload-action-icon,
html[data-appearance="dark"] .photo-upload-plus {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] .archive-main .photo-card-wrap.is-selected .photo-card,
html[data-appearance="dark"] .archive-main .property-permit-record:has([data-select-photo]:checked) {
  border-color: #73adff;
  outline-color: rgba(115, 173, 255, 0.2);
  background-color: #101f2a;
}

html[data-appearance="dark"] .archive-main .category-folder .folder-paper {
  border-color: #93896e;
  background: #d8d0bc;
}

html[data-appearance="dark"] .archive-main .category-folder .folder-icon,
html[data-appearance="dark"] .archive-main .category-folder .folder-icon::before,
html[data-appearance="dark"] .property-card-shell .folder-icon,
html[data-appearance="dark"] .property-card-shell .folder-icon::before {
  background: #d5a43c;
}

html[data-appearance="dark"] .archive-main .category-folder .folder-icon::after,
html[data-appearance="dark"] .property-card-shell .folder-icon::after {
  background: linear-gradient(155deg, #efc95d, #c58c26);
  box-shadow: inset 0 1px 0 rgba(255, 242, 191, 0.36),
    inset 0 -3px 0 rgba(56, 34, 0, 0.16);
}

html[data-appearance="dark"] .finder-drop-help::before {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.3);
  background: #172d42;
}

html[data-appearance="dark"] :where(.category-folder.finder-drop-target,
  .photo-grid.finder-drop-target, .property-permits-workspace.finder-drop-target)::after {
  color: #d7e8ff;
  border-color: rgba(115, 173, 255, 0.68);
  background: rgba(16, 31, 42, 0.94);
  box-shadow: inset 0 0 0 1px rgba(201, 224, 255, 0.12);
}

html[data-appearance="dark"] .archive-main .archive-navigation-row {
  border-bottom-color: var(--line);
}

html[data-appearance="dark"] .archive-main .archive-breadcrumb .archive-home-crumb {
  color: #071510;
  background: #73adff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

html[data-appearance="dark"] .archive-main .archive-breadcrumb .archive-home-crumb:hover {
  background: #91bfff;
}

html[data-appearance="dark"] .archive-main .property-workspace-tabs,
html[data-appearance="dark"] .archive-main .property-workspace-tabs.is-compact {
  border-color: var(--line);
  background: #0c1916;
}

html[data-appearance="dark"] .archive-main .property-workspace-tab {
  color: #9db2aa;
}

html[data-appearance="dark"] .archive-main .property-workspace-tab:hover {
  color: #edf7f3;
  background: #182923;
}

html[data-appearance="dark"] .archive-main .property-workspace-tab.active {
  color: #c9e0ff;
  background: #172d42;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22), inset 0 -2px 0 #73adff;
}

html[data-appearance="dark"] .archive-main .property-workspace-tab.active
  .property-workspace-tab-number {
  color: #91bfff;
}

html[data-appearance="dark"] .archive-main :where(.property-permit-library-head,
  .property-workspace-section-head) {
  color: var(--ink);
  border-bottom-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] .archive-main .property-permit-library-actions {
  border-color: var(--line);
  background: #0c1916;
}

html[data-appearance="dark"] .property-permit-structure-picker select {
  color: var(--ink);
  background: #182923;
}

html[data-appearance="dark"] .property-permit-library-buttons {
  border-left-color: var(--line);
}

html[data-appearance="dark"] .property-permit-side-count {
  color: var(--ink);
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] .archive-main .property-permit-save-action {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] .archive-main .property-permit-record {
  --permit-card-accent: #73adff;
  --permit-card-soft: #172d42;
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

html[data-appearance="dark"] .archive-main .property-permit-record[data-permit-type="occupancy"] {
  --permit-card-accent: #e7b463;
  --permit-card-soft: #2c2416;
  background: #171d18;
}

html[data-appearance="dark"] :where(.property-permit-folder,
  .property-permit-folder-head, .property-permit-card-summary,
  .property-permit-card-editor) {
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] .property-permit-folder {
  background: #0c1916;
}

html[data-appearance="dark"] .archive-main .property-permit-folder
  .property-permit-record {
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

html[data-appearance="dark"] button.property-permit-card-summary:hover,
html[data-appearance="dark"] button.property-permit-card-summary:focus-visible {
  background: #172923;
  box-shadow: inset 3px 0 0 #73adff;
}

html[data-appearance="dark"] .property-permit-card-document,
html[data-appearance="dark"] .property-permit-card-preview {
  color: var(--muted);
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] .property-permit-card-document.has-document {
  color: #c9e0ff;
  background: #172d42;
}

html[data-appearance="dark"] :where(.property-permit-read-button,
  .property-permit-library-counts > span) {
  color: #c9e0ff;
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] .property-permit-library-actions .button.secondary {
  color: #efc97e;
  border-color: rgba(231, 180, 99, 0.3);
  background: #2c2416;
}

html[data-appearance="dark"] .property-permit-pdf-delete {
  color: #ff91a1;
  border-color: rgba(255, 145, 161, 0.23);
  background: #351b21;
}

html[data-appearance="dark"] .property-permit-record :where(input, select, textarea),
html[data-appearance="dark"] .property-permit-editor-shell :where(input, select, textarea) {
  color: var(--ink);
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] :where(.property-permit-picker-overlay,
  .property-editor-overlay, .photo-move-overlay) {
  background: rgba(2, 9, 7, 0.74);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

html[data-appearance="dark"] :where(.property-permit-picker-dialog,
  .property-editor-dialog, .photo-move-dialog) {
  color: var(--ink);
  border-color: rgba(219, 240, 232, 0.16);
  background: #101d19;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.56);
}

html[data-appearance="dark"] :where(.property-permit-picker-head,
  .property-editor-head) {
  border-bottom-color: var(--line);
  background: linear-gradient(135deg, #152820, #101d19);
}

html[data-appearance="dark"] :where(.property-permit-picker-head h3,
  .property-editor-head h2) {
  color: var(--ink);
}

html[data-appearance="dark"] .property-editor-head p {
  color: var(--muted);
}

html[data-appearance="dark"] :where(.property-permit-picker-close,
  .property-editor-head .icon-button) {
  color: #b5c9c1;
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] :where(.property-permit-picker-close,
  .property-editor-head .icon-button):hover {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.4);
  background: #172d42;
}

html[data-appearance="dark"] .property-editor-scroll .property-create-card {
  background: transparent;
}

html[data-appearance="dark"] .property-editor-loading {
  color: var(--muted);
}

html[data-appearance="dark"] .property-permit-picker-list {
  background: #0c1916;
}

html[data-appearance="dark"] .property-permit-picker-option {
  color: var(--ink);
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] .property-permit-picker-option:hover {
  border-color: rgba(115, 173, 255, 0.44);
  background: #172923;
}

html[data-appearance="dark"] .property-permit-picker-option:has(input:checked) {
  border-color: #73adff;
  background: #101f2a;
  box-shadow: 0 0 0 2px rgba(115, 173, 255, 0.14);
}

html[data-appearance="dark"] .property-permit-picker-icon {
  color: #c9e0ff;
  background: #172d42;
}

html[data-appearance="dark"] .property-permit-picker-icon svg {
  fill: rgba(115, 173, 255, 0.08);
}

html[data-appearance="dark"] .property-permit-picker-check {
  border-color: rgba(219, 240, 232, 0.24);
  background: #182923;
}

html[data-appearance="dark"] .property-permit-picker-option:has(input:checked)
  .property-permit-picker-check {
  color: #071510;
  border-color: #73adff;
  background: #73adff;
}

html[data-appearance="dark"] :where(.property-permit-picker-limit,
  .property-permit-picker-actions) {
  border-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] :where(.property-details-form, .property-create-card) {
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] .property-location-editor {
  border-color: rgba(115, 173, 255, 0.18);
  background: #101f2a;
}

html[data-appearance="dark"] .property-merge-warning {
  border-color: rgba(255, 145, 161, 0.25);
  background: #25191a;
}

html[data-appearance="dark"] .property-permits-editor {
  border-color: rgba(115, 173, 255, 0.22);
  background: #101f2a;
}

html[data-appearance="dark"] .property-folder-note {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(19, 35, 31, 0.86);
}

html[data-appearance="dark"] .property-permit-row {
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] .property-permits-savebar {
  border-top-color: var(--line);
}

html[data-appearance="dark"] .property-permits-empty > span {
  color: #91bfff;
  background: #172d42;
}

html[data-appearance="dark"] .archive-main .archive-notebook-card {
  color: #e8ead9;
  border-color: rgba(205, 200, 153, 0.18);
  background:
    linear-gradient(rgba(216, 213, 172, 0.08) 1px, transparent 1px) 0 66px / 100% 24px,
    linear-gradient(145deg, #202219, #181d17);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.25);
}

html[data-appearance="dark"] .archive-main :where(.archive-notebook-head,
  .archive-notebook-footer) {
  border-color: rgba(205, 200, 153, 0.12);
  background: rgba(33, 40, 31, 0.76);
}

html[data-appearance="dark"] .archive-main .archive-notebook-icon {
  color: #9ce3c5;
  background: #17362b;
}

html[data-appearance="dark"] .archive-main .archive-notebook-head strong {
  color: #eef0df;
}

html[data-appearance="dark"] .archive-main :where(.archive-notebook-head small,
  .archive-notebook-footer small) {
  color: #aeb3a0;
}

html[data-appearance="dark"] .archive-main .archive-notebook-card textarea {
  color: #e8ead9;
  background: transparent;
}

html[data-appearance="dark"] .archive-main .archive-notebook-card textarea:focus {
  background: rgba(44, 51, 39, 0.7);
  box-shadow: inset 0 0 0 2px rgba(85, 214, 164, 0.17);
}

html[data-appearance="dark"] .archive-main .archive-notebook-save {
  color: #071510;
  background: #55d6a4;
}

html[data-appearance="dark"] .archive-main .archive-notebook-save:hover {
  background: #74dfb4;
}

html[data-appearance="dark"] :where(.backup-schedule-box, .backup-last,
  .backup-restore-box, .setup-existing-archive, .setup-recovery-box,
  .settings-disclosure, .relay-card, .permit-vision-copy,
  .admin-folder-order-intro) {
  color: var(--ink);
  border-color: var(--line);
  background: #13231f;
}

html[data-appearance="dark"] .primary-selection-summary {
  color: #9ce3c5;
  border-color: rgba(156, 227, 197, 0.22);
  background: #132c23;
}

html[data-appearance="dark"] .primary-selection-summary[data-kind="empty"],
html[data-appearance="dark"] .primary-selection-summary[data-kind="pending"] {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.25);
  background: #101f2a;
}

html[data-appearance="dark"] .primary-selection-summary[data-kind="invalid"] {
  color: #ffb0bc;
  border-color: rgba(255, 145, 161, 0.25);
  background: #2b181d;
}

html[data-appearance="dark"] :where(.queue-row, .user-row, .trash-row,
  .log-row, .trash-windows-item, .trash-photo-card) {
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
}

html[data-appearance="dark"] .queue-thumb {
  background: #182923;
}

html[data-appearance="dark"] .trash-windows-photo-select {
  background: #0c1916;
}

html[data-appearance="dark"] .trash-file-preview.is-pdf {
  background: #26312d;
}

html[data-appearance="dark"] .trash-file-preview.is-dwg {
  color: #c9e0ff;
  background: linear-gradient(145deg, #172d42, #13231f);
}

html[data-appearance="dark"] :where(.backup-warning, .backup-note-warning) {
  color: #f3ce78;
  border-color: rgba(243, 206, 120, 0.2);
  background: #302714;
}

html[data-appearance="dark"] :where(.backup-error, .backup-last.bad) {
  color: #ffadba;
  background: #351b21;
}

html[data-appearance="dark"] .backup-progress {
  background: #101f2a;
}

html[data-appearance="dark"] .storage-meter {
  background: rgba(219, 240, 232, 0.11);
}

html[data-appearance="dark"] .storage-meter > span {
  background: linear-gradient(90deg, #3fc992, #73adff);
}

html[data-appearance="dark"] :where(.disclosure-content,
  .settings-disclosure summary, .photo-details-list div) {
  border-color: var(--line);
}

html[data-appearance="dark"] .recent-admin-item {
  border-color: rgba(115, 173, 255, 0.42);
  background: #101f2a;
}

html[data-appearance="dark"] .admin-category-order-button {
  color: #c9e0ff;
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] .admin-category-order-button:hover:not(:disabled),
html[data-appearance="dark"] .admin-category-order-button:focus-visible:not(:disabled) {
  color: #071510;
  border-color: #73adff;
  background: #73adff;
}

html[data-appearance="dark"] .photo-move-dialog {
  background: #101d19;
}

html[data-appearance="dark"] :where(.folder-delete, .property-folder-delete:hover) {
  color: #ff91a1;
  background: #351b21;
}

html[data-appearance="dark"] .property-map-stage {
  border-color: var(--line);
  background:
    linear-gradient(rgba(115, 173, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 173, 255, 0.045) 1px, transparent 1px),
    #0c1916;
  background-size: 32px 32px;
}

html[data-appearance="dark"] :where(.property-map-stage .ol-control,
  .property-map-toolstrip) {
  color: var(--ink);
  border-color: rgba(219, 240, 232, 0.18);
  background: rgba(16, 29, 25, 0.9);
  box-shadow: 0 9px 26px rgba(0, 0, 0, 0.32);
}

html[data-appearance="dark"] :where(.property-map-stage .ol-control button,
  .property-map-toolstrip button, .property-map-basemap-picker) {
  color: #c9e0ff;
}

html[data-appearance="dark"] .property-map-basemap-picker {
  border-right-color: var(--line);
}

html[data-appearance="dark"] .property-map-basemap-picker select {
  color: #d8e8ff;
  border-color: rgba(115, 173, 255, 0.25);
  background-color: rgba(19, 35, 31, 0.94);
}

html[data-appearance="dark"] :where(.property-map-stage .ol-control button,
  .property-map-toolstrip button):hover,
html[data-appearance="dark"] :where(.property-map-stage .ol-control button,
  .property-map-toolstrip button):focus-visible {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] :where(.property-map-attribution,
  .property-map-gesture-hint) {
  color: #c4d4ce;
  background: rgba(16, 29, 25, 0.86);
}

html[data-appearance="dark"] .property-map-footer {
  color: var(--muted);
  border-top-color: var(--line);
  background: #101d19;
}

html[data-appearance="dark"] .property-map-stage:fullscreen {
  background: #081411;
}

/* Görüntüleyicinin ana sahnesi zaten koyudur; yalnız arayüz yüzeyleri temalanır. */
html[data-appearance="dark"] .lightbox-options-drawer,
html[data-appearance="dark"] .lightbox-details {
  color: var(--ink);
  background: rgba(16, 29, 25, 0.985);
  box-shadow: -20px 0 56px rgba(0, 0, 0, 0.38);
}

html[data-appearance="dark"] .lightbox-options-close {
  color: var(--ink);
  background: #182923;
}

html[data-appearance="dark"] .lightbox-options-close:hover,
html[data-appearance="dark"] .lightbox-options-close:focus-visible {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] :where(.photo-note-form,
  .lightbox-drawer-actions, .photo-details-list div) {
  border-color: var(--line);
}

html[data-appearance="dark"] body.app-shell-active .lightbox-drawer-actions .button,
html[data-appearance="dark"] body.app-shell-active .lightbox-drawer-actions .lightbox-replace,
html[data-appearance="dark"] body.app-shell-active .lightbox-drawer-actions .lightbox-delete,
html[data-appearance="dark"] body.app-shell-active .lightbox-drawer-actions .lightbox-share {
  color: #d5e4df;
  border-color: var(--line);
  background: #182923;
}

html[data-appearance="dark"] body.app-shell-active .lightbox-drawer-actions .danger {
  color: #ff91a1;
  background: #351b21;
}

html[data-appearance="dark"] .photo-note-view {
  background: #101f2a;
}

html[data-appearance="dark"] :where(.lightbox-viewer-controls button:hover,
  .lightbox-viewer-controls button:focus-visible,
  .lightbox-viewer-controls button[aria-expanded="true"],
  .lightbox-nav:hover, .lightbox-nav:focus-visible,
  .lightbox-close:hover, .lightbox-close:focus-visible) {
  border-color: rgba(145, 191, 255, 0.5);
  background: rgba(50, 111, 196, 0.94);
}

html[data-appearance="dark"] .photo-action-overlay {
  background: rgba(2, 9, 7, 0.74);
}

html[data-appearance="dark"] :where(.photo-action-sheet,
  .photo-action-note-editor) {
  color: var(--ink);
  border-color: var(--line);
  background: #101d19;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}

html[data-appearance="dark"] .photo-action-sheet :where(button,
  label[role="button"]) {
  color: #d5e4df;
  background: #182923;
}

html[data-appearance="dark"] .photo-action-sheet button.danger {
  color: #ff91a1;
  background: #351b21;
}

html[data-appearance="dark"] .photo-action-sheet .photo-action-note-save {
  color: #071510;
  background: #73adff;
}

html[data-appearance="dark"] .toast {
  color: #edf7f3;
  border-color: rgba(115, 173, 255, 0.22);
  background: #0a202c;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

html[data-appearance="dark"] .toast.error {
  border-color: rgba(255, 145, 161, 0.24);
  background: #7f3040;
}

html[data-appearance="dark"] .server-unavailable-shell {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(85, 214, 164, 0.13), transparent 34%),
    linear-gradient(145deg, #081411 0%, #0b1b17 100%);
}

html[data-appearance="dark"] :where(.server-unavailable-card,
  .server-availability-guard > section) {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(16, 29, 25, 0.96);
  box-shadow: 0 30px 86px rgba(0, 0, 0, 0.44);
}

html[data-appearance="dark"] :where(.server-unavailable-card h1,
  .server-availability-guard h2) {
  color: var(--ink);
}

html[data-appearance="dark"] :where(.server-unavailable-card p:not(.eyebrow),
  .server-availability-guard p) {
  color: var(--muted);
}

html[data-appearance="dark"] .server-availability-guard {
  background: rgba(4, 13, 10, 0.82);
}

html[data-appearance="dark"] .server-availability-icon {
  color: #fff7f8;
  background: #a93f51;
}

html[data-appearance="dark"] :where(.mobile-bar, .mobile-menu) {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(16, 29, 25, 0.94);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.38);
}

html[data-appearance="dark"] .mobile-bar .nav-button {
  color: #9fb6ae;
  background: transparent;
}

html[data-appearance="dark"] .mobile-bar .nav-button.active {
  color: #edf7f3;
  background: #172d42;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

html[data-appearance="dark"] .mobile-bar .nav-button.active .nav-icon {
  color: #91bfff;
}

html[data-appearance="dark"] .archive-main .mobile-simple-photo-add {
  color: #c9e0ff;
  border-color: rgba(115, 173, 255, 0.4);
  background: linear-gradient(145deg, #13231f, #101f2a);
}

html[data-appearance="dark"] .archive-main .mobile-simple-photo-add
  .photo-upload-plus {
  color: #071510;
  background: #73adff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-appearance="dark"] .archive-main .mobile-simple-photo-add strong {
  color: #edf7f3;
}

html[data-appearance="dark"] body.app-shell-active
  :where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #73adff;
}

@media screen and (max-width: 860px) {
  html[data-appearance="dark"] body,
  html[data-appearance="dark"] body.app-shell-active {
    background:
      radial-gradient(circle at 100% 0, rgba(63, 156, 126, 0.12), transparent 25rem),
      radial-gradient(circle at 12% 100%, rgba(65, 115, 181, 0.08), transparent 29rem),
      #081411;
  }

  html[data-appearance="dark"] .main :where(.panel, .stat-card),
  html[data-appearance="dark"] .archive-main :where(.archive-folder,
    .property-structure-group, .property-permit-record, .photo-card,
    .property-permits-workspace, .property-details-workspace,
    .property-map-workspace) {
    color: var(--ink);
    border-color: var(--line);
    background-color: #101d19;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
  }

  html[data-appearance="dark"] .archive-main .property-workspace-tab.active,
  html[data-appearance="dark"] .archive-main .archive-breadcrumb button {
    color: #c9e0ff;
    background: #172d42;
  }

  html[data-appearance="dark"] .display-settings {
    color: var(--ink);
  }
}

/* Dokunmatik kullanım: açılır kutular yerine sade, tam ekran işlem sayfaları. */
@media screen and (max-width: 860px),
  screen and (hover: none),
  screen and (pointer: coarse) {
  .property-permit-picker-overlay,
  .photo-move-overlay,
  .photo-action-overlay {
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    backdrop-filter: none;
  }

  .property-permit-picker-dialog,
  .photo-move-dialog,
  .photo-action-sheet {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
  }

  .property-permit-picker-dialog {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .property-permit-picker-head,
  .photo-move-head,
  .photo-action-head {
    min-height: 58px;
    margin: 0;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .property-permit-picker-list {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .property-permit-picker-actions,
  .photo-move-actions {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .photo-move-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
  }

  .photo-move-dialog > form {
    align-content: start;
    display: grid;
    gap: 14px;
    padding: 16px 14px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .photo-move-actions {
    position: sticky;
    bottom: 0;
    margin: auto -14px max(-16px, calc(env(safe-area-inset-bottom) * -1));
  }

  .photo-action-sheet {
    align-content: start;
    gap: 10px;
    padding: 0 14px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .photo-action-head {
    position: sticky;
    z-index: 1;
    top: 0;
    margin: 0 -14px 4px;
  }

  .photo-action-head strong {
    padding: 0;
  }

  .photo-action-sheet > button,
  .photo-action-sheet > label[role="button"] {
    min-height: 52px;
  }

  html[data-appearance="dark"] :where(.property-permit-picker-overlay,
    .photo-move-overlay, .photo-action-overlay,
    .property-permit-picker-dialog, .photo-move-dialog, .photo-action-sheet,
    .property-permit-picker-head, .photo-move-head, .photo-action-head,
    .property-permit-picker-actions, .photo-move-actions) {
    background: #101d19;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-appearance="dark"] *,
  html[data-appearance="dark"] *::before,
  html[data-appearance="dark"] *::after {
    transition-duration: 0.01ms !important;
  }
}