/* Flipio UI — classes .fl-*. Цвета, шрифты, отступы и радиусы берутся из tokens.css (генерируется из tokens.json). */

/* ---------- base ---------- */
.fl, .fl * { box-sizing: border-box; }
.fl {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 24px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}
.fl h1, .fl h2, .fl h3, .fl h4 { margin: 0; font-family: var(--font-display); color: var(--ink); }
.fl p { margin: 0; }
.fl a:not(.fl-btn):not(.fl-nav-item):not(.fl-chip):not(.fl-toast__action) { color: var(--navy); text-decoration: none; }
.fl a:not(.fl-btn):not(.fl-nav-item):not(.fl-chip):not(.fl-toast__action):hover { color: var(--navy-hover); text-decoration: underline; text-underline-offset: 3px; }
.fl a.fl-btn, .fl a.fl-nav-item, .fl a.fl-chip { text-decoration: none; }
.fl-only-dark { display: none !important; }
[data-theme="dark"] .fl-only-dark { display: block !important; }
[data-theme="dark"] .fl-only-light { display: none !important; }
.fl .num { font-variant-numeric: tabular-nums; }
.fl .muted { color: var(--ink-muted); }
.fl :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); }
.fl .fl-icon { width: 20px; height: 20px; flex: none; }
.fl .fl-icon--sm { width: 16px; height: 16px; }
.fl .fl-icon--lg { width: 24px; height: 24px; }

/* ---------- Button ---------- */
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: 500 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer;
  color: var(--ink); background: transparent;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out;
  text-decoration: none;
}
.fl-btn:hover { text-decoration: none; }
.fl-btn--primary { background: var(--navy); color: var(--ink-on-navy); }
.fl-btn--primary:hover { background: var(--navy-hover); color: var(--ink-on-navy); }
[data-theme="dark"] .fl-btn--primary { background: var(--green); color: var(--ink-on-green); }
[data-theme="dark"] .fl-btn--primary:hover { background: var(--green-hover); color: var(--ink-on-green); }
.fl-btn--accent { background: var(--green); color: var(--ink-on-green); }
.fl-btn--accent:hover { background: var(--green-hover); color: var(--ink-on-green); }
.fl-btn--secondary { background: var(--surface-raised); border-color: var(--border-input); color: var(--ink); }
.fl-btn--secondary:hover { background: var(--surface-subtle); }
.fl-btn--ghost { color: var(--ink); }
.fl-btn--ghost:hover { background: var(--navy-soft); }
.fl-btn--danger { background: var(--danger); color: var(--ink-on-danger); }
.fl-btn--danger:hover { filter: brightness(.92); }
.fl-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; border-radius: 8px; }
.fl-btn--lg { height: 48px; padding: 0 var(--space-5); font-size: 16px; font-weight: 600; }
.fl-btn--icon { width: 40px; padding: 0; }
.fl-btn--icon.fl-btn--sm { width: 32px; }
.fl-btn--block { width: 100%; }
.fl-btn:disabled, .fl-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.fl-btn .fl-icon { width: 20px; height: 20px; }
.fl-btn--sm .fl-icon { width: 16px; height: 16px; }

/* ---------- Field / Input / Select ---------- */
.fl-field { display: flex; flex-direction: column; gap: 6px; }
.fl-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.fl-label .req { color: var(--danger); }
.fl-hint { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.fl-input, .fl-select, .fl-textarea {
  width: 100%; height: 40px; padding: 0 var(--space-3);
  font: 400 15px/24px var(--font-sans); color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--border-input); border-radius: var(--radius-md);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.fl-textarea { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }
.fl-input::placeholder, .fl-textarea::placeholder { color: var(--ink-muted); }
.fl-input:hover, .fl-select:hover, .fl-textarea:hover { border-color: var(--ink-muted); }
.fl-input:focus, .fl-select:focus, .fl-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); outline: none; }
.fl-input:disabled, .fl-select:disabled { opacity: .45; background: var(--surface-subtle); }
.fl-field--error .fl-input, .fl-field--error .fl-select { border-color: var(--danger); }
.fl-field--error .fl-hint { color: var(--danger); display: flex; gap: 6px; align-items: center; }
.fl-input-wrap { position: relative; display: flex; align-items: stretch; }
.fl-input-wrap .fl-input { padding-left: 40px; }
.fl-input-wrap .fl-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-muted); pointer-events: none; }
.fl-input-wrap .fl-input-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); pointer-events: none; }
.fl-input-wrap--suffix .fl-input { padding-left: var(--space-3); padding-right: 48px; }
.fl-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.fl-input--lg, .fl-select--lg { height: 48px; font-size: 16px; }
.fl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fl-fieldset { display: flex; flex-direction: column; gap: var(--space-4); }
.fl-fieldset__title { font: 700 18px/26px var(--font-display); color: var(--ink); }
.fl-fieldset__desc { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin-top: -8px; }

