:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-bg: #f3f4f6;
    --color-bg-dark: #0f172a;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-danger: #dc2626;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.18);
    --shadow-card: 0 8px 18px rgba(15, 23, 42, 0.12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    margin: 0;
    background: radial-gradient(circle at top, #e0e7ff, #f3f4f6);
    color: var(--color-text);
}

.layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: 60px minmax(0, 1fr);
    min-height: 100vh;
}

.header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.7);
    z-index: 20;
}

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

.header__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .05em;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__user {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.7);
    font-size: 14px;
}

.header__role {
    color: #9ca3af;
    margin-left: 4px;
}

.header__menu-btn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 24px;
    padding: 4px 8px;
    cursor: pointer;
    display: none;
}

.sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background: #181f32;
    padding: 18px 12px 20px;
    overflow-y: auto;
    border-right: 1px solid #1f2937;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar__item {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    text-align: center;
    text-decoration: none;
    color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.7);
    font-size: 14px;
    font-weight: 500;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}

.sidebar__item:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.9);
}

.sidebar__item--danger {
    background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

.sidebar__item--active {
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.9), 0 6px 16px rgba(15, 23, 42, 0.9);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.sidebar__item-icon {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}

.sidebar__group {
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.7);
    overflow: hidden;
}

.sidebar__group+.sidebar__group {
    margin-top: 4px;
}

.sidebar__group-header {
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.sidebar__group-header:hover {
    background: rgba(15, 23, 42, 0.8);
    color: #e5e7eb;
}

.sidebar__group-title {
    pointer-events: none;
}

.sidebar__group-arrow {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.sidebar__group-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0s ease;
    display: flex;
    flex-direction: column;
    padding: 0 6px 6px;
}

.sidebar__group-body .sidebar__item {
    margin-top: 6px;
    text-align: left;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.6);
}

.sidebar__group--open .sidebar__group-body {
    max-height: 500px;
}

.sidebar__group--open .sidebar__group-arrow {
    transform: rotate(180deg);
}

.content {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: var(--color-bg);
    overflow-y: auto;
    padding: 20px 20px;
}

.content__title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
}

.content__subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.card {
    margin-bottom: 18px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.filter-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-form input[type="text"],
.filter-form select {
    min-width: 180px;
    padding: 7px 10px;
    border-radius: var(--radius-full);
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 14px;
}

.button-primary,
.filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background .15s ease, transform .08s ease;
    margin-bottom: 10px;
}

