/* Phase 1 UI refresh: shared modernized components */

.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0;
    /* Плоский тулбар как в макете — без выделяющейся белой панели. */
    border: none;
    background: transparent;
}
/* Второй ряд: переключатель вида + кнопка режима списания (как в макете),
   чтобы на широких экранах они не «прыгали» в перенос внутри фильтров. */
.catalog-actions {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .15rem;
}

.catalog-toolbar .search-wrapper {
    flex: 1 1 420px;
    min-width: 280px;
    max-width: 680px;
    margin-bottom: 0;
}

#searchInput {
    border-radius: var(--radius-full);
}

.catalog-toolbar .tag-filter-wrap { min-width: 220px; }
.catalog-toolbar .sort-group { width: 270px; }

.catalog-view-toggle .btn {
    min-width: 2.25rem;
}

.catalog-toolbar .btn,
.catalog-toolbar .form-control,
.catalog-toolbar .form-select {
    transition: box-shadow var(--motion-base) var(--motion-ease),
                transform var(--motion-fast) var(--motion-ease),
                border-color var(--motion-base) var(--motion-ease);
}

.catalog-toolbar .btn:hover {
    transform: none;
}

.catalog-gear-icon { font-size: .85rem; }

/* .reagent-meta — компактная мета-колонка (используется в kiosk_scan.html).
   Карточные стили каталога вынесены в catalog.css (P2.1). */
.reagent-meta {
    font-size: .9rem;
    min-width: 60px;
}

[data-theme="dark"] .catalog-toolbar {
    background: transparent;
    border-color: transparent;
}

/* ── Pharmacopoeia result display (async-рендер из catalog.js) ──────── */
.pharma-result-btn {
    background: none;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
    display: inline-block;
    text-align: left;
    width: 100%;
    word-break: break-word;
    transition: opacity var(--motion-fast);
}
.pharma-result-btn:hover { opacity: .85; }
.pharma-result-btn--exact {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #a3cfbb;
}
.pharma-result-btn--fuzzy {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffc107;
}
.pharma-result-none { font-size: .75rem; color: var(--sl-500); }
.pharma-result-diff { font-size: .72rem; color: var(--sl-500); margin-top: 2px; }

[data-theme="dark"] .pharma-result-btn--exact {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.30);
}
[data-theme="dark"] .pharma-result-btn--fuzzy {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.30);
}

/* Phase 2 UI refresh: global modern polish */
.page-title {
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 1rem;
}

.table-responsive {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-white-strong);
}

.table thead th {
    font-size: .78rem;
}

.table tbody tr {
    transition: background-color .16s ease, transform .1s ease;
}

.table-hover tbody tr:hover {
    transform: none;
}

/* Контентные табы — единый стиль: горизонтальное подчёркивание на токенах
   (как .cat-tabs в реактивах). Раньше здесь была пилюля (border-radius:full +
   accent-subtle фон) с !important — она перебивала постраничные .prof-tabs и
   расходилась с дизайном. Приведено к подчёркиванию. */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.nav-tabs .nav-link {
    border-radius: 0 !important;
    padding: .5rem .9rem;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--accent) !important;
    box-shadow: none;
    color: var(--accent) !important;
    font-weight: 600;
}

[data-theme="dark"] .table-responsive {
    background: var(--surface-dark-strong);
    border-color: var(--border-dark);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--accent-light) !important;
    box-shadow: none;
}

