/* SkySoft Payments — design system v0.4
   Принципы: B24-vibe (синий accent, светлый bg), современный SaaS-минимализм (Stripe/Linear),
   тонкие тени, плотные но не тесные карточки, system font. */

:root {
  /* B24 palette */
  --c-brand: #2fc6f6;      /* SkySoft/B24 accent */
  --c-action: #0d6efd;     /* primary action */
  --c-action-hover: #0b5ed7;
  --c-action-soft: #e7f1ff;

  /* Surfaces */
  --c-bg: #f7f9fc;
  --c-surface: #ffffff;
  --c-border: #e5e9f0;
  --c-border-strong: #d0d7e2;
  --c-divider: #f0f3f8;

  /* Text */
  --c-text: #1f2329;
  --c-text-muted: #65728a;
  --c-text-faint: #93a0b6;

  /* Semantic */
  --c-success: #198754;
  --c-success-bg: #d1e7dd;
  --c-success-soft: #e8f5ee;
  --c-danger: #d12c2c;
  --c-danger-bg: #fde7e7;
  --c-danger-soft: #fff5f5;
  --c-warning: #b88300;
  --c-warning-bg: #fff3cd;
  --c-warning-soft: #fff8e1;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  /* Radius */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(31,35,41,.04);
  --sh-md: 0 1px 3px rgba(31,35,41,.06), 0 0 0 1px var(--c-border);
  --sh-lg: 0 4px 16px rgba(31,35,41,.08);

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Layout containers ─────────────────────────────────────────────── */
.page { padding: var(--s-6); max-width: 1280px; margin: 0 auto }
.placement { padding: var(--s-4); background: var(--c-bg); min-height: 100vh }

/* ── Header ────────────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.app-header .brand {
  display: flex; align-items: center; gap: var(--s-3);
}
.app-header .brand img {
  height: 26px; width: auto; display: block;
}
.app-header .brand .title {
  font-weight: 600; font-size: 15px; color: var(--c-text); letter-spacing: -.1px;
}
.app-header .brand .subtitle {
  color: var(--c-text-faint); font-size: 12px; margin-left: var(--s-2);
}

/* В placement-tab header компактнее */
.placement-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.placement-header .h-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: 14px; color: var(--c-text);
}
.placement-header .h-title img {
  height: 20px; width: auto;
}
.placement-header .h-sub {
  color: var(--c-text-faint); font-size: 12px; font-weight: 400; margin-left: var(--s-2);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px 14px;
  background: var(--c-action); color: #fff;
  border: 0; border-radius: var(--r-md);
  font: 500 13px/1 var(--font);
  cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.btn:hover { background: var(--c-action-hover) }
.btn-ghost { background: transparent; color: var(--c-action); border: 1px solid var(--c-border-strong) }
.btn-ghost:hover { background: var(--c-action-soft) }

/* ── Cards / Summary ───────────────────────────────────────────────── */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-sm);
}
.card .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--c-text-faint); font-weight: 500; margin-bottom: var(--s-1);
}
.card .value {
  font-size: 22px; font-weight: 600; color: var(--c-text); letter-spacing: -.2px;
}
.card.debt .value { color: var(--c-danger) }
.card.success .value { color: var(--c-success) }
.card.brand .value { color: var(--c-action) }

/* В placement компактнее — inline summary */
.inline-summary {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: 13px;
}
.inline-summary span { color: var(--c-text-muted) }
.inline-summary b { color: var(--c-text); font-weight: 600 }
.inline-summary .debt b { color: var(--c-danger) }
.inline-summary .paid b { color: var(--c-success) }

/* ── Filter chips ─────────────────────────────────────────────────── */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  font-size: 12px; font-weight: 500; text-decoration: none;
  transition: all .15s;
}
.chip:hover { background: var(--c-action-soft); color: var(--c-action); border-color: var(--c-action) }
.chip.active { background: var(--c-action); color: #fff; border-color: var(--c-action) }
.chip .count { background: rgba(255,255,255,.2); padding: 1px 6px; border-radius: var(--r-pill); font-size: 11px }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
thead { background: #fbfcfd; }
th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .35px;
  color: var(--c-text-faint); font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-divider);
  color: var(--c-text); vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0 }
