/* ============================================================
   PLATFORMA WORKBENCH
   ------------------------------------------------------------
   Operator-side komponenter: filter-bar, stats-row, sticky
   sidenav, bulk-action-bar, tabs, translations-kategori-palet,
   input-width-modifiers.

   Tidligere en del af platforma-admin-ux.css — udskilt så
   sidenavigationen og tab-systemet har en klar placering.
   Klasse-navne er uændrede; views kræver ingen tilpasning.
   ============================================================ */

/* ── Filter bar (CRM-Leads-mønster, brugt på alle admin-list-pages) ── */
.platforma-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platforma-space-2);
    padding: var(--platforma-space-3);
    margin-bottom: var(--platforma-space-4);
    background: var(--platforma-surface-card, var(--platforma-white));
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-radius: var(--platforma-radius-md, 10px);
    box-shadow: var(--platforma-shadow-soft, var(--platforma-shadow-sm));
}

.platforma-filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.platforma-filter-bar__field select,
.platforma-filter-bar__field input[type="text"],
.platforma-filter-bar__field input[type="search"] {
    min-width: 10rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--platforma-gray-200);
    border-radius: var(--platforma-radius-sm, 6px);
    background: var(--platforma-white);
    font-size: var(--platforma-text-sm);
    transition: border-color var(--platforma-duration-fast, 150ms) ease,
                box-shadow var(--platforma-duration-fast, 150ms) ease;
}

.platforma-filter-bar__field select:focus,
.platforma-filter-bar__field input:focus {
    border-color: var(--platforma-primary);
    box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.15);
    outline: none;
}

.platforma-filter-bar__grow {
    flex: 1;
    min-width: 14rem;
}

.platforma-filter-bar__actions {
    margin-left: auto;
    display: flex;
    gap: var(--platforma-space-2);
}

/* ── Stats-row (KPI-kort på list-pages — centered-KPI-variant) ──
   Bemærk: dette er workbench-varianten (centered). Dashboard har
   sin egen icon-left-variant i platforma-dashboard.css. Det er to
   bevidst forskellige komponenter under samme klasse-familie. */
.platforma-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--platforma-space-3);
    margin-bottom: var(--platforma-space-4);
}

.platforma-stat-card {
    background: var(--platforma-surface-card, var(--platforma-white));
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-radius: var(--platforma-radius-md, 10px);
    padding: var(--platforma-space-3) var(--platforma-space-4);
    text-align: center;
    transition: transform var(--platforma-duration-fast, 150ms) ease,
                box-shadow var(--platforma-duration-fast, 150ms) ease;
}

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

.platforma-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

.platforma-stat-card__value--primary { color: var(--platforma-primary); }
.platforma-stat-card__value--success { color: var(--platforma-success); }
.platforma-stat-card__value--warning { color: var(--platforma-warning); }
.platforma-stat-card__value--danger  { color: var(--platforma-danger); }
.platforma-stat-card__value--muted   { color: var(--platforma-ink-subtle, var(--platforma-gray-400)); }

.platforma-stat-card__label {
    margin-top: 4px;
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
    letter-spacing: 0.02em;
}

/* ── Sticky sidenav (settings-page-shell) ─────────────────────────── */
.platforma-sidenav-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--platforma-space-4);
    align-items: start;
}

@media (max-width: 900px) {
    .platforma-sidenav-layout {
        grid-template-columns: 1fr;
    }
}

.platforma-sidenav {
    position: sticky;
    top: var(--platforma-space-4);
    background: var(--platforma-surface-card, var(--platforma-white));
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-radius: var(--platforma-radius-md, 10px);
    padding: var(--platforma-space-2);
    max-height: calc(100vh - var(--platforma-space-8));
    overflow-y: auto;
}

.platforma-sidenav__item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--platforma-radius-sm, 6px);
    color: var(--platforma-ink-primary, var(--platforma-gray-700));
    font-size: var(--platforma-text-sm);
    text-decoration: none;
    transition: background var(--platforma-duration-fast, 120ms) ease,
                color var(--platforma-duration-fast, 120ms) ease;
    line-height: 1.3;
}

.platforma-sidenav__item:hover {
    background: var(--platforma-gray-50);
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

.platforma-sidenav__item.is-active {
    background: rgba(54, 153, 255, 0.08);
    color: var(--platforma-primary);
    font-weight: 600;
}

/* Smooth scroll når brugeren klikker på et side-nav-link */
html {
    scroll-behavior: smooth;
}

/* Modified-dot-indikator ved kategorinavn */
.platforma-sidenav__item.has-changes::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--platforma-primary);
    margin-left: 6px;
    vertical-align: middle;
}

/* Sidebar search (Settings-page) */
.platforma-sidenav__search {
    display: block;
    width: calc(100% - 1rem);
    margin: 0 0.5rem 0.5rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--platforma-gray-200);
    border-radius: var(--platforma-radius-sm, 6px);
    font-size: var(--platforma-text-sm);
    background: var(--platforma-gray-50);
}

