/* ============================================================
   Cabinet — Мої перевірки · v11 (260611)
   Поверх _design-tokens.css v3: ink-контраст, токени, насичені бейджі
   ============================================================ */

.cabinet-page main { background: var(--surface-page) !important; padding-top: 140px !important; }
.cab-wrap { max-width: 980px; margin: 0 auto; padding: var(--sp-2) var(--sp-6) var(--sp-16); }

/* ─── Gate (не залогінений) ─── */
.cab-gate { max-width: 460px; margin: 80px auto; text-align: center; }
.cab-gate h1 { font-size: 28px; font-weight: var(--fw-bold); color: var(--tx-primary); margin: 0 0 var(--sp-3); letter-spacing: -0.025em; }
.cab-gate p { font-size: 16px; color: var(--tx-secondary); line-height: 1.6; margin: 0 0 var(--sp-8); }
.cab-gate-btn {
  display: inline-block; padding: 13px 32px; background: var(--accent); color: #fff;
  border-radius: var(--radius-12); text-decoration: none; font-weight: var(--fw-semibold); font-size: 15px;
  box-shadow: var(--shadow-sm); transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cab-gate-btn:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); }

/* ─── Header ─── */
.cab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.cab-head h1 { font-size: 30px; font-weight: var(--fw-bold); color: var(--tx-primary); margin: 0 0 6px; letter-spacing: -0.025em; }
.cab-sub { font-size: 15px; color: var(--tx-secondary); margin: 0; }
.cab-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 11px 20px;
  border-radius: var(--radius-12); font-size: 14px; font-weight: var(--fw-semibold); text-decoration: none;
  border: 1.5px solid var(--bd-medium); color: var(--tx-primary); background: var(--surface-card);
  cursor: pointer; transition: all var(--t-base) var(--ease);
}
.cab-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-hover); }
.cab-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.cab-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: var(--shadow-md); }

/* ─── Dashboard stats ─── */
.cab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-8); }
.cab-stat {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-card); border: 1px solid var(--bd-soft); box-shadow: var(--shadow-xs);
  border-radius: var(--radius-16); padding: var(--sp-5) var(--sp-6);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