tbody tr:hover { background: #fbfcfd }
.row-overdue { background: #fffafa }
.row-overdue:hover { background: #fff5f5 }
.row-overdue td:first-child { border-left: 3px solid var(--c-danger); padding-left: 11px }
.due-date { color: var(--c-text-muted) }
.row-overdue .due-date { color: var(--c-danger); font-weight: 600 }

/* Numeric cells */
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
th.num { text-align: right }

/* Links to deals */
a.deal {
  color: var(--c-action); text-decoration: none; font-weight: 500;
}
a.deal:hover { text-decoration: underline }

/* ── iOS-style toggle ─────────────────────────────────────────────── */
.switch {
  display: inline-flex; align-items: center; gap: var(--s-2);
  cursor: pointer; user-select: none;
}
.switch input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.switch .slider {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  background: #d1d5db; border-radius: 20px;
  transition: background .2s;
  flex-shrink: 0;
}
.switch .slider::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--c-success) }
.switch input:checked + .slider::before { transform: translateX(16px) }
.switch .lbl {
  font-size: 12px; color: var(--c-text-muted); min-width: 80px;
  font-weight: 500; transition: color .15s;
}
.switch input:checked ~ .lbl { color: var(--c-success); }

/* ── Status / Pills ────────────────────────────────────────────────── */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500; line-height: 1.5;
}
.pill.danger { background: var(--c-danger-bg); color: var(--c-danger) }
.pill.success { background: var(--c-success-bg); color: var(--c-success) }
.pill.muted { background: #f0f3f8; color: var(--c-text-muted) }

/* ── Empty state ───────────────────────────────────────────────────── */
.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center; color: var(--c-text-faint);
  background: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
}
.empty .icon { font-size: 32px; opacity: .4; margin-bottom: var(--s-2) }
.empty h4 { margin: 0 0 var(--s-1) 0; color: var(--c-text); font-weight: 500 }
.empty p { margin: 0; font-size: 13px }

/* ── Dialog (modal для +Платёж) ────────────────────────────────────── */
dialog {
  border: 0; border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 16px 48px rgba(31,35,41,.18), 0 0 0 1px var(--c-border);
  min-width: 360px; max-width: 460px;
  font-family: var(--font);
}
dialog::backdrop {
  background: rgba(31,35,41,.4);
  backdrop-filter: blur(2px);
}
dialog h4 { margin: 0 0 var(--s-4); font-size: 16px; font-weight: 600 }
.field { margin: var(--s-3) 0 }
.field label {
  display: block; font-size: 12px; color: var(--c-text-muted);
  margin-bottom: 4px; font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  font: 14px/1.4 var(--font); color: var(--c-text);
  background: var(--c-surface);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--c-action);
  box-shadow: 0 0 0 3px var(--c-action-soft);
}
.field textarea { min-height: 64px; resize: vertical }
.actions {
  display: flex; gap: var(--s-2); justify-content: flex-end;
  margin-top: var(--s-4);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: var(--s-4) var(--s-3) }
  .cards { grid-template-columns: 1fr 1fr }
  .card .value { font-size: 18px }
  th, td { padding: 8px 10px }
  th { font-size: 10px }
  .switch .lbl { display: none }
}

/* ── Aging buckets (v0.6 G) ────────────────────────────────── */
.aging-section{margin:18px 0 14px}
.aging-title{font:600 12px var(--font,system-ui);color:var(--c-text-muted,#5b6470);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.aging-title .aging-filter{color:var(--c-action,#0d6efd);text-transform:none;letter-spacing:0;font-weight:600}
.aging-title a{color:var(--c-text-muted,#5b6470);text-decoration:none;font-weight:500;text-transform:none;letter-spacing:0}
.aging-title a:hover{color:var(--c-action,#0d6efd);text-decoration:underline}
.aging-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.age-card{display:block;padding:12px 14px;border:1px solid transparent;border-radius:10px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.age-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
.age-card .age-label{display:block;font:600 11px var(--font,system-ui);text-transform:uppercase;letter-spacing:.5px;opacity:.75}
.age-card .age-count{display:block;font-size:26px;font-weight:700;margin:4px 0 2px;line-height:1}
.age-card .age-sum{font:500 12px var(--font,system-ui);opacity:.85}
.age-card.a-30   {background:#fff8e1;border-color:#fde9a3;color:#7c5e02}
.age-card.a-60   {background:#fff0db;border-color:#fbc77c;color:#7a4607}
.age-card.a-90   {background:#fbe0db;border-color:#f29282;color:#88251b}
.age-card.a-plus {background:linear-gradient(180deg,#f5c0b8 0%,#e88575 100%);border-color:#c0392b;color:#5a1410}
.age-card.active {transform:none;box-shadow:0 0 0 3px var(--c-action,#0d6efd),0 6px 14px rgba(13,110,253,.18);border-color:transparent}
@media (max-width:680px){
  .aging-row{grid-template-columns:repeat(2,1fr)}
}