.button-primary:hover,
.filter-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.login-body {
    background: radial-gradient(circle at top, #1d4ed8, #020617);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 380px;
    padding: 20px;
}

.login-card {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 20px;
    padding: 22px 22px 24px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: #e5e7eb;
}

.login-logo {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.login-subtitle {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 15px;
}

.login-error {
    background: #7f1d1d;
    color: #fee2e2;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-group label {
    font-size: 13px;
    color: #042aa3;
}

.login-group input {
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--radius-full);
    border: 1px solid #374151;
    background: #ffffff;
    color: #929292;
    outline: none;
    font-size: 14px;
}

.login-group input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.login-button {
    margin-top: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    border: none;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table-wrapper {
    width: 100%;
    margin-top: 18px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(209, 213, 219, 0.8);
    max-height: calc(100vh - 260px);
    overflow: auto;
}


.admins-table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admins-table th,
.admins-table td,
.table th,
.table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.admins-table thead,
.table thead {
    background: #eef2ff;
}

.admins-table tbody tr:hover,
.table tbody tr:hover {
    background: #eff6ff;
}

.badge-code {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: #111827;
    color: #e5e7eb;
    font-size: 12px;
}

.admins-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-small {
    padding: 4px 9px;
    border-radius: var(--radius-full);
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.btn-edit {
    background: var(--color-primary);
    color: #fff;
}

.btn-delete {
    background: var(--color-danger);
    color: #fff;
}

.alert {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.pagination a {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: 1px solid #d1d5db;
    text-decoration: none;
    color: #111827;
    font-size: 13px;
}

.pagination .active-page {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

@media (max-width: 992px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 60px minmax(0, 1fr);
    }

    .header__menu-btn {
        display: inline-block;
    }

    .sidebar {
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        width: 260px;
        max-width: 80%;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        z-index: 30;
        box-shadow: var(--shadow-soft);
    }

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

    .content {
        grid-column: 1 / 2;
        padding: 18px 14px 24px;
    }

    .content__title {
        font-size: 20px;
    }

    .card {
        padding: 14px 14px 16px;
        border-radius: 14px;
    }

    .header__user {
        display: none;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form input[type="text"],
    .filter-form select,
    .filter-button,
    .button-primary {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 18px;
    }

    .login-logo {
        font-size: 20px;
    }

    .content__title {
        font-size: 18px;
    }

    .admins-table th,
    .admins-table td {
        padding: 8px 10px;
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-backdrop.modal-open {
    display: flex;
}

.modal {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

.modal-master-add {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.modal-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-secondary {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
    font-size: 14px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.stat-title {
    font-size: 14px;
    color: #7a7a7a;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: #1e1e1e;
}

.card--dashboard {
    padding: 18px 20px 22px;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.card__filter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.card__filter label {
    color: var(--color-text-muted);
}

.card__filter select {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 13px;
}

.dashboard-grid--enhanced {
    margin-top: 12px;
}

.dashboard-grid--enhanced .stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.stat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: rgba(37, 99, 235, 0.08);
}

.stat-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-title {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

.stat-note {
    font-size: 12px;
    color: #9ca3af;
}

.stat-card--wide {
    flex-direction: column;
    align-items: stretch;
}

.stat-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stat-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
}

.stat-pill--success {
    background: #dcfce7;
    color: #166534;
}

.stat-pill--muted {
    background: #e5e7eb;
    color: #4b5563;
}

.stat-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.stat-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
}

.stat-card--blue .stat-card__icon {
    background: rgba(59, 130, 246, 0.12);
}

.stat-card--indigo .stat-card__icon {
    background: rgba(79, 70, 229, 0.12);
}

.stat-card--green .stat-card__icon {
    background: rgba(22, 163, 74, 0.12);
}

.stat-card--orange .stat-card__icon {
    background: rgba(249, 115, 22, 0.12);
}

.stat-card--purple .stat-card__icon {
    background: rgba(147, 51, 234, 0.12);
}

.stat-card--red .stat-card__icon {
    background: rgba(239, 68, 68, 0.12);
}

.stat-card--teal .stat-card__icon {
    background: rgba(20, 184, 166, 0.12);
}

@media (max-width: 768px) {
    .card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card__title {
        font-size: 18px;
    }

    .dashboard-grid--enhanced {
        grid-template-columns: 1fr;
    }

    .stat-card--wide {
        grid-column: span 1;
    }
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.stat-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.uk_reports_button {
    margin-top: 8px;
    background-color: green;
}

.badge-green {
    color: green;
}

.badge-yellow {
    color: #87872d;
}

.badge-blue {
    color: blue;
}

.btn-success {
    background-color: green;
}

.add-vote-button {
    background-color: green;
}

.add-vote-button {
    background-color: green;
}

.menu-selected-point {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

.complaint-thumb {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.icon-picker__item {
    border: 1.5px solid #e2e8f0;
    padding: 6px;
    background: #fff;
    cursor: pointer;
    border-radius: 10px;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-picker__item:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: scale(1.08);
}

.icon-picker__item--active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .3) !important;
}

.admins-center {
    margin: auto;
    border-radius: 30px;
}

.utilities-upload-input {
    height: 36px;
    border-radius: 10px;
    padding-left: 5px;
}

.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background .15s ease, transform .08s ease;
}

.hundred-percent-width {
    width: 100%;
}

.table-wrapper {
    overflow-x: hidden;
    /* важно: убираем горизонтальную прокрутку */
}

.admins-table {
    width: 100%;
    table-layout: fixed;
    /* ключ: фиксируем ширины и переносим текст */
    border-collapse: collapse;
}

.admins-table th,
.admins-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

/* Текст жалобы переносится и не раздувает таблицу */
.admins-table .cell-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Опционально: чуть компактнее и читабельнее текст */
.admins-table .cell-text .text-preview {
    line-height: 1.35;
}

/* Колонка действий — не ломаем кнопки */
.admins-table .cell-actions {
    white-space: nowrap;
}

/* Фото — фиксируем миниатюру */
.complaint-thumb {
    max-width: 46px;
    max-height: 46px;
    object-fit: cover;
    border-radius: 8px;
}

/* ===== Reply modal error: hidden until needed ===== */
.form-error {
    display: none;
    margin-top: 10px;
}

/* На маленьких экранах можно включить горизонтальный скролл (если вдруг слишком узко) */
@media (max-width: 1100px) {
    .table-wrapper {
        overflow-x: auto;
        /* на узких экранах скролл допустим */
    }

    .admins-table {
        min-width: 1050px;
        /* чтобы не ломалось */
    }
}

/* ===========================
   FIX: stable complaints table on zoom
   Put this block at the VERY END of style.css
   =========================== */

/* wrapper: keep normal scroll behavior, but avoid weird empty areas */
.table-wrapper {
    overflow: auto !important;
    /* возвращаем нормальный скролл */
    overflow-x: auto !important;
    /* при зуме/узких экранах не ломаем таблицу */
}

/* table: stable sizing */
.admins-table {
    width: 100% !important;
    table-layout: fixed !important;
    /* стабильнее при изменении масштаба */
    border-collapse: collapse !important;
}

/* default cells: no wrapping + ellipsis (for most columns) */
.admins-table th,
.admins-table td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

/* ONLY text column wraps */
.admins-table td.cell-text {
    white-space: normal !important;
    /* разрешаем перенос */
    overflow: visible !important;
    /* иначе при зуме может скрывать строку */
    text-overflow: clip !important;
    /* убираем троеточие */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* actions column - keep buttons in one line */
.admins-table td.cell-actions {
    white-space: nowrap !important;
}

/* thumbnail: single source of truth */
.complaint-thumb {
    max-width: 46px !important;
    max-height: 46px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
}

/* On small screens allow horizontal scroll, don’t force huge min-width */
@media (max-width: 1100px) {
    .admins-table {
        min-width: 980px !important;
    }
}

/* ===== FIX complaints table (put at the very end) ===== */

.table-wrapper {
    overflow: auto !important;
    /* не прячем горизонтальный скролл */
    background: #fff;
    border-radius: 16px;
}

/* фиксируем раскладку колонок */
.admins-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* по умолчанию всё в одну строку + троеточие */
.admins-table th,
.admins-table td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

/* только текст жалобы переносим */
.admins-table td.cell-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* кнопки не ломаем */
.admins-table td.cell-actions {
    white-space: nowrap !important;
}

/* фото аккуратное */
.complaint-thumb {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}

:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-bg: #f3f4f6;
    --color-bg-dark: #0f172a;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-danger: #dc2626;
    --radius-lg: 16px;
    --radius-full: 999px;
    --shadow-soft: 0 10px 25px rgba(15, 23, 42, .18);
    --shadow-card: 0 8px 18px rgba(15, 23, 42, .12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    margin: 0;
    background: radial-gradient(circle at top, #e0e7ff, #f3f4f6);
    color: var(--color-text);
}

/* ===== Layout ===== */
.layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: 60px minmax(0, 1fr);
    min-height: 100vh;
}

.header {
    grid-column: 1/3;
    grid-row: 1/2;
    background: rgba(15, 23, 42, .96);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .7);
    z-index: 20;
}

.sidebar {
    grid-column: 1/2;
    grid-row: 2/3;
    background: #181f32;
    padding: 18px 12px 20px;
    overflow-y: auto;
    border-right: 1px solid #1f2937;
}

.content {
    grid-column: 2/3;
    grid-row: 2/3;
    background: var(--color-bg);
    overflow: auto;
    padding: 20px;
}

.content__title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
}

/* ===== Forms ===== */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.filter-form select,
.filter-form input[type="text"] {
    min-width: 180px;
    padding: 7px 10px;
    border-radius: var(--radius-full);
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 14px;
}

.filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background .15s ease, transform .08s ease;
}

.filter-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* ===== Alerts ===== */
.alert {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ===== Table wrapper (zoom safe) ===== */
.table-wrapper {
    width: 100%;
    margin-top: 18px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(209, 213, 219, .8);
    max-height: calc(100vh - 260px);
    overflow: auto;
    /* ВАЖНО: НЕ hidden */
}

/* ===== Table (zoom safe) ===== */
.admins-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* стабильнее при zoom */
    font-size: 14px;
}

.admins-table thead {
    background: #eef2ff;
}

.admins-table th,
.admins-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    /* по умолчанию не переносим */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.admins-table tbody tr:hover {
    background: #eff6ff;
}

/* Только колонка текста переносится */
.admins-table td.cell-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Actions */
.admins-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inline-form {
    display: inline;
}

.btn-small {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: none;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.btn-neutral {
    background: #e5e7eb;
    color: #111827;
}

.btn-success {
    background: #16a34a;
    color: #fff;
}

.btn-delete {
    background: var(--color-danger);
    color: #fff;
}

.btn-small:hover {
    filter: brightness(.98);
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.badge-gray {
    background: #e5e7eb;
    color: #374151;
}

.badge-yellow {
    background: #fef9c3;
    color: #854d0e;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
}

/* Thumbs */
.complaint-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.pagination a {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: 1px solid #d1d5db;
    text-decoration: none;
    color: #111827;
    font-size: 13px;
}

.pagination .active-page {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    /* выше header/sidebar */
}

.modal-backdrop.modal-open {
    display: flex;
}

.modal {
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    max-width: 860px;
    width: calc(100% - 32px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .55);
}

.modal--lg {
    max-width: 860px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.modal-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-secondary {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
    font-size: 14px;
}

/* modal content helpers */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.kv {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fafafa;
}

.kv__k {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.kv__v {
    font-size: 14px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-box {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    margin-top: 10px;
}

.text-box__title {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.text-box__pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.35;
}

.textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    outline: none;
}

.textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .25);
}

.details-photo {
    max-width: 220px;
    border-radius: 12px;
    display: block;
}

.form-error {
    display: none;
    margin-top: 10px;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 60px minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        width: 260px;
        max-width: 80%;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        z-index: 150;
        box-shadow: var(--shadow-soft);
    }

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

    .content {
        grid-column: 1/2;
        padding: 18px 14px 24px;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form select,
    .filter-button {
        width: 100%;
    }

    .kv-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {

    /* если экран узкий — допускаем горизонтальный скролл */
    .admins-table {
        min-width: 980px;
    }
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px;
    background: #f2f4f7;
    border: 1px solid #e2e6ea;
    white-space: nowrap;
}

.badge-yellow {
    color: #b78103;
}

.badge-blue {
    color: #1d4ed8;
}

.badge-green {
    color: #15803d;
}

.badge-gray {
    color: #6b7280;
}

.btn-reply-work {
    background: #2563eb;
    color: #fff;
    border: none;
}

.btn-reply-work:hover {
    background: #1e40af;
}

.btn-reply-close {
    background: #16a34a;
    color: #fff;
    border: none;
}

.btn-reply-close:hover {
    background: #166534;
}

/* ===== Company spending constructor ===== */
.spend-page {
    padding: 18px 18px 26px;
}

.spend-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.spend-toolbar__left {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.spend-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.spend-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spend-field label {
    font-size: 12px;
    color: var(--color-text-muted);
}

.spend-field input,
.spend-field select {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 14px;
    outline: none;
}

.spend-field input:focus,
.spend-field select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.btn-primary {
    padding: 9px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-ghost {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(209, 213, 219, .9);
    background: rgba(255, 255, 255, .75);
    font-size: 14px;
    cursor: pointer;
}

.spend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.spend-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(209, 213, 219, 0.8);
    overflow: hidden;
}

.spend-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, #eef2ff, #ffffff);
    border-bottom: 1px solid #e5e7eb;
}

.spend-card__title {
    font-weight: 700;
    font-size: 15px;
}

.spend-card__sum {
    font-weight: 800;
    color: #111827;
    background: rgba(37, 99, 235, .08);
    border: 1px solid rgba(37, 99, 235, .18);
    padding: 6px 10px;
    border-radius: 999px;
}

.spend-table {
    width: 100%;
    border-collapse: collapse;
}

.spend-table th,
.spend-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.spend-table thead {
    background: #fafafa;
}

.spend-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spend-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.spend-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(209, 213, 219, .8);
    background: #f9fafb;
    color: #374151;
}

.spend-badge--const {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.spend-input {
    width: 160px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    outline: none;
    font-size: 14px;
    text-align: right;
}

.spend-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
}

.spend-note {
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    outline: none;
    font-size: 13px;
}

.spend-footer {
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.spend-footer__total {
    font-size: 16px;
    font-weight: 800;
}

.spend-reorder {
    cursor: grab;
    user-select: none;
    font-weight: 700;
    color: #6b7280;
    padding: 0 6px;
}

.spend-reorder--dragging {
    opacity: .55;
}

@media (max-width: 1100px) {
    .spend-grid {
        grid-template-columns: 1fr;
    }
}

.spend2__content {
    padding-bottom: 96px
}

.spend2__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px
}

.spend2__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px
}

.spend2__subtitle {
    margin-top: 6px;
    font-size: 13px;
    opacity: .75
}

.spend2__headActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.spend2__toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 14px 0 12px
}

.spend2__filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap
}

.spend2__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 190px
}

.spend2__label {
    font-size: 12px;
    opacity: .75
}

.spend2__input,
.spend2__select {
    height: 42px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 0 12px;
    background: #fff
}

.spend2__select {
    padding-right: 36px
}

.spend2__textarea {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 10px 12px;
    resize: vertical;
    min-height: 92px
}

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

.spend2__alert {
    min-height: 0;
    margin: 10px 0 12px
}

.spend2alert {
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px
}

.spend2alert--ok {
    background: #e9f8ee;
    border: 1px solid #bde7c7
}

.spend2alert--err {
    background: #fff0f0;
    border: 1px solid #f0b2b2
}

.spend2__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

@media (max-width:1100px) {
    .spend2__grid {
        grid-template-columns: 1fr
    }
}

.spend2card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    overflow: hidden
}

.spend2card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0))
}

.spend2card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 14px
}