/* ---------- Choice: checkbox, radio, switch ---------- */
.fl-choice { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/24px var(--font-sans); color: var(--ink); cursor: pointer; }
.fl-choice input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--border-input); background: var(--surface-raised); border-radius: var(--radius-sm); cursor: pointer; transition: background-color .15s, border-color .15s; display: grid; place-content: center; }
.fl-choice input[type="radio"] { border-radius: var(--radius-full); }
.fl-choice input:hover { border-color: var(--ink-muted); }
.fl-choice input:checked { background: var(--navy); border-color: var(--navy); }
[data-theme="dark"] .fl-choice input:checked { background: var(--green); border-color: var(--green); }
.fl-choice input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 12px; background: var(--ink-on-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }
[data-theme="dark"] .fl-choice input[type="checkbox"]:checked::after { background: var(--ink-on-green); }
.fl-choice input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-on-navy); }
[data-theme="dark"] .fl-choice input[type="radio"]:checked::after { background: var(--ink-on-green); }
.fl-choice input:disabled { opacity: .45; }
.fl-choice--switch input { width: 40px; height: 24px; border-radius: var(--radius-full); border: 0; background: var(--border-input); position: relative; }
.fl-choice--switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; transition: transform .15s ease-out; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.fl-choice--switch input:checked { background: var(--navy); }
[data-theme="dark"] .fl-choice--switch input:checked { background: var(--green); }
.fl-choice--switch input:checked::before { transform: translateX(16px); }
.fl-choice--switch input:checked::after { content: none; }
.fl-choice__desc { display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }

/* ---------- Badge ---------- */
.fl-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 500 12px/16px var(--font-sans); white-space: nowrap; background: var(--surface-subtle); color: var(--ink); border: 1px solid var(--border); }
.fl-badge .fl-icon { width: 14px; height: 14px; }
.fl-badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.fl-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.fl-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.fl-badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.fl-badge--navy { background: var(--navy-soft); color: var(--navy); border-color: transparent; }
.fl-badge--green { background: var(--green); color: var(--ink-on-green); border-color: transparent; }
.fl-badge--pill { border-radius: var(--radius-full); padding: 0 10px; }
.fl-badge--lg { height: 28px; font-size: 13px; padding: 0 10px; }
.fl-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fl-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-input); background: var(--surface-raised); font: 500 13px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.fl-chip:hover { background: var(--surface-subtle); }
.fl-chip--on { background: var(--navy); color: var(--ink-on-navy); border-color: var(--navy); }
[data-theme="dark"] .fl-chip--on { background: var(--green); color: var(--ink-on-green); border-color: var(--green); }

/* ---------- Card ---------- */
.fl-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.fl-card--flat { box-shadow: none; }
.fl-card--hover { transition: box-shadow .15s ease-out, border-color .15s ease-out; cursor: pointer; }
.fl-card--hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.fl-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.fl-card__title { font: 700 18px/26px var(--font-display); color: var(--ink); }
.fl-card__subtitle { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.fl-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.fl-card--object { padding: 0; overflow: hidden; }
.fl-card--object .fl-card__media { height: 160px; background: var(--navy-soft); display: grid; place-items: center; color: var(--navy); position: relative; }
.fl-card--object .fl-card__body { padding: var(--space-4); }
.fl-card__media .fl-badge { position: absolute; top: 12px; left: 12px; }
.fl-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; }
.fl-feature-icon--green { background: var(--green); color: var(--ink-on-green); }

