/*
  Gider Takibi visual system adapted for Kaşe Hesaplama.
  Presentation only. No calculation, storage or interaction rules live here.
*/

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-gutter-left: max(14px, var(--app-safe-left));
  --app-gutter-right: max(14px, var(--app-safe-right));
  --app-shell-top: 44px;
  --app-shell-padding-top: calc(var(--app-shell-top) + var(--app-safe-top));
  --app-title-size: 24px;
  --app-header-gap: 12px;
  --font-ui: "din-2014", "DIN 2014", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --font-title: var(--font-ui);
  --font-label: var(--font-ui);
  --font-button: var(--font-ui);
  --font-display: "proxima-nova-extra-wide", "Arial Black", sans-serif;
  --font-num: "nitti", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ui-shell-bg: color-mix(in srgb, var(--surface) 56%, var(--bg));
  --ui-card-bg: color-mix(in srgb, var(--surface) 88%, var(--bg));
  --ui-card-bg-active: color-mix(in srgb, var(--surface) 97%, var(--bg));
  --ui-control-bg: color-mix(in srgb, var(--bg) 58%, var(--surface));
  --ui-control-bg-hover: color-mix(in srgb, var(--text) 5%, var(--ui-control-bg));
  --ui-segment-bg: color-mix(in srgb, var(--surface) 68%, var(--bg));
  --ui-divider: color-mix(in srgb, var(--border) 72%, transparent);
  --ui-border: color-mix(in srgb, var(--border) 86%, transparent);
  --ui-border-strong: color-mix(in srgb, var(--text) 22%, var(--border));

  /* Suite radius scale: radius grows with element size so corners read the same.
     Nested surfaces use parent radius minus inset (never below --ui-radius-tag). */
  --ui-radius-tag: 4px;      /* badges, chips, status pills up to ~22px */
  --ui-radius-control: 6px;  /* buttons, inputs, selects 28-36px */
  --ui-radius-field: var(--ui-radius-control);
  --ui-radius-tile: 8px;     /* choice tiles and rows 40-60px */
  --ui-radius-card: 10px;    /* cards, panels, popovers */
  --ui-radius-shell: 14px;   /* modals and sheets */

  --ui-control-height: 32px;
  --ui-control-height-sm: 28px;
  --ui-icon-control: 28px;

  --ui-font-section: 10px;
  --ui-font-label: 9px;
  --ui-font-meta: 9px;
  --ui-font-body: 12px;
  --ui-font-button: 9px;
  --ui-font-value: 12px;
}

/* iPad windows already have system chrome; reserve only their reported safe area. */
:root[data-app-device="ipad"] {
  --app-shell-padding-top: var(--app-safe-top);
}

html.dark-mode {
  --surface-muted: #211f1b;
  --line: #3a3731;
  --section-line: #3a3731;
  --text-muted: #9a958c;
}

html,
body,
#mainApp,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-synthesis: none;
}

body {
  transition: background-color .15s ease, color .15s ease;
}

.numeric,
.r-val,
.rt-val,
.rk-val,
.dc-val,
.ak-item,
.vb-hint,
.wc-num,
input[type="number"],
input[type="date"],
.kur-inline,
.kur-inline-input,
.pb-row,
.sp-val,
.sp-hint,
.result-eur,
.dc-sub,
.dc-sub-fx,
.ak-dates,
.ak-status,
.ak-pasif-btn,
.ak-item-live-try {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* Reference app has no ticker. Keep markup inert for compatibility. */
#ticker-banner {
  display: none !important;
}

.container {
  width: 100%;
  max-width: calc(1240px + var(--app-gutter-left) + var(--app-gutter-right));
  padding: var(--app-shell-padding-top) var(--app-gutter-right) calc(32px + var(--app-safe-bottom)) var(--app-gutter-left);
}

/* Header */
.header {
  min-height: 0;
  box-sizing: border-box;
  gap: 4px;
  margin-bottom: var(--app-header-gap);
  padding: 12px 0 0;
}
.header-copy { display: flex; flex-direction: column; gap: 2px; }

.header-title,
.lock-display {
  font-family: var(--font-display);
}

.header-title {
  margin-bottom: 2px;
  font-size: var(--app-title-size);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -1px;
}

.header-eyebrow,
.header-sub,
.lock-title,
.lock-sub {
  font-family: var(--font-num);
}

/* Rozet, Gider Takibi'ndeki karsiligiyla ayni fontu kullanir. Orada
   rozet bir <button> ve "#mainApp button" kurali mono tanimini eziyor,
   yani gercekte DIN 2014 ile ciziliyor. */
.conn-indicator,
.conn-indicator .conn-text {
  font-family: "din-2014", "DIN 2014", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  line-height: 1.44;
  letter-spacing: 3px;
}

.header-sub {
  gap: 10px;
  font-size: 9px;
  line-height: 1.44;
  letter-spacing: 1px;
}

.header-actions {
  gap: 8px;
}

.theme-toggle,
.settings-toggle {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  min-width: var(--ui-control-height);
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-card-bg);
  box-shadow: none;
}

.conn-indicator {
  border-radius: var(--ui-radius-tag);
  background: var(--surface-muted);
  font-size: 8px;
  font-weight: 400;
}

/* Lock screen */
#lockScreen {
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 20px;
}

.lock-card {
  max-width: 420px;
  padding: 36px 30px 28px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-card-bg-active);
  box-shadow: none;
}

/* Login theme control shares the exact header-tool anchor of the app shell. */
.lock-theme-toggle {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: max(14px, calc((100vw - 860px) / 2));
  z-index: 1002;
}

.lock-display {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -1.5px;
}

.lock-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
}

.lock-sub {
  font-size: 9px;
  letter-spacing: 1.5px;
}

.lock-input {
  min-height: 34px;
  padding: 8px 6px;
  border: 0;
  border-bottom: 1px solid var(--ui-divider);
  border-radius: var(--ui-radius-field) var(--ui-radius-field) 0 0;
  background: var(--ui-control-bg);
  font-family: var(--font-num);
  box-shadow: none;
}

.lock-input:focus {
  border-bottom-color: var(--text);
  box-shadow: inset 0 -1px 0 var(--text);
}

.lock-btn {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: var(--ui-radius-control);
  font-family: var(--font-button);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

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

.lock-btn.secondary {
  border-color: var(--ui-border);
  background: transparent;
}

/* Primary navigation */
.tabs {
  align-items: stretch;
  gap: 4px;
  min-height: 38px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  min-height: 38px;
  padding: 9px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tab-btn.active,
html.dark-mode .tab-btn.active {
  border-bottom-color: var(--text);
  color: var(--text);
}

/* Shells and cards */
.card,
.result-card,
.intl-section-card,
#alacakDash.dash-grid {
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-card-bg);
  box-shadow: none;
}

.card,
.result-card,
.intl-section-card {
  padding: 11px;
  margin-bottom: 8px;
}

.card:hover,
.result-card:hover,
.intl-section-card:hover {
  border-color: transparent;
}

.card > .card-title:first-child,
.intl-section-card > .card-title:first-child,
.result-card > .card-title:first-child {
  min-height: 39px;
  display: flex;
  align-items: center;
  margin: -11px -11px 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--ui-divider);
}


.card > .form-toggle-header:first-child {
  min-height: 39px;
  margin: -11px -11px 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--ui-divider);
}