.spend2card__sum {
    font-weight: 900;
    font-size: 14px
}

.spend2card__body {
    padding: 8px 10px 12px
}

.spend2empty {
    padding: 12px;
    color: rgba(0, 0, 0, .55);
    font-size: 13px
}

.spend2row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 14px
}

.spend2row+.spend2row {
    border-top: 1px dashed rgba(0, 0, 0, .08)
}

.spend2row__left {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
    flex: 1
}

.spend2row__main {
    min-width: 0
}

.spend2row__title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word
}

.spend2row__meta {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.spend2row__right {
    flex: 0 0 170px;
    display: flex;
    justify-content: flex-end
}

@media (max-width:520px) {
    .spend2row__right {
        flex-basis: 140px
    }
}

.spend2amount {
    height: 40px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    padding: 0 14px;
    text-align: right;
    background: #fff;
    font-weight: 700
}

.spend2amount:focus {
    outline: none;
    border-color: rgba(40, 110, 255, .45);
    box-shadow: 0 0 0 4px rgba(40, 110, 255, .12)
}

.spend2badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    color: rgba(0, 0, 0, .72);
    font-weight: 700
}

.spend2badge--const {
    background: rgba(33, 150, 83, .12);
    color: #1d7a46
}

.spend2note {
    margin-top: 8px;
    font-size: 12px;
    opacity: .72;
    line-height: 1.35
}

