/* ============================================================
   Дизайн система на приложението „Домоуправител“
   ============================================================ */

:root {
    /* Палитра */
    --brand-50: #eef4ff;
    --brand-100: #dbe6ff;
    --brand-200: #bdd0ff;
    --brand-500: #3b6fe0;
    --brand-600: #2b57c4;
    --brand-700: #1f429b;
    --brand-900: #14265a;

    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-200: #e2e8f0;
    --ink-100: #f1f5f9;
    --ink-50: #f8fafc;

    --success: #0f9d58;
    --success-soft: #e7f6ee;
    --danger: #d92d20;
    --danger-soft: #fdeceb;
    --warning: #b54708;
    --warning-soft: #fef3e6;

    /* Форма */
    --radius-sm: .5rem;
    --radius: .75rem;
    --radius-lg: 1rem;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

    --sidebar-width: 264px;
    --topbar-height: 64px;

    /* Bootstrap override */
    --bs-primary: var(--brand-600);
    --bs-body-color: var(--ink-700);
    --bs-body-bg: var(--ink-50);
    --bs-border-color: var(--ink-200);
}

/* ---------- База ---------- */

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'tnum' 1;
    background: var(--ink-50);
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--brand-600);
    text-decoration: none;
}

    a:hover {
        color: var(--brand-700);
        text-decoration: underline;
    }

code {
    color: var(--ink-700);
    background: var(--ink-100);
    padding: .1rem .35rem;
    border-radius: .3rem;
    font-size: .85em;
}

/* Числата в таблиците се подравняват като табулирани цифри. */
.num {
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--brand-900) 0%, #101a3d 100%);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.75rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-content {
    padding: 1.75rem;
    flex: 1;
}

/* Тялото на менюто – на десктоп е винаги отворено и запълва сайдбара (футърът е долу). */
.sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto; /* при дълго меню се превърта то, а не се реже футърът */
}

.brand-row {
    display: flex;
    align-items: center;
}

    .brand-row .brand {
        flex: 1;
        min-width: 0;
    }

.sidebar-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    border-radius: var(--radius-sm);
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    font-size: 1.25rem;
    display: grid;
    place-items: center;
}

@media (max-width: 991.98px) {
    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        z-index: 30;
    }

    /* На телефон менюто е прибрано; отваря се от бутона и се затваря след избор. */
    .sidebar-body {
        display: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

        .sidebar-body.open {
            display: flex;
        }

    .brand-row .brand {
        border-bottom: 0;
        padding: .85rem 1rem;
    }

    .sidebar-footer {
        margin-top: 0;
    }

    /* Горната лента съдържа само датата, която на телефон е скрита – без нея няма
       празно бяло поле под менюто и втора „залепена“ лента при скролване. */
    .app-topbar {
        display: none;
    }

    .app-content {
        padding: 1.25rem 1rem;
    }
}

/* ---------- Навигация ---------- */

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.25rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    .brand:hover {
        color: #fff;
        text-decoration: none;
    }

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-500), #7c5cf0);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    box-shadow: var(--shadow-md);
}

.brand-text {
    line-height: 1.15;
}

    .brand-text strong {
        display: block;
        font-size: 1rem;
        font-weight: 600;
    }

    .brand-text span {
        font-size: .75rem;
        color: var(--ink-400);
    }

.nav-section {
    padding: 1rem 1.25rem .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    font-weight: 600;
}

.nav-links {
    padding: 0 .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

    .nav-links .nav-link {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .75rem;
        border-radius: var(--radius-sm);
        color: #cbd5e1;
        font-size: .925rem;
        transition: background-color .15s ease, color .15s ease;
    }

        .nav-links .nav-link:hover {
            background: rgba(255, 255, 255, .07);
            color: #fff;
            text-decoration: none;
        }

        .nav-links .nav-link.active {
            background: var(--brand-600);
            color: #fff;
            box-shadow: var(--shadow-sm);
        }

        .nav-links .nav-link i {
            font-size: 1.05rem;
            opacity: .9;
        }

        /* Броячи в менюто – нови сигнали и чакащи заявки, чакащо месечно напомняне. */
        .nav-links .nav-badge, .scope-list .nav-badge {
            min-width: 1.35rem;
            padding: .05rem .4rem;
            border-radius: 999px;
            background: var(--danger, #dc2626);
            color: #fff;
            font-size: .75rem;
            font-weight: 600;
            line-height: 1.2rem;
            text-align: center;
        }

/* Избор на обхват в менюто: един вход или „Всички входове“ (списъкът се разгъва под бутона,
   не като изскачащ прозорец – менюто се превърта и изскачащото би се изрязало). */
.scope-switcher {
    margin: 0 .75rem;
}

    .scope-switcher .scope-button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .55rem .7rem;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .07);
        color: #fff;
        font-weight: 600;
        font-size: .9rem;
        text-align: left;
    }

        .scope-switcher .scope-button:hover {
            background: rgba(255, 255, 255, .12);
        }

    .scope-switcher .scope-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .scope-switcher .scope-label small {
            display: block;
            font-weight: 400;
            font-size: .72rem;
            color: #94a3b8;
        }