.card-title,
.settings-title,
.pdf-preview-kicker,
.dc-label,
.field-label,
.alt-vade-label {
  font-family: var(--font-label);
  font-size: var(--ui-font-section);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.card-title {
  color: var(--text);
}

.card > .card-title:not(:first-child) {
  margin: 10px 0 7px;
  padding-top: 9px;
  border-top: 1px solid var(--ui-divider);
}

.divider {
  border-top-color: var(--ui-divider);
}

/* Form labels and fields */
.field-label,
.settings-field-label {
  color: var(--text-muted);
  font-size: var(--ui-font-label);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .035em;
}

.input-group {
  gap: 4px;
}

input[type="number"],
input[type="text"],
input[type="date"],
select,
.intl-ot-select-button,
.settings-field input {
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid var(--ui-divider);
  border-radius: var(--ui-radius-field) var(--ui-radius-field) 0 0;
  background: var(--ui-control-bg);
  color: var(--text);
  box-shadow: none;
  outline: 0;
}

input[type="number"],
input[type="text"],
input[type="date"],
.settings-field input {
  font-family: var(--font-num);
  font-size: var(--ui-font-body);
  font-weight: 400;
}

select,
.intl-ot-select-button {
  font-family: var(--font-ui);
  font-size: var(--ui-font-body);
  font-weight: 400;
}

input:focus,
select:focus,
.intl-ot-select-button:focus-visible,
.intl-ot-select-button[aria-expanded="true"] {
  border-bottom-color: var(--text);
  box-shadow: inset 0 -1px 0 var(--text);
}

input::placeholder,
textarea::placeholder {
  color: var(--dim-soft);
  opacity: 1;
}

.alacak-date-row input[type="date"] {
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 6px 7px;
  font-size: 10px;
}

.input-hint,
.intl-overtime-hint,
.intl-perdiem-hint,
.intl-fx-box-hint,
.settings-sub,
.sp-label,
.empty-state {
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Shared controls */
.btn,
.ak-btn,
.kdv-btn,
.hft-btn,
.wc-btn,
.form-toggle-chevron,
.intl-ot-select-menu button,
.btn-sync-inline {
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--text);
  font-family: var(--font-button);
  font-size: var(--ui-font-button);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: none;
}

.btn:hover,
.ak-btn:hover,
.kdv-btn:hover,
.hft-btn:hover,
.wc-btn:hover,
.form-toggle-chevron:hover,
.intl-ot-select-menu button:hover {
  opacity: 1;
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
}

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

.btn-outline {
  border-color: var(--ui-border);
  background: var(--ui-control-bg);
}

.btn-row {
  gap: 7px;
  margin-top: 10px;
}

.form-toggle-chevron {
  width: var(--ui-icon-control);
  min-width: var(--ui-icon-control);
  padding: 0;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.wc-btn {
  width: var(--ui-control-height);
  min-width: var(--ui-control-height);
  padding: 0;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.ak-btn {
  min-height: var(--ui-control-height-sm);
  height: var(--ui-control-height-sm);
  padding: 0 9px;
}

/* Segmented choices */
.vade-grid {
  gap: 7px;
}

.vade-btn {
  position: relative;
  min-height: 58px;
  padding: 10px 11px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-control-bg);
  color: var(--text);
  box-shadow: none;
  text-align: left;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.vade-btn:hover {
  background: var(--ui-control-bg-hover);
}

html.dark-mode .vade-btn:not(.active) {
  background: var(--ui-control-bg);
  color: var(--text);
}

html.dark-mode .vade-btn:not(.active):hover {
  background: var(--ui-control-bg-hover);
}

.vade-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.vade-btn.active,
html.dark-mode .vade-btn.active {
  border: 0;
  background: var(--text);
  color: var(--surface);
  box-shadow: none;
}

.vade-btn.active::after {
  content: none;
}

.vade-btn-manual {
  border: 0;
}

.vb-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.vb-hint {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.vade-btn:not(.active) .vb-hint {
  color: var(--text-muted);
  opacity: 1;
}

.vade-btn.active .vb-hint {
  color: inherit;
  opacity: .78;
}

.hft-toggle-group,
.kdv-options {
  gap: 6px;
}

.hft-btn,
.kdv-btn {
  background: var(--ui-control-bg);
  color: var(--text-muted);
}

.hft-btn.active,
.kdv-btn.active,
html.dark-mode .hft-btn.active,
html.dark-mode .kdv-btn.active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

/* Switches */
.toggle {
  width: 28px;
  height: 18px;
}

.toggle-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 28%, var(--ui-control-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}

.toggle-thumb {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 28%, transparent);
}

.toggle input:checked + .toggle-track {
  background: var(--success);
  box-shadow: none;
}

.toggle input:checked ~ .toggle-thumb {
  transform: translateX(10px);
}

.toggle-label {
  font-size: var(--ui-font-body);
  font-weight: 400;
}

.toggle-sub {
  font-size: var(--ui-font-meta);
  font-weight: 400;
  letter-spacing: 0;
}

/* Results */
.result-card {
  background: var(--ui-card-bg-active);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--text) 12%, transparent);
}

.result-line {
  min-height: 34px;
  padding: 7px 0;
}

.result-line + .result-line {
  border-top-color: var(--ui-divider);
}

.r-label,
.result-line.secondary .r-label {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--ui-font-body);
  font-weight: 400;
  letter-spacing: 0;
}

.r-val,
.result-line.secondary .r-val {
  font-family: var(--font-num);
  font-size: var(--ui-font-value);
  font-weight: 400;
}

.result-total {
  min-height: 48px;
  padding: 10px 0 5px;
  border-top-color: var(--text);
}

.rt-label,
.rk-label {
  font-family: var(--font-label);
  font-size: var(--ui-font-section);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.rt-val {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}

.result-kar {
  min-height: 42px;
  margin-top: 8px;
  padding-top: 9px;
  border-top-color: var(--ui-divider);
}

.rk-val {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
}

.musteri-notu,
.result-warn,
.alt-vade-box,
.preview-box {
  border-radius: 0 var(--ui-radius-field) var(--ui-radius-field) 0;
}

.musteri-notu,
.preview-box {
  background: color-mix(in srgb, var(--blue-mute) 4%, var(--ui-control-bg));
}

/* Receivables dashboard */
#alacakDash.dash-grid {
  gap: 6px;
  margin: 0 0 10px;
  padding: 10px;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-shell-bg);
  overflow: visible;
}

#alacakDash .dash-cell,
#alacakDash .dash-cell:nth-child(odd):not(.wide) {
  min-height: 86px;
  padding: 11px;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-card-bg);
}

#alacakDash .dash-cell-selected {
  background: color-mix(in srgb, var(--danger) 5%, var(--ui-card-bg-active));
  box-shadow: inset 3px 0 0 var(--danger);
}

#alacakDash .dash-cell-pasif {
  border: 0;
  background: var(--ui-control-bg);
  opacity: .62;
}

.dc-label {
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: var(--ui-font-label);
  font-weight: 600;
  letter-spacing: .035em;
}