.spend2__footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #111827;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25)
}

.spend2__footerLabel {
    font-size: 12px;
    opacity: .8
}

.spend2__footerTotal {
    font-size: 18px;
    font-weight: 900;
    margin-top: 4px
}

.spend2__hint {
    font-size: 12px;
    opacity: .85
}

.spend2__pill {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 12px
}

.spend2__pill--draft {
    background: rgba(234, 179, 8, .14);
    color: #8a6a00;
    border: 1px solid rgba(234, 179, 8, .25)
}

.spend2__pill--pub {
    background: rgba(33, 150, 83, .14);
    color: #1d7a46;
    border: 1px solid rgba(33, 150, 83, .25)
}

.spend2modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999
}

.spend2modal--open {
    display: flex
}

.spend2modal__card {
    width: min(720px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    overflow: hidden
}

.spend2modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.spend2modal__title {
    font-weight: 900;
    font-size: 15px
}

.spend2modal__close {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    font-size: 20px;
    cursor: pointer
}

.spend2modal__body {
    padding: 14px 16px
}

.spend2modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: rgba(0, 0, 0, .02)
}

.spend2form__row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 12px
}

@media (max-width:720px) {
    .spend2form__row {
        grid-template-columns: 1fr
    }
}

.spend2check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    margin-top: 6px
}