.platforma-sidenav__search:focus {
    outline: none;
    border-color: var(--platforma-primary);
    background: var(--platforma-white);
}

/* ── Translations-kategori-palet ──────────────────────────────────── */
.translations-category-cell .platforma-badge[data-category="Navigation"]  { background: #EFF6FF; color: #1D4ED8; }
.translations-category-cell .platforma-badge[data-category="Common"]      { background: #F3F4F6; color: #374151; }
.translations-category-cell .platforma-badge[data-category="Admin"]       { background: #FEF3C7; color: #92400E; }
.translations-category-cell .platforma-badge[data-category="Tenants"]     { background: #ECFDF5; color: #047857; }
.translations-category-cell .platforma-badge[data-category="Users"]       { background: #EDE9FE; color: #5B21B6; }
.translations-category-cell .platforma-badge[data-category="Portal"]      { background: #E0F2FE; color: #075985; }
.translations-category-cell .platforma-badge[data-category="Email"]       { background: #FCE7F3; color: #9D174D; }
.translations-category-cell .platforma-badge[data-category="Errors"]      { background: #FEE2E2; color: #991B1B; }
.translations-category-cell .platforma-badge[data-category="Website"]     { background: #E0F7FA; color: #006064; }
.translations-category-cell .platforma-badge[data-category="Bookings"]    { background: #FFEDD5; color: #9A3412; }
.translations-category-cell .platforma-badge[data-category="Facilities"]  { background: #DCFCE7; color: #166534; }

/* ── Bulk-action-bar (floater mellem filter-bar og tabel) ─────────── */
.platforma-bulk-bar {
    display: none;
    align-items: center;
    gap: var(--platforma-space-3);
    padding: var(--platforma-space-3);
    margin-bottom: var(--platforma-space-3);
    background: var(--platforma-primary-light, #E0F2FE);
    border: 1px solid rgba(54, 153, 255, 0.3);
    border-radius: var(--platforma-radius-md, 10px);
    flex-wrap: wrap;
}

.platforma-bulk-bar.is-visible { display: flex; }

.platforma-bulk-bar__count {
    font-weight: 700;
    color: var(--platforma-primary);
}

.platforma-bulk-bar__actions {
    display: flex;
    gap: var(--platforma-space-2);
    flex-wrap: wrap;
}

.platforma-bulk-bar__clear {
    margin-left: auto;
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
    font-size: var(--platforma-text-sm);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.platforma-bulk-bar__clear:hover {
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

/* Row-selection highlight */
.platforma-table--selectable tbody tr {
    transition: background var(--platforma-duration-fast, 120ms) ease;
}

.platforma-table--selectable tbody tr.is-selected {
    background: rgba(54, 153, 255, 0.06);
}

/* ── Right-sized input-widths ─────────────────────────────────────── */
/* Tænkt som modifiers for .platforma-input: forhindrer at et tre-cifret
   tal render i en 900px bred input på desktop. */
.platforma-input--narrow {
    max-width: 14rem;   /* 3-10 digits, SLA codes, short IDs */
}

.platforma-input--medium {
    max-width: 28rem;   /* display names, short text, support channel */
}

.platforma-input--narrow,
.platforma-input--medium {
    width: 100%;
}

/* ── Horisontal tab-bar (settings, CRM, workbench-dashboards) ────── */
.platforma-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--platforma-surface-line, var(--platforma-gray-200));
    margin-bottom: var(--platforma-space-6);
    overflow-x: auto;
    scrollbar-width: thin;
}

.platforma-tab {
    padding: var(--platforma-space-3) var(--platforma-space-5);
    font-size: var(--platforma-text-sm);
    font-weight: 600;
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color var(--platforma-duration-fast, 150ms) ease,
                border-color var(--platforma-duration-fast, 150ms) ease,
                background var(--platforma-duration-fast, 150ms) ease;
    display: inline-flex;
    align-items: center;
    gap: var(--platforma-space-2);
    text-decoration: none;
}

.platforma-tab:hover {
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
    background: var(--platforma-gray-50);
    border-radius: var(--platforma-radius-md, 8px) var(--platforma-radius-md, 8px) 0 0;
}

.platforma-tab.is-active {
    color: var(--platforma-primary);
    border-bottom-color: var(--platforma-primary);
    background: rgba(0, 158, 247, 0.04);
    border-radius: var(--platforma-radius-md, 8px) var(--platforma-radius-md, 8px) 0 0;
}

.platforma-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: var(--platforma-gray-100);
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
}

.platforma-tab.is-active .platforma-tab-badge {
    background: rgba(0, 158, 247, 0.12);
    color: var(--platforma-primary);
}

.platforma-tab-panel {
    display: none;
}

.platforma-tab-panel.is-active {
    display: block;
}