/* ==========================================================================
   RentSyst — кабінет агрегаторів (партнерів)
   Один файл, без збірки. Порядок секцій:
   1. Шрифти  2. Токени  3. Reset  4. Сітка  5. Каркас  6. Навігація
   7. Картки  8. Типографіка  9. Форми  10. Кнопки  11. Таблиці
   12. Бейджі  13. Аватар  14. Пагінація  15. Алерти  16. Гостьові сторінки
   17. Футер  18. Помилки  19. Утиліти
   ========================================================================== */

/* 1. Шрифти ============================================================== */

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/poppins-v5-latin-300.woff2) format("woff2");
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-v5-latin-regular.woff2) format("woff2");
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/poppins-v5-latin-500.woff2) format("woff2");
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins-v5-latin-600.woff2) format("woff2");
}

@font-face {
    font-family: fico;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/icons/fico.woff2) format("woff2");
}

/* Іконковий шрифт. У кабінеті використовуються лише ці дев'ять гліфів —
   решта ~200 залишилися в CRM і сюди не переносяться. */
.fico:before {
    font-family: fico;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fico-checked2:before { content: "\e023"; }
.fico-edit:before     { content: "\e040"; }
.fico-edit2:before    { content: "\e041"; }
.fico-left:before     { content: "\e059"; }
.fico-remove:before   { content: "\e087"; }
.fico-remove2:before  { content: "\e088"; }
.fico-right:before    { content: "\e08f"; }
.fico-search:before   { content: "\e090"; }
.fico-settings:before { content: "\e091"; }

/* 2. Токени ============================================================== */

:root {
    --c-accent: #5867dd;
    --c-accent-hover: #4a58c8;
    --c-accent-soft: #eef0fc;

    --c-bg: #f4f5fa;
    --c-surface: #fff;
    --c-border: #e8e9f3;
    --c-border-strong: #d5d7e6;

    --c-text: #33344a;
    --c-text-soft: #5f6180;
    --c-muted: #8b8ba7;

    --c-success: #22a06b;
    --c-success-soft: #e6f5ee;
    --c-warning: #b7791f;
    --c-warning-soft: #fdf3e2;
    --c-danger: #d64550;
    --c-danger-soft: #fdecee;
    --c-info: #2c7fb8;
    --c-info-soft: #e6f2f9;

    --radius: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(51, 52, 74, .06);
    --shadow: 0 2px 10px rgba(51, 52, 74, .07);
    --shadow-lg: 0 8px 30px rgba(51, 52, 74, .1);

    --gutter: 12px;
    --space: 20px;

    --font: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 3. Reset =============================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.3; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

button { font-family: inherit; font-size: inherit; }

table { border-collapse: collapse; border-spacing: 0; }

/* 4. Сітка ===============================================================
   Мінімальна заміна 12-колонкової сітки Bootstrap 3: у в'юшках уже стоять
   класи row / col-*, тому імена збережені, а реалізація — на flex. */

.container {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--gutter) * -1);
}

/* Ширина живе в одноклясових правилах, щоб модифікатори col-md-* нижче
   мали ту саму специфічність і вигравали за порядком, а не програвали
   складнішому селектору. */
.row > [class*="col-"] { padding: 0 var(--gutter); }

[class*="col-"] { width: 100%; }

@media (min-width: 576px) {
    .col-sm-2  { width: 16.6667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.3333%; }
    .col-sm-5  { width: 41.6667%; }
    .col-sm-6  { width: 50%; }
}

@media (min-width: 768px) {
    .col-md-2  { width: 16.6667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.3333%; }
    .col-md-5  { width: 41.6667%; }
    .col-md-6  { width: 50%; }
}

@media (min-width: 992px) {
    .col-lg-2  { width: 16.6667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.3333%; }
    .col-lg-5  { width: 41.6667%; }
    .col-lg-6  { width: 50%; }
}

/* 5. Каркас ============================================================== */

.main { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1 0 auto; }

.content__wrap { padding-bottom: 40px; }

.content__main { padding: 28px 0 4px; }

.content__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.content__title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--c-text);
}

.content__body { padding-bottom: 24px; }

/* 6. Навігація =========================================================== */