.spend2check input {
    width: 18px;
    height: 18px
}

.spend2drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(0, 0, 0, .02);
    cursor: grab;
    color: rgba(0, 0, 0, .55);
    flex: 0 0 28px
}

.spend2drag--cat {
    width: 30px;
    height: 30px;
    flex-basis: 30px
}

.spend2dragging {
    opacity: .65;
    transform: scale(.995)
}

.sidebar {
    background: #181f32
}

.spend2__footer {
    background: #181f32
}

.spend2__pdfLink {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    text-decoration: underline;
    font-weight: 800;
    font-size: 12px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    color: #1d4ed8;
}

/* Service workspace (master_call.php for service role) */
.content--service {
    background:
        radial-gradient(1100px 400px at 85% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
        var(--color-bg);
}

.service-workspace {
    margin: 0 0 12px;
}

.service-workspace__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.service-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    background: #fff;
}

.service-stat__label {
    font-size: 12px;
    color: #64748b;
}

.service-stat__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
}

.service-stat--all {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.service-stat--pending {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.service-stat--progress {
    background: linear-gradient(180deg, #fef9c3 0%, #ffffff 100%);
}

.service-stat--done {
    background: linear-gradient(180deg, #dcfce7 0%, #ffffff 100%);
}

.service-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

.service-chip {
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
}

.service-chip:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.service-chip--active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.filter-form--service {
    align-items: center;
    gap: 8px;
}

.service-reset-link {
    font-size: 13px;
    color: #1d4ed8;
    text-decoration: none;
    padding: 7px 8px;
}

.service-reset-link:hover {
    text-decoration: underline;
}

.btn-status-progress {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-weight: 600;
}

.btn-status-done {
    font-weight: 600;
}

.service-row--pending td:first-child {
    box-shadow: inset 3px 0 0 #60a5fa;
}

.service-row--in_progress td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.service-row--done td:first-child {
    box-shadow: inset 3px 0 0 #22c55e;
}

@media (max-width: 1080px) {
    .service-workspace__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .service-workspace__stats {
        grid-template-columns: 1fr;
    }

    .service-quick-filters {
        overflow-x: auto;
        padding-bottom: 2px;
        flex-wrap: nowrap;
    }
}

/* ============================================
   MASTER CALL PAGE - ENHANCED UX/UI
   ============================================ */

/* --- Enhanced Page Header --- */
.mc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.mc-page-header__title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-page-header__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: #64748b;
}

/* --- Enhanced Stat Cards --- */
.mc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.mc-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.mc-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.mc-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--stat-color, #64748b), transparent);
    opacity: .6;
}

.mc-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
    flex-shrink: 0;
    background: var(--stat-bg, rgba(100, 116, 139, .1));
}

.mc-stat__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-stat__label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.mc-stat__value {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.mc-stat--all {
    --stat-color: #64748b;
    --stat-bg: rgba(100, 116, 139, .1);
}

.mc-stat--pending {
    --stat-color: #3b82f6;
    --stat-bg: rgba(59, 130, 246, .1);
}

.mc-stat--progress {
    --stat-color: #f59e0b;
    --stat-bg: rgba(245, 158, 11, .1);
}

.mc-stat--done {
    --stat-color: #22c55e;
    --stat-bg: rgba(34, 197, 94, .1);
}

@media (max-width: 1080px) {
    .mc-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .mc-stats {
        grid-template-columns: 1fr;
    }
}

/* --- Enhanced Filter Chips --- */
.mc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}

.mc-chip:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.mc-chip--active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}

