/* AMP — дизайн по исходникам Stitch (check_list/design/stitch/stitch: admin_dashboard, login_page).
   Значения перенесены из Tailwind-разметки макетов 1:1. Bootstrap 5 — только сетка и утилиты. */

/*TOKENS*/
:root { --st-primary: #0d7ff2; --st-primary-soft: rgba(13,127,242,.1); --st-bg: #f5f7f8; --st-surface: #fff; --st-surface-muted: #f8fafc; --st-border: #e2e8f0; --st-border-soft: #f1f5f9; --st-input-border: #d1d5db; --st-text: #1e293b; --st-heading: #0f172a; --st-muted: #64748b; --st-subtle: #94a3b8; --st-sidebar: #0f172a; --st-sidebar-hover: #1e293b; --st-sidebar-border: #1e293b; --st-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --st-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); --st-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); --st-shadow-primary: 0 10px 15px -3px rgba(13,127,242,.2), 0 4px 6px -4px rgba(13,127,242,.2); }
:root[data-theme="dark"] { --st-bg: #101922; --st-surface: #0f172a; --st-surface-muted: rgba(30,41,59,.5); --st-border: #1e293b; --st-border-soft: #1e293b; --st-input-border: #374151; --st-text: #e2e8f0; --st-heading: #fff; --st-sidebar: #000; --st-sidebar-hover: #1e293b; }

/*BASE*/
body { font-family: 'Manrope', system-ui, sans-serif; background: var(--st-bg); color: var(--st-text); }
a { color: var(--st-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.material-icons { vertical-align: middle; }

/*LAYOUT*/
.app { display: flex; min-height: 100vh; }
.app__main { flex: 1; margin-left: 16rem; min-width: 0; }
.app__content { padding: 2rem; }

/*SIDEBAR*/
.sidebar { width: 16rem; background: var(--st-sidebar); color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; transition: transform .2s; }
.sidebar__brand { padding: 1.5rem; display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.sidebar__logo { background: var(--st-primary); padding: .5rem; border-radius: .5rem; display: flex; color: #fff; }
.sidebar__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.sidebar__nav { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.sidebar__section { padding: 2.5rem 1rem .25rem; font-size: .75rem; font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: .1em; }
.sidebar__link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; color: var(--st-subtle); font-weight: 500; text-decoration: none; transition: all .15s; background: none; border: 0; width: 100%; text-align: left; }
.sidebar__link .material-icons { font-size: .875rem; }
.sidebar__link:hover { color: #fff; background: var(--st-sidebar-hover); }
.sidebar__link--active, .sidebar__link--active:hover { background: var(--st-primary); color: #fff; }
.sidebar__footer { padding: 1rem; border-top: 1px solid var(--st-sidebar-border); }

/*TOPBAR*/
.topbar { height: 4rem; background: var(--st-surface); border-bottom: 1px solid var(--st-border); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: sticky; top: 0; z-index: 40; }
.topbar__crumbs { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--st-muted); }
.topbar__crumbs .material-icons { font-size: .75rem; }
.topbar__current { color: var(--st-heading); font-weight: 500; }
.topbar__link { color: var(--st-muted); text-decoration: none; }
.topbar__link:hover { color: var(--st-primary); }
.topbar__menu { display: none; background: none; border: 0; color: var(--st-muted); padding: 0; margin-right: .5rem; }
.topbar__right { display: flex; align-items: center; gap: 1.5rem; }
.topbar__divider { width: 1px; height: 2rem; background: var(--st-border); }
.topbar__user { display: flex; align-items: center; gap: .75rem; text-align: right; }
.topbar__name { font-size: .875rem; font-weight: 700; color: var(--st-text); margin: 0; }
.topbar__role { font-size: .625rem; font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: -.025em; margin: 0; }
.topbar__icon { background: none; border: 0; padding: 0; color: var(--st-subtle); transition: color .15s; }
.topbar__icon:hover { color: var(--st-primary); }

/*AVATAR*/
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--st-primary-soft); color: var(--st-primary); font-size: .75rem; font-weight: 700; }
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: .625rem; }
.avatar--lg { width: 5rem; height: 5rem; font-size: 1.5rem; }

/*ORG TREE — визуальное оргдерево, коннекторы псевдоэлементами*/
.org { overflow-x: auto; padding: 1.5rem; }
.org__level { display: flex; justify-content: center; margin: 0; padding: 1.25rem 0 0; position: relative; }
.org > .org__level { padding-top: 0; }
.org__level .org__level::before { content: ''; position: absolute; top: 0; left: 50%; height: 1.25rem; border-left: 1px solid var(--st-border); }
.org__item { list-style: none; position: relative; padding: 1.25rem .5rem 0; text-align: center; }
.org__item::before, .org__item::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 1.25rem; border-top: 1px solid var(--st-border); }
.org__item::after { right: auto; left: 50%; border-left: 1px solid var(--st-border); }
.org__item:only-child { padding-top: 0; }
.org__item:only-child::before, .org__item:only-child::after { display: none; }
.org__item:first-child::before, .org__item:last-child::after { border: 0; }
.org__item:last-child::before { border-right: 1px solid var(--st-border); border-radius: 0 .5rem 0 0; }
.org__item:first-child::after { border-radius: .5rem 0 0 0; }
.org > .org__level > .org__item { padding-top: 0; }
.org > .org__level > .org__item::before, .org > .org__level > .org__item::after { display: none; }
.org__node { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1rem; min-width: 13rem; max-width: 16rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: .75rem; box-shadow: var(--st-shadow-sm); text-align: left; text-decoration: none; color: var(--st-text); transition: box-shadow .15s, border-color .15s; }
.org__node:hover { box-shadow: var(--st-shadow-md); border-color: var(--st-primary); color: var(--st-text); }
.org__name { font-size: .875rem; font-weight: 700; color: var(--st-heading); line-height: 1.25; }
.org__position { font-size: .75rem; color: var(--st-muted); }

/*PROFILE*/
.profile { text-align: center; }
.profile__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; color: var(--st-heading); margin: 1rem 0 .25rem; }
.profile__position { font-size: .875rem; color: var(--st-muted); margin: 0 0 1rem; }
.profile__meta { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; border-top: 1px solid var(--st-border-soft); }
.profile__meta li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; font-size: .875rem; border-bottom: 1px solid var(--st-border-soft); }
.profile__label { color: var(--st-muted); }
.person { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; text-decoration: none; color: var(--st-text); border-top: 1px solid var(--st-border-soft); transition: background .15s; }
.person:first-child { border-top: 0; }
.person:hover { background: var(--st-surface-muted); color: var(--st-text); }
.person__name { font-size: .875rem; font-weight: 600; color: var(--st-heading); }
.person__position { font-size: .75rem; color: var(--st-muted); }
.st-empty { padding: 2rem 1.5rem; text-align: center; color: var(--st-subtle); font-size: .875rem; }
.st-empty .material-icons { display: block; font-size: 2rem; margin-bottom: .5rem; }

/*BRANDS*/
.brand-tile { display: block; padding: 1.5rem; text-decoration: none; color: var(--st-text); height: 100%; }
.brand-tile:hover { text-decoration: none; color: var(--st-text); }
.brand-tile__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.brand-tile__icon { width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--st-primary-soft); color: var(--st-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.125rem; }
.brand-tile__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; color: var(--st-heading); margin-bottom: .75rem; }
.brand-tile__lead { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.person__meta { margin-left: auto; text-align: right; font-size: .75rem; color: var(--st-muted); }

/*TASKS*/
.task-row { align-items: flex-start; }
.task-row__icon { width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: var(--st-surface-muted); color: var(--st-subtle); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-row__icon .material-icons { font-size: 1.125rem; }
.task-row__icon--red { background: #fee2e2; color: #dc2626; }
.task-row__main { min-width: 0; flex: 1; }
.task-row__flame { font-size: 1rem; color: #f97316; margin-right: .25rem; vertical-align: -3px; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tabs__item { padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; color: var(--st-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .375rem; }
.tabs__item:hover { background: var(--st-surface-muted); color: var(--st-text); text-decoration: none; }
.tabs__item--active, .tabs__item--active:hover { background: var(--st-primary-soft); color: var(--st-primary); }

/*FORM FIELDS*/
.st-label { display: block; font-size: .875rem; font-weight: 600; color: var(--st-text); margin-bottom: .5rem; }
.st-hint { font-size: .75rem; color: var(--st-muted); margin-top: .375rem; }

/*PAGE HEAD*/
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.page-head__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: var(--st-heading); margin: 0; }
.page-head__subtitle { font-size: .875rem; color: var(--st-muted); margin: .25rem 0 0; }
.page-head__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/*CARD*/
.st-card { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: .75rem; box-shadow: var(--st-shadow-sm); overflow: hidden; transition: box-shadow .15s; }
.st-card--hover:hover { box-shadow: var(--st-shadow-md); }
.st-card__head { padding: 1.5rem; border-bottom: 1px solid var(--st-border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.st-card__title { font-size: 1.125rem; font-weight: 700; color: var(--st-heading); margin: 0; }
.st-card__body { padding: 1.5rem; }

/*TABLE*/
.st-table { width: 100%; text-align: left; border-collapse: collapse; }
.st-table th { padding: 1rem 1.5rem; font-size: .75rem; font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: .05em; background: var(--st-surface-muted); white-space: nowrap; }
.st-table td { padding: 1rem 1.5rem; font-size: .875rem; color: var(--st-text); border-top: 1px solid var(--st-border-soft); vertical-align: middle; }
.st-table tbody tr { transition: background .15s; }
.st-table tbody tr:hover { background: rgba(248,250,252,.5); }
.st-table__strong { font-weight: 600; color: var(--st-heading); }
.st-table__muted { color: var(--st-muted); }
.st-table__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; white-space: nowrap; }
.st-table__row--off td { opacity: .55; }

/*BADGE*/
.st-badge { display: inline-flex; align-items: center; padding: .25rem .5rem; font-size: .625rem; font-weight: 700; border-radius: .25rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.st-badge--blue { background: #dbeafe; color: #2563eb; }
.st-badge--green { background: #d1fae5; color: #059669; }
.st-badge--amber { background: #fef3c7; color: #d97706; }
.st-badge--red { background: #fee2e2; color: #dc2626; }
.st-badge--slate { background: #f1f5f9; color: #475569; }
.st-badge--pill { border-radius: 9999px; }

/*BUTTON*/
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 700; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: all .15s; white-space: nowrap; line-height: 1.25rem; }
.st-btn .material-icons { font-size: .875rem; }
.st-btn--primary { background: var(--st-primary); color: #fff; box-shadow: var(--st-shadow-primary); }
.st-btn--primary:hover { background: rgba(13,127,242,.9); color: #fff; }
.st-btn--secondary { background: var(--st-surface); border-color: var(--st-border); color: var(--st-text); box-shadow: var(--st-shadow-sm); }
.st-btn--secondary:hover { background: var(--st-surface-muted); color: var(--st-text); }
.st-btn--danger { background: var(--st-surface); border-color: var(--st-border); color: #dc2626; box-shadow: var(--st-shadow-sm); }
.st-btn--danger:hover { background: #fef2f2; color: #dc2626; }
.st-btn--sm { padding: .375rem .75rem; font-size: .8125rem; }
.st-btn--block { width: 100%; padding: .875rem 1rem; position: relative; }
.st-btn--block .st-btn__icon { position: absolute; left: .75rem; font-size: 1.25rem; }

/*FORM*/
.st-input { display: block; width: 100%; padding: .5rem .75rem; font-size: .875rem; color: var(--st-heading); background: var(--st-surface); border: 1px solid var(--st-input-border); border-radius: .5rem; transition: border-color .2s, box-shadow .2s; }
.st-input:focus { outline: none; border-color: var(--st-primary); box-shadow: 0 0 0 2px var(--st-primary); }
.st-input::placeholder { color: var(--st-subtle); }
.st-input--auto { width: auto; }
.st-field { position: relative; }
.st-field__icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--st-subtle); font-size: 1.25rem; pointer-events: none; }
.st-field .st-input { padding-left: 2.5rem; }

/*ALERT*/
.st-alert { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem; border: 1px solid; margin-bottom: 1.5rem; }
.st-alert .material-icons { font-size: 1.25rem; }
.st-alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.st-alert--danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.st-alert--warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.st-alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/*AUTH*/
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth__box { width: 100%; max-width: 28rem; }
.auth__logo { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.auth__logo-icon { background: var(--st-primary); padding: .5rem; border-radius: .5rem; display: flex; color: #fff; }
.auth__logo-icon .material-icons { font-size: 1.875rem; }
.auth__name { font-size: 1.25rem; font-weight: 700; color: var(--st-heading); line-height: 1.25; margin: 0; }
.auth__tagline { font-size: .75rem; color: var(--st-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.auth__card { background: var(--st-surface); border-radius: .75rem; box-shadow: var(--st-shadow-xl); border: 1px solid var(--st-border-soft); padding: 2.5rem; }
.auth__title { font-size: 1.5rem; font-weight: 700; color: var(--st-heading); margin: 0; }
.auth__lead { color: var(--st-muted); margin: .25rem 0 2rem; }
.auth__foot { margin-top: 2rem; text-align: center; font-size: .75rem; color: var(--st-subtle); display: flex; align-items: center; justify-content: center; gap: .25rem; }
.auth__foot .material-icons { font-size: .875rem; color: #10b981; }

/*RESPONSIVE*/
@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .app--nav-open .sidebar { transform: none; }
    .app__main { margin-left: 0; }
    .topbar { padding: 0 1rem; }
    .topbar__menu { display: inline-flex; }
    .app__content { padding: 1.5rem 1rem; }
}
@media (max-width: 576px) {
    .auth__card { padding: 2rem 1.5rem; }
    .topbar__user > div { display: none; }
}