.scope-list {
    margin-top: .35rem;
    padding: .3rem;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-lg);
    max-height: 22rem;
    overflow-y: auto;
}

    .scope-list .scope-search {
        margin-bottom: .3rem;
    }

    .scope-list .scope-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .4rem .55rem;
        border: 0;
        border-radius: .4rem;
        background: transparent;
        color: var(--ink-700);
        font-size: .875rem;
        text-align: left;
        text-decoration: none;
    }

        .scope-list .scope-item:hover {
            background: var(--ink-100);
        }

        .scope-list .scope-item.current {
            background: var(--brand-50);
            color: var(--brand-600);
            font-weight: 600;
        }

    .scope-list .scope-count {
        margin-left: auto;
        font-size: .75rem;
        color: var(--ink-500);
    }

    .scope-list .scope-dot {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--danger);
    }

    /* Администраторът вижда входовете на всички – под името чий е входът. */
    .scope-list .scope-owner {
        display: block;
        font-size: .7rem;
        font-weight: 400;
        color: var(--ink-500);
    }


.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    font-size: .75rem;
    color: var(--ink-500);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- Заглавие на страница ---------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

    .page-header h1 {
        font-size: 1.5rem;
        margin: 0;
    }

    .page-header .subtitle {
        color: var(--ink-500);
        font-size: .9rem;
        margin-top: .2rem;
    }

.page-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ---------- Раздели на входа ---------- */

/* Вариант C: на десктоп разделите са горната бяла лента – заемат мястото на .app-topbar (с датата) и залепват
   при превъртане. Лентата е първото в страницата; отрицателните полета я разпъват до краищата на .app-content. */
.app-main:has(.building-nav) .app-topbar {
    display: none;
}

.building-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: stretch;
    height: var(--topbar-height);
    margin: -1.75rem -1.75rem 1.5rem;
    padding: 0 1.25rem 0 1.75rem;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--ink-200); /* под табовете – активният ги покрива с чертата си */
}

.building-nav-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    max-width: 15rem;
    margin: .95rem 1rem .95rem 0;
    padding-right: 1rem;
    border-right: 1px solid var(--ink-200);
    color: var(--ink-900);
    font-weight: 600;
    white-space: nowrap;
}

    .building-nav-name span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.building-tabs {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .building-tabs::-webkit-scrollbar {
        display: none;
    }

    .building-tabs .building-tab-icon {
        padding-left: .7rem;
        padding-right: .7rem;
    }

/* Тесен десктоп – без иконите на табовете, за да се побират с името на входа. */
@media (max-width: 1279.98px) {
    .building-tabs .building-tab:not(.building-tab-icon) > i {
        display: none;
    }

    .building-tabs .building-tab {
        padding: 0 .6rem;
    }

    .building-nav-name {
        max-width: 10rem;
    }
}

/* Съвсем тесен десктоп – всички табове да се виждат, вместо името на входа (при няколко входа то е и в избора
   в менюто): на десктоп скрито превъртане настрани не се забелязва. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .building-nav-name {
        display: none;
    }
}

/* Телефон: горната лента я няма – разделите са долу, под палеца (.bottom-nav), а входът и разделът са в тъмната лента. */
@media (max-width: 991.98px) {
    .building-nav {
        display: none;
    }

    .app-content:has(.bottom-nav) {
        padding-bottom: calc(62px + 1.5rem + env(safe-area-inset-bottom));
    }

    .brand-row:has(.mobile-title) .brand {
        flex: 0 0 auto;
        padding-right: .5rem;
    }

    .brand-row:has(.mobile-title) .brand-text {
        display: none;
    }
}

.mobile-title {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-title {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        line-height: 1.2;
        color: #fff;
    }

        .mobile-title strong,
        .mobile-title small {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-title small {
            color: #aab6d3;
            font-size: .78rem;
        }
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid var(--ink-200);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .05);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: none;
    color: var(--ink-500);
    font-size: .7rem;
    font-weight: 500;
    text-decoration: none;
}

    .bottom-nav-item i {
        font-size: 1.2rem;
    }

    .bottom-nav-item.active {
        color: var(--brand-600);
    }

.more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(15, 23, 42, .3);
}

