/* Шаблон портала веб-студии: левое меню, контент, карточки, формы и вход. */

:root{
    --bg:#f4f6fb;
    --panel:#ffffff;
    --border:#e4e8f0;
    --text:#263040;
    --muted:#7a8494;
    --accent:#4c6ef5;
    --accent-dark:#3b5bdb;
    --green:#1a9e5c;
    --green-bg:#e7f6ee;
    --red:#e0525a;
    --red-bg:#fdecec;
    --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
    --sidebar-w:260px;

    /* SlimSelect приводим к виду нативных полей портала. */
    --ss-border-color:var(--border);
    --ss-border-radius:8px;
    --ss-font-color:var(--text);
    --ss-focus-color:var(--accent);
    --ss-primary-color:var(--accent);
    --ss-main-height:38px;
    --ss-search-height:38px;
}

*{box-sizing:border-box}

/* ---------- Каркас портала ---------- */
body.portal{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.portal-layout{display:flex;min-height:100vh}

.portal-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
    background:#0f172a;color:#cbd5e1;
    display:flex;flex-direction:column;padding:20px 16px;overflow-y:auto;
}
.portal-brand{
    display:flex;align-items:center;gap:12px;
    padding:4px 8px 20px;margin-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.portal-brand__logo{
    width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto;
}
.portal-brand__title{color:#fff;font-weight:700;font-size:15px}
.portal-brand__sub{color:#94a3b8;font-size:12px}

.portal-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.portal-nav__item{
    display:block;padding:10px 12px;border-radius:9px;
    color:#cbd5e1;text-decoration:none;font-size:13.5px;font-weight:600;transition:.15s;
}
.portal-nav__item:hover{background:rgba(255,255,255,.06);color:#fff}
.portal-nav__item.is-active{background:var(--accent);color:#fff}
.portal-nav__item--logout{margin-top:18px;color:#fca5a5}
.portal-nav__item--logout:hover{background:rgba(224,82,90,.16);color:#fff}

.portal-user{
    display:flex;align-items:center;gap:10px;
    padding:12px 10px;margin-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:10px;text-decoration:none;color:inherit;transition:.15s;
}
.portal-user:hover{background:rgba(255,255,255,.06)}
.portal-user__edit{margin-left:auto;flex:0 0 auto;color:#94a3b8}
.portal-user:hover .portal-user__edit{color:#fff}
.portal-user__avatar{
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;
}
.portal-user__info{min-width:0}
.portal-user__name{color:#fff;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-user__login{color:#94a3b8;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.portal-main{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:24px 28px 40px}
.portal-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.portal-topbar__title{margin:0;font-size:20px;font-weight:700}
.portal-roles{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.portal-role{
    font-size:12px;font-weight:600;color:var(--accent);
    background:#eef2ff;border:1px solid #dbe3ff;border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.portal-content{width:100%}
.portal-content > .card{max-width:880px}

/* ---------- Карточки и типографика ---------- */
.card{
    background:var(--panel);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:24px 26px;
}
.card h2{font-size:15px;margin:0 0 16px;font-weight:700}
.page-title{font-size:18px;font-weight:700;margin:0 0 16px}
.portal-muted{color:var(--muted)}
.section-title{
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
    margin:26px 0 14px;padding-top:20px;border-top:1px solid var(--border)
}
.section-title:first-of-type{margin-top:0;padding-top:0;border-top:none}

/* ---------- Формы ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid .span2{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11px;color:var(--muted)}
input[type=text],input[type=email],input[type=password]{
    width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
    background:#fff;color:var(--text);font-size:14px;outline:none;transition:.15s
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,110,245,.12)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.btn{
    border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;
    background:var(--accent);color:#fff;cursor:pointer;transition:.15s
}
.btn:hover{background:var(--accent-dark)}

/* ---------- SlimSelect: соответствие нативным полям форм ---------- */
/* Обёртка .ss-main рендерится рядом с select, а список .ss-content — в body,
   поэтому стили задаём глобально. Цвета, рамка, радиус и высота — через
   переменные --ss-* в :root (см. выше), здесь только шрифт. */
.ss-main,.ss-content{font-size:14px;font-family:inherit}

/* ---------- Сообщения ---------- */
.alert{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:13px;line-height:1.45}
.alert.ok{background:var(--green-bg);color:var(--green);border:1px solid #c7ead6}
.alert.err{background:var(--red-bg);color:var(--red);border:1px solid #f6d0d2}
.alert .title{font-weight:700;display:block;margin-bottom:2px}

/* ---------- Страница входа ---------- */
body.auth-body{
    margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:var(--bg);color:var(--text);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.auth-wrap{width:100%;max-width:420px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
.auth-brand__logo{
    width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:0 0 auto;
}
.auth-brand h1{font-size:19px;margin:0}
.auth-brand__sub{color:var(--muted);font-size:12px}
.auth-card{
    background:var(--panel);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:26px 28px;
}

/* Формы авторизации Bitrix (.bx-auth) */
.auth-card .bx-auth{font-size:14px}
.auth-card .bx-auth-title{font-size:16px;font-weight:700;margin-bottom:8px}
.auth-card .bx-auth-note{color:var(--muted);font-size:13px;margin-bottom:16px}
.auth-card .bx-auth-table{width:100%;border-collapse:collapse}
.auth-card .bx-auth-table tbody,
.auth-card .bx-auth-table tr,
.auth-card .bx-auth-table td{display:block;width:100%}
.auth-card .bx-auth-table td{padding:0}
.auth-card .bx-auth-table td:empty{display:none}
.auth-card .bx-auth-label{font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 6px}
.auth-card .bx-auth-table tr:first-child .bx-auth-label{margin-top:0}
.auth-card .bx-auth-input{
    width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
    background:#fff;color:var(--text);font-size:14px;outline:none;transition:.15s;
}
.auth-card .bx-auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,110,245,.12)}
.auth-card .authorize-submit-cell{margin-top:18px}
.auth-card .authorize-submit-cell input[type=submit]{
    width:100%;border:none;border-radius:8px;padding:11px 22px;font-size:14px;font-weight:600;
    background:var(--accent);color:#fff;cursor:pointer;transition:.15s;
}
.auth-card .authorize-submit-cell input[type=submit]:hover{background:var(--accent-dark)}
.auth-card a{color:var(--accent);text-decoration:none}
.auth-card a:hover{text-decoration:underline}
.auth-card p{margin:12px 0 0}
.auth-card img{max-width:100%;margin:8px 0}
.auth-card input[type=checkbox]{margin-right:6px}
.auth-card label{font-size:13px;color:var(--text)}

/* Сообщения Bitrix */
.auth-card .errortext,
.auth-card font.errortext{
    display:block;background:var(--red-bg);color:var(--red);border:1px solid #f6d0d2;
    border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 16px;
}
.auth-card .notetext,
.auth-card font.notetext{
    display:block;background:var(--green-bg);color:var(--green);border:1px solid #c7ead6;
    border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 16px;
}

/* ---------- Адаптив ---------- */
@media (max-width:900px){
    .portal-sidebar{
        position:static;width:100%;flex-direction:column;padding:16px;
    }
    .portal-layout{flex-direction:column}
    .portal-nav{flex-direction:row;flex-wrap:wrap;flex:none}
    .portal-nav__item--logout{margin-top:0}
    .portal-main{margin-left:0;padding:18px}
}
@media (max-width:640px){
    .grid{grid-template-columns:1fr}
    .card{padding:18px}
}