.mc-chip--active:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: #fff;
}

.mc-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    font-size: 11px;
    font-weight: 700;
}

.mc-chip--active .mc-chip__count {
    background: rgba(255, 255, 255, .25);
}

/* --- Enhanced Filter Form --- */
.mc-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin: 16px 0;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}

.mc-filter-form input[type="text"],
.mc-filter-form select {
    min-width: 200px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    transition: all .15s ease;
}

.mc-filter-form input[type="text"]:focus,
.mc-filter-form select:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.mc-filter-form input[type="text"]::placeholder {
    color: #94a3b8;
}

.mc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.mc-filter-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
    transform: translateY(-1px);
}

.mc-filter-reset {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
    border-radius: 10px;
    transition: all .15s ease;
}

.mc-filter-reset:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, .06);
}

/* --- Enhanced Table --- */
.mc-table-wrap {
    margin-top: 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    overflow: hidden;
    min-height: 520px;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mc-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.mc-table th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #475569;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.mc-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.mc-table tbody tr {
    transition: background .15s ease;
}

.mc-table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, .5);
}

.mc-table tbody tr:hover {
    background: #eff6ff;
}

/* Status indicator on row */
.mc-table tbody tr[data-status="pending"] td:first-child {
    box-shadow: inset 4px 0 0 #3b82f6;
}