.dc-val {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.dc-sub,
.dc-sub-fx {
  font-size: var(--ui-font-meta);
  font-weight: 400;
  line-height: 1.35;
}

.dc-badge,
.ak-status,
.ak-pasif-btn {
  border-radius: var(--ui-radius-control);
  font-family: var(--font-label);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.dc-badge,
.ak-status { border-radius: var(--ui-radius-tag); }

/* Receivables remain a ledger, like the reference data-entry lists. */
.alacak-card {
  min-height: 0;
  padding: 10px 4px 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--ui-divider);
  border-left: 2px solid var(--text-muted);
  border-radius: 0;
  background: transparent;
}

.alacak-card.alindi {
  border-left-color: var(--success);
}

.alacak-card.selected {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, transparent);
}

.ak-name {
  font-family: var(--font-ui);
  font-size: var(--ui-font-body);
  font-weight: 600;
  letter-spacing: 0;
}

.ak-dates {
  font-size: var(--ui-font-meta);
  letter-spacing: 0;
}

.ak-item,
.ak-item.ak-item-major {
  font-size: var(--ui-font-value);
  font-weight: 400;
}

.ak-item-label {
  color: var(--text-muted);
}

.ak-item-live-try {
  font-size: var(--ui-font-meta);
}

.ak-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-field);
}

.ak-checkbox input:checked + .ak-checkbox-box {
  background: var(--danger);
  border-color: var(--danger);
}

/* Menus and overlays */
.intl-ot-select-menu,
.settings-panel,
.pdf-preview-modal {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-card-bg-active);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 14%, transparent);
}

.intl-ot-select-menu {
  padding: 5px;
}

.intl-ot-select-menu button {
  min-height: var(--ui-control-height);
  height: auto;
  border: 0;
  text-align: left;
}

.intl-ot-select-menu button:hover,
.intl-ot-select-menu button.selected {
  background: var(--ui-control-bg-hover);
}

.settings-panel {
  border-radius: var(--ui-radius-shell) var(--ui-radius-shell) 0 0;
}

.settings-title {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
}

.settings-preview {
  border-radius: var(--ui-radius-control);
  background: var(--ui-control-bg);
}

.pdf-preview-head {
  border-bottom-color: var(--ui-divider);
}

.pdf-preview-title {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -.035em;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode .lock-input,
html.dark-mode .intl-ot-select-button {
  border: 0;
  border-bottom: 1px solid var(--ui-divider);
  background: var(--ui-control-bg);
}

html.dark-mode .theme-toggle,
html.dark-mode .settings-toggle,
html.dark-mode .settings-panel {
  background: var(--ui-card-bg-active);
}

html.dark-mode .btn-dark,
html.dark-mode .lock-btn.primary,
html.dark-mode .hft-btn.active,
html.dark-mode .kdv-btn.active {
  background: var(--text);
  color: var(--surface);
}

@media (max-width: 760px) {
  :root {
    --ui-shell-bg: transparent;
  }

  .lock-theme-toggle {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 10px;
  }


  .tabs {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .tab-btn {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline: 10px;
    font-size: 9px;
  }

  .card,
  .result-card,
  .intl-section-card {
    padding: 10px;
  }

  .card > .card-title:first-child,
  .intl-section-card > .card-title:first-child,
  .result-card > .card-title:first-child {
    margin: -10px -10px 9px;
    padding-inline: 10px;
  }


  .card > .form-toggle-header:first-child {
    margin: -10px -10px 9px;
    padding-inline: 10px;
  }

  #alacakDash.dash-grid {
    padding: 0;
    background: transparent;
  }

  #alacakDash .dash-cell,
  #alacakDash .dash-cell:nth-child(odd):not(.wide) {
    min-height: 78px;
    padding: 10px;
  }

  .vade-btn {
    min-height: 54px;
  }
}

@media (max-width: 600px) {
  .dash-grid,
  #alacakDash.dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #alacakDash .dash-cell.wide {
    grid-column: 1 / -1;
  }

  .dc-val {
    font-size: 15px;
  }

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

@media (max-width: 400px) {
  .vade-grid,
  .input-row,
  .intl-overtime-custom-row,
  .settings-row {
    grid-template-columns: minmax(0, 1fr);
  }

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

  #alacakDash .dash-cell.wide {
    grid-column: auto;
  }

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

/* v8.19.4 — softened dark theme with measured accessibility targets */
html.dark-mode {
  --bg: #191917;
  --surface: #22211e;
  --surface-muted: #2a2824;
  --border: #47443d;
  --line: #3d3a34;
  --section-line: #3d3a34;
  --text: #d8d4cb;
  --text-muted: #aaa59c;
  --dim: #918c83;
  --dim-soft: #817c74;
  --accent: #d8d4cb;
  --accent-warm: #c87645;
  --success: #6f9f84;
  --warning: #c2a252;
  --danger: #c87369;
  --blue-mute: #91a2b5;

  --ui-shell-bg: #1e1d1b;
  --ui-card-bg: #24231f;
  --ui-card-bg-active: #292722;
  --ui-control-bg: #2e2c27;
  --ui-control-bg-hover: #38352f;
  --ui-segment-bg: #292722;
  --ui-divider: #3d3a34;
  --ui-border: #47443d;
  --ui-border-strong: #6b665d;

  --ui-dark-selected-bg: #716c63;
  --ui-dark-selected-text: #f2eee6;
  --ui-dark-focus: #aaa59c;
}

/* Keep fields readable without returning to pure-white contrast. */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .lock-input,
html.dark-mode .intl-ot-select-button,
html.dark-mode .settings-field input {
  background: var(--ui-control-bg);
  color: var(--text);
  border-bottom-color: var(--ui-divider);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #979289;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .lock-input:focus,
html.dark-mode .intl-ot-select-button:focus-visible,
html.dark-mode .intl-ot-select-button[aria-expanded="true"] {
  border-bottom-color: var(--ui-dark-focus);
  box-shadow: inset 0 -1px 0 var(--ui-dark-focus);
}

/* Primary actions and selected choices use the same moderate-contrast state. */
html.dark-mode .btn-dark,
html.dark-mode .lock-btn.primary,
html.dark-mode .vade-btn.active,
html.dark-mode .hft-btn.active,
html.dark-mode .kdv-btn.active {
  border-color: transparent;
  background: var(--ui-dark-selected-bg);
  color: var(--ui-dark-selected-text);
}

html.dark-mode .vade-btn.active .vb-label,
html.dark-mode .vade-btn.active .vb-hint {
  color: var(--ui-dark-selected-text);
  opacity: 1;
}

html.dark-mode .btn-dark:hover,
html.dark-mode .lock-btn.primary:hover,
html.dark-mode .vade-btn.active:hover,
html.dark-mode .hft-btn.active:hover,
html.dark-mode .kdv-btn.active:hover {
  background: #746f66;
  color: #fffdf6;
}

/* Secondary controls stay distinct through surface hierarchy, not bright outlines. */
html.dark-mode .btn-outline,
html.dark-mode .ak-btn:not(.received):not(.del),
html.dark-mode .hft-btn:not(.active),
html.dark-mode .kdv-btn:not(.active),
html.dark-mode .vade-btn:not(.active),
html.dark-mode .form-toggle-chevron,
html.dark-mode .theme-toggle,
html.dark-mode .settings-toggle,
html.dark-mode .btn-sync-inline {
  border-color: var(--ui-border);
  background: var(--ui-control-bg);
  color: #c9c4bb;
}

html.dark-mode .btn-outline:hover,
html.dark-mode .ak-btn:not(.received):not(.del):hover,
html.dark-mode .hft-btn:not(.active):hover,
html.dark-mode .kdv-btn:not(.active):hover,
html.dark-mode .vade-btn:not(.active):hover,
html.dark-mode .form-toggle-chevron:hover,
html.dark-mode .theme-toggle:hover,
html.dark-mode .settings-toggle:hover,
html.dark-mode .btn-sync-inline:hover {
  border-color: var(--ui-border-strong);
  background: var(--ui-control-bg-hover);
  color: var(--text);
}

html.dark-mode .tab-btn {
  color: var(--dim);
}

html.dark-mode .tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--dim);
}