@media (max-width: 992px) {
    .catalog-toolbar .sort-group {
        width: 100%;
    }
    .catalog-toolbar .search-wrapper {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Phase 3: modal polish */
.main-container .modal-content {
    border: 1px solid var(--border-subtle);
}

[data-theme="dark"] .main-container .modal-content {
    border-color: var(--border-dark-md);
}

.main-container .modal.fade .modal-dialog {
    transition: transform var(--motion-slow) var(--motion-ease);
}

/* Phase 4: global visual consistency */
.modal-content {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Modal backdrop — на тёмном фоне сайта дефолтных 50% мало для контраста. */
.modal-backdrop.show { opacity: .65; }
[data-theme="dark"] .modal-backdrop.show { opacity: .72; }

.modal-header,
.modal-footer {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.btn {
    letter-spacing: .01em;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--accent-glow);
    outline-offset: 1px;
}

[data-theme="dark"] .modal-content {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

/* Dashboard consistency pass */
.dashboard-toolbar {
    padding: .4rem .5rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: var(--radius-md);
}

.dashboard-toolbar-btn {
    min-width: 116px;
}

.widget-grip-icon { font-size: 1.1rem; }
.widget-open-btn { font-size: .78rem; }
.widget-close-icon { font-size: .85rem; }

[data-theme="dark"] .dashboard-toolbar {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Admin consistency pass */
.admin-toolbar {
    padding: .55rem .65rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-white);
}

.admin-toolbar-btn {
    min-height: 34px;
}

.admin-toolbar-btn-sm {
    min-height: 32px;
}

[data-theme="dark"] .admin-toolbar {
    background: var(--surface-dark);
    border-color: var(--border-dark);
}

/* Admin settings consistency pass */
.settings-layout .settings-card {
    border-radius: var(--radius-lg);
    border-color: var(--border-muted);
}

.settings-card .card-header h6 {
    font-weight: 600;
    letter-spacing: .01em;
}

.settings-actions .form-control {
    min-height: 34px;
}

.settings-primary-action {
    min-width: 132px;
}

[data-theme="dark"] .settings-layout .settings-card {
    border-color: var(--border-dark);
}

/* Phase 5: modal system consistency */
.modal .modal-title {
    font-weight: 600;
    letter-spacing: .01em;
}

.modal .btn-close {
    opacity: .65;
    transition: opacity var(--motion-fast) var(--motion-ease);
}

.modal .btn-close:hover {
    opacity: 1;
}

.modal .modal-footer .btn {
    min-height: 34px;
}

.modal .modal-body {
    line-height: 1.5;
}

[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
}

/* Phase 6: admin tables + secondary action buttons */
#scrollAreaAdmin .btn-link {
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, color .15s ease;
}

#scrollAreaAdmin .btn-link:hover {
    background-color: var(--accent-subtle);
}

#scrollAreaAdmin .btn-link i {
    font-size: 1.05rem;
}

#contentAreaAdmin tr {
    height: 38px;
}

#equipTable .btn.btn-sm,
#groupList .btn.btn-sm {
    min-height: 30px;
}

#equipTable tbody tr:hover td {
    background: var(--accent-subtle);
}

[data-theme="dark"] #scrollAreaAdmin .btn-link:hover {
    background-color: var(--accent-subtle);
}