.mc-table tbody tr[data-status="in_progress"] td:first-child {
    box-shadow: inset 4px 0 0 #f59e0b;
}

.mc-table tbody tr[data-status="done"] td:first-child {
    box-shadow: inset 4px 0 0 #22c55e;
}

/* Empty state */
.mc-table-empty {
    padding: 48px 24px;
    text-align: center;
}

.mc-table-empty__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: .4;
}

.mc-table-empty__text {
    font-size: 15px;
    color: #64748b;
}

/* --- Enhanced Status Badges --- */
.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mc-badge--pending {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, .2);
}

.mc-badge--in_progress {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #a16207;
    border: 1px solid rgba(245, 158, 11, .25);
}

.mc-badge--done {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, .25);
}

.mc-badge__icon {
    font-size: 12px;
}

/* --- Enhanced Action Buttons --- */
.mc-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.mc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

.mc-btn--primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
}

.mc-btn--primary:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
    transform: translateY(-1px);
}

.mc-btn--secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.mc-btn--secondary:hover {
    background: #e2e8f0;
}

.mc-btn--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.mc-btn--success:hover {
    box-shadow: 0 4px 12px rgba(34, 197, 94, .3);
    transform: translateY(-1px);
}

.mc-btn--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.mc-btn--warning:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
    transform: translateY(-1px);
}

.mc-btn--danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.mc-btn--danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
    transform: translateY(-1px);
}

/* --- Enhanced Thumbnails --- */
.mc-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #f1f5f9;
    transition: all .2s ease;
}

.mc-thumb:hover {
    border-color: #3b82f6;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* --- Enhanced Modal --- */
.mc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    transition: opacity .2s ease;
}

.mc-modal-backdrop.modal-open {
    display: flex;
    opacity: 1;
}

.mc-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .25);
    animation: mcModalIn .25s ease;
}