html.dark-mode .intl-ot-select-menu button.selected {
  background: var(--ui-dark-selected-bg);
  color: var(--ui-dark-selected-text);
}

html.dark-mode .intl-ot-select-menu button.selected:hover {
  background: #746f66;
  color: #fffdf6;
}

html.dark-mode .toggle-track {
  background: #403d37;
  box-shadow: inset 0 0 0 1px var(--ui-border);
}

html.dark-mode .toggle-thumb {
  background: #cbc6bd;
}

html.dark-mode .toggle input:checked + .toggle-track {
  background: #537b68;
}

html.dark-mode .vade-btn:focus-visible,
html.dark-mode .btn:focus-visible,
html.dark-mode .ak-btn:focus-visible,
html.dark-mode .hft-btn:focus-visible,
html.dark-mode .kdv-btn:focus-visible,
html.dark-mode .tab-btn:focus-visible {
  outline: 2px solid var(--ui-dark-focus);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  html.dark-mode {
    --ui-shell-bg: transparent;
  }
}

html.dark-mode .lock-btn.primary:hover {
  opacity: 1;
}

/* v8.19.5 · receivable entry and source-edit states */
.source-edit-bar {
  position: sticky;
  top: calc(var(--app-sticky-offset, 0px) + 8px);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 var(--ui-gap-card);
  padding: 10px 10px 10px 12px;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-dark-selected-bg, var(--text));
  color: var(--ui-dark-selected-text, var(--surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 24%, transparent);
}

.source-edit-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.source-edit-kicker {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  opacity: .78;
}

.source-edit-name {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--ui-font-body);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-edit-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ui-radius-field);
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  font-family: var(--font-ui);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.source-edit-close:hover {
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.source-edit-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#alacakFormCard {
  margin-bottom: var(--ui-gap-card);
}

#alacakFormCard .form-body {
  display: block;
}

.alacak-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.alacak-entry-source {
  margin-top: 3px;
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
  font-variant-numeric: tabular-nums;
}

.alacak-entry-close {
  background: var(--ui-control-bg);
  color: var(--text-muted);
}

.alacak-entry-close:hover {
  background: var(--ui-control-bg-hover);
  color: var(--text);
}