.more-sheet {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(62px + env(safe-area-inset-bottom) + .5rem);
    z-index: 39;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.more-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .85rem;
    border-radius: var(--radius-sm);
    background: var(--ink-50);
    color: var(--ink-900);
    font-weight: 500;
    text-decoration: none;
}

    .more-item i {
        color: var(--brand-600);
        font-size: 1.1rem;
    }

@media (min-width: 992px) {
    .bottom-nav,
    .more-backdrop,
    .more-sheet {
        display: none;
    }
}

/* Ред с бутоните на страница на вход – вместо голямо заглавие (разделът е маркиран в лентата). */
.page-toolbar {
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.25rem;
}

.month-picker {
    width: auto;
    flex-wrap: nowrap;
}

    .month-picker .form-control {
        width: 11.5rem;
        flex: 0 0 auto;
    }

.page-toolbar .month-picker {
    margin-right: auto; /* месецът вляво, действията вдясно */
}

/* Телефон: бутоните на реда да се събират на един ред под месеца. */
@media (max-width: 575.98px) {
    .page-toolbar {
        gap: .4rem;
    }

        .page-toolbar > .btn,
        .page-toolbar .more-actions > .btn {
            padding: .375rem .6rem;
            font-size: .85rem;
        }
}

/* „⋯“ – рядкото и опасното (изтриване), отделено от главното действие. */
.more-actions {
    position: relative;
}

.more-actions-backdrop {
    position: fixed;
    inset: 0;
    z-index: 14; /* натискане извън менюто го затваря */
}

.more-actions-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 15;
    min-width: 16rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* Чужд вход в админ режим – на кого е, преди да се промени нещо (под табовете, над съдържанието). */
.building-owner-line {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: -.5rem 0 1.25rem;
    padding: .25rem .7rem;
    font-size: .8rem;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 999px;
}

    .building-tabs .building-tab {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: 0 .8rem;
        border-bottom: 2px solid transparent;
        color: var(--ink-500);
        font-weight: 500;
        font-size: .925rem;
        white-space: nowrap;
        text-decoration: none;
    }

        .building-tabs .building-tab:hover {
            color: var(--ink-900);
        }

        .building-tabs .building-tab.active {
            color: var(--brand-600);
            border-bottom-color: var(--brand-600);
        }

/* ---------- Месечен чеклист на таблото ---------- */

.checklist {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    margin: 0 -.5rem;
    border-radius: var(--radius-sm);
    color: var(--ink-900);
    font-size: .875rem;
    text-decoration: none;
}

    .checklist-item:hover {
        background: var(--ink-50);
        color: var(--ink-900);
        text-decoration: none;
    }

    .checklist-item > i:first-child {
        font-size: 1.05rem;
        color: var(--ink-400);
        flex-shrink: 0;
    }

    .checklist-item.done > i:first-child {
        color: var(--success);
    }

    .checklist-item.done {
        color: var(--ink-500);
    }

    .checklist-item .bi-chevron-right {
        color: var(--ink-400);
        font-size: .8rem;
    }


/* ---------- Карти ---------- */