@keyframes mcModalIn {
    from {
        transform: translateY(20px) scale(.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.mc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-radius: 20px 20px 0 0;
}

.mc-modal__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.mc-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    transition: all .15s ease;
}

.mc-modal__close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.mc-modal__body {
    padding: 20px 22px;
}

.mc-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: 0 0 20px 20px;
}

/* Modal content grid */
.mc-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.mc-detail-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.mc-detail-item__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #64748b;
    margin-bottom: 4px;
}

.mc-detail-item__value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    word-break: break-word;
}

.mc-detail-desc {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.mc-detail-desc__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #64748b;
    margin-bottom: 8px;
}

.mc-detail-desc__text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}

@media (max-width: 560px) {
    .mc-detail-grid {
        grid-template-columns: 1fr;
    }

    .mc-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-filter-form input[type="text"],
    .mc-filter-form select {
        width: 100%;
        min-width: unset;
    }
}

/* --- Modal Form Fields --- */
.mc-form-group {
    margin-bottom: 16px;
}

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

.mc-form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #475569;
    margin-bottom: 6px;
}

.mc-form-label__hint {
    font-weight: 400;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
    margin-left: 4px;
}

.mc-form-input,
.mc-form-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 14px;
    color: #0f172a;
    transition: all .2s ease;
    outline: none;
}

.mc-form-input::placeholder {
    color: #94a3b8;
}

.mc-form-input:focus,
.mc-form-select:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12), 0 2px 8px rgba(59, 130, 246, .08);
}

.mc-form-input:disabled,
.mc-form-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.mc-form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Checkbox group inside modal */
.mc-form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
}

.mc-form-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    padding: 4px 0;
    transition: color .15s ease;
}

.mc-form-checkbox:hover {
    color: #1d4ed8;
}

.mc-form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: #2563eb;
    cursor: pointer;
}

.mc-form-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 5px;
}

/* Two-column form layout */
.mc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .mc-form-row {
        grid-template-columns: 1fr;
    }
}

/* Divider line inside forms */
.mc-form-divider {
    border: none;
    border-top: 1px solid #f1f5f9;
    margin: 18px 0;
}

/* --- Enhanced Pagination --- */
.mc-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 14px 0;
}

.mc-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}

.mc-pagination a:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.mc-pagination .active-page {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}

/* --- Rating Display --- */
.mc-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: #f59e0b;
}

.mc-rating__star {
    font-size: 14px;
}

.mc-rating__value {
    color: #0f172a;
}

.mc-feedback-comment {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- User info display --- */
.mc-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-user-info__name {
    font-weight: 600;
    color: #0f172a;
}

.mc-user-info__phone {
    font-size: 12px;
    color: #64748b;
}

/* ===== Dropzone (file drag & drop) ===== */
.dropzone {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-lg);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background .25s, transform .15s;
    background: #f9fafb;
}

.dropzone:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.dropzone--active {
    border-color: var(--color-primary);
    background: #dbeafe;
    transform: scale(1.01);
}

.dropzone--has-file {
    border-color: #34d399;
    background: #ecfdf5;
    border-style: solid;
}

.dropzone__icon {
    font-size: 36px;
    margin-bottom: 8px;
    display: block;
}

.dropzone__text {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.dropzone__text strong {
    color: var(--color-primary);
}

.dropzone__formats {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

.dropzone__file-info {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.dropzone--has-file .dropzone__file-info {
    display: flex;
}

.dropzone--has-file .dropzone__placeholder {
    display: none;
}

.dropzone__file-name {
    font-size: 13px;
    font-weight: 600;
    color: #065f46;
    word-break: break-all;
}

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

.dropzone__remove {
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background .15s;
}

.dropzone__remove:hover {
    background: #fee2e2;
}

.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ===== Upload button with spinner ===== */
.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .08s, opacity .15s;
}

.upload-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.upload-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.upload-btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: upload-spin .7s linear infinite;
}

.upload-btn--loading .upload-btn__spinner {
    display: inline-block;
}

.upload-btn--loading .upload-btn__label {
    display: none;
}

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

@media (max-width: 560px) {
    .dropzone {
        padding: 24px 14px;
    }
}