a.cab-stat:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.cab-stat-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium);
  color: var(--tx-tertiary); text-transform: uppercase; letter-spacing: 0.07em;
}
.cab-stat-value {
  font-size: 36px; font-weight: var(--fw-bold); color: var(--tx-primary);
  line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.cab-stat-risk { color: var(--sev-high); }
.cab-stat-mon  { color: var(--accent); }

/* ─── Controls ─── */
.cab-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.cab-search { flex: 1; min-width: 220px; position: relative; }
.cab-search input {
  width: 100%; height: 48px; padding: 0 18px; font-size: 15px;
  border: 1.5px solid var(--bd-medium); border-radius: var(--radius-12);
  background: var(--surface-card); color: var(--tx-primary); outline: none;
  transition: border-color var(--t-base) var(--ease); font-family: inherit;
}
.cab-search input:focus { border-color: var(--accent); }
.cab-search input::placeholder { color: var(--tx-tertiary); }
.cab-filters { display: flex; gap: 6px; }
.cab-filter {
  padding: 9px 18px; border-radius: var(--radius-8); font-size: 14px; font-weight: var(--fw-medium);
  border: 1.5px solid transparent; background: var(--surface-sunken); color: var(--tx-secondary);
  cursor: pointer; transition: all var(--t-fast) var(--ease); font-family: inherit;
}
.cab-filter:hover { background: #E5EDF0; color: var(--tx-primary); }
.cab-filter.is-active { background: var(--accent); color: #fff; }

/* ─── List ─── */
.cab-list { display: flex; flex-direction: column; gap: 10px; }
.cab-card {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--surface-card); border: 1px solid var(--bd-soft); box-shadow: var(--shadow-xs);
  border-radius: var(--radius-16); padding: var(--sp-4) 18px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.cab-card:hover { border-color: rgba(0,118,128,0.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cab-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--tx-secondary);
}
.cab-card-icon svg { width: 22px; height: 22px; }
.cab-card-main { flex: 1; min-width: 0; }
.cab-card-title {
  font-size: 16px; font-weight: var(--fw-semibold); color: var(--tx-primary); margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-card-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--tx-tertiary);
  margin: 0; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.cab-card-badge {
  font-size: 13px; font-weight: var(--fw-semibold); padding: 6px 13px;
  border-radius: var(--radius-8); white-space: nowrap; flex-shrink: 0;
}
.cab-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cab-act {
  width: 38px; height: 38px; border-radius: var(--radius-8); padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bd-medium); background: var(--surface-card); color: var(--tx-secondary);
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.cab-act:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-hover); }
.cab-act svg { width: 18px; height: 18px; }

/* ─── Severity badges: насичені, з тонким inset-бордером ─── */
.sev-low      { background: #D7EEEF; color: #00565E; box-shadow: inset 0 0 0 1px rgba(0,118,128,0.18); }
.sev-moderate { background: #F6E9C9; color: #6F540D; box-shadow: inset 0 0 0 1px rgba(196,162,78,0.35); }
.sev-high     { background: #F9E2C9; color: #7A4612; box-shadow: inset 0 0 0 1px rgba(196,125,62,0.35); }
.sev-critical { background: #F9D9D9; color: #8F1F1F; box-shadow: inset 0 0 0 1px rgba(196,78,78,0.35); }
.sev-extreme  { background: #F1CFCF; color: #661111; box-shadow: inset 0 0 0 1px rgba(148,50,50,0.40); }
.sev-clean    { background: #D7EEEF; color: #007680; box-shadow: inset 0 0 0 1px rgba(0,118,128,0.18); }
.sev-none     { background: #ECF1F3; color: #4A5B66; box-shadow: inset 0 0 0 1px rgba(12,31,40,0.08); }

/* ─── States ─── */
.cab-empty, .cab-loading { text-align: center; padding: 60px 20px; color: var(--tx-tertiary); font-size: 15px; }
.cab-loading::before {
  content: ''; display: block; width: 26px; height: 26px; margin: 0 auto 14px;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
  border-radius: 50%; animation: cabSpin .7s linear infinite;
}
@keyframes cabSpin { to { transform: rotate(360deg); } }
.cab-more-wrap { text-align: center; margin-top: var(--sp-6); }
.cab-more {
  padding: 11px 28px; border-radius: var(--radius-12); font-size: 14px; font-weight: var(--fw-semibold);
  border: 1.5px solid var(--bd-medium); background: var(--surface-card); color: var(--accent);
  cursor: pointer; transition: all var(--t-base) var(--ease); font-family: inherit;
}
.cab-more:hover { border-color: var(--accent); background: var(--surface-hover); }

/* ─── Responsive ─── */
@media (max-width: 760px) {
  .cab-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .cab-stat-value { font-size: 28px; }
  .cab-head h1 { font-size: 24px; }
  .cab-controls { flex-direction: column; align-items: stretch; }
  .cab-filters { justify-content: stretch; }
  .cab-filter { flex: 1; text-align: center; }
}
@media (max-width: 560px) {
  .cab-wrap { padding: var(--sp-2) var(--sp-4) 60px; }
  .cab-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .cab-card-icon { display: none; }
  .cab-card-main { width: 100%; }
  .cab-card-title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 16px; line-height: 1.3; }
  .cab-card-meta { font-size: 12px; line-height: 1.45; margin-top: 3px; }
  .cab-card-badge { order: 3; align-self: flex-start; }
  .cab-card-actions { order: 4; margin-left: auto; }
  .cab-stats { grid-template-columns: 1fr 1fr; }
}

/* ─── Monitoring: пряме додавання (v12) ─── */
.mon-add { margin: 0 0 var(--sp-8); }
.mon-add-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mon-add-input {
  flex: 1; min-width: 220px; height: 48px; padding: 0 16px; font-size: 15px;
  border: 1.5px solid var(--bd-medium); border-radius: var(--radius-12);
  background: var(--surface-card); color: var(--tx-primary); outline: none;
  transition: border-color var(--t-base) var(--ease); font-family: inherit;
  text-transform: uppercase;
}
.mon-add-input:focus { border-color: var(--accent); }
.mon-add-input::placeholder { color: var(--tx-tertiary); }
.mon-add-date { flex: 0 1 190px; min-width: 160px; text-transform: none; font-variant-numeric: tabular-nums; }
.mon-add-btn { height: 48px; padding: 0 28px; border-radius: var(--radius-12); font-size: 15px; }
.mon-add-hint { font-family: var(--font-mono); font-size: 11px; color: var(--tx-tertiary); margin: 8px 0 0; letter-spacing: .01em; }
@media (max-width: 560px) { .mon-add-form { flex-direction: column; } .mon-add-date { flex: 1; } }

/* ─── Monitoring add: mobile polish (v12.1) ─── */
.mon-add-btn { justify-content: center; }
@media (max-width: 560px) {
  .mon-add-input { height: 52px; font-size: 16px; padding: 0 18px; }
  .mon-add-btn { height: 52px; width: 100%; }
  .mon-add-date { -webkit-appearance: none; appearance: none; }
}

/* ─── Monitoring add: iOS date fix (v12.2) ─── */
@media (max-width: 560px) {
  .mon-add-input { height: 54px; min-height: 54px; font-size: 16px; padding: 0 18px; }
  .mon-add-date {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center;
    height: 54px; min-height: 54px; width: 100%;
    background: var(--surface-card);
  }
  .mon-add-date::-webkit-date-and-time-value { text-align: left; }
}

/* ─── Monitoring add: date placeholder (v12.3) ─── */
.mon-add-date { position: relative; }
.mon-add-date:invalid::before {
  content: 'ДД.ММ.РРРР — дата народження';
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--tx-tertiary); font-size: 15px; pointer-events: none;
}
.mon-add-date:invalid::-webkit-datetime-edit { color: transparent; }
.mon-add-date:focus::-webkit-datetime-edit { color: var(--tx-primary); }
.mon-add-date:valid::before { content: none; }

/* ─── Page typography rhythm (v12.4) ─── */
.cab-h2 {
  font-size: 17px; font-weight: var(--fw-semibold); color: var(--tx-primary);
  letter-spacing: -0.014em; margin: var(--sp-8) 0 var(--sp-4);
}
.cab-h2:first-of-type, .mon-add .cab-h2 { margin-top: 0; }
.cab-intro { font-size: 15px; line-height: 1.6; color: var(--tx-secondary); margin: 0 0 var(--sp-6); max-width: 640px; }
.mon-add { margin-bottom: var(--sp-10); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--bd-soft); }

/* ─── Telegram card (v12.5) ─── */
.cab-stat-link { text-decoration: none; cursor: pointer; }
.cab-tg-card {
  margin: var(--sp-4) 0 var(--sp-8); padding: var(--sp-4) 18px;
  background: var(--surface-card); border: 1px solid var(--bd-soft);
  border-radius: var(--radius-12); box-shadow: var(--shadow-xs);
}
.cab-tg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-tg-note { font-size: 13px; font-weight: var(--fw-medium); }
.cab-tg-note.is-ok { color: var(--accent); }
.cab-tg-note.is-err { color: var(--sev-crit); }
.cab-tg-text { margin: var(--sp-2) 0; font-size: 14px; line-height: 1.55; color: var(--tx-primary); }
.cab-tg-btn { display: inline-flex; align-items: center; gap: 8px; }
.cab-tg-msg { margin-top: var(--sp-2); font-size: 13px; color: var(--sev-crit); }

/* ─── Date placeholder: mobile-only (v12.6) ─── */
@media (min-width: 561px) {
  .mon-add-date:invalid::before { content: none; }
  .mon-add-date:invalid::-webkit-datetime-edit { color: var(--tx-tertiary); }
}

/* ─── Empty states with CTA (v12.7) ─── */
.cab-empty-title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--tx-primary); margin: 0 0 6px; }
.cab-empty-sub { font-size: 14px; color: var(--tx-secondary); margin: 0 0 var(--sp-5); line-height: 1.55; }
.cab-empty .cab-gate-btn { font-size: 14px; padding: 11px 24px; }
.mon-add-hint.is-err { color: var(--sev-crit); font-weight: var(--fw-medium); }

/* ─── Monitoring alerts (v12.9) ─── */
.mon-alert { flex-direction: column; align-items: stretch; }
.mon-alert.is-unseen { border-left: 3px solid var(--accent); }
.mon-alert-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mon-alert-pib { color: var(--tx-primary); font-weight: var(--fw-semibold); }
.mon-alert-side { display: flex; align-items: center; gap: 8px; }
.mon-alert-date { font-family: var(--font-mono); font-size: 12px; color: var(--tx-tertiary); font-variant-numeric: tabular-nums; }
.mon-alert-added { margin-top: 6px; font-size: 14px; color: var(--tx-primary); line-height: 1.5; }
.mon-alert-added ul { margin: 4px 0 0; padding-left: 18px; }
.mon-alert-removed { color: var(--tx-secondary); font-size: 13px; margin-top: 4px; }
.mon-alert-score { margin-top: 6px; }