/* Správa: login, história, nastavenia. Only tokens from app.css; every custom class starts with ad-. */

/* ---------- shared ---------- */
.ad-link { color: var(--fg); }
.ad-link:hover { color: var(--accent-text); }
.ad-break { overflow-wrap: anywhere; }
.ad-busy { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
.ad-head-text { min-width: 0; }

/* password input with show/hide toggle */
.ad-pw { position: relative; display: flex; min-width: 0; }
.ad-pw .input { padding-right: 46px; }
.ad-pw-toggle.btn {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 42px; min-height: 40px; height: auto;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent; color: var(--fg-3);
}
.ad-pw-toggle.btn:hover { background: transparent; color: var(--fg); }

/* ---------- login ---------- */
.ad-login { width: 100%; max-width: 380px; }
.ad-login .card { box-shadow: var(--shadow); }
.ad-login .card-body { padding: 28px 24px 24px; }
.ad-login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.ad-login-title { margin-bottom: 18px; }
.ad-login-note { margin-top: 16px; text-align: center; font-size: 12px; color: var(--fg-3); }
@media (max-width: 420px) {
  .ad-login .card-body { padding: 22px 18px 18px; }
}

/* ---------- history: filters ---------- */
.ad-filters { align-items: flex-end; gap: 10px 12px; }
.ad-filters .field { flex: none; }
.ad-filters .input, .ad-filters .select { width: 100%; min-width: 0; flex: none; }
.ad-filters .ad-f-date { width: 152px; }
.ad-filters .ad-f-sel { width: 168px; }
.ad-filters .ad-f-search { flex: 1 1 200px; }
.ad-filters .search { min-width: 0; flex: none; }
.ad-filters .seg button { min-height: 34px; }
.ad-filters > .error-text { flex-basis: 100%; }
.ad-f-actions { display: flex; gap: 8px; align-items: flex-end; order: 10; }
.ad-ftoggle { display: none; }
.ad-ftoggle .badge { height: 20px; padding: 0 7px; }

@media (max-width: 720px) {
  .ad-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; align-items: end;
  }
  .ad-filters .ad-f-date, .ad-filters .ad-f-sel, .ad-filters .ad-f-search { width: auto; }
  .ad-f-range, .ad-f-actions, .ad-filters > .error-text { grid-column: 1 / -1; }
  .ad-filters .seg { display: flex; width: 100%; }
  .ad-filters .seg button { flex: 1 0 auto; min-height: 40px; padding: 4px 8px; }
  .ad-f-actions { order: 0; }
  .ad-f-actions .btn { flex: 1; }
  .ad-ftoggle { display: inline-flex; }
  .ad-filters:not(.open) .ad-f-more { display: none; }
}
@media (max-width: 420px) {
  .ad-filters .seg button { padding: 4px 5px; font-size: 13px; }
}

/* ---------- history: KPI + results ---------- */
.ad-kpis { margin-bottom: 16px; }
@media (max-width: 600px) {
  .ad-kpis .ad-kpi-profit { order: -1; grid-column: 1 / -1; }
  .ad-kpis .ad-kpi-profit .kpi-value { font-size: 24px; }
}