/* Шапка: бренд ліворуч, обліковий запис і вихід праворуч.
   Раніше кабінет не мав жодного брендування, а Logout стояв
   серед розділів, ніби це ще одна сторінка. */
.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: var(--c-text);
    font-weight: 500;
    letter-spacing: -.2px;
}

.brand:hover { text-decoration: none; color: var(--c-text); }

.brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--c-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}

.brand__name { font-size: 15px; }

.brand__sub {
    color: var(--c-muted);
    font-weight: 400;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__account {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text-soft);
    font-size: 13px;
    font-weight: 500;
}

.rnav {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.rnav .container { padding: 0 24px; }

.rnav__menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rnav__menu .item { position: relative; }

.rnav__menu .link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 15px 16px;
    color: var(--c-text-soft);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, background-color .15s;
}

.rnav__menu .link:hover {
    color: var(--c-accent);
    text-decoration: none;
    background: var(--c-accent-soft);
}

.rnav__menu .item--here .link {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

.rnav__menu .link .fico { font-size: 14px; }

/* Бургер: показується лише на вузьких екранах, розкриття — на :has(), без JS */
.burger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.burger__line {
    display: block;
    height: 2px;
    background: var(--c-text-soft);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

/* 7. Картки ============================================================== */

.plate {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space);
    margin-bottom: 16px;
}

.plate:last-child { margin-bottom: 0; }

.plate__head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}

.plate__title { font-size: 15px; font-weight: 500; }

.plate__hint {
    margin: 5px 0 0;
    color: var(--c-muted);
    font-size: 12px;
}

.plate__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
}

/* Логотип і піктограма стоять поруч, а не одне під одним стовпчиком */
.media-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 22px;
}