[data-theme="dark"] #equipTable tbody tr:hover td {
    background: var(--accent-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .catalog-toolbar .btn,
    .catalog-toolbar .form-control,
    .catalog-toolbar .form-select,
    .main-container .modal.fade .modal-dialog,
    .modal .btn-close {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   Phase 4 — Page-specific component tokens
   ══════════════════════════════════════════════════════════ */

/* ── Widget card accent top-border ───────────────────────── */

.card-accent-default { border-top: 3px solid var(--sl-400); }
.card-accent-danger  { border-top: 3px solid var(--color-danger); }
.card-accent-warning { border-top: 3px solid var(--color-warning); }
.card-accent-success { border-top: 3px solid var(--color-success); }
.card-accent-accent  { border-top: 3px solid var(--accent); }
.card-accent-info    { border-top: 3px solid #6c8ebf; }
.card-accent-purple  { border-top: 3px solid #8e6cbf; }

/* ── Device status card (dashboard chromatograph grid) ───── */

.device-status-card {
    border: none;
    border-left: 4px solid var(--sl-300);
    box-shadow: var(--shadow-xs);
}

.device-status-busy { border-left-color: var(--color-danger); }
.device-status-free { border-left-color: var(--color-success); }

.device-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    background: var(--sl-400);
    color: #fff;
}

.device-status-busy .device-icon { background: var(--color-danger); }
.device-status-free .device-icon { background: var(--color-success); }

.device-status-badge {
    font-size: 0.62rem;
}

.device-status-busy .device-status-badge { background-color: var(--color-danger) !important; }
.device-status-free .device-status-badge { background-color: var(--color-success) !important; }

.device-name { font-size: 0.88rem; }
.device-detail { font-size: 0.76rem; line-height: 1.4; }
.device-auto   { font-size: 0.72rem; color: #6c8ebf; }

/* ── Device responsive grid ──────────────────────────────── */

/* Container queries: колонки реагируют на ширину самого виджета, а не окна */
.device-grid {
    gap: .5rem;
    container-type: inline-size;
}
.device-col { width: 100%; }

@container (min-width: 360px) { .device-col { width: calc(50% - .25rem); } }
@container (min-width: 560px) { .device-col { width: calc(33.333% - .34rem); } }
@container (min-width: 760px) { .device-col { width: calc(25% - .375rem); } }
@container (min-width: 960px) { .device-col { width: calc(20% - .4rem); } }
@container (min-width: 1160px){ .device-col { width: calc(16.666% - .42rem); } }

/* ── Subtle badge variants ───────────────────────────────── */

.badge-secondary-subtle { background: var(--sl-100); color: var(--sl-600); border: 1px solid var(--sl-200); }
.badge-danger-subtle    { background: #f8d7da;        color: #842029;       border: 1px solid #f1aeb5; }
.badge-success-subtle   { background: #d1e7dd;        color: #0f5132;       border: 1px solid #a3cfbb; }
.badge-warning-subtle   { background: #fff3cd;        color: #664d03;       border: 1px solid #ffecb5; }
.badge-purple-subtle    { background: rgba(111, 66, 193, .10); color: #6f42c1; border: 1px solid rgba(111, 66, 193, .30); }
.badge-info-subtle      { background: var(--accent-subtle); color: var(--accent-dark); border: 1px solid var(--accent-glow); }

[data-theme="dark"] .badge-secondary-subtle { background: rgba(148,163,184,.12); color: #94a3b8;       border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .badge-danger-subtle    { background: rgba(239,68,68,.15);  color: #fca5a5;       border-color: rgba(239,68,68,.30); }
[data-theme="dark"] .badge-success-subtle   { background: rgba(16,185,129,.15); color: #6ee7b7;       border-color: rgba(16,185,129,.30); }
[data-theme="dark"] .badge-warning-subtle   { background: rgba(245,158,11,.15); color: #fcd34d;       border-color: rgba(245,158,11,.30); }
[data-theme="dark"] .badge-purple-subtle    { background: rgba(111,66,193,.20); color: #c4b5fd;       border-color: rgba(111,66,193,.40); }
[data-theme="dark"] .badge-info-subtle      { background: var(--accent-subtle); color: #2dd4bf;      border-color: var(--accent-glow); }

/* ── Text utility: small secondary metadata ──────────────── */

.text-meta    { font-size: .75rem;  color: var(--sl-500); }
.text-meta-xs { font-size: .70rem;  color: var(--sl-500); }

[data-theme="dark"] .text-meta,
[data-theme="dark"] .text-meta-xs { color: var(--sl-400); }

/* ── Icon size scale ─────────────────────────────────────── */

.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 2.2rem; }

/* ── GridStack dashboard placeholder ────────────────────── */

.grid-stack-placeholder > .placeholder-content {
    background: var(--accent-subtle) !important;
    border: 2px dashed var(--accent-glow) !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Empty state ─────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--sl-400);
    text-align: center;
}

.empty-state i    { font-size: 2rem; opacity: .5; }
.empty-state span { font-size: var(--text-sm); }

/* ── Skeleton loading ────────────────────────────────────────── */
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel {
    background: linear-gradient(90deg,
        var(--sl-100) 25%,
        var(--sl-50)  50%,
        var(--sl-100) 75%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s ease infinite;
    border-radius: var(--radius-lg);
}
[data-theme="dark"] .skel {
    background: linear-gradient(90deg,
        rgba(255,255,255,.06) 25%,
        rgba(255,255,255,.11) 50%,
        rgba(255,255,255,.06) 75%
    );
    background-size: 200% 100%;
}

/* Каталог: таблица (overview.html) и её колонки вынесены в css/catalog.css (P2.1). */

/* Tasks widget */
.tasks-group-label {
    text-transform: uppercase;
    opacity: .55;
    user-select: none;
}
.task-row:last-child { border-bottom: none !important; }

/* ── Notice / info banner (шаренный компонент; раньше жил только в shell.css,
   из-за чего был неотстилизован на страницах без shell.css — напр. «События»). ── */
.notice {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--accent); border-radius: var(--radius-md, 10px);
    padding: 10px 14px; margin-bottom: 1rem; box-shadow: var(--shadow-xs);
}
.notice i.lead { color: var(--accent); font-size: 1.05rem; }
.notice .txt { flex: 1; font-size: var(--text-base); color: var(--ink-2); }
.notice .txt strong { color: var(--ink); font-weight: 600; }
.notice .x { color: var(--ink-3); cursor: pointer; padding: 4px; line-height: 1; border-radius: 6px; }
.notice .x:hover { background: var(--surface-2); color: var(--ink); }