.card {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    background: #fff;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--ink-900);
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.surface {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}

/* Брой обитатели в списъка с обектите: − 3 + на един ред, без да разтяга колоната. */
.count-stepper {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .count-stepper .btn {
        --bs-btn-padding-x: .4rem;
        --bs-btn-padding-y: .05rem;
        line-height: 1.1;
        font-weight: 600;
    }

    .count-stepper .num {
        min-width: 1.5rem;
        text-align: center;
        font-weight: 600;
    }

/* Опасна зона (изтриване на вход) – червена рамка, за да не се бърка с обикновените настройки. */
.surface.danger-zone {
    border-color: #f1aeb5;
    background: #fff8f8;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .stat-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--brand-50);
    color: var(--brand-600);
    margin-bottom: .75rem;
}

    .stat-icon.success {
        background: var(--success-soft);
        color: var(--success);
    }

    .stat-icon.danger {
        background: var(--danger-soft);
        color: var(--danger);
    }

    .stat-icon.warning {
        background: var(--warning-soft);
        color: var(--warning);
    }

.stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
    font-weight: 600;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-top: .15rem;
}

.stat-hint {
    font-size: .8rem;
    color: var(--ink-400);
    margin-top: .15rem;
}

/* ---------- Таблици ---------- */

.data-table-wrap {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.data-table {
    margin: 0;
    font-size: .9rem;
}

    .data-table > thead > tr > th {
        background: var(--ink-100);
        color: var(--ink-500);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: 600;
        border-bottom: 1px solid var(--ink-200);
        padding: .7rem .85rem;
        white-space: nowrap;
    }

    .data-table > tbody > tr > td {
        padding: .7rem .85rem;
        border-bottom: 1px solid var(--ink-100);
        vertical-align: middle;
    }

    .data-table > tbody > tr:last-child > td {
        border-bottom: none;
    }

    .data-table > tbody > tr:hover {
        background: var(--ink-50);
    }

    .data-table > tfoot > tr > td {
        background: var(--ink-100);
        font-weight: 600;
        padding: .7rem .85rem;
        border-top: 1px solid var(--ink-200);
    }

.cell-strong {
    font-weight: 600;
    color: var(--ink-900);
}

.cell-muted {
    color: var(--ink-500);
    font-size: .85rem;
}

/* ---------- Значки ---------- */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--ink-100);
    color: var(--ink-700);
}

    .badge-soft.success {
        background: var(--success-soft);
        color: var(--success);
    }

    .badge-soft.danger {
        background: var(--danger-soft);
        color: var(--danger);
    }

    .badge-soft.info {
        background: var(--brand-50);
        color: var(--brand-600);
    }

.amount-positive {
    color: var(--success);
    font-weight: 600;
}

.amount-negative {
    color: var(--danger);
    font-weight: 600;
}

/* ---------- Празни състояния ---------- */

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px dashed var(--ink-200);
    border-radius: var(--radius);
}

    .empty-state .empty-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--brand-50);
        color: var(--brand-500);
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        margin: 0 auto 1rem;
    }

    .empty-state h3 {
        font-size: 1.05rem;
        margin-bottom: .35rem;
    }

    .empty-state p {
        color: var(--ink-500);
        max-width: 460px;
        margin: 0 auto 1.25rem;
        font-size: .9rem;
    }

/* ---------- Форми ---------- */

.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--ink-200);
    padding: .5rem .7rem;
    font-size: .9rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px var(--brand-100);
    }

.form-text {
    font-size: .8rem;
    color: var(--ink-500);
}

.form-section-title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
    font-weight: 700;
    margin-bottom: .75rem;
}

/* ---------- Бутони ---------- */

.btn {
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    padding: .5rem .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.btn-sm {
    padding: .3rem .6rem;
    font-size: .8rem;
}

.btn-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--brand-700);
        border-color: var(--brand-700);
    }

.btn-outline-secondary {
    color: var(--ink-700);
    border-color: var(--ink-200);
    background: #fff;
}

    .btn-outline-secondary:hover {
        background: var(--ink-100);
        color: var(--ink-900);
        border-color: var(--ink-200);
    }

.btn:focus {
    box-shadow: 0 0 0 3px var(--brand-100);
}

.btn-icon {
    padding: .35rem .5rem;
    line-height: 1;
}

/* ---------- Валидация ---------- */

.valid.modified:not([type=checkbox]) {
    border-color: var(--success);
}

.invalid {
    border-color: var(--danger) !important;
}

.validation-message {
    color: var(--danger);
    font-size: .8rem;
}

/* ---------- Помощни ---------- */

.divider {
    height: 1px;
    background: var(--ink-200);
    margin: 1.5rem 0;
}

.filter-bar {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.25rem;
}

/* ---------- Публични страници (/v/{slug}) ---------- */

.public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    display: flex;
    align-items: center;
}

.public-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.public-logo,
.public-logo:hover {
    text-decoration: none;
}

.public-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: var(--ink-900);
}

