/* ==========================================================================
   EuroPM — компактен бизнес интерфейс в ERP стил.

   Целта е плътност: колкото се може повече информация на един екран,
   работи се предимно с таблици. Никакви едри заглавия и празни пространства.
   ========================================================================== */

:root {
    --erp-font-size:      13px;
    --erp-font-size-sm:   12px;
    --erp-font-family:    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --erp-sidebar-w:          220px;
    --erp-sidebar-w-collapsed: 48px;
    --erp-sidebar-bg:         #1f2733;
    --erp-sidebar-bg-hover:   #2b3543;
    --erp-sidebar-bg-active:  #0d6efd;
    --erp-sidebar-fg:         #c7d0da;
    --erp-sidebar-fg-muted:   #7b8794;

    --erp-topbar-h:   40px;
    --erp-topbar-bg:  #ffffff;
    --erp-border:     #dee2e6;
    --erp-bg:         #f4f6f8;
    --erp-surface:    #ffffff;
    --erp-row-hover:  #eef4ff;
    --erp-row-zebra:  #fafbfc;
    --erp-text:       #212529;
    --erp-text-muted: #6c757d;

    --erp-radius: 3px;
}

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

html, body {
    height: 100%;
}

body {
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size);
    line-height: 1.4;
    color: var(--erp-text);
    background: var(--erp-bg);
    overflow-x: hidden;
}