.media-item__label {
    margin-bottom: 8px;
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

/* Ключі доступу до API */
.cred-list { display: flex; flex-direction: column; gap: 10px; }

.cred {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cred__label {
    flex: 0 0 110px;
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 500;
}

.cred__value {
    flex: 1 1 260px;
    min-width: 0;
    padding: 8px 12px;
    overflow-x: auto;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.cred__value.is-masked { letter-spacing: 2px; }

/* 8. Типографіка ========================================================= */

.title { font-weight: 500; color: var(--c-text); }
.title-md { font-size: 26px; }

.text-muted { color: var(--c-muted); }
.small { font-size: 12px; }

.ttu-text { text-transform: uppercase; font-size: 12px; letter-spacing: .3px; }

.link { color: var(--c-accent); }

/* 9. Форми =============================================================== */

.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

.form-group > label,
.info-form-group > label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

.form-control {
    display: block;
    width: 100%;
    height: 38px;
    padding: 7px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
}

.form-control::placeholder { color: var(--c-muted); }

.form-control:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(88, 103, 221, .12);
}

.form-control:disabled,
.form-control[readonly] {
    background: #fafbfd;
    color: var(--c-text-soft);
}

select.form-control {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238b8ba7' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.info-form-group { margin-bottom: 18px; }
.info-form-group--right { display: flex; justify-content: flex-end; }
.info-form-group__button { align-items: flex-end; height: 100%; }

/* Yii ActiveForm: підказка, помилка, стан поля */
.help-block {
    display: block;
    margin-top: 5px;
    color: var(--c-danger);
    font-size: 12px;
}

.help-block:empty { display: none; }

/* У в'юшках підказка задана як `text-muted small` — Yii ставить її після
   поля, лишається дати їй відступ і не дати злитися з наступним полем. */
.hint-block,
.form-group > .text-muted.small,
.info-form-group .text-muted.small {
    display: block;
    margin-top: 5px;
    color: var(--c-muted);
    font-size: 12px;
    line-height: 1.4;
}

.has-error .form-control,
.has-error .form-input {
    border-color: var(--c-danger);
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(214, 69, 80, .12);
}

.has-success .form-control { border-color: var(--c-success); }

/* Пошук з іконкою всередині поля */
.search-row { position: relative; }
.search-row__input { padding-right: 38px; }

.search-row__btn {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 0 0;
    border: 0;
    cursor: pointer;
    color: var(--c-muted);
    transition: color .15s;
}

.search-row__btn:hover { color: var(--c-accent); }
.search-row__btn:focus { outline: 0; }
.search-row__btn .fico { font-size: 15px; }

/* Чекбокс */
.checkbox { margin: 4px 0 18px; }

.checkbox input[type="checkbox"],
.filter-bar__check input[type="checkbox"],
.form-check-input {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    accent-color: var(--c-accent);
    vertical-align: -2px;
    cursor: pointer;
}

.checkbox .label {
    color: var(--c-text-soft);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.form-inline { width: 100%; }

/* Панель фільтрів над таблицями (заявки компаній, локації) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.filter-bar__field { flex: 1 1 240px; min-width: 0; }
.filter-bar__field--wide { flex: 1 1 300px; }

.filter-bar__field .form-group { margin-bottom: 0; }

.filter-bar__label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

.filter-bar__checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    min-height: 38px;
}

.filter-bar__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--c-text-soft);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.filter-bar__check input { margin: 0; }

.filter-bar__actions { display: flex; gap: 8px; }

/* Пошукова форма локацій зібрана з row/col — вирівнюємо кнопки по низу */
.search-form .row { align-items: flex-end; }
.search-form .form-group { margin-bottom: 0; }
.search-form .col-md-2 { display: flex; gap: 8px; }
.search-form .col-md-2 .btn { flex: 1 1 auto; }

@media (max-width: 767px) {
    .search-form .row > [class*="col-"] { margin-bottom: 10px; }
}

/* 10. Кнопки ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}

.btn:hover {
    background: var(--c-accent-hover);
    color: #fff;
    text-decoration: none;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(88, 103, 221, .3);
}

.btn:disabled,
.btn.disabled { opacity: .55; pointer-events: none; }

/* Історичні модифікатори з в'юшок — колір уже базовий, тінь більше не потрібна */
.btn_blue { background: var(--c-accent); color: #fff; }
.btn_shadow { box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--c-accent); color: #fff; }

.btn-secondary {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text-soft);
}

.btn-secondary:hover {
    background: #fafbfd;
    border-color: var(--c-muted);
    color: var(--c-text);
}

/* Помітна, але вторинна дія: не сперечається з основною кнопкою форми,
   і водночас не губиться, як звичайна сіра. */
.btn-outline {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.btn-outline:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

.btn-success { background: var(--c-success); }
.btn-success:hover { background: #1c8a5b; }

.btn-warning { background: var(--c-warning); }
.btn-warning:hover { background: #9c6619; }

.btn-danger { background: var(--c-danger); }
.btn-danger:hover { background: #bd3a44; }

.btn-sm { min-height: 32px; padding: 6px 13px; font-size: 12px; }
.btn-xs { min-height: 26px; padding: 4px 10px; font-size: 11px; }

/* Іконкові дії в таблицях */
.actions-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    color: var(--c-muted);
    transition: background-color .15s, color .15s;
}

.action-btn:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    text-decoration: none;
}

.action-btn .fico { font-size: 15px; }

.action-btn[data-action="save"]:hover,
.action-btn[title="Accept company request"]:hover { background: var(--c-success-soft); color: var(--c-success); }

.action-btn[title="Deny company request"]:hover { background: var(--c-danger-soft); color: var(--c-danger); }

/* 11. Таблиці ============================================================ */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.relative { position: relative; }

.table {
    width: 100%;
    font-size: 13px;
}

.table th,
.table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr { border-bottom: 1px solid var(--c-border); }
.table tbody tr:last-child { border-bottom: 0; }

.table tbody tr:hover { background: #fafbfe; }

.table td { color: var(--c-text-soft); }

/* Колонка «Дії» тримається праворуч і не стискається */
.table th:last-child,
.table td:last-child { width: 1%; white-space: nowrap; }

.rent-table--center-cell th:last-child,
.rent-table--center-cell td:last-child { text-align: center; }

/* Таблиця маппінгу: поле вводу займає всю колонку, але не розтягує таблицю */
.mapping-table td .form-group { margin-bottom: 0; }
.mapping-table td:nth-child(2) { width: 45%; }

/* Поле відкривається кліком по собі, тож і виглядати має клікабельним */
.mapping-table .form-control[readonly] {
    cursor: text;
    transition: background-color .15s, border-color .15s;
}

.mapping-table .form-control[readonly]:hover {
    background: var(--c-surface);
    border-color: var(--c-accent);
}

/* Щільний варіант — списки з великою кількістю рядків (адмінка брокера) */
.table-compact th,
.table-compact td { padding: 8px 12px; }

.table-compact tbody tr:nth-child(even) { background: #fbfbfe; }
.table-compact tbody tr:hover { background: var(--c-accent-soft); }

/* Утиліти комірок: без них довгий email розсипається по літері,
   а числові колонки з'їдають половину ширини таблиці. */
.cell-num { width: 1%; white-space: nowrap; color: var(--c-muted); }

.cell-nowrap { width: 1%; white-space: nowrap; }

.cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-stack {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.table__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
}

.table__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text);
}

.table__search { margin-bottom: 4px; }

.grid-view { position: relative; }

/* Підсумок під таблицею: у CrmGridView сюди ж потрапляє селект
   кількості рядків, тож збираємо все в один рядок. */
.grid-view .summary,
.summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 2px 0;
    color: var(--c-muted);
    font-size: 12px;
}

/* CrmGridView кладе селект і текст в один div.total без відступів між ними */
.summary .total,
.total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.summary select,
.rent-table__show-count {
    height: 30px;
    padding: 2px 26px 2px 10px;
    appearance: none;
    background-color: var(--c-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238b8ba7' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    color: var(--c-text-soft);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.summary select:hover,
.rent-table__show-count:hover { border-color: var(--c-muted); }

.summary select:focus,
.rent-table__show-count:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(88, 103, 221, .12);
}

.grid-view .empty {
    padding: 28px 14px;
    color: var(--c-muted);
    text-align: center;
}

/* Yii під час pjax-оновлення вішає на контейнер напівпрозорий шар */
.grid-view.loading { opacity: .6; }

.round-image {
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-bg);
}

.round-image--small { width: 34px; height: 34px; }

/* 12. Бейджі ============================================================= */

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .2px;
    white-space: nowrap;
    text-align: center;
}

.badge-success   { background: var(--c-success-soft); color: var(--c-success); }
.badge-danger    { background: var(--c-danger-soft);  color: var(--c-danger); }
.badge-warning   { background: var(--c-warning-soft); color: var(--c-warning); }
.badge-info      { background: var(--c-info-soft);    color: var(--c-info); }
.badge-secondary { background: #eef0f5;               color: var(--c-text-soft); }

/* Статуси заявок компаній — Yii віддає їх звичайним текстом у комірці */
.status-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
}

.status-pill--pending  { background: var(--c-warning-soft); color: var(--c-warning); }
.status-pill--accepted { background: var(--c-success-soft); color: var(--c-success); }
.status-pill--denied   { background: var(--c-danger-soft);  color: var(--c-danger); }

/* 13. Аватар ============================================================= */

.avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    max-width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.avatar--lg { width: 160px; height: 160px; }
.avatar--sm { width: 110px; height: 110px; }

/* Порожній стан більше не тримає 260px порожнечі: розмір задає модифікатор,
   а плейсхолдер вписується в нього. */
.avatar__preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.avatar__preview--custom { padding: 0; }

.avatar > a { display: block; width: 100%; height: 100%; }

.avatar__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-surface);
    box-shadow: var(--shadow);
    color: var(--c-text-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, color .15s, background-color .15s;
}

.avatar:hover .avatar__btn,
.avatar:focus-within .avatar__btn { opacity: 1; }

.avatar__btn:hover { color: var(--c-accent); }
.avatar__btn .fico { font-size: 13px; }

.avatar__btn--edit   { top: 8px; right: 8px; }
.avatar__btn--delete { top: 8px; right: 44px; }
.avatar__btn--delete:hover { color: var(--c-danger); }

/* Кнопка скасування кропу — показує її JS, разом з модалкою */
.avatar__btn--remove { display: none; }

.avatar__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* 14. Пагінація ========================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.pagination li > a,
.pagination li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius);
    background: var(--c-bg);
    color: var(--c-text-soft);
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.pagination li > a:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    text-decoration: none;
}

.pagination li.active > a,
.pagination li.active > span {
    background: var(--c-accent);
    color: #fff;
}

.pagination li.disabled > a,
.pagination li.disabled > span { opacity: .45; pointer-events: none; }

.pagination .fico { font-size: 11px; }

/* 15. Алерти ============================================================= */

.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 13px;
}