.public-content {
    flex: 1;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.public-footer {
    border-top: 1px solid var(--ink-200);
    padding: 1rem 0;
    font-size: .8rem;
    color: var(--ink-500);
}

.public-footer a {
    margin-left: .5rem;
}

.public-periods {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.public-periods a {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--ink-200);
    background: #fff;
    font-size: .85rem;
    color: var(--ink-700);
}

.public-periods a.active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* QR код – на екран в ъгъла на ведомостта, при печат до информацията за плащане. */
.qr-code svg {
    display: block;
}

.sheet-qr {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .75rem;
}

/* ---------- Месечен отчет по образеца от ЗУЕС ---------- */

.zues-report {
    font-size: .82rem;
    max-width: 900px;
    margin: 0 auto;
}

.zues-head {
    margin-bottom: .75rem;
}

.zues-title {
    font-size: .95rem;
    text-align: center;
    text-transform: uppercase;
    margin: .75rem 0 .25rem;
}

.zues-title span {
    text-transform: none;
    font-weight: 600;
}

.zues-period {
    text-align: center;
    font-weight: 600;
    background: var(--ink-100);
    padding: .2rem;
    margin-bottom: .5rem;
}

.zues-table th,
.zues-table td {
    vertical-align: middle;
    padding: .25rem .5rem;
}

.zues-table .zues-section th {
    background: var(--ink-100);
    font-weight: 700;
    text-align: left;
}

.zues-table .zues-group td {
    font-weight: 600;
}

.zues-table .zues-sub td:first-child {
    padding-left: 1.75rem;
}

.zues-table .zues-empty td {
    color: var(--ink-500);
}

.zues-table .zues-total td {
    background: var(--ink-50);
}

.zues-table .zues-info td {
    font-style: italic;
}

.zues-amount {
    text-align: right;
    white-space: nowrap;
    width: 7.5rem;
}

.zues-muted {
    color: var(--ink-500);
}

.zues-actions {
    width: 4.5rem;
    text-align: right;
}

.zues-num {
    display: inline-block;
    min-width: 1.6rem;
    font-weight: 600;
}

.zues-note {
    color: var(--ink-500);
    font-style: italic;
}

.zues-sign {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    font-weight: 600;
}

.zues-composer {
    font-weight: 400;
    color: var(--ink-500);
}

@media print {
    .zues-report {
        font-size: 9pt;
        max-width: none;
    }

    .zues-table th,
    .zues-table td {
        border: 1px solid #000 !important;
        padding: 2px 5px !important;
    }

    .zues-table .zues-section th,
    .zues-table .zues-total td,
    .zues-period {
        background: #e5e5e5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .zues-page {
        page: zues;
    }

    @page zues {
        size: A4 portrait;
    }
}

.public-announcements {
    border-left: 4px solid var(--warning);
    background: var(--warning-soft);
}

.public-announcements ul {
    padding-left: 1.2rem;
}

/* Дневник за почистване на публичното табло. */
.cleaning-box {
    border-left: 4px solid var(--success);
}

.cleaning-list {
    padding-left: 1.2rem;
}

/* ---------- Вход / регистрация ---------- */

.auth-card {
    max-width: 520px;
    margin: 2rem auto;
}

.sidebar-user {
    color: #cbd5e1;
}

.sidebar-user-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .sidebar-user-link:hover .sidebar-user-name {
        text-decoration: underline;
    }

.sidebar-user-name {
    font-weight: 600;
    color: #fff;
}

.sidebar-user-meta {
    font-size: .75rem;
    color: var(--ink-400);
}

.bulk-bar {
    background: var(--success-soft);
}

/* ---------- „Как да платя“ на публичната страница ---------- */

.pay-box {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    height: 100%;
}

.pay-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink-900);
}

.pay-code {
    font-family: 'Inter', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--brand-700);
}

.pay-option {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    height: 100%;
}

.pay-option h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* В „Моят апартамент“ кутията с кода е над опциите – не бива да се разтяга до цялата височина. */
.pay-panel .pay-box {
    height: auto;
}

/* Онлайн плащане през ePay.bg – най-бързият начин, затова е най-отгоре и открояващ се. */
.pay-online {
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* ---------- Връзка с ePay.bg в „Моят акаунт“ ---------- */

.epay-url {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .epay-url code {
        flex: 1;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: .78rem;
        background: var(--ink-50);
        border: 1px solid var(--ink-200);
        border-radius: var(--radius-sm);
        padding: .35rem .5rem;
    }

/* ---------- Живущи: сигнали, гласувания, кодове за достъп ---------- */

.badge-soft.warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.community-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink-700);
    background: #fff;
    border: 1px solid var(--ink-200);
    padding: .4rem .85rem;
    font-size: .9rem;
}

    /* Сив брой в раздел (напр. „2 отворени“ гласувания) – информация, не „чака отговор“. */
    .community-pills .pill-note {
        font-size: .78rem;
        font-weight: 500;
        opacity: .7;
    }

    .community-pills .nav-link.active {
        background: var(--brand-600);
        border-color: var(--brand-600);
        color: #fff;
    }