.ak-live-rate {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

html.dark-mode .source-edit-bar {
  background: var(--ui-dark-selected-bg);
  color: var(--ui-dark-selected-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

@media (max-width: 560px) {
  .source-edit-bar {
    top: 6px;
    padding: 9px 8px 9px 10px;
  }

  .source-edit-copy {
    display: block;
  }

  .source-edit-kicker,
  .source-edit-name {
    display: block;
  }

  .source-edit-name {
    margin-top: 2px;
  }

  .ak-live-rate {
    display: block;
    margin-top: 2px;
  }
}

.dash-fx-warning {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-radius: var(--ui-radius-field);
  background: var(--ui-control-bg);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--ui-font-meta);
  line-height: 1.35;
}

.dash-fx-warning-selected {
  background: var(--ui-card-bg-active);
}

html.dark-mode .dash-fx-warning {
  background: var(--ui-control-bg);
  color: var(--text-muted);
}

/* v8.19.6 · receivable due-date and advance operations */
.receivable-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(8px);
}

.receivable-action-overlay.open {
  display: flex;
}

.receivable-action-modal {
  width: min(480px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  max-height: min(720px, calc(100dvh - 36px));
  overflow: auto;
  padding: 16px;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-card-bg);
  color: var(--text);
  box-shadow: 0 22px 70px color-mix(in srgb, var(--bg) 56%, transparent);
}

.receivable-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.receivable-action-kicker {
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.receivable-action-title {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
}

.receivable-action-meta {
  margin-top: 3px;
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
}

.receivable-action-close {
  background: var(--ui-control-bg);
  color: var(--text-muted);
}

.receivable-action-close:hover {
  background: var(--ui-control-bg-hover);
  color: var(--text);
}

.receivable-action-section .input-row + .input-row {
  margin-top: 9px;
}

.receivable-action-buttons {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.receivable-action-error {
  min-height: 16px;
  margin-top: 8px;
  color: var(--danger);
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
}

.receivable-advance-preview {
  min-height: 16px;
  margin-top: 9px;
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
  font-variant-numeric: tabular-nums;
}

.ak-item-advance .ak-item-label,
.ak-item-advance .ak-money-main {
  color: var(--success);
}

.ak-item-remaining .ak-money-main {
  font-weight: 700;
}

.ak-advance-ledger {
  margin: 8px 0 2px 24px;
  padding: 7px 0 2px;
  border-top: 1px solid var(--ui-divider);
}

.ak-advance-ledger-title {
  margin-bottom: 3px;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ak-advance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: var(--ui-font-meta);
  font-variant-numeric: tabular-nums;
}

.ak-advance-date,
.ak-advance-amount,
.ak-advance-note {
  display: inline;
}

.ak-advance-date::after,
.ak-advance-amount::after {
  content: " · ";
  color: var(--dim);
}

.ak-advance-note:last-child::after,
.ak-advance-amount:last-child::after {
  content: "";
}

.ak-advance-amount {
  color: var(--text);
  font-weight: 600;
}

.ak-advance-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-tag);
  background: transparent;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.ak-advance-remove:hover {
  background: var(--ui-control-bg-hover);
  color: var(--danger);
}

/* PDF is intentionally tertiary throughout the application. */
.btn.btn-pdf-subtle,
.pdf-preview-actions .btn.btn-pdf-subtle {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 22px;
  height: 22px;
  align-self: center;
  padding: 0 7px;
  border-color: transparent;
  border-radius: var(--ui-radius-tag);
  background: transparent;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .035em;
  opacity: .68;
}

.btn.btn-pdf-subtle:hover,
.pdf-preview-actions .btn.btn-pdf-subtle:hover {
  border-color: transparent;
  background: var(--ui-control-bg-hover);
  color: var(--text);
  opacity: 1;
}

html.dark-mode .btn.btn-pdf-subtle,
html.dark-mode .pdf-preview-actions .btn.btn-pdf-subtle {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

html.dark-mode .receivable-action-overlay {
  background: rgba(10, 10, 9, .72);
}

@media (max-width: 560px) {
  .receivable-action-overlay {
    align-items: center;
    padding: 14px;
  }

  .receivable-action-modal {
    width: 100%;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 14px;
  }

  .receivable-action-buttons .btn {
    min-width: 0;
  }

  .ak-advance-ledger {
    margin-left: 0;
  }

  .btn.btn-pdf-subtle,
  .pdf-preview-actions .btn.btn-pdf-subtle {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 8px;
  }
}

/* v8.19.8 · compact floating due-date and advance editors */
.receivable-action-overlay.floating-popover {
  display: none;
  padding: 0;
  align-items: initial;
  justify-content: initial;
  background: transparent;
  backdrop-filter: none;
}

.receivable-action-overlay.floating-popover.open {
  display: block;
}

.receivable-action-overlay.floating-popover .receivable-action-modal {
  position: fixed;
  width: min(320px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  padding: 14px;
  overflow: auto;
  box-shadow: 0 16px 46px color-mix(in srgb, var(--bg) 45%, transparent);
}

.receivable-action-overlay.floating-popover .receivable-action-head {
  margin-bottom: 12px;
}

.receivable-action-overlay.floating-popover .receivable-action-kicker {
  display: none;
}

.receivable-action-overlay.floating-popover .receivable-action-title {
  margin-top: 0;
  font-size: 15px;
}

.receivable-action-overlay.floating-advance .receivable-action-modal {
  width: min(420px, calc(100vw - 20px));
}

.receivable-action-overlay.floating-advance .receivable-action-kicker {
  display: block;
}

.receivable-action-overlay.floating-advance .receivable-action-title {
  font-size: 16px;
}

.receivable-action-overlay.floating-popover .receivable-action-meta {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receivable-action-overlay.floating-popover .receivable-action-buttons {
  justify-content: flex-end;
  margin-top: 12px;
}

.receivable-action-overlay.floating-popover .receivable-action-buttons .btn {
  flex: 0 0 auto;
  min-width: 0;
}

html.dark-mode .receivable-action-overlay.floating-popover {
  background: transparent;
}

@media (max-width: 560px) {
  .receivable-action-overlay.floating-popover {
    display: none;
    padding: 0;
    align-items: initial;
  }

  .receivable-action-overlay.floating-popover.open {
    display: block;
  }

  .receivable-action-overlay.floating-popover .receivable-action-modal {
    position: fixed;
    width: min(320px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 14px;
  }


  .receivable-action-overlay.floating-advance .receivable-action-modal {
    width: min(420px, calc(100vw - 20px));
  }
}

/* GİRİŞ EKRANI  -  dolgusuz şifre alanı, tuğla kırmızısı alt çizgi */
:root {
  --brick: #a46554;
  --brick-strong: #96503f;
}

html.dark-mode {
  --brick: #a8604d;
  --brick-strong: #c07660;
}

.lock-input,
html.dark-mode .lock-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brick);
  border-radius: 0;
  box-shadow: none;
}

.lock-input:focus,
html.dark-mode .lock-input:focus {
  border-bottom-color: var(--brick-strong);
  box-shadow: inset 0 -1px 0 var(--brick-strong);
}

/* Login window controls retain their existing clearance. */
@media (min-width: 700px) {
  #lockScreen {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   Indirimli baz kase satiri
   Indirim yuzdesi tum kalemlere ayni oranda yansidigi icin gunluk /
   haftalik kaseye de ayni oran uygulanir. Satir, indirimden sonra
   fiilen hangi baz tutara calisildigini gosterir; yanindaki ustu
   cizili rakam indirim oncesi tutardir.
   ============================================================ */
.result-line.discount-net .r-val {
  color: var(--text);
}

.result-line.discount-net .rline-was {
  margin-left: 7px;
  color: var(--dim);
  font-size: 0.86em;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Canonical MCHQ dark palette. Loaded after the app design system. */
html.dark-mode {
  --bg: #191919;
  --surface: #212121;
  --surface-muted: #2c2c2c;
  --border: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.08);
  --section-line: rgba(255,255,255,.08);
  --text: #ececec;
  --text-muted: #b4b4b4;
  --dim: #a3a3a3;
  --dim-soft: #6f6f6f;
  --accent: #ececec;
  --ui-shell-bg: #191919;
  --ui-card-bg: #212121;
  --ui-card-bg-active: #262626;
  --ui-control-bg: #2c2c2c;
  --ui-control-bg-hover: #303030;
  --ui-segment-bg: #262626;
  --ui-divider: rgba(255,255,255,.08);
  --ui-border: rgba(255,255,255,.08);
  --ui-border-strong: rgba(255,255,255,.14);
  --ui-dark-selected-bg: #2c2c2c;
  --ui-dark-selected-text: #ececec;
  --ui-dark-focus: #b4b4b4;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--dim); }
html.dark-mode .btn-dark:hover,
html.dark-mode .lock-btn.primary:hover,
html.dark-mode .vade-btn.active:hover,
html.dark-mode .hft-btn.active:hover,
html.dark-mode .kdv-btn.active:hover,
html.dark-mode .intl-ot-select-menu button.selected:hover {
  background: #303030;
  color: var(--text);
}
html.dark-mode .btn-outline,
html.dark-mode .ak-btn:not(.received):not(.del),
html.dark-mode .hft-btn:not(.active),
html.dark-mode .kdv-btn:not(.active),
html.dark-mode .vade-btn:not(.active),
html.dark-mode .form-toggle-chevron,
html.dark-mode .theme-toggle,
html.dark-mode .settings-toggle,
html.dark-mode .btn-sync-inline { color: var(--text-muted); }
html.dark-mode .toggle-track { background: #2c2c2c; }
html.dark-mode .toggle-thumb { background: #b4b4b4; }
html.dark-mode .receivable-action-overlay { background: rgba(0,0,0,.58); }


/* Consolidated component layer */
.mg-passkey-box{display:flex;flex-direction:column;gap:10px}.mg-passkey-box .settings-security-row{display:flex;flex-wrap:wrap;gap:8px}.mg-passkey-list{display:flex;flex-direction:column;gap:7px}.mg-passkey-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg)}.mg-passkey-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.mg-passkey-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px/1.2 var(--font-ui)}.mg-passkey-copy span{color:var(--muted);font:9px/1.35 var(--font-num)}.mg-passkey-actions{display:flex;gap:5px;align-items:center}.mg-passkey-actions button{min-height:30px;padding:5px 8px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--text);font:700 9px/1 var(--font-ui);cursor:pointer}.mg-passkey-actions button[data-action="revoke"]{color:var(--danger,#b63f34)}.mg-passkey-note{line-height:1.45}.mg-passkey-empty{padding:8px 0;color:var(--muted);font:10px/1.4 var(--font-num)}.mg-passkey-revoke-all{color:var(--danger,#b63f34)}@media(max-width:620px){.mg-passkey-row{grid-template-columns:1fr}.mg-passkey-actions{justify-content:flex-start}}

.settings-overlay{background:rgba(0,0,0,.4);padding:0;align-items:flex-end;justify-content:center}
.settings-panel{position:relative;width:100%;max-width:728px;max-height:min(88dvh,900px);overflow:auto;padding:24px 20px calc(34px + env(safe-area-inset-bottom,0px));border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--card);box-shadow:none;font-family:var(--font-ui)}
.settings-parity-close{position:absolute;top:18px;right:18px;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text);font:400 18px/1 var(--font-num);cursor:pointer}
.settings-title{margin:0 38px 4px 0;padding:0;font-family:var(--font-display);font-size:15px;font-weight:900;line-height:1.05;letter-spacing:-.3px;text-transform:uppercase;color:var(--text)}
.settings-sub{margin:0 0 18px;color:var(--text-muted);font-family:var(--font-num);font-size:9px;line-height:1.4;letter-spacing:.035em;text-transform:none}
.settings-parity-section{margin:0 0 8px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 86%,var(--bg))}
.settings-theme-section{padding-top:10px}
.settings-security-title{margin:0 0 9px;color:var(--text-muted);font-family:var(--font-ui);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.settings-theme-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;max-width:none}
.settings-theme-choice .btn{min-height:32px}
.settings-theme-choice .btn.is-active{border-color:var(--text);background:var(--text);color:var(--surface)}
.settings-rate-section>.settings-row,.settings-rate-section>.settings-preview{display:none}
.settings-rate-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.settings-rate-column{min-width:0;padding:4px 6px;border:0;border-radius:0;background:transparent}
.settings-rate-column .settings-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.settings-rate-column .settings-field-label{color:var(--text-muted);font-family:var(--font-ui);font-size:9px;font-weight:700;line-height:1.25;letter-spacing:.025em;text-transform:uppercase}
.settings-rate-column .settings-field input{width:100%;min-width:0;min-height:34px;padding:6px 1px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);font-family:var(--font-num);font-size:14px;box-shadow:none}
.settings-rate-column .settings-field input:focus{border-bottom-color:var(--accent-warm)}
.settings-rate-column .sp-item{min-width:0;margin-top:7px;padding:0;border:0;background:transparent;text-align:left}
.settings-rate-column .sp-label{display:block;margin-bottom:3px;color:var(--text-muted);font-family:var(--font-ui);font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.settings-rate-column .sp-val{display:block;color:var(--text);font-family:var(--font-num);font-size:10px;font-weight:600}
.settings-rate-column .sp-hint{display:block;margin-top:3px;color:var(--blue-mute);font-family:var(--font-num);font-size:8px;line-height:1.3}
.settings-save-row{display:flex;gap:8px;align-items:center;margin:0}
.settings-save-row .btn{min-height:32px}
.settings-security-box{margin:8px 0 0;padding:10px;border:1px solid var(--border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--card) 86%,var(--bg))}
.settings-security-box .settings-security-title{color:var(--text-muted)}
.settings-panel .mg-passkey-copy span,.settings-panel .mg-passkey-note,.settings-panel .mg-passkey-empty,.settings-panel #passkeyStatus{color:var(--text-muted)}
.settings-panel .mg-passkey-row{background:var(--card);border-color:var(--border)}
.settings-panel .btn-outline{color:var(--text);opacity:1}
.mg-passkey-box{display:block;height:auto;min-height:0}
.mg-passkey-box>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.mg-passkey-box>summary::-webkit-details-marker{display:none}
.mg-passkey-box>summary::after{content:'›';margin-left:10px;opacity:.55;transform:rotate(0deg);transition:transform .15s ease}
.mg-passkey-box[open]>summary{margin-bottom:10px}
.mg-passkey-box[open]>summary::after{transform:rotate(90deg)}
.mg-passkey-box .settings-security-row{margin:0 0 10px}
.mg-passkey-box .mg-passkey-list{margin:0}
.mg-passkey-box .mg-passkey-note{margin:10px 0 0}
.mg-passkey-box #passkeyStatus{display:block;margin:8px 0 0}
.mg-passkey-box #passkeyStatus:empty{display:none}
.settings-passkey-logout{margin:8px 0 0;padding:0;border:0}
.settings-logout-btn{width:100%;color:var(--danger,#b63f34)}
.settings-panel .lock-error{color:var(--danger,#b63f34);font-family:var(--font-ui);font-size:10px}
.settings-overlay.open{display:flex}
@media(max-width:560px){.settings-panel{padding:20px 12px calc(30px + env(safe-area-inset-bottom,0px))}.settings-parity-close{top:15px;right:12px}.settings-theme-choice{max-width:none}.settings-rate-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.settings-rate-column{padding:4px 2px}.settings-rate-column .settings-field-label{font-size:7.5px;letter-spacing:0;white-space:nowrap}.settings-rate-column .settings-field input{min-height:31px;font-size:11px}.settings-rate-column .sp-item{margin-top:7px;padding-top:0}.settings-rate-column .sp-label{font-size:7px;letter-spacing:0}.settings-rate-column .sp-val{font-size:8.5px;white-space:nowrap}.settings-rate-column .sp-hint{font-size:7px;white-space:normal}.settings-save-row .btn{flex:1 1 0;min-width:0;padding-inline:8px}}

/* Archive is a separate dataset view, not a visually de-emphasized state. */
#alacakArchiveList .alacak-card,
#alacakArchiveList .alacak-card:hover {
  opacity: 1;
}
#alacakDash.is-archive-muted {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* Live and archive summary cards keep one shared geometry regardless of content depth. */
#alacakDash .dash-cell {
  height: 96px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
#alacakDash .dc-sub,
#alacakDash .dc-sub-fx {
  display: block;
  width: 100%;
}

.app-changelog-open{overflow:hidden}.app-changelog-modal[hidden]{display:none}.app-changelog-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.app-changelog-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.app-changelog-card{position:relative;z-index:1;width:min(780px,100%);max-height:min(820px,calc(100svh - 32px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ui-border,var(--border));border-radius:var(--ui-radius-card,8px);background:var(--ui-card-bg-active,var(--surface));color:var(--text);box-shadow:0 22px 70px rgba(0,0,0,.28)}.app-changelog-head{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid var(--ui-divider,var(--border))}.app-changelog-head strong,.app-changelog-head small{display:block}.app-changelog-head strong{font:700 17px/1 var(--font-ui)}.app-changelog-head small{margin-top:5px;color:var(--text-muted);font:10px/1.2 var(--font-num)}.app-changelog-head button{width:34px;height:34px;flex:0 0 34px;padding:0;border:1px solid var(--ui-border,var(--border));border-radius:var(--ui-radius-control,6px);background:var(--ui-control-bg);color:var(--text);font:400 20px/1 var(--font-ui);cursor:pointer}.app-changelog-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--ui-divider,var(--border))}.app-changelog-toolbar input{width:100%;min-width:0;min-height:36px;height:36px;padding:8px 10px;border:1px solid var(--ui-border,var(--border));border-radius:var(--ui-radius-control,6px);background:var(--ui-control-bg);color:var(--text);font:12px/1.2 var(--font-ui);outline:none;box-shadow:none}.app-changelog-toolbar input:focus{border-color:var(--ui-border-strong,var(--text));box-shadow:none}.app-changelog-toolbar span{color:var(--text-muted);font:10px/1 var(--font-num);white-space:nowrap}.app-changelog-results{flex:1 1 auto;overflow:auto;padding:10px 14px 16px;overscroll-behavior:contain}.app-changelog-group{margin-bottom:8px;border:1px solid var(--ui-border,var(--border));border-radius:var(--ui-radius-card,8px);overflow:hidden;background:var(--ui-card-bg)}.app-changelog-group>summary,.app-changelog-release>summary{list-style:none;cursor:pointer}.app-changelog-group>summary::-webkit-details-marker,.app-changelog-release>summary::-webkit-details-marker{display:none}.app-changelog-group>summary{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px}.app-changelog-group>summary div strong,.app-changelog-group>summary div small{display:block}.app-changelog-group>summary div strong{font:700 12px/1.1 var(--font-label);letter-spacing:.06em;text-transform:uppercase}.app-changelog-group>summary div small{margin-top:4px;color:var(--text-muted);font:9px/1 var(--font-num)}.app-changelog-group>summary>b,.app-changelog-release>summary>b{color:var(--text-muted);font:400 18px/1 var(--font-ui);transition:transform .18s ease}.app-changelog-group[open]>summary>b,.app-changelog-release[open]>summary>b{transform:rotate(45deg)}.app-changelog-group[open]>summary{border-bottom:1px solid var(--ui-divider,var(--border))}.app-changelog-release{border-bottom:1px solid var(--ui-divider,var(--border));background:var(--ui-card-bg-active)}.app-changelog-release:last-child{border-bottom:0}.app-changelog-release>summary{min-height:44px;display:grid;grid-template-columns:72px minmax(0,1fr) 20px;gap:10px;align-items:center;padding:8px 12px}.app-changelog-release>summary>span{color:var(--text-muted);font:10px/1 var(--font-num)}.app-changelog-release>summary>strong{min-width:0;font:400 12px/1.25 var(--font-ui)}.app-changelog-release-body{padding:0 12px 12px 94px;color:var(--text-muted);font:11px/1.45 var(--font-ui)}.app-changelog-release-body ul{margin:0;padding-left:16px}.app-changelog-release-body li+li{margin-top:5px}.app-changelog-loading,.app-changelog-empty{padding:30px 8px;color:var(--text-muted);text-align:center;font:11px/1.4 var(--font-num)}.settings-changelog-box .settings-security-row{align-items:center}.settings-changelog-box .settings-sub{min-width:0}@media(max-width:760px){.app-changelog-modal{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.app-changelog-card{max-height:calc(100svh - 16px)}.app-changelog-head{min-height:58px;padding:10px 11px}.app-changelog-toolbar{padding:8px 11px}.app-changelog-results{padding:8px 10px 14px}.app-changelog-release>summary{grid-template-columns:60px minmax(0,1fr) 18px;gap:7px;padding:8px 10px}.app-changelog-release-body{padding:0 10px 12px 77px}}

/* Gider Takibi reference: dark header settings control. */
html.dark-mode .header-actions .settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 56px;
  height: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-button);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
}
html.dark-mode .header-actions .settings-toggle:hover {
  border-color: var(--text);
  background: #2f2f2f;
  color: var(--text);
}
/* Customer approval and conflict resolution */
.customer-access-panel{margin-top:10px;padding-top:12px;border-top:1px solid var(--border);text-align:left}
.customer-access-panel label{display:block;margin:8px 0 4px;color:var(--text-muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.customer-access-panel label span{font-weight:400;text-transform:none}
.customer-access-panel input{width:100%;min-height:36px;padding:7px 4px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);font:12px/1.3 var(--font-ui)}
.customer-access-panel input:focus{outline:none;border-bottom-color:var(--accent-warm)}
.customer-access-panel .lock-btn{margin-top:9px}
.customer-access-close{display:block;width:100%;margin-top:10px;padding:4px;border:0;background:transparent;color:var(--text-muted);font:10px/1.3 var(--font-ui);cursor:pointer}
.customer-access-status{min-height:18px;margin-top:8px;color:var(--text-muted);font:10px/1.4 var(--font-num);text-align:center}
.customer-request-count,.settings-request-badge{display:inline-flex;min-width:17px;height:17px;align-items:center;justify-content:center;border-radius:9px;background:var(--danger);color:#fff;font:700 9px/1 var(--font-num)}
.customer-request-count[hidden],.settings-request-badge[hidden]{display:none}
.settings-request-badge{margin-left:4px}
.customer-request-list{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.customer-request-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.customer-request-row>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.customer-request-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px/1.2 var(--font-ui)}
.customer-request-row span{color:var(--text-muted);font:9px/1.35 var(--font-num)}
.customer-request-actions{display:flex;gap:5px}
.customer-request-actions button{min-height:30px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text);font:700 9px/1 var(--font-ui);cursor:pointer}
.customer-request-actions button[data-customer-action="approve"]{color:var(--success)}
.customer-request-actions button[data-customer-action="deny"],.customer-request-actions button[data-customer-action="revoke"]{color:var(--danger)}
.customer-request-refresh{width:100%}
.sync-conflict-overlay{position:fixed;inset:0;z-index:1800;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.5)}
.sync-conflict-overlay.open{display:flex}
.sync-conflict-card{width:min(100%,480px);padding:22px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);color:var(--text)}
.sync-conflict-kicker{color:var(--warning);font:700 9px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.sync-conflict-card h2{margin:7px 0 8px;font:800 20px/1.15 var(--font-title)}
.sync-conflict-card p{margin:0 0 16px;color:var(--text-muted);font:12px/1.5 var(--font-ui)}
.sync-conflict-actions{display:grid;gap:8px}
.receivable-date-edit-row{margin:0}
#passkeyStatus.is-error{color:var(--danger)}
@media(max-width:620px){.customer-request-row{grid-template-columns:1fr}.customer-request-actions{justify-content:flex-start}}

/* Form measure is independent of the shared header/navigation frame. */
#tab-kase, #tab-uzun, #tab-intl, #tab-alacak {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

/* Primary income results share one quiet emphasis level. */
.result-line.primary-payment {
  min-height: 42px;
  margin-top: 8px;
  padding-block: 10px;
  border-top: 1px solid var(--ui-border-strong);
}
.result-line.primary-payment .r-label { color: var(--text); font-weight: 600; }
.result-line.primary-payment .r-val { color: var(--text); font-size: 16px; font-weight: 600; }
.ak-menu-trigger {
  width: 24px;
  min-width: 24px;
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--ui-control-bg);
  color: var(--text);
  font: 700 14px/1 var(--font-ui);
  cursor: pointer;
}
.ak-actions:empty { display: none; }

/* Compact anchored action cards use the same geometry on every screen. */
.record-actions-dialog {
  position: fixed;
  inset: var(--action-top, 12px) auto auto var(--action-left, 12px);
  width: min(224px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid var(--ui-border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px #0002;
  font-family: var(--font-ui);
}
.record-actions-dialog::backdrop { background: #0001; }
.record-actions-dialog > header { display: flex; align-items: center; gap: 6px; padding: 0 0 4px 6px; border-bottom: 1px solid var(--ui-divider); }
.record-actions-dialog h2 { flex: 1; min-width: 0; margin: 0; font: 600 11px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.record-actions-dialog button { cursor: pointer; font-family: var(--font-ui); }
.record-actions-close { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text); font-size: 16px; }
.record-action { display: block; width: 100%; min-height: 30px; padding: 5px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font-size: 11px; font-weight: 500; line-height: 1.3; text-align: left; }
.record-action.is-danger { margin-top: 4px; border-top: 1px solid var(--ui-divider); border-radius: 0 0 4px 4px; color: var(--danger); }
.record-action:hover, .record-actions-close:hover { background: var(--ui-control-bg-hover); }
.record-actions-dialog button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.record-actions-dialog [role="alert"] { margin: 6px; color: var(--danger); font-size: 11px; }
@media (pointer: coarse) {
  .record-action { min-height: 32px; }
  .record-actions-close { flex-basis: 28px; width: 28px; height: 28px; }
}

/* Compact presentation. Calculators retain their existing form/result flow. */
:is(#tab-kase, #tab-uzun, #tab-intl) {
  --presentation-line: color-mix(in srgb, var(--text) 11%, transparent);
  --presentation-muted: color-mix(in srgb, var(--text) 65%, var(--bg));
  --presentation-inset: 10px;
}
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.card, .intl-section-card) {
  padding: var(--presentation-inset);
  margin-bottom: 6px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(#tab-kase, #tab-uzun, #tab-intl) .result-card {
  padding: var(--presentation-inset);
  margin-bottom: 8px;
  border-radius: var(--ui-radius-card);
  box-shadow: none;
}
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.card, .intl-section-card, .result-card) > .card-title:first-child {
  min-height: 34px;
  margin: calc(-1 * var(--presentation-inset)) calc(-1 * var(--presentation-inset)) 8px;
  padding: 7px var(--presentation-inset);
  border-bottom: 1px solid var(--presentation-line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .025em;
}
:is(#tab-kase, #tab-uzun, #tab-intl) .card > .card-title:not(:first-child) {
  margin: 8px 0 6px;
  padding-top: 8px;
  border-top-color: var(--presentation-line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .025em;
}
/* An explicit divider already owns the separation above these subtitles. */
:is(#tab-kase, #tab-uzun, #tab-intl) .card > .divider + .card-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.input-hint, .toggle-sub) {
  color: var(--presentation-muted);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}
:is(#tab-kase, #tab-uzun) {
  --choice-border: 0;
  --choice-edge: color-mix(in srgb, var(--text) 12%, transparent);
  --choice-line-width: 1px;
  --choice-radius: 0;
  --choice-bg: transparent;
  --choice-ink: var(--text);
  --choice-active-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --choice-active-border: transparent;
  --choice-active-edge: color-mix(in srgb, var(--text) 60%, transparent);
}
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.vade-grid, .hft-toggle-group, .kdv-options) { gap: 4px; }
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.vade-btn, .hft-btn, .kdv-btn) {
  border: var(--choice-border, 0);
  border-bottom: var(--choice-line-width, 2px) solid var(--choice-edge, transparent);
  border-radius: var(--choice-radius, 0);
  background: var(--choice-bg, transparent);
  color: var(--choice-ink, var(--presentation-muted));
  box-shadow: none;
}
/* Tab ledger surfaces (choices and entry fields) stay square, like Gider's open-ledger bands. */
:is(#tab-kase, #tab-uzun, #tab-intl) :is(input[type="number"], input[type="text"], input[type="date"], select, .intl-ot-select-button) { border-radius: 0; }
:is(#tab-kase, #tab-uzun, #tab-intl) .vade-btn { min-height: 50px; padding: 7px 9px; }
:is(#tab-kase, #tab-uzun, #tab-intl) .vb-label { font-size: 10px; }
:is(#tab-kase, #tab-uzun, #tab-intl) .vb-hint { margin-top: 3px; font-size: 9px; }
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.vade-btn, .hft-btn, .kdv-btn).active {
  border-color: var(--choice-active-border, transparent);
  border-bottom-color: var(--choice-active-edge, var(--text));
  background: var(--choice-active-bg, color-mix(in srgb, var(--text) 4%, transparent));
  color: var(--text);
}
:is(#tab-kase, #tab-uzun, #tab-intl) .vade-btn.active :is(.vb-label, .vb-hint) { color: inherit; }
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.vade-btn, .hft-btn, .kdv-btn):not(.active):hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
:is(#tab-kase, #tab-uzun, #tab-intl) :is(.vade-btn, .hft-btn, .kdv-btn):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* The manual input shares the choice's row, without nesting an input in a button. */
#tab-kase .manual-vade-choice { display: grid; grid-column: 1 / -1; min-width: 0; }
#tab-kase .manual-vade-choice > .vade-btn { grid-area: 1 / 1; display: flex; align-items: center; width: 100%; }
#tab-kase .manual-vade-choice > .vade-btn.active + .manual-vade-hint { display: none; }
#tab-kase :is(#manualKaseRow, .manual-vade-hint) { grid-area: 1 / 1; align-self: center; justify-self: end; position: relative; align-items: center; gap: 6px; width: clamp(120px, 40%, 220px); max-width: calc(100% - 92px); margin: 0 9px; }
#tab-kase .manual-vade-hint { pointer-events: none; color: var(--presentation-muted); font-size: 10px; line-height: 1.3; text-align: right; }
#tab-kase #manualKaseRow:not(.hidden) { display: flex; }
#tab-kase #manualKaseRow > span { color: var(--presentation-muted); font-size: 9px; }
#tab-kase #manual_gunluk { width: 100%; min-width: 0; min-height: 34px; height: 34px; padding: 3px 6px; border: 0; border-bottom: 1px solid var(--presentation-line); border-radius: 0; background: transparent; color: var(--text); font-size: 14px; box-shadow: none; }
#tab-kase #manual_gunluk:focus { border-bottom-color: var(--text); outline: none; }
/* Invoice choices live on the same result surface as the totals they affect. */
#tab-kase #resultCard .invoice-controls { margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--presentation-line); }
#tab-kase #resultCard .invoice-controls > .card-title { margin: 0 0 6px; padding: 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .025em; }
/* Disclosures share a right-hand chevron, never an extra boxed action. */
.settings-panel details.settings-security-box > summary { min-height: 32px; gap: 8px; }
.settings-panel details.settings-security-box > summary::after {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin: 0 5px 0 auto;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  opacity: .7;
  transform: rotate(-45deg);
}
.settings-panel details.settings-security-box[open] > summary::after { transform: rotate(45deg); }
.settings-panel .settings-sub { font-size: 8px; letter-spacing: 0; }
@media (pointer: coarse) {
  #tab-kase #manual_gunluk { font-size: 16px; }
  :is(#tab-kase, #tab-uzun, #tab-intl) :is(.hft-btn, .kdv-btn) { min-height: 36px; height: 36px; }
  .settings-panel details.settings-security-box > summary { min-height: 36px; }
}
.settings-panel details.settings-security-box > summary { display: flex; align-items: center; list-style: none; cursor: pointer; margin-bottom: 0; }
.settings-panel details.settings-security-box > summary::-webkit-details-marker { display: none; }
.settings-panel details.settings-security-box[open] > summary { margin-bottom: 10px; }

/* The masthead keeps its opening position while the page scrolls. */
.app-masthead { display: flow-root; }
:root:is([data-app-device="ipad"], [data-app-device="desktop"]) {
  --app-page-overflow-x: clip;
  --app-page-overflow-y: visible;
  --app-sticky-offset: calc(var(--app-shell-padding-top) + var(--app-masthead-height, 0px));
  scroll-padding-top: calc(var(--app-sticky-offset) + 12px);
}
:root:is([data-app-device="ipad"], [data-app-device="desktop"]) .app-masthead {
  position: sticky;
  top: var(--app-shell-padding-top);
  z-index: 40;
  margin-inline: calc(-1 * var(--app-gutter-left)) calc(-1 * var(--app-gutter-right));
  padding-inline: var(--app-gutter-left) var(--app-gutter-right);
}
:root:is([data-app-device="ipad"], [data-app-device="desktop"]) .app-masthead::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--app-shell-padding-top)) 0 0;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

:root[data-app-device="phone"] {
  --app-shell-padding-top: calc(var(--app-safe-top) + 24px);
}