h1 { font-size: 18px; font-weight: 600; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
h4, h5, h6 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.text-muted-sm { font-size: var(--erp-font-size-sm); color: var(--erp-text-muted); }

/* --------------------------------------------------------------------------
   Оформление: тъмна лява навигация + работна площ
   -------------------------------------------------------------------------- */

.erp-layout {
    display: flex;
    min-height: 100vh;
}

.erp-sidebar {
    width: var(--erp-sidebar-w);
    min-width: var(--erp-sidebar-w);
    background: var(--erp-sidebar-bg);
    color: var(--erp-sidebar-fg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1030;
    transition: width .12s ease, min-width .12s ease;
    overflow-x: hidden;
}

.erp-sidebar__brand {
    height: var(--erp-topbar-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    white-space: nowrap;
}

.erp-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}

.erp-sidebar__nav::-webkit-scrollbar { width: 6px; }
.erp-sidebar__nav::-webkit-scrollbar-thumb { background: #3a4655; border-radius: 3px; }

.erp-nav-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    color: var(--erp-sidebar-fg);
    font-size: var(--erp-font-size);
    white-space: nowrap;
    border-left: 3px solid transparent;
}

.erp-nav-item > a:hover {
    background: var(--erp-sidebar-bg-hover);
    color: #fff;
    text-decoration: none;
}

.erp-nav-item.is-active > a {
    background: var(--erp-sidebar-bg-hover);
    border-left-color: var(--erp-sidebar-bg-active);
    color: #fff;
}

.erp-nav-item i { font-size: 15px; width: 18px; text-align: center; flex: 0 0 18px; }

.erp-nav-children { list-style: none; margin: 0; padding: 0; background: rgba(0, 0, 0, .16); }

.erp-nav-children a {
    display: block;
    padding: 4px 10px 4px 36px;
    font-size: var(--erp-font-size-sm);
    color: var(--erp-sidebar-fg-muted);
    white-space: nowrap;
}

.erp-nav-children a:hover,
.erp-nav-children a.is-active { color: #fff; background: var(--erp-sidebar-bg-hover); text-decoration: none; }

.erp-sidebar__footer {
    padding: 6px 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    color: var(--erp-sidebar-fg-muted);
    white-space: nowrap;
}

/* Свит режим — само икони */
body.sidebar-collapsed .erp-sidebar { width: var(--erp-sidebar-w-collapsed); min-width: var(--erp-sidebar-w-collapsed); }
body.sidebar-collapsed .erp-sidebar__brand span,
body.sidebar-collapsed .erp-nav-item > a > span,
body.sidebar-collapsed .erp-nav-children,
body.sidebar-collapsed .erp-sidebar__footer { display: none; }
body.sidebar-collapsed .erp-main { margin-left: var(--erp-sidebar-w-collapsed); }

.erp-main {
    flex: 1 1 auto;
    margin-left: var(--erp-sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left .12s ease;
}

/* --------------------------------------------------------------------------
   Горен ред
   -------------------------------------------------------------------------- */

.erp-topbar {
    height: var(--erp-topbar-h);
    background: var(--erp-topbar-bg);
    border-bottom: 1px solid var(--erp-border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.erp-topbar__toggle {
    background: none; border: none; padding: 2px 6px;
    color: var(--erp-text-muted); font-size: 16px; line-height: 1;
}

.erp-topbar__search { flex: 0 1 340px; }
.erp-topbar__search .form-control { height: 26px; font-size: var(--erp-font-size-sm); }

.erp-topbar__spacer { flex: 1 1 auto; }

.erp-topbar__item {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--erp-font-size-sm);
    color: var(--erp-text-muted);
    padding: 2px 6px;
}

.erp-bell { position: relative; font-size: 15px; color: var(--erp-text-muted); }
.erp-bell .badge {
    position: absolute; top: -5px; right: -8px;
    font-size: 9px; padding: 1px 4px; line-height: 1.2;
}

/* Бадж за процента на завършеност в хедъра */
.erp-readiness {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--erp-text-muted);
    padding: 2px 7px;
    border: 1px solid var(--erp-border);
    border-radius: 10px;
    white-space: nowrap;
}
.erp-readiness__bar { width: 46px; height: 5px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.erp-readiness__fill { height: 100%; background: #198754; }
.erp-readiness__fill.is-low    { background: #dc3545; }
.erp-readiness__fill.is-medium { background: #ffc107; }

/* --------------------------------------------------------------------------
   Работна площ
   -------------------------------------------------------------------------- */

.erp-content { flex: 1 1 auto; padding: 8px 10px 24px; min-width: 0; }

.erp-pagehead {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.erp-pagehead__actions { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }

.breadcrumb { font-size: 11px; margin: 0 0 4px; --bs-breadcrumb-divider-color: var(--erp-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { padding: 0 4px; }

.erp-card {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    margin-bottom: 8px;
}
.erp-card__head {
    padding: 5px 8px;
    border-bottom: 1px solid var(--erp-border);
    background: #f8f9fa;
    font-weight: 600;
    font-size: var(--erp-font-size);
    display: flex; align-items: center; gap: 8px;
}
.erp-card__head .erp-card__actions { margin-left: auto; }
.erp-card__body { padding: 8px; }
.erp-card__body--flush { padding: 0; }

/* Компактни stat-карти за таблото */
.erp-stat {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    padding: 6px 8px;
    display: flex; flex-direction: column; gap: 1px;
}
.erp-stat__label { font-size: 11px; color: var(--erp-text-muted); text-transform: uppercase; letter-spacing: .2px; }
.erp-stat__value { font-size: 18px; font-weight: 600; line-height: 1.1; }
.erp-stat__hint  { font-size: 11px; color: var(--erp-text-muted); }

/* --------------------------------------------------------------------------
   Таблици — сърцето на интерфейса
   -------------------------------------------------------------------------- */

.erp-table {
    width: 100%;
    font-size: var(--erp-font-size-sm);
    border-collapse: collapse;
    margin: 0;
}

.erp-table th,
.erp-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--erp-border);
    vertical-align: middle;
}

.erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef1f4;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid #cfd6dd;
}

.erp-table tbody tr:nth-child(even) { background: var(--erp-row-zebra); }
.erp-table tbody tr:hover { background: var(--erp-row-hover); }

.erp-table td.num,
.erp-table th.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.erp-table td.actions {
    white-space: nowrap;
    width: 1%;
    text-align: right;
}

.erp-table td.actions .btn {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 11px;
    line-height: 1.3;
}

.erp-table-wrap { overflow-x: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   Форми — 2-3 колони на ред, компактни
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.form-label.required::after { content: " *"; color: #dc3545; }

.form-control, .form-select {
    font-size: var(--erp-font-size);
    padding: 3px 7px;
    height: auto;
    min-height: 27px;
    border-radius: var(--erp-radius);
}

.form-control-sm, .form-select-sm { font-size: var(--erp-font-size-sm); padding: 2px 6px; min-height: 24px; }

textarea.form-control { min-height: 60px; }

.form-text { font-size: 11px; }
.invalid-feedback { font-size: 11px; }

.erp-form-row { margin-bottom: 6px; }

.btn {
    --bs-btn-padding-y: 3px;
    --bs-btn-padding-x: 9px;
    --bs-btn-font-size: var(--erp-font-size);
    --bs-btn-border-radius: var(--erp-radius);
}
.btn-sm {
    --bs-btn-padding-y: 2px;
    --bs-btn-padding-x: 7px;
    --bs-btn-font-size: var(--erp-font-size-sm);
}

/* --------------------------------------------------------------------------
   Статуси и баджове
   -------------------------------------------------------------------------- */

.erp-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 9px;
    color: #fff;
    white-space: nowrap;
}

.erp-badge--light { color: #212529; background: #e9ecef; }
.erp-badge--outline { background: transparent; border: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Табове в детайлния изглед
   -------------------------------------------------------------------------- */

.erp-tabs { border-bottom: 1px solid var(--erp-border); margin-bottom: 8px; }
.erp-tabs .nav-link {
    font-size: var(--erp-font-size);
    padding: 4px 10px;
    border-radius: 0;
    color: var(--erp-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
}
.erp-tabs .nav-link:hover { color: var(--erp-text); background: #eef1f4; text-decoration: none; }
.erp-tabs .nav-link.active {
    color: var(--erp-text);
    background: var(--erp-surface);
    border-color: var(--erp-border);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Съобщения, празни състояния, оркестрация
   -------------------------------------------------------------------------- */

.alert { padding: 5px 9px; font-size: var(--erp-font-size); margin-bottom: 6px; border-radius: var(--erp-radius); }

.erp-empty { padding: 24px 12px; text-align: center; color: var(--erp-text-muted); font-size: var(--erp-font-size); }

.erp-progress { height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.erp-progress__fill { height: 100%; transition: width .2s ease; }
.erp-progress__fill.is-done   { background: #198754; }
.erp-progress__fill.is-part   { background: #ffc107; }
.erp-progress__fill.is-low    { background: #dc3545; }

.erp-gauge { display: flex; align-items: baseline; gap: 8px; }
.erp-gauge__value { font-size: 30px; font-weight: 600; line-height: 1; }
.erp-gauge__label { font-size: var(--erp-font-size-sm); color: var(--erp-text-muted); }

.erp-check-row td { font-size: var(--erp-font-size-sm); }
.erp-check-row.is-failed { background: #fff5f5; }
.erp-check-row.is-failed:hover { background: #ffecec; }
.erp-check-msg { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #842029; }

/* --------------------------------------------------------------------------
   Матрица роля × право
   -------------------------------------------------------------------------- */

.erp-matrix th.rotate { white-space: nowrap; text-align: center; vertical-align: bottom; }
.erp-matrix td.check { text-align: center; }
.erp-matrix tbody th { font-weight: 400; font-size: var(--erp-font-size-sm); white-space: nowrap; }
.erp-matrix .module-row th { background: #eef1f4; font-weight: 600; }

/* --------------------------------------------------------------------------
   Страници за грешки и вход
   -------------------------------------------------------------------------- */

.erp-error-page, .erp-auth-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--erp-bg); padding: 16px;
}

.erp-error-box, .erp-auth-box {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    padding: 20px 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.erp-error-box { max-width: 520px; text-align: center; }
.erp-error-code { font-size: 44px; font-weight: 700; color: var(--erp-text-muted); line-height: 1; }
.erp-error-debug {
    text-align: left; font-size: 11px; background: #f8f9fa;
    border: 1px solid var(--erp-border); padding: 8px; max-height: 300px; overflow: auto;
}

.erp-auth-box__brand { text-align: center; margin-bottom: 14px; }
.erp-auth-box__brand strong { font-size: 18px; }

/* --------------------------------------------------------------------------
   Външни библиотеки — привеждане към компактния мащаб
   -------------------------------------------------------------------------- */

table.dataTable { font-size: var(--erp-font-size-sm) !important; }
table.dataTable thead th, table.dataTable tbody td { padding: 5px 8px !important; }
.dt-container .dt-length, .dt-container .dt-search,
.dt-container .dt-info, .dt-container .dt-paging { font-size: var(--erp-font-size-sm); }
.dt-container .form-control, .dt-container .form-select { font-size: var(--erp-font-size-sm); min-height: 24px; }
.page-link { font-size: var(--erp-font-size-sm); padding: 2px 7px; }

.select2-container--bootstrap-5 .select2-selection { min-height: 27px; font-size: var(--erp-font-size); }
.select2-container--bootstrap-5 .select2-selection--single { padding: 2px 7px; }
.select2-container--bootstrap-5 .select2-dropdown { font-size: var(--erp-font-size); }

.flatpickr-input { background: #fff !important; }

/* --------------------------------------------------------------------------
   Печат
   -------------------------------------------------------------------------- */

@media print {
    .erp-sidebar, .erp-topbar, .erp-pagehead__actions, .no-print { display: none !important; }
    .erp-main { margin-left: 0 !important; }
    body { background: #fff; }
}

/* ==========================================================================
   МАЛКИ ЕКРАНИ

   Три нива:
     ≥ 992px           компютър — ERP плътността от заданието, непроменена
     576–991.98px      таблет — навигацията става чекмедже, плътността остава
     ≤ 575.98px        телефон — разхлабена плътност, тъч цели, таблици като карти

   Разхлабването важи САМО на телефон. На таблет и компютър 13px и плътните
   таблици остават дословно както са зададени.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Таблет и телефон: навигацията се превръща в изтеглящо се чекмедже
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* Чекмеджето стои извън екрана и се изтегля при нужда — с ПЪЛНАТА си
       ширина и подменюта. Свиването само до икони криеше подстраниците
       (Роли, Настройки, Одит лог) и ги правеше недостижими. */
    .erp-sidebar {
        width: var(--erp-sidebar-w);
        min-width: var(--erp-sidebar-w);
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
    }

    .erp-sidebar.is-open { transform: translateX(0); }

    /* Подменютата СА видими на малък екран — това е целият смисъл на чекмеджето. */
    .erp-sidebar__brand span,
    .erp-nav-item > a > span,
    .erp-nav-children,
    .erp-sidebar__footer { display: block; }

    .erp-sidebar__brand { display: flex; }
    .erp-nav-item > a { display: flex; }

    /* Работната площ заема целия екран — чекмеджето плава над нея. */
    .erp-main { margin-left: 0; }

    /* Свитият режим от компютъра не важи тук. */
    body.sidebar-collapsed .erp-sidebar {
        width: var(--erp-sidebar-w);
        min-width: var(--erp-sidebar-w);
    }
    body.sidebar-collapsed .erp-main { margin-left: 0; }
    body.sidebar-collapsed .erp-sidebar__brand span,
    body.sidebar-collapsed .erp-nav-item > a > span,
    body.sidebar-collapsed .erp-nav-children,
    body.sidebar-collapsed .erp-sidebar__footer { display: block; }

    .erp-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1025;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }
    .erp-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

    /* Докато чекмеджето е отворено, отдолу не се скролва. */
    body.sidebar-open { overflow: hidden; }

    /* Табовете се плъзгат вместо да преливат — детайлът на проект има 11. */
    .erp-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .erp-tabs .nav-item { flex: 0 0 auto; scroll-snap-align: start; }
    .erp-tabs .nav-link { white-space: nowrap; }
    .erp-tabs::-webkit-scrollbar { height: 3px; }
    .erp-tabs::-webkit-scrollbar-thumb { background: #c3ccd6; border-radius: 2px; }

    .erp-topbar__search { flex: 1 1 auto; min-width: 0; }
}

/* Матрицата роля × право има два изгледа. Базовото състояние се задава ТУК,
   преди media заявката — тя не добавя специфичност и при равна специфичност
   печели по-късното правило. Обратният ред би разменил изгледите. */
.erp-matrix-phone { display: none; }
.erp-matrix-desktop { display: block; }

/* --------------------------------------------------------------------------
   Телефон: разхлабена плътност и тъч цели
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {

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

    /* 16px не е естетическо решение: под тази граница Safari на iOS увеличава
       страницата при фокус в поле и потребителят трябва да я свива обратно. */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
        min-height: 44px;
        padding: 8px 10px;
    }

    textarea.form-control { min-height: 88px; }

    .form-label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .form-text { font-size: 12px; }

    /* Квадратчетата и радио бутоните — достатъчно големи за пръст. */
    .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }
    .form-check { padding-left: 28px; min-height: 44px; display: flex; align-items: center; }
    .form-check-label { font-size: 14px; }

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

    .btn {
        --bs-btn-padding-y: 9px;
        --bs-btn-padding-x: 14px;
        --bs-btn-font-size: 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .btn-sm {
        --bs-btn-padding-y: 7px;
        --bs-btn-padding-x: 12px;
        --bs-btn-font-size: 13px;
        min-height: 40px;
    }

    /* Икон-бутоните стават квадратни цели, а не 18px точки. */
    .erp-table td.actions .btn,
    .btn-icon {
        min-width: 40px;
        min-height: 40px;
        --bs-btn-padding-x: 8px;
        --bs-btn-font-size: 15px;
    }

    .erp-pagehead__actions { width: 100%; }
    .erp-pagehead__actions .btn,
    .erp-pagehead__actions form { flex: 1 1 auto; }
    .erp-pagehead__actions .btn { width: 100%; }

    /* --- Хедър ---------------------------------------------------------- */

    .erp-topbar { gap: 4px; padding: 0 6px; height: 48px; }
    .erp-topbar__toggle { min-width: 40px; min-height: 40px; font-size: 20px; }
    .erp-topbar__user-name { display: none; }
    .erp-readiness__bar { display: none; }
    .erp-readiness { padding: 2px 5px; }
    .erp-bell { padding: 8px; font-size: 18px; }
    .dropdown-menu { font-size: 14px; }
    .dropdown-item { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }

    /* Падащите списъци не бива да са по-широки от екрана. */
    .js-bell-menu,
    .js-search-results {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px);
    }

    /* --- Заглавия и карти ----------------------------------------------- */

    h1 { font-size: 17px; }
    .erp-content { padding: 8px 8px 72px; }
    .erp-card { margin-bottom: 10px; }
    .erp-card__head { padding: 8px 10px; font-size: 14px; }
    .erp-card__body { padding: 10px; }

    .erp-stat__value { font-size: 20px; }
    .erp-gauge__value { font-size: 26px; }

    /* --- Таблици като карти --------------------------------------------- */

    /* Всеки ред става карта с етикети отляво. data-label се слага от JS,
       който чете заглавния ред — така правилото важи и за ръчно написаните
       таблици, и за генерираните от DataTables. */
    .erp-table:not(.erp-table--keep) thead { display: none; }

    .erp-table:not(.erp-table--keep),
    .erp-table:not(.erp-table--keep) tbody,
    .erp-table:not(.erp-table--keep) tr,
    .erp-table:not(.erp-table--keep) td { display: block; width: 100%; }

    .erp-table:not(.erp-table--keep) tr {
        border: 1px solid var(--erp-border);
        border-radius: var(--erp-radius);
        margin-bottom: 8px;
        background: var(--erp-surface);
        padding: 2px 0;
    }

    .erp-table:not(.erp-table--keep) tbody tr:nth-child(even) { background: var(--erp-surface); }
    .erp-table:not(.erp-table--keep) tbody tr:hover { background: var(--erp-row-hover); }

    .erp-table:not(.erp-table--keep) td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 7px 10px;
        border: none;
        border-bottom: 1px solid #f0f2f4;
        font-size: 13px;
        text-align: right;
        min-height: 40px;
    }

    .erp-table:not(.erp-table--keep) td:last-child { border-bottom: none; }

    .erp-table:not(.erp-table--keep) td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--erp-text-muted);
        text-transform: uppercase;
        letter-spacing: .2px;
    }

    /* Клетка без етикет (напр. колона само с икона) заема целия ред. */
    .erp-table:not(.erp-table--keep) td[data-label=""]::before,
    .erp-table:not(.erp-table--keep) td:not([data-label])::before { content: none; }

    /* Първата колона е заглавието на картата. */
    .erp-table:not(.erp-table--keep) td.is-card-title {
        display: block;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 10px 6px;
        background: #f8f9fa;
        border-bottom: 1px solid var(--erp-border);
        min-height: 0;
    }
    .erp-table:not(.erp-table--keep) td.is-card-title::before { content: none; }

    /* Действията стават ред с бутони най-долу. */
    .erp-table:not(.erp-table--keep) td.actions {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
        padding: 8px 10px;
        background: #fafbfc;
        border-top: 1px solid var(--erp-border);
    }
    .erp-table:not(.erp-table--keep) td.actions::before { content: none; }

    .erp-table:not(.erp-table--keep) td.num { text-align: right; }

    .erp-empty { padding: 20px 10px; }

    /* --- Таблици, при които табличният вид Е смисълът -------------------- */

    /* Справката „Финансово изпълнение" и матрицата роля × право губят
       значението си като карти — там колоните се сравняват помежду си.
       Затова остават таблици с плъзгане и закована първа колона. */
    .erp-table--keep { font-size: 12px; }

    .erp-table--keep th:first-child,
    .erp-table--keep td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--erp-surface);
        box-shadow: 1px 0 0 var(--erp-border);
    }
    .erp-table--keep thead th:first-child { z-index: 3; background: #eef1f4; }
    .erp-table--keep tbody tr:nth-child(even) td:first-child { background: var(--erp-row-zebra); }

    .erp-table-wrap { -webkit-overflow-scrolling: touch; }

    /* --- DataTables ------------------------------------------------------ */

    .dt-container .dt-layout-row {
        flex-direction: column;
        gap: 6px;
    }
    .dt-container .dt-length,
    .dt-container .dt-search { width: 100%; }
    .dt-container .dt-search input { width: 100%; }
    .dt-container .dt-paging .page-link { min-width: 40px; min-height: 40px; line-height: 28px; }
    .dt-container .dt-info { font-size: 12px; text-align: center; }

    /* --- Матрица роля × право на телефон --------------------------------- */

    .erp-matrix-desktop { display: none; }
    .erp-matrix-phone { display: block; }

    /* --- Закачен долу бутон за дълги форми ------------------------------- */

    .erp-form-sticky {
        position: sticky;
        bottom: 0;
        z-index: 1010;
        background: var(--erp-surface);
        border-top: 1px solid var(--erp-border);
        padding: 8px;
        margin: 8px -8px 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    }
    .erp-form-sticky .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   Устройства с допир — независимо от ширината (напр. таблет в landscape)
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
    .erp-table td.actions .btn { min-width: 36px; min-height: 36px; }
    .erp-nav-item > a { padding-top: 9px; padding-bottom: 9px; }
    .erp-nav-children a { padding-top: 8px; padding-bottom: 8px; }
}