.ad-hist-table .table th, .ad-hist-table .table td { padding-left: 8px; padding-right: 8px; }
.ad-hist-table .table th:first-child, .ad-hist-table .table td:first-child { padding-left: 16px; }
.ad-hist-table .table th:last-child, .ad-hist-table .table td:last-child { padding-right: 16px; }
.ad-hist-table .table td { vertical-align: top; }
.ad-hist-table .table td.num { white-space: nowrap; }
.ad-h-match { min-width: 150px; }
.ad-h-pick { min-width: 84px; }
.ad-h-acc { min-width: 96px; }
.ad-h-reason { max-width: 120px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-h-foot { flex-wrap: wrap; }

.ad-hist-list { display: none; }
.ad-hrow { align-items: flex-start; }
.ad-hrow:hover { text-decoration: none; }
.ad-hrow .title { color: var(--fg); }
.ad-hrow-pick { color: var(--fg-2); font-size: 13px; }
.ad-hrow-meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
.ad-hrow-acc { display: inline-flex; align-items: center; min-width: 0; }
.ad-hrow-acc .platform-tag { font-weight: 550; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ad-hrow-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: none; max-width: 48%; text-align: right; color: var(--fg);
}

/* Table vs. cards depends on the space the results get (sidebar + narrow window counts too). */
.ad-h-results { container-type: inline-size; }
@container (max-width: 880px) {
  .ad-hist-table { display: none; }
  .ad-hist-list { display: flex; }
}

/* ---------- settings layout ---------- */
/* Mobile first: section nav is a horizontal chip row; from 1200 px it becomes a sticky side column. */
.ad-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-sections { min-width: 0; max-width: 940px; }
.ad-section { scroll-margin-top: 24px; }
.ad-section:focus { outline: none; }

.ad-snav {
  display: flex; gap: 6px; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.ad-snav::-webkit-scrollbar { display: none; }
.ad-snav button {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg-2);
  font-weight: 550; text-align: left; cursor: pointer; white-space: nowrap;
}
.ad-snav button:hover { background: var(--surface-3); color: var(--fg); }
.ad-snav button.active {
  background: var(--accent-soft); color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

@media (max-width: 900px) {
  .ad-snav { margin: 0 -16px; padding: 0 16px 2px; }
  .ad-section { scroll-margin-top: calc(var(--topbar-h) + 16px); }
}
@media (min-width: 1200px) {
  .ad-settings { gap: 24px; }
  .ad-settings.has-nav { grid-template-columns: 196px minmax(0, 1fr); }
  .ad-snav { position: sticky; top: 24px; flex-direction: column; gap: 2px; overflow: visible; padding: 0; }
  .ad-snav button { gap: 10px; padding: 8px 10px; border-color: transparent; border-radius: var(--radius-sm); background: transparent; }
  .ad-snav button.active { border-color: transparent; }
}

/* my account */
.ad-logout-row { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .ad-logout-row .btn { width: 100%; }
}
.ad-check { min-height: 40px; }

/* users */
.ad-users { container-type: inline-size; }
.ad-mob { display: none; }
.ad-off td, .ad-off .main-col { opacity: 0.6; }
.ad-user-name { white-space: nowrap; }
.ad-desk .table th { white-space: normal; }
.ad-user-badges { margin-top: 6px; gap: 6px; }
@container (max-width: 640px) {
  .ad-desk { display: none; }
  .ad-mob { display: flex; }
}

/* generated password */
.ad-gen { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ad-gen .input { flex: 1 1 180px; min-width: 0; letter-spacing: 0.02em; }

/* platforms (container query: the card can be narrow even on desktop) */
.ad-plats { display: flex; flex-direction: column; container-type: inline-size; }
.ad-plat {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr) 84px auto;
  gap: 10px 12px; align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.ad-plat:last-child { border-bottom: none; }
.ad-plat.ad-dirty { border-left-color: var(--accent); background: var(--surface-2); }
.ad-plat.ad-archived .ad-p-name .input,
.ad-plat.ad-archived .ad-p-url .input { color: var(--fg-3); }
.ad-p-actions { display: flex; align-items: center; gap: 12px; padding-top: 24px; }
.ad-color {
  width: 100%; height: 40px; padding: 3px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.ad-color::-webkit-color-swatch-wrapper { padding: 0; }
.ad-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.ad-color::-moz-color-swatch { border: none; border-radius: 4px; }
@container (max-width: 700px) {
  .ad-plat { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; }
  .ad-p-url { grid-column: 1 / -1; }
  .ad-p-actions { padding-top: 22px; justify-content: space-between; }
}

/* general */
@media (min-width: 601px) {
  .ad-narrow { max-width: 280px; }
}

/* audit */
.ad-audit-list { margin: 0; padding: 0; list-style: none; }
.ad-audit { align-items: flex-start; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.ad-audit-time { flex: none; width: 96px; padding-top: 1px; white-space: nowrap; }
.ad-audit-sum { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .ad-audit { flex-direction: column; gap: 2px; }
  .ad-audit-time { width: auto; }
}