/* ---------- Stat ---------- */
.fl-stat { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fl-stat__label { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fl-stat__value { font: 800 32px/36px var(--font-display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-stat__value--sm { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.fl-stat__delta { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/20px var(--font-sans); }
.fl-stat__delta--up { color: var(--green-text); }
.fl-stat__delta--down { color: var(--danger); }
.fl-stat__delta .fl-icon { width: 16px; height: 16px; }
.fl-stat__foot { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.fl-stat--brand { background: var(--surface-brand); border-color: transparent; color: var(--ink-on-brand); }
.fl-stat--brand .fl-stat__label, .fl-stat--brand .fl-stat__foot { color: rgba(255,255,255,.72); }
.fl-stat--brand .fl-stat__value { color: var(--ink-on-brand); }
.fl-stat--brand .fl-stat__delta--up { color: var(--green); }
.fl-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6); }
.fl-stat-grid .fl-stat__value { font-size: 28px; line-height: 32px; white-space: nowrap; }
.fl-stat__delta { white-space: nowrap; }
.fl-meter { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.fl-meter > span { display: block; height: 100%; background: var(--green-text); border-radius: 3px; }
[data-theme="dark"] .fl-meter > span { background: var(--green); }

/* ---------- Table ---------- */
.fl-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.fl-table th { text-align: left; font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 10px var(--space-4); background: var(--surface-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
.fl-table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.fl-table tr:last-child td { border-bottom: 0; }
.fl-table tbody tr:hover td { background: var(--surface-subtle); }
.fl-table .num, .fl-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-table .pos { color: var(--green-text); font-weight: 500; }
.fl-table .neg { color: var(--danger); font-weight: 500; }
.fl-table td.strong { font-weight: 500; }
.fl-table--compact td { padding: 8px var(--space-3); font-size: 13px; }
.fl-table--compact th { padding: 8px var(--space-3); }
.fl-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); box-shadow: var(--shadow-sm); }
.fl-table-wrap .fl-table { border: 0; border-radius: 0; box-shadow: none; }
.fl-table-wrap__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.fl-table-wrap__title { font: 700 18px/26px var(--font-display); }

/* ---------- Tabs ---------- */
.fl-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.fl-tab { position: relative; padding: 10px 0 12px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fl-tab:hover { color: var(--ink); }
.fl-tab[aria-selected="true"] { color: var(--ink); }
.fl-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); border-radius: 1px; }
[data-theme="dark"] .fl-tab[aria-selected="true"]::after { background: var(--green); }
.fl-tab .fl-badge { height: 20px; font-size: 11px; }
.fl-segmented { display: inline-flex; padding: 3px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); gap: 2px; }
.fl-segmented button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.fl-segmented button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Navbar (site) ---------- */
.fl-navbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--border); }
.fl-navbar__logo { display: flex; align-items: center; height: 32px; }
.fl-navbar__logo img { height: 32px; display: block; }
.fl-navbar__links { display: flex; gap: var(--space-6); }
.fl-navbar__links a { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.fl-navbar__links a:hover { color: var(--navy); text-decoration: none; }
.fl-navbar__actions { display: flex; gap: var(--space-2); align-items: center; }
.fl-navbar--dark { background: var(--surface-brand); border-color: rgba(255,255,255,.12); }
.fl-navbar--dark .fl-navbar__links a { color: var(--ink-on-brand); }

/* ---------- Sidebar + app shell ---------- */
.fl-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100%; background: var(--surface-subtle); }
.fl-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-6); }
.fl-sidebar__logo { padding: 0 var(--space-3); height: 28px; display: flex; align-items: center; }
.fl-sidebar__logo img { height: 28px; }
.fl-sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.fl-sidebar__group-title { font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 0 var(--space-3); margin-bottom: 6px; }
.fl-nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 var(--space-3); border-radius: 8px; font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.fl-nav-item:hover { background: var(--surface-subtle); text-decoration: none; color: var(--ink); }
.fl-nav-item[aria-current="page"] { background: var(--navy-soft); color: var(--navy); }
.fl-nav-item .fl-icon { width: 20px; height: 20px; }
.fl-nav-item .fl-badge { margin-left: auto; }
.fl-sidebar__user { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: var(--space-2) var(--space-3); border-radius: 8px; }
.fl-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--green); color: var(--ink-on-green); display: grid; place-items: center; font: 700 12px/1 var(--font-display); flex: none; }
.fl-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.fl-main { padding: var(--space-6) var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.fl-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.fl-page-head h1 { font: 700 32px/40px var(--font-display); letter-spacing: -0.01em; }
.fl-page-head .crumbs { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin-bottom: 4px; }
.fl-topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--border); }

/* ---------- Toast ---------- */
.fl-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 380px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--ink-inverse); box-shadow: var(--shadow-lg); font: 400 14px/20px var(--font-sans); }
.fl-toast__title { font-weight: 600; }
.fl-toast__text { opacity: .8; }
.fl-toast .fl-icon { color: #81f288; margin-top: 1px; }
[data-theme="dark"] .fl-toast .fl-icon { color: #1b7f38; }
.fl-toast--warning .fl-icon { color: #fdb022; }
[data-theme="dark"] .fl-toast--warning .fl-icon { color: #b45309; }
.fl-toast--danger .fl-icon { color: #f97066; }
[data-theme="dark"] .fl-toast--danger .fl-icon { color: #c4281c; }
.fl-toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 0; display: grid; place-items: center; }
.fl-toast__action { margin-top: 6px; display: inline-block; font-weight: 600; color: #81f288; }
[data-theme="dark"] .fl-toast__action { color: #1b7f38; }

/* ---------- Layout helpers ---------- */
.fl-container { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 var(--space-6); }
.fl-section { padding: var(--space-16) 0; }
.fl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
.fl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
.fl-row { display: flex; align-items: center; gap: var(--space-3); }
.fl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.fl-divider { height: 1px; background: var(--border); }