/* Табло: „Изисква внимание“ – всичко, което чака действие, на едно място. */
.attention-bar .attention-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--danger-soft);
    border-radius: 999px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}

    .attention-bar .attention-item:hover {
        border-color: var(--danger);
    }

/* Табло за много входове: стъпките на месеца като филтри („Без разходи 18“). */
.dashboard-filters .filter-chip {
    border: 1px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .85rem;
    line-height: 1.4;
    cursor: pointer;
}

    .dashboard-filters .filter-chip b {
        font-weight: 600;
        margin-left: .15rem;
    }

    .dashboard-filters .filter-chip:hover {
        border-color: var(--brand-200);
    }

    .dashboard-filters .filter-chip.active {
        background: var(--brand-50);
        border-color: var(--brand-500);
        color: var(--brand-700);
    }

.dashboard-toolbar .dashboard-search {
    width: 16rem;
    max-width: 100%;
}

.dashboard-toolbar .dashboard-group {
    width: auto;
}

/* Заглавен ред на група (град, квартал, домоуправител) в таблицата и над картите. */
.dashboard-table .group-row td {
    background: var(--ink-50);
    font-weight: 600;
    font-size: .85rem;
}

.group-title {
    color: var(--ink-700);
}

/* Групово начисляване: сметките за ток на всички входове без ведомост. */
.group-charge .charge-value {
    width: auto;
    flex-wrap: nowrap;
}

    .group-charge .charge-value input {
        width: 6.5rem;
    }

.group-charge .group-charge-check {
    width: 2rem;
}

/* Табло за много входове: ред на вход, колона на стъпка от месеца. */
/* Бутонът за сортиране изглежда като останалите заглавия (главни букви, същият шрифт). */
.dashboard-table .sort-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

/* Адресът под името – на един ред, за да не са високи редовете при 30 входа. */
.dashboard-table td:first-child .small {
    max-width: 16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-table .dashboard-open {
    font-weight: 600;
    text-decoration: none;
}

.dashboard-table td a {
    text-decoration: none;
}

/* Напомняне: текстът на SMS-а / личното съобщение точно както ще излезе – с новите редове. */
.reminder-preview {
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: .5rem;
    padding: .5rem .75rem;
}

/* Напомняне на входа: обобщението в един ред и картата на месечното напомняне (отлява черта, когато чака). */
.reminder-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--ink-700);
}

.monthly-card.waiting {
    border-left: 4px solid var(--danger);
}

/* Напомняне: колоната с отметките и лепкавата лента за избраните отдолу. */
.reminder-table .select-col {
    width: 2rem;
}

.selection-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding: .6rem .9rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: .75rem;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
}

/* Свиваемите входове в общото „Напомняне“ – името разгъва, не е линк. */
.reminder-table .debtors-group .group-toggle {
    color: var(--ink-900);
}

    .reminder-table .debtors-group .group-toggle:hover .cell-strong {
        text-decoration: underline;
    }

/* „Длъжници“: заглавен ред на всеки вход в общата таблица. */
.reminder-table .debtors-group td {
    background: var(--ink-50, #f8fafc);
    border-top: 2px solid var(--ink-200);
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.issue-card.issue-closed {
    opacity: .7;
}

.poll-results {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.poll-row.mine {
    font-weight: 600;
}

.poll-bar {
    height: 6px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .25rem;
}

    .poll-bar > div {
        height: 100%;
        background: var(--brand-500);
        border-radius: 999px;
    }

.access-code {
    font-size: 1rem;
    letter-spacing: .08em;
}

.access-input {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    text-align: center;
}

/* Листчета с кодове – само при печат, 3 колони, за рязане. */
.access-slips {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.access-slip {
    display: flex;
    gap: .5rem;
    align-items: center;
    border: 1px dashed #999;
    padding: .6rem;
    break-inside: avoid;
    font-size: 10pt;
}

.access-slip-body {
    flex: 1;
    min-width: 0;
}

.access-slip-title {
    font-weight: 600;
    font-size: 9pt;
}

.access-slip-ap {
    font-size: 12pt;
    font-weight: 700;
}

.access-slip-code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 16pt;
    font-weight: 700;
    letter-spacing: .1em;
    margin: .15rem 0;
}

@media print {
    .access-slips {
        display: grid !important;
    }
}

/* ---------- Помощ и обратна връзка ---------- */

.support-types {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.support-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-700);
    font-size: .9rem;
}

    .support-type.active {
        background: var(--brand-600);
        border-color: var(--brand-600);
        color: #fff;
    }

.support-message {
    white-space: pre-line;
}

.support-reply {
    background: var(--success-soft);
    border-radius: var(--radius-sm);
    padding: .6rem .8rem;
}

/* ---------- Ръководство ---------- */

.guide h2 {
    margin-bottom: .75rem;
}

.guide p {
    line-height: 1.6;
}

.guide section {
    scroll-margin-top: 5rem; /* котвите да не влизат под лепкавата лента */
}

/* Съдържанието остава видимо при скролване на дълъг текст. */
.guide-toc {
    position: sticky;
    top: 5rem;
}

    .guide-toc ol {
        margin: 0;
        padding-left: 1.1rem;
        font-size: .92rem;
    }

    .guide-toc li {
        margin-bottom: .35rem;
    }

.guide-steps {
    padding-left: 1.2rem;
}

    .guide-steps > li {
        margin-bottom: .85rem;
        line-height: 1.55;
    }

/* Съвет – жълта лента с крушка. */
.guide-tip {
    display: flex;
    gap: .6rem;
    background: var(--warning-soft, #fff8e6);
    border: 1px solid #f3e0a8;
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    font-size: .92rem;
    line-height: 1.5;
}

    .guide-tip i {
        color: #b98900;
        font-size: 1.1rem;
    }

/* Четирите стъпки на месеца – номер в кръгче и текст до него. */
.guide-month {
    display: grid;
    gap: .9rem;
}

.guide-month-step {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

    .guide-month-step .n {
        flex: 0 0 1.9rem;
        height: 1.9rem;
        border-radius: 50%;
        background: var(--brand-600);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 700;
    }

    .guide-month-step p {
        margin: .15rem 0 0;
        font-size: .94rem;
    }

.guide-cases dt {
    font-weight: 600;
    margin-top: .9rem;
}

.guide-cases dd {
    margin: .2rem 0 0;
    line-height: 1.55;
}

.guide-faq details {
    border-bottom: 1px solid var(--ink-200);
    padding: .6rem 0;
}

    .guide-faq details:last-child {
        border-bottom: 0;
    }

    .guide-faq summary {
        cursor: pointer;
        font-weight: 600;
    }

    .guide-faq p {
        margin: .5rem 0 0;
        font-size: .94rem;
    }

@media print {
    .guide section {
        break-inside: avoid;
        border: 0;
        box-shadow: none;
        padding: 0 0 1rem;
    }

    .guide-faq details {
        display: block;
    }

        .guide-faq details p {
            display: block !important;
        }
}

/* На телефон третата колона („Обичайно за“) би стеснила другите до нечетливост. */
@media (max-width: 575.98px) {
    .guide-fee-table th:nth-child(3),
    .guide-fee-table td:nth-child(3) {
        display: none;
    }

    .guide-toc {
        position: static;
    }
}

/* Спрян компонент на таксата – остава в списъка (миналите ведомости го носят), но приглушен. */
.fee-components tr.fee-inactive input:not([type="month"]),
.fee-components tr.fee-inactive select {
    opacity: .55;
}

.fee-components .fund-badge {
    font-weight: 500;
}

/* „Откъде са приходите“ – разбивката на плащането е на един ред; на телефон таблицата се превърта настрани,
   вместо всеки ред да стане висок колкото екрана. */
.report-receipts .receipt-parts div {
    white-space: nowrap;
}

/* Извлечение по обект – описанието не се свива до дума на ред; на телефон таблицата се превърта настрани. */
.statement-table td:nth-child(2) {
    min-width: 13rem;
}

/* Дневник на промените – описанието е широко, а „Кой“ не се свива до дума на ред; на телефон таблицата се превърта. */
.change-log .change-summary {
    min-width: 18rem;
}

.change-log td:nth-child(2) {
    min-width: 7rem;
}