.alert:last-child { margin-bottom: 0; }

.alert-success { background: var(--c-success-soft); border-color: #c7e8d8; color: #17724c; }
.alert-danger  { background: var(--c-danger-soft);  border-color: #f5ccd0; color: #a5323b; }
.alert-warning { background: var(--c-warning-soft); border-color: #f0dcb8; color: #8a5b13; }
.alert-info    { background: var(--c-info-soft);    border-color: #c5e0ef; color: #216288; }

/* Тости, які показує JS замість Sweetalert2 */
.toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--c-text);
    color: #fff;
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    animation: toast-in .2s ease-out;
}

.toast--success { background: var(--c-success); }
.toast--error { background: var(--c-danger); }

.toast--hiding { opacity: 0; transition: opacity .2s; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* 16. Гостьові сторінки ================================================== */

.out {
    position: relative;
    z-index: 1;
    padding: 48px 20px 60px;
}

/* Декоративна пляма на фоні — та сама, що була, лише прив'язана до секції */
.login {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.login::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: -1;
    width: 900px;
    height: 460px;
    transform: translateX(-50%);
    background: url(../img/svg/login_bg.svg) center / contain no-repeat;
    opacity: .8;
    pointer-events: none;
}

.login_register::before { background-image: url(../img/svg/register_bg.svg); }

.login-content { text-align: center; margin-bottom: 22px; }

.login__title {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -.4px;
}

.login__text {
    margin: 10px auto 0;
    max-width: 420px;
    color: var(--c-text-soft);
    font-size: 13px;
}

.login-form { max-width: 420px; margin: 0 auto; }

.form-wrap {
    padding: 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.form-wrap .form-group { margin-bottom: 16px; }

/* Поля гостьових форм успадковують вигляд .form-control, щоб кабінет
   і вхід виглядали однаково */
.form-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.form-input::placeholder { color: var(--c-muted); }

.form-input:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(88, 103, 221, .12);
}

.form__btn { width: 100%; margin-top: 4px; }

.link-forgot {
    display: inline-block;
    margin: -4px 0 16px;
    color: var(--c-text-soft);
    font-size: 12px;
}

.link-forgot:hover { color: var(--c-accent); }

.form__recaptcha { margin-bottom: 16px; }
.form__recaptcha > div { max-width: 100%; overflow: hidden; }

.login-form__text {
    margin: 22px 0 10px;
    color: var(--c-text-soft);
    font-size: 13px;
    text-align: center;
}

.login-form__btn { width: 100%; margin-bottom: 10px; }

.login-form__note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
}

.login-form__note a { color: var(--c-text-soft); }
.login-form__note a:hover { color: var(--c-accent); }

/* 17. Футер ==============================================================
   Місто, світлофор і машинки. Раніше це рухав JS (js_road-layer,
   js_traffic-lights) — тепер лише CSS-анімації. */

.footer {
    flex-shrink: 0;
    position: relative;
    height: 204px;
    overflow: hidden;
    pointer-events: none;
}

.traffic {
    position: absolute;
    inset: auto 0 0;
    height: 204px;
}

.city-scene { position: relative; height: 204px; }

.city-back,
.city-front {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1229.6px;
    max-width: none;
    height: 204px;
}

.city-front { z-index: 2; }

/* Дорога: рухомий пунктир */
.city-road {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #8fd1ff 0 26px,
        transparent 26px 52px
    );
    opacity: .55;
    animation: road-move 1.4s linear infinite;
}

@keyframes road-move {
    to { background-position-x: -52px; }
}

/* Світлофор */
.traffic-lights__light { transition: fill .3s; }

.traffic-lights__light--red    { animation: tl-red    9s infinite; }
.traffic-lights__light--yellow { animation: tl-yellow 9s infinite; }
.traffic-lights__light--green  { animation: tl-green  9s infinite; }

@keyframes tl-red {
    0%, 40%   { fill: #6633cc; }
    41%, 100% { fill: #fff; }
}

@keyframes tl-yellow {
    0%, 40%   { fill: #fff; }
    41%, 50%  { fill: #f5b921; }
    51%, 100% { fill: #fff; }
}

@keyframes tl-green {
    0%, 50%   { fill: #fff; }
    51%, 95%  { fill: #3ec98a; }
    96%, 100% { fill: #fff; }
}

/* Машинки їдуть уздовж дороги */
.car-svg {
    position: absolute;
    bottom: 6px;
    left: 0;
    z-index: 3;
    max-width: none;
    animation: car-drive linear infinite;
}

.car-svg:nth-of-type(1) { animation-duration: 14s; animation-delay: 0s;   }
.car-svg:nth-of-type(2) { animation-duration: 19s; animation-delay: -6s;  }
.car-svg:nth-of-type(3) { animation-duration: 11s; animation-delay: -3s;  }
.car-svg:nth-of-type(4) { animation-duration: 23s; animation-delay: -14s; }

@keyframes car-drive {
    from { transform: translateX(-140px); }
    to   { transform: translateX(100vw); }
}

.wheel { transform-box: fill-box; transform-origin: center; animation: wheel-spin .6s linear infinite; }

@keyframes wheel-spin {
    to { transform: rotate(360deg); }
}

/* Пошана до системної налаштування «менше руху» */
@media (prefers-reduced-motion: reduce) {
    .city-road,
    .car-svg,
    .wheel,
    .traffic-lights__light { animation: none; }
}

/* 18. Сторінка помилки =================================================== */

.errro_404 { padding: 80px 20px; text-align: center; }

.errro_404__title { font-size: 30px; font-weight: 500; color: var(--c-text); }

.errro_404__text { margin-top: 10px; color: var(--c-text-soft); }

.errro_404__btn { margin-top: 22px; min-width: 150px; }

/* 19. Модалка кропу ====================================================== */

.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(33, 34, 50, .55);
}

.crop-modal.is-open { display: flex; }

.crop-modal__dialog {
    width: 100%;
    max-width: 460px;
    padding: 20px;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.crop-modal__title { margin-bottom: 14px; font-size: 16px; font-weight: 500; }

.crop-modal__stage {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 14px;
    overflow: hidden;
    background: #2c2d3d;
    border-radius: var(--radius);
    cursor: grab;
    touch-action: none;
}

.crop-modal__stage:active { cursor: grabbing; }

.crop-modal__stage canvas { display: block; width: 100%; height: 100%; }

.crop-modal__zoom { width: 100%; margin-bottom: 16px; accent-color: var(--c-accent); }

.crop-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* 20. Утиліти ============================================================ */

.is-hidden { display: none !important; }
.mb-3 { margin-bottom: 16px; }

/* 21. Адаптив ============================================================ */

@media (max-width: 991px) {
    .container { padding: 0 16px; }
    .rnav .container { padding: 0 16px; }
}

@media (max-width: 767px) {
    .content__main { padding: 20px 0 4px; }
    .content__title { font-size: 18px; }
    .plate { padding: 16px; }

    .burger { display: flex; margin-left: -10px; }

    .topbar__account { max-width: 120px; }

    .rnav { display: none; }
    .rnav.is-open { display: block; }

    .rnav__menu { flex-direction: column; }
    .rnav__menu .item { width: 100%; }

    .rnav__menu .link {
        padding: 12px 16px;
        border-bottom: 1px solid var(--c-border);
        border-left: 2px solid transparent;
    }

    .rnav__menu .item--here .link {
        border-bottom-color: var(--c-border);
        border-left-color: var(--c-accent);
        background: var(--c-accent-soft);
    }

    /* Бургер у стані «відкрито» */
    .burger.is-active .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.is-active .burger__line:nth-child(2) { opacity: 0; }
    .burger.is-active .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .footer, .traffic, .city-scene { height: 150px; }
    .city-back, .city-front { height: 150px; }
}

@media (max-width: 575px) {
    .out { padding: 28px 14px 40px; }
    .login__title { font-size: 23px; }
    .form-wrap { padding: 18px; }
    .table th, .table td { padding: 9px 10px; }
}