/* ============================================================
   RVNK CMS — Custom Styles
   ============================================================
   Extends Bulma + neptun.css for CMS-specific layout.
   Keeps CMS UI elements separate from app content styles.
   ============================================================ */

/* ── CSS Custom Properties (CMS-specific) ──────── */
:root {
    --npt-navy-blue: #002c56;
    --npt-accent-blue: #008ac7;
    --npt-brand-red: #E20026;

    /* Radius scale */
    --cms-radius-sm: 4px;
    --cms-radius-lg: 12px;
    --cms-radius-pill: 999px;

    /* Font-size scale (collapses the historical 0.65–0.9rem sprawl) */
    --cms-fs-xs: 0.72rem;
    --cms-fs-sm: 0.8rem;
    --cms-fs-md: 0.875rem;
    --cms-fs-lg: 1rem;
}

/* Light mode (default) */
:root, html[data-theme="light"] {
    --cms-sidebar-width: 260px;
    --cms-sidebar-bg: var(--npt-navy-blue);
    --cms-sidebar-text: #a0aec0;
    --cms-sidebar-active: #ffffff;
    --cms-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --cms-header-height: 56px;
    --cms-border: #e2e8f0;
    --cms-bg: #f7f8fc;
    --cms-card-bg: #ffffff;
    --cms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --cms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --cms-radius: 8px;
    --cms-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --cms-accent: var(--npt-navy-blue);
    --cms-accent-hover: var(--npt-accent-blue);
    --cms-success: #38a169;
    --cms-danger: var(--npt-brand-red);
    --cms-danger-soft: #fc8181;
    --cms-warning: #d69e2e;
    --cms-file-pdf: var(--npt-brand-red);
    --cms-file-video: var(--npt-accent-blue);
    --cms-file-audio: var(--cms-success);
    --cms-text: #2d3748;
    --cms-text-muted: #718096;
    --cms-login-bg: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);

    /* Dashboard activity chart — reuses the theme's own blue/red (both
       pass the CVD/contrast/lightness validator as-is in light and dark,
       so no separate dark-mode step is needed here). */
    --cms-chart-articles: var(--npt-accent-blue);
    --cms-chart-news: var(--npt-brand-red);
    --cms-chart-grid: #e1e0d9;
}

/* Dark mode overrides */
html[data-theme="dark"], body.dark-mode {
    --cms-bg: #0b0f19;
    --cms-card-bg: #111827;
    --cms-border: #1f2937;
    --cms-text: #f3f4f6;
    --cms-text-muted: #9ca3af;
    --cms-accent: var(--npt-accent-blue);
    --cms-accent-hover: #31b0d5;
    --cms-sidebar-bg: #030712;
    --cms-login-bg: linear-gradient(135deg, #08121e 0%, #002c56 100%);

    --cms-chart-grid: #2c2c2a;
}

/* ── Layout Shell ──────────────────────────────── */
.cms-layout {
    display: flex;
    min-height: 100vh;
    background: var(--cms-bg);
}

.cms-main {
    flex: 1;
    margin-left: var(--cms-sidebar-width);
    padding: 1.5rem 2rem; /* 24px 32px */
    min-height: 100vh;
    transition: margin-left var(--cms-transition);
    min-width: 0; /* Prevents overflow from layout children */
}

/* ── Sidebar ───────────────────────────────────── */
.cms-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--cms-sidebar-width);
    background: var(--cms-sidebar-bg);
    color: var(--cms-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
    transition: transform var(--cms-transition);
}

.cms-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
}

.cms-sidebar__brand img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.cms-sidebar__brand span {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.cms-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 4px 12px;
    flex: 1;
}

.cms-sidebar__nav hr {
    border: none;
    height: 1px;
    background-color: var(--npt-accent-blue);
    opacity: 0.35;
    margin: 12px 8px;
}

.cms-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--cms-sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--cms-transition);
    white-space: nowrap;
}

.cms-nav-item:hover {
    background: var(--cms-sidebar-hover-bg);
    color: var(--cms-sidebar-active);
}

.cms-nav-item.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cms-sidebar-active);
    font-weight: 600;
}

.cms-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.7;
}

.cms-nav-item.is-active i,
.cms-nav-item:hover i {
    opacity: 1;
}

/* ── Page Header ───────────────────────────────── */
.cms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.cms-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cms-text);
    margin: 0;
}

/* ── Breadcrumb Trail ──────────────────────────── */
.cms-breadcrumb-trail {
    font-size: 0.8rem;
    color: var(--cms-text-muted);
    margin-bottom: 10px;
}

.cms-breadcrumb-trail a {
    color: var(--cms-text-muted);
    text-decoration: none;
}

.cms-breadcrumb-trail a:hover {
    color: var(--cms-text);
    text-decoration: underline;
}

.cms-breadcrumb-trail__sep {
    margin: 0 6px;
}

.cms-breadcrumb-trail__current {
    color: var(--cms-text);
    font-weight: 600;
}

.cms-page-header .cms-breadcrumb {
    font-size: 0.85rem;
    color: var(--cms-text-muted);
    margin-top: 4px;
}

/* ── Cards ─────────────────────────────────────── */
.cms-card {
    background: var(--cms-card-bg);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--cms-border);
}

.cms-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cms-border);
}

.cms-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cms-text);
}

/* ── Data Table ────────────────────────────────── */
.cms-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cms-table thead th {
    background: var(--cms-bg);
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cms-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--cms-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.cms-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cms-border);
    font-size: 0.9rem;
    color: var(--cms-text);
    vertical-align: middle;
}

.cms-table tbody tr {
    transition: background var(--cms-transition);
}

.cms-table tbody tr:hover {
    background: var(--cms-bg);
}

.cms-table .cms-table__thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.cms-table .cms-table__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Status badges ─────────────────────────────── */
.cms-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--cms-radius-pill);
    font-size: var(--cms-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.cms-badge--success {
    background: #c6f6d5;
    color: #22543d;
}

.cms-badge--warning {
    background: #fefcbf;
    color: #744210;
}

.cms-badge--danger {
    background: #fed7d7;
    color: #742a2a;
}

.cms-badge--info {
    background: #bee3f8;
    color: #2a4365;
}

/* Uppercase variant, e.g. compact error-type labels */
.cms-badge--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* News-channel badge (issue N4): a soft tint of the admin-configured
   channel color instead of a saturated fill, so a channel configured
   close to the danger red (e.g. "Intern") doesn't read as an error/
   delete affordance next to it. Mixes against the theme's own card/text
   colors (not literal white/black) so it self-adjusts in dark mode the
   same way the other .cms-badge variants do above. */
.cms-badge--channel {
    background: color-mix(in srgb, var(--channel-color) 16%, var(--cms-card-bg));
    color: color-mix(in srgb, var(--channel-color) 70%, var(--cms-text));
}

/* Role badges (admin panel user table) */
.cms-badge--role-admin {
    background: rgba(226, 0, 38, 0.12);
    color: var(--cms-danger);
}
html[data-theme="dark"] .cms-badge--role-admin {
    background: rgba(226, 0, 38, 0.2);
    color: var(--cms-danger-soft);
}

.cms-badge--role-redakteur {
    background: rgba(0, 138, 199, 0.12);
    color: var(--npt-accent-blue);
}
html[data-theme="dark"] .cms-badge--role-redakteur {
    background: rgba(0, 138, 199, 0.15);
}

/* ── Buttons (extending Bulma) ─────────────────── */
.button.cms-btn-accent {
    background: var(--cms-accent);
    color: white;
    border: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all var(--cms-transition);
}

.button.cms-btn-accent:hover {
    background: color-mix(in srgb, var(--cms-accent) 85%, black);
    transform: translateY(-1px);
    box-shadow: var(--cms-shadow-md);
}

/* ── Toast Notifications ───────────────────────── */
.cms-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.cms-toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    animation: cms-toast-in 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 400px;
    pointer-events: auto;
}

.cms-toast--success { background: var(--cms-success); }
.cms-toast--error   { background: var(--cms-danger); }
.cms-toast--warning { background: var(--cms-warning); }
.cms-toast--info    { background: var(--cms-accent); }

@keyframes cms-toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ── Editor Layout ─────────────────────────────── */
.cms-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: calc(100vh - 140px);
    align-items: start;
}

@media (max-width: 64rem) { /* 1024px — stack editor to single column on tablets */
    .cms-editor-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.cms-editor-panel--sticky {
    position: sticky;
    top: 20px;
    height: calc(100vh - 140px);
}

@media (max-width: 64rem) {
    .cms-editor-panel--sticky {
        position: static;
        height: auto;
    }
}

.cms-editor-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cms-card-bg);
    border-radius: var(--cms-radius);
    border: 1px solid var(--cms-border);
}

.cms-editor-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cms-border);
    background: var(--cms-bg);
    flex-shrink: 0;
}

.cms-editor-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Preview responsive wrapper ────────────────── */
.cms-preview-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: var(--cms-bg);
    flex: 1;
    overflow: auto;
}

.cms-preview-frame {
    background: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-sm);
    overflow: hidden;
    transition: width var(--cms-transition);
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cms-preview-frame--phone   { width: 375px; height: 812px; max-height: 80vh; overflow-y: hidden; margin: 0 auto; border-radius: 30px; box-shadow: 0 0 0 10px #2a2a2a, 0 10px 30px rgba(0,0,0,0.2); }
.cms-preview-frame--tablet  { width: 768px; height: 1024px; max-height: 85vh; overflow-y: hidden; margin: 0 auto; border-radius: 12px; box-shadow: 0 0 0 8px #2a2a2a, 0 10px 30px rgba(0,0,0,0.2); }
.cms-preview-frame--desktop { width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; box-shadow: none; }

.cms-preview-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Preview device buttons ────────────────────── */
.cms-device-switcher {
    display: flex;
    gap: 4px;
    background: var(--cms-bg);
    border-radius: 6px;
    padding: 3px;
    border: 1px solid var(--cms-border);
}

.cms-device-btn {
    padding: 4px 10px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--cms-text-muted);
    transition: all var(--cms-transition);
}

.cms-device-btn.is-active {
    background: var(--cms-card-bg);
    color: var(--cms-text);
    box-shadow: var(--cms-shadow-sm);
}

.cms-device-btn:hover:not(.is-active) {
    color: var(--cms-text);
}

details summary::-webkit-details-marker {
    display: none;
}
details summary {
    list-style: none;
}

/* ── Login Page ────────────────────────────────── */
.cms-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cms-login-bg);
}

.cms-login__card {
    background: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--cms-shadow-md);
}

.cms-login__logo {
    text-align: center;
    margin-bottom: 32px;
}

.cms-login__logo img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.cms-login__logo h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cms-text);
}

.cms-login__logo p {
    font-size: 0.85rem;
    color: var(--cms-text-muted);
    margin-top: 4px;
}

/* ── Loading spinner ───────────────────────────── */
.cms-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--cms-text-muted);
}

.cms-loading i {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

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

/* ── Empty state ───────────────────────────────── */
.cms-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--cms-text-muted);
}

.cms-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.cms-empty p {
    font-size: 1rem;
    margin-top: 8px;
}

/* ── Collapsible Sidebar Styling ── */
.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--cms-sidebar-text);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 4px;
    transition: all var(--cms-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.sidebar-toggle-btn:hover {
    background: var(--cms-sidebar-hover-bg);
    color: var(--cms-sidebar-active);
}

.cms-layout.is-collapsed {
    --cms-sidebar-width: 68px;
}
.cms-layout.is-collapsed .cms-sidebar__brand {
    justify-content: center;
    padding: 20px 10px;
}
.cms-layout.is-collapsed .cms-sidebar__brand span,
.cms-layout.is-collapsed .cms-sidebar__nav .cms-nav-item span,
.cms-layout.is-collapsed .cms-sidebar__user {
    display: none !important;
}
.cms-layout.is-collapsed .cms-sidebar__nav .cms-nav-item {
    justify-content: center;
    padding: 10px 0;
}
.cms-layout.is-collapsed .cms-sidebar__nav .cms-nav-item i {
    font-size: 1.2rem;
    margin: 0;
}


/* ── Dark Mode Overrides (Bulma compatibility) ── */
html[data-theme="dark"] body, body.dark-mode {
    background-color: var(--cms-bg);
    color: var(--cms-text);
}
html[data-theme="dark"] .cms-card,
html[data-theme="dark"] .modal-card-body,
html[data-theme="dark"] .modal-card-head,
html[data-theme="dark"] .modal-card-foot,
html[data-theme="dark"] .cms-navbar-mobile,
html[data-theme="dark"] .details-drawer {
    background-color: var(--cms-card-bg);
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .modal-card-title,
html[data-theme="dark"] .cms-card__title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .label {
    color: var(--cms-text) !important;
}
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: currentColor;
}
html[data-theme="dark"] a:not(.cms-nav-item):not(.cms-bottom-nav-item):not(.button) {
    color: var(--npt-accent-blue);
}
html[data-theme="dark"] a:not(.cms-nav-item):not(.cms-bottom-nav-item):not(.button):hover {
    color: var(--cms-accent-hover);
}
html[data-theme="dark"] .button.is-link.is-light {
    background-color: rgba(0, 138, 199, 0.15);
    color: var(--npt-accent-blue);
    border-color: transparent;
}
html[data-theme="dark"] .button.is-link.is-light:hover {
    background-color: rgba(0, 138, 199, 0.25);
    color: #fff;
}
html[data-theme="dark"] .button.is-success.is-light {
    background-color: rgba(56, 161, 105, 0.15);
    color: #48bb78;
    border-color: transparent;
}
html[data-theme="dark"] .button.is-success.is-light:hover {
    background-color: rgba(56, 161, 105, 0.25);
    color: #fff;
}
html[data-theme="dark"] .button.is-warning.is-light {
    background-color: rgba(214, 158, 46, 0.15);
    color: #ecc94b;
    border-color: transparent;
}
html[data-theme="dark"] .button.is-warning.is-light:hover {
    background-color: rgba(214, 158, 46, 0.25);
    color: #fff;
}
html[data-theme="dark"] .button.is-danger.is-light {
    background-color: rgba(226, 0, 38, 0.15);
    color: var(--cms-danger-soft);
    border-color: transparent;
}
html[data-theme="dark"] .button.is-danger.is-light:hover {
    background-color: rgba(226, 0, 38, 0.25);
    color: #fff;
}
html[data-theme="dark"] .cms-table {
    background-color: transparent;
    color: var(--cms-text);
}
html[data-theme="dark"] .cms-table thead th {
    background: #1f2937;
    color: var(--cms-text-muted);
    border-bottom-color: var(--cms-border);
}
html[data-theme="dark"] .cms-table tbody td {
    border-bottom-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .cms-table tbody tr:hover {
    background: #1f2937;
}
html[data-theme="dark"] .table {
    background-color: transparent !important;
    color: var(--cms-text) !important;
}
html[data-theme="dark"] .table thead th {
    background-color: #1f2937 !important;
    color: var(--cms-text-muted) !important;
    border-bottom-color: var(--cms-border) !important;
}
html[data-theme="dark"] .table td {
    border-bottom-color: var(--cms-border) !important;
    color: var(--cms-text) !important;
}
html[data-theme="dark"] .table tbody tr:hover {
    background-color: #1f2937 !important;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select select {
    background-color: #1f2937;
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] select option {
    background-color: #111827;
    color: var(--cms-text);
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder {
    color: #6b7280;
}
html[data-theme="dark"] .button:not(.cms-btn-accent):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-outlined) {
    background-color: #1f2937;
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .button:not(.cms-btn-accent):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-outlined):hover {
    background-color: #374151;
    color: var(--cms-text);
}
html[data-theme="dark"] .button:not(.cms-btn-accent):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-outlined {
    background-color: transparent;
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .button:not(.cms-btn-accent):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-outlined:hover {
    background-color: #1f2937;
    color: var(--cms-text);
}
html[data-theme="dark"] .pagination-link,
html[data-theme="dark"] .pagination-previous,
html[data-theme="dark"] .pagination-next {
    background-color: var(--cms-card-bg);
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .pagination-link.is-current {
    background-color: var(--cms-accent) !important;
    border-color: var(--cms-accent) !important;
    color: white !important;
}
html[data-theme="dark"] .activity-item {
    border-bottom-color: var(--cms-border);
}
html[data-theme="dark"] .activity-item__time {
    color: var(--cms-text-muted);
}
/* cms-badge overrides for dark mode */
html[data-theme="dark"] .cms-badge--success {
    background-color: rgba(56, 161, 105, 0.15);
    color: #48bb78;
}
html[data-theme="dark"] .cms-badge--warning {
    background-color: rgba(214, 158, 46, 0.15);
    color: #ecc94b;
}
html[data-theme="dark"] .cms-badge--danger {
    background-color: rgba(226, 0, 38, 0.15);
    color: var(--cms-danger-soft);
}
html[data-theme="dark"] .cms-badge--info {
    background-color: rgba(0, 138, 199, 0.15);
    color: #90cdf4;
}

/* Bulma tag overrides for dark mode */
html[data-theme="dark"] .tag.is-info.is-light {
    background-color: rgba(0, 138, 199, 0.15);
    color: #90cdf4;
}
html[data-theme="dark"] .tag.is-light {
    background-color: #1f2937;
    color: var(--cms-text);
}
html[data-theme="dark"] .tag {
    color: var(--cms-text);
}
html[data-theme="dark"] .tag:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-light) {
    background-color: #1f2937;
    color: var(--cms-text);
}
/* has-text-grey in dark mode */
html[data-theme="dark"] .has-text-grey,
html[data-theme="dark"] .has-text-grey-light {
    color: var(--cms-text-muted) !important;
}
/* Select wrapper arrow */
html[data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after {
    border-color: var(--cms-text-muted);
}
html[data-theme="dark"] .select select option {
    background-color: #1f2937;
    color: var(--cms-text);
}

/* Brand-blue border accent for primary titles (Neptun App style) */
.cms-page-header h1 {
    border-left: 4px solid var(--npt-accent-blue);
    padding-left: 12px;
}

/* ── Responsive: collapse sidebar on small screens */
@media (max-width: 1024px) {
    .cms-sidebar {
        transform: translateX(-100%);
        width: 260px !important; /* Sidebar is always full width on mobile slideout */
    }
    .cms-sidebar.is-open {
        transform: translateX(0);
    }
    .cms-layout.is-collapsed .cms-sidebar__brand span,
    .cms-layout.is-collapsed .cms-sidebar__nav .cms-nav-item span,
    .cms-layout.is-collapsed .cms-sidebar__user {
        display: block !important;
    }
    .cms-layout.is-collapsed .cms-sidebar__brand {
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
    }
    .cms-layout.is-collapsed .cms-sidebar__nav .cms-nav-item {
        justify-content: flex-start;
        padding: 10px 12px;
    }
    .cms-main {
        margin-left: 0 !important;
        padding: calc(var(--cms-header-height) + 16px) 16px 16px !important;
    }
    .cms-editor-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .cms-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .cms-page-header .buttons {
        width: 100%;
        justify-content: flex-start;
    }
    /* One responsive rule for page-header action buttons (issue N10):
       every action row (dashboard, articles, media…) shares this class
       so primary/secondary buttons always stack full-width, same order,
       instead of dropping to intrinsic width with a ragged left edge. */
    .cms-page-header-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .cms-page-header-actions > .button {
        width: 100%;
    }
}

/* Editor header prev/next pager: a dedicated class instead of Bulma's
   `.is-flex` (which carries !important and was silently overriding the
   JS-controlled inline `display: none`, keeping the pager visible —
   badly squeezed against the header buttons — even for a brand-new
   entry that has nothing to navigate between; see issue B4). */
.cms-editor-nav {
    align-items: center;
}

/* Editor header overflow menu ("Versionsverlauf" / "Als Entwurf
   speichern" / "Als Vorlage speichern" / "Terminieren…"): collapses into
   a dropdown at every width, not just below 640px — the desktop header
   used to spell out all 5 text actions in a row, competing with the
   primary Speichern button (issue N17). Reuses the same dropdown built
   for the phone layout everywhere now. */
.cms-editor-more {
    position: relative;
}
.cms-editor-more .dropdown-trigger {
    display: inline-flex;
}
.cms-editor-more .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    display: none;
    padding-top: 6px;
    z-index: 20;
    min-width: 220px;
}
.cms-editor-more.is-active .dropdown-menu {
    display: block;
}
.cms-editor-more .dropdown-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    background: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    box-shadow: var(--cms-shadow-md);
    border-radius: var(--cms-radius);
    padding: 8px;
}
.cms-editor-more .dropdown-content .button {
    width: 100%;
    justify-content: flex-start;
}

@media (max-width: 640px) {
    /* Pager and action row no longer fit side by side on one line once
       the pager is actually showing (existing entry) — stack them so
       the buttons keep full width instead of overflowing the viewport. */
    .cms-editor-header-actions {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .cms-editor-nav {
        justify-content: center;
    }

    .cms-page-header .cms-editor-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
    }
    .cms-page-header .cms-editor-actions > .button,
    .cms-page-header .cms-editor-actions > .cms-editor-more {
        flex: 1 1 0;
        min-width: 0;
    }
    .cms-page-header .cms-editor-actions .dropdown-trigger .button {
        width: 100%;
        height: 100%;
    }
}

/* ── Bottom App Menu (Mobile Tab Bar) ──────────── */
.cms-bottom-nav {
    display: none; /* Hidden on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--cms-card-bg);
    border-top: 1px solid var(--cms-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    z-index: 95; /* below sidebar backdrop */
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    /* Force its own compositing layer — without this, mobile browsers can
       delay painting this fixed element at the right position until the
       first scroll/reflow, so it appears to only "show up" once scrolled. */
    transform: translateZ(0);
    will-change: transform;
}

.cms-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cms-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
    flex: 1;
    height: 100%;
    gap: 4px;
    transition: color var(--cms-transition);
}

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

.cms-bottom-nav-item:hover,
.cms-bottom-nav-item.is-active {
    color: var(--cms-accent);
}

@media (max-width: 1024px) {
    .cms-bottom-nav {
        display: flex;
    }
    .cms-main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom) + 20px) !important;
    }
}

/* ── Universal link color (both modes) ─────────── */
/* Override the default Bulma blue for standard links */
a:not(.cms-nav-item):not(.cms-bottom-nav-item):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next) {
    color: var(--npt-accent-blue);
}
a:not(.cms-nav-item):not(.cms-bottom-nav-item):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next):hover {
    color: var(--cms-accent-hover);
}

/* ── Dark mode: Modal overrides ─────────────────── */
html[data-theme="dark"] .modal-card {
    background: transparent;
}
html[data-theme="dark"] .modal-card-head,
html[data-theme="dark"] .modal-card-foot {
    background-color: #1f2937;
    border-color: var(--cms-border);
}
html[data-theme="dark"] .modal-card-body {
    background-color: var(--cms-card-bg);
    color: var(--cms-text);
}
html[data-theme="dark"] .modal-card-title {
    color: var(--cms-text);
}
html[data-theme="dark"] .delete {
    background-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .delete:hover {
    background-color: rgba(255,255,255,0.2);
}

/* ── Dark mode: Notification overrides ──────────── */
html[data-theme="dark"] .notification {
    background-color: #1f2937;
    color: var(--cms-text);
}
html[data-theme="dark"] .notification.is-danger.is-light {
    background-color: rgba(226, 0, 38, 0.12);
    color: var(--cms-danger-soft);
}
html[data-theme="dark"] .notification.is-info.is-light {
    background-color: rgba(0, 138, 199, 0.12);
    color: var(--npt-accent-blue);
}
html[data-theme="dark"] .notification.is-success.is-light {
    background-color: rgba(56, 161, 105, 0.12);
    color: #48bb78;
}
html[data-theme="dark"] .notification.is-warning.is-light {
    background-color: rgba(214, 158, 46, 0.12);
    color: #ecc94b;
}

/* ── Dark mode: sidebar hr cleanup ──────────────── */
html[data-theme="dark"] .cms-sidebar__nav hr {
    background-color: var(--npt-accent-blue);
    opacity: 0.3;
}

/* Modals z-index to stay on top of fixed headers */
.modal {
    z-index: 2000;
}

/* Shared modal scaffold: consistent head/body/footer padding, and the
   body shrinks to its content instead of carrying a trailing field's
   own bottom margin on top of the body's own padding — on short forms
   (e.g. the schedule modal's single field) that stacked spacing read
   as a dead band above the footer. */
.modal-card-head,
.modal-card-foot {
    padding: 14px 20px;
}
.modal-card-body {
    padding: 20px;
}
.modal-card-body > .field:last-child {
    margin-bottom: 0;
}

/* The Mediathek picker (and the crop step it can trigger) are opened FROM
   another already-open modal (Download-Karte, Neptun Button, Titelbild...),
   so they must always render above the base .modal layer, not below it. */
#media-modal {
    z-index: 2010;
}
#cropper-modal {
    z-index: 2020;
}

/* ============================================================
   CMS Admin Panel Styles
   ============================================================ */

/* Pill-tab group (same visual language as the Bulma .buttons.has-addons
   pill tabs on Artikel/News) instead of the underline style this used to
   have — one tab component sitewide (issue I1), and every tab strip now
   carries both a leading icon and a count badge where applicable
   (issue I1'), so content-page and Administration/Einreichungen tabs
   read as the same component. The feedback dialog's "Art" segmented
   control is deliberately left as-is: it's a choice between two
   options, not page navigation — see .cms-segmented__option for its
   matching active-state fill (issue N16). */
.cms-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    /* Above the phone breakpoint: tabs don't wrap (white-space: nowrap
       below), so on tighter desktop/tablet widths the bar scrolls
       horizontally instead of overflowing the page. Phones get a proper
       wrapping chip grid instead — see the max-width: 480px block below. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Edge-fade scroll affordance (issue N6): pure-CSS "scroll shadow"
       trick — the two opaque gradients scroll with the content
       (background-attachment: local) and cancel the fade whenever
       there's nothing left to scroll to on that side, while the two
       shadow gradients stay fixed to the viewport edges. No JS needed. */
    background:
        linear-gradient(to right, var(--cms-bg) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--cms-bg) 30%, rgba(255, 255, 255, 0)) right,
        linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0)) right;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}
.cms-tab {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cms-text);
    cursor: pointer;
    margin: 0 0 0 -1px;
    border-radius: 0;
    transition: background var(--cms-transition), color var(--cms-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cms-card-bg) !important;
    border: 1px solid var(--cms-border) !important;
    outline: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.cms-tabs .cms-tab:first-child {
    margin-left: 0;
    border-top-left-radius: var(--cms-radius);
    border-bottom-left-radius: var(--cms-radius);
}
.cms-tabs .cms-tab:last-child {
    border-top-right-radius: var(--cms-radius);
    border-bottom-right-radius: var(--cms-radius);
}
.cms-tab:hover { background: var(--cms-border) !important; }
.cms-tab.is-active {
    background: var(--cms-accent) !important;
    color: #fff !important;
    border-color: var(--cms-accent) !important;
    position: relative;
    z-index: 1;
}

/* Segmented choice control (e.g. feedback dialog "Art") — a two-way
   choice, not page navigation, so it keeps the pill-group shape instead
   of becoming a .cms-tabs strip, but shares the exact same active-state
   fill (navy bg, white text) so there's one active-state token sitewide
   (issue N16), not a third pale-blue variant. */
/* Media folder-manage tree row (issue N7) — indent-guided rows with a
   static name, edit-on-demand via the pencil icon instead of every row
   being a permanently-editable input next to its own delete button. */
.folder-manage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--cms-radius-sm);
    border-left: 0.125rem solid var(--cms-border);
}
.folder-manage-row:hover {
    background: var(--cms-bg);
}
.folder-manage-row__icon {
    color: var(--cms-text-muted);
    font-size: 0.8rem;
}
.folder-manage-row__name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--cms-text);
}
.folder-manage-row .folder-rename-input {
    flex: 1;
}
.folder-manage-row__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.cms-segmented__option.is-active {
    background-color: var(--cms-accent) !important;
    border-color: var(--cms-accent) !important;
    color: #fff !important;
}

/* Phones: a side-scrolling bar hides tabs off-screen with no visual hint
   they're there. Wrap into a chip grid instead — each tab keeps its own
   rounded corners and a small gap, roughly two per row, so every tab stays
   visible and reachable without scrolling. */
@media (max-width: 480px) {
    .cms-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
        background: none; /* wraps into a grid here, no scroll fade needed */
    }
    .cms-tabs .cms-tab {
        margin: 0;
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        white-space: normal;
        text-align: center;
        border-radius: var(--cms-radius) !important;
    }
}
.cms-tab-panel { display: none; }
.cms-tab-panel.is-active { display: block; }

/* -- User Table & Avatars -- */
.user-row td { vertical-align: middle; }
.user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--cms-accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    flex-shrink: 0;
}
/* -- Error Log Table -- */
.error-row {
    border-bottom: 1px solid var(--cms-border);
    transition: background var(--cms-transition);
}
.error-row:last-child { border-bottom: none; }
.error-row td { vertical-align: top; padding: 12px 8px; font-size: 0.875rem; }
.error-row.is-dismissed td { opacity: 0.45; }
.error-detail-code {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 8px 10px;
    background: var(--cms-bg);
    border-radius: 6px;
    border: 1px solid var(--cms-border);
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
    color: var(--cms-text-muted);
    display: none;
}
.error-detail-toggle {
    font-size: 0.78rem;
    color: var(--cms-text-muted);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.error-detail-toggle:hover { color: var(--cms-text); }
.error-actions { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.error-ts { color: var(--cms-text-muted); font-size: 0.78rem; white-space: nowrap; }
.error-context {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--cms-text-muted);
    background: var(--cms-bg);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--cms-border);
}
.error-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--cms-text-muted);
}
.error-empty i { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; }

/* -- Toolbar -- */
.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.admin-toolbar-right { display: flex; gap: 8px; align-items: center; }

/* -- Edit inline row -- */
.cms-select-sm { font-size: 0.85rem; height: 30px; padding: 0 8px; }


/* ============================================================
   CMS Mediathek Styles
   ============================================================ */

/* Mediathek Grid Layout */
.media-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.media-card {
    background: var(--cms-card-bg);
    color: var(--cms-text);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all var(--cms-transition);
    position: relative;
}

.media-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--cms-shadow-md);
    border-color: var(--cms-accent);
}

.media-card.is-selected {
    border-color: var(--cms-accent);
    box-shadow: 0 0 0 2px var(--cms-accent);
}

.media-card__preview {
    aspect-ratio: 4/3;
    background: var(--cms-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--cms-border);
}

.media-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-card__icon {
    font-size: 3rem;
    color: var(--cms-text-muted);
}

.media-card__info {
    padding: 10px 12px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.media-card__title {
    font-weight: 600;
    color: var(--cms-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-card__meta {
    color: var(--cms-text-muted);
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
}

/* Upload Drag and Drop Zone */
.upload-dropzone {
    border: 2px dashed var(--cms-border);
    border-radius: var(--cms-radius);
    background: var(--cms-card-bg);
    color: var(--cms-text);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--cms-transition);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-dropzone:hover, .upload-dropzone.is-dragover {
    border-color: var(--cms-accent);
    background: rgba(0, 138, 199, 0.08);
    color: var(--cms-accent);
}

.upload-dropzone i {
    font-size: 2.5rem;
    color: #a0aec0;
    transition: color var(--cms-transition);
}

.upload-dropzone:hover i, .upload-dropzone.is-dragover i {
    color: var(--cms-accent);
}

/* Tag Input Badges */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.tag-badge {
    background: var(--cms-border);
    color: var(--cms-text);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Media scanner "typ:" tags — fixed, high-contrast colors so the two
   content types are distinguishable at a glance. "kanal:" tags use an
   admin-configurable color instead (inline style, System-Konfiguration). */
.tag-badge--typ-artikel,
.tag.tag-badge--typ-artikel {
    background: #f97316 !important;
    color: #fff !important;
}

.tag-badge--typ-news,
.tag.tag-badge--typ-news {
    background: #2563eb !important;
    color: #fff !important;
}

/* Editor prev/next position label ("1 / 1") — its plain text line-height
   doesn't match the sibling buttons' own internal centering, so it drifts
   above middle without this. */
#editor-nav-position {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

/* Veröffentlicht/Entwürfe status toggle — the count badge's own box model
   was making the "Entwürfe" button taller than "Veröffentlicht", and its
   number wasn't centered inside the pill. */
#btn-status-published,
#btn-status-drafts {
    display: inline-flex;
    align-items: center;
}

#drafts-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    padding: 0 6px;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: 999px;
}

.tag-badge i {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--cms-transition);
}

.tag-badge i:hover {
    opacity: 1;
    color: var(--cms-danger);
}

/* Usage Tracker List */
.usage-item {
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border-left: 0.1875rem solid var(--cms-accent); /* 3px */
    background: var(--cms-bg);
    color: var(--cms-text);
    border-radius: 0 0.25rem 0.25rem 0; /* 4px */
    font-size: 0.8rem;
    margin-bottom: 0.375rem; /* 6px */
}

/* ============================================================
   CMS Mobile Navigation Headers
   ============================================================ */

.cms-navbar-mobile {
    display: none;
    background: var(--cms-card-bg);
    color: var(--cms-text);
    height: var(--cms-header-height);
    border-bottom: 0.0625rem solid var(--cms-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
}

@media (max-width: 64rem) { /* 1024px = 64rem */
    .cms-navbar-mobile {
        display: flex;
    }
    .cms-main {
        padding-top: calc(var(--cms-header-height) + 1.25rem);
    }
}

/* ============================================================
   CMS Dashboard Components
   ============================================================ */

.activity-item {
    padding: 0.75rem 0; /* 12px = 0.75rem */
    border-bottom: 0.0625rem solid var(--cms-border);
    font-size: 0.88rem;
}
.activity-item:last-child {
    border-bottom: none;
}
.activity-item__time {
    font-size: 0.75rem;
    color: var(--cms-text-muted);
}

/* ============================================================
   CMS Editor & TipTap Components
   ============================================================ */

.tiptap-editor {
    border: 0.0625rem solid var(--cms-border);
    border-radius: 0.375rem; /* 6px */
    background: var(--cms-card-bg);
    color: var(--cms-text);
    min-height: 15.625rem; /* 250px */
    padding: 0.75rem 1rem;
    outline: none;
}
.tiptap-editor:focus-within {
    border-color: var(--cms-accent);
    box-shadow: 0 0 0 0.125em rgba(0, 138, 199, 0.25);
}
.tiptap-editor p.is-editor-empty:first-child::before {
    color: var(--cms-text-muted);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}
/* Bulma's global reset strips list-style; restore it so bullet/numbered
   lists are actually visible while editing (mirrors the fix applied to
   the preview shells' content containers). */
.tiptap-editor ul {
    list-style: disc;
    padding-left: 1.5rem;
}
.tiptap-editor ol {
    list-style: decimal;
    padding-left: 1.5rem;
}
.tiptap-editor li {
    margin: 0.25rem 0;
}
.tiptap-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}
.tiptap-editor table td,
.tiptap-editor table th {
    border: 0.0625rem solid var(--cms-border);
    padding: 0.375rem 0.5rem;
    text-align: left;
}
.tiptap-editor table th {
    background: var(--cms-bg);
    font-weight: 600;
}

/* Bulma's global reset also strips heading size/weight (h1-h6 render as
   100% / normal); restore a visible scale so "Überschrift 1" etc. actually
   look different from body text while editing. */
.tiptap-editor h1 { font-size: 1.8rem; font-weight: 700; margin: 1rem 0 0.5rem; line-height: 1.3; }
.tiptap-editor h2 { font-size: 1.5rem; font-weight: 700; margin: 0.9rem 0 0.5rem; line-height: 1.3; }
.tiptap-editor h3 { font-size: 1.3rem; font-weight: 600; margin: 0.8rem 0 0.4rem; line-height: 1.3; }
.tiptap-editor h4 { font-size: 1.15rem; font-weight: 600; margin: 0.7rem 0 0.4rem; line-height: 1.3; }
.tiptap-editor h5 { font-size: 1.05rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }
.tiptap-editor h6 { font-size: 0.95rem; font-weight: 600; margin: 0.6rem 0 0.3rem; line-height: 1.3; }

/* Drag & drop target for the news editor's "Bilder" gallery */
.media-dropzone {
    border-radius: 0.375rem; /* 6px */
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.media-dropzone--active {
    background-color: rgba(0, 138, 199, 0.08);
    box-shadow: 0 0 0 0.125rem var(--cms-accent) inset;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem; /* 4px */
    background: var(--cms-bg);
    padding: 0.5rem; /* 8px */
    border: 0.0625rem solid var(--cms-border);
    border-bottom: none;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
.editor-toolbar button {
    background: var(--cms-card-bg);
    border: 0.0625rem solid var(--cms-border);
    border-radius: 0.25rem; /* 4px */
    padding: 0.375rem 0.625rem; /* 6px 10px */
    font-size: 0.85rem;
    color: var(--cms-text);
    cursor: pointer;
    transition: all var(--cms-transition);
}
.editor-toolbar button:hover {
    background: var(--cms-border);
    color: var(--cms-text);
}
.editor-toolbar button.is-active {
    background: var(--cms-accent);
    color: white;
    border-color: var(--cms-accent);
}

/* Format dropdown (Absatz / Überschrift 1-6) replacing individual H1-H6 buttons */
.editor-toolbar select.editor-format-select {
    background: var(--cms-card-bg);
    border: 0.0625rem solid var(--cms-border);
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
    color: var(--cms-text);
    cursor: pointer;
}

/* Toolbar popovers (color palette, emoji picker, table controls) */
.toolbar-popover-wrap {
    position: relative;
    display: inline-flex;
}
.toolbar-popover {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    background: var(--cms-card-bg);
    border: 0.0625rem solid var(--cms-border);
    border-radius: 0.375rem;
    box-shadow: var(--cms-shadow-md, 0 0.25rem 0.75rem rgba(0,0,0,0.15));
    padding: 0.5rem;
}
.toolbar-popover.is-open {
    display: block;
}
.toolbar-color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1.375rem);
    gap: 0.25rem;
}
.toolbar-color-swatch {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.2rem;
    border: 0.0625rem solid var(--cms-border);
    cursor: pointer;
    padding: 0;
}
.toolbar-color-swatch:hover {
    outline: 0.125rem solid var(--cms-accent);
}
.toolbar-color-swatch.is-none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--cms-text-muted);
    background: var(--cms-card-bg);
}
.toolbar-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1.75rem);
    gap: 0.125rem;
    max-width: 15rem;
}
.toolbar-emoji-grid button {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0;
}
.toolbar-emoji-grid button:hover {
    background: var(--cms-border);
}
.toolbar-table-grid {
    display: grid;
    grid-template-columns: repeat(6, 1.125rem);
    gap: 0.125rem;
}
.toolbar-table-cell {
    width: 1.125rem;
    height: 1.125rem;
    border: 0.0625rem solid var(--cms-border);
    background: var(--cms-card-bg);
    cursor: pointer;
    padding: 0;
}
.toolbar-table-cell.is-highlighted {
    background: var(--cms-accent);
    border-color: var(--cms-accent);
}
.toolbar-table-label {
    font-size: 0.75rem;
    color: var(--cms-text-muted);
    text-align: center;
    margin-top: 0.25rem;
}

/* Newsletter summary — reorderable item list (issue #12) */
.newsletter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0.0625rem solid var(--cms-border);
    border-radius: 0.375rem;
    margin-bottom: 8px;
    background: var(--cms-bg);
}
.newsletter-item__controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.newsletter-item__body {
    min-width: 0;
    flex: 1;
}

/* Collapsible filters accordion on small screens */
.filters-toggle-header {
    display: none;
    border-bottom: 0.0625rem solid var(--cms-border);
    background: var(--cms-card-bg);
    color: var(--cms-text);
    padding: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

@media (max-width: 64rem) { /* 1024px */
    .filters-toggle-header {
        display: flex;
    }
    .filters-collapse-content {
        display: none;
        padding: 1rem !important;
    }
    .filters-collapse-content.is-active {
        display: block;
    }
    
    /* Clean up card margins on mobile for collapsed headers */
    .p-0-mobile {
        padding: 0 !important;
    }
}

/* ── Collapsible Metadata Block (Editor Pages) ── */
.cms-metadata-details {
    padding: 0 !important;
    overflow: visible !important;
}

.cms-metadata-details .cms-editor-panel__body {
    overflow: visible !important;
    flex: none;
}

.cms-metadata-details summary.filters-toggle-header {
    display: flex;
    padding: 0.85rem 1.25rem;
    background: var(--cms-card-bg);
    border-bottom: 1px solid var(--cms-border);
    transition: background var(--cms-transition);
    user-select: none;
}

.cms-metadata-details summary.filters-toggle-header:hover {
    background: var(--cms-bg);
}

.cms-metadata-details:not([open]) summary.filters-toggle-header {
    border-bottom: none;
}

.cms-metadata-details[open] summary .fa-chevron-down {
    transform: rotate(180deg);
}

.cms-metadata-details summary .fa-chevron-down {
    transition: transform var(--cms-transition);
}

/* ── Metadata Row (two-column layout) ── */
.cms-meta-row {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.cms-meta-col-left {
    flex: 1 1 0%;
    min-width: 0;
}

.cms-meta-col-right {
    flex: 0 0 220px;
    min-width: 0;
}

/* Stack vertically when editor panel gets narrow */
@media (max-width: 100rem) {
    .cms-meta-col-right {
        flex: 0 0 200px;
    }
}

@media (max-width: 64rem) {
    .cms-meta-row {
        flex-direction: column;
    }
    .cms-meta-col-right {
        flex: none;
        width: 100%;
    }
}

/* ── Image Preview Card ── */
.cms-image-card {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    overflow: hidden;
    background: var(--cms-card-bg);
}

.cms-image-card__preview {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cms-bg);
    border-bottom: 1px solid var(--cms-border);
    position: relative;
}

.cms-image-card__placeholder {
    color: var(--cms-text-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.6;
    font-size: 0.8rem;
    padding: 1rem;
}

.cms-image-card__img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.cms-image-card__input {
    padding: 0.5rem;
}

/* ── Editor surface: style custom NPT nodes (download card, button) so
   they look like their real in-app rendering instead of raw unstyled
   links — values matched against the live app's own neptun.css (read
   via the working preview iframe). The real app has no dark mode, so
   these stay fixed/light regardless of the CMS's own theme, same as
   the preview iframe already does. ──────────────────────────────── */
.ProseMirror .npt-download-card,
.ProseMirror .npt-inline-btn {
    cursor: pointer;
}
.ProseMirror .npt-download-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin: 0.75rem 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #e20026;
    border-radius: 0.6rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: box-shadow var(--cms-transition);
}
.ProseMirror .npt-download-card:hover,
.ProseMirror .npt-download-card.ProseMirror-selectednode {
    box-shadow: 0 0 0 2px var(--npt-accent-blue);
}
.ProseMirror .npt-download-card--excel { border-left-color: #1a7f37; }
.ProseMirror .npt-download-card--word { border-left-color: #2b579a; }
.ProseMirror .npt-download-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #e20026;
    font-size: 1.75rem;
}
.ProseMirror .npt-download-card--excel .npt-download-card__icon { color: #1a7f37; }
.ProseMirror .npt-download-card--word .npt-download-card__icon { color: #2b579a; }
/* FontAwesome duotone icons stack two pseudo-element layers on top of
   each other via absolute positioning off a `position: relative` host —
   without that host explicitly set here, the layers can fall back to
   normal inline flow and render side-by-side instead of overlaid. */
.ProseMirror .npt-download-card__icon em {
    position: relative;
    display: inline-block;
}
.ProseMirror .npt-download-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.ProseMirror .npt-download-card__title {
    color: #002c56;
    font-size: 1rem;
    font-weight: 700;
}
.ProseMirror .npt-download-card__meta {
    color: #6b7280;
    font-size: 0.78rem;
}

.ProseMirror .npt-inline-btn {
    display: inline-block;
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    transition: box-shadow var(--cms-transition);
}
.ProseMirror .npt-inline-btn:hover,
.ProseMirror .npt-inline-btn.ProseMirror-selectednode {
    box-shadow: 0 0 0 2px var(--npt-accent-blue);
}
.ProseMirror .npt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    pointer-events: none; /* clicks are handled at the node level for edit-in-place, not as real navigation */
}
.ProseMirror .npt-btn-primary {
    background: #002c56;
    color: #fff;
}
.ProseMirror .npt-btn-ghost {
    background: transparent;
    border: 2px solid #002c56;
    color: #002c56;
}

.ProseMirror .npt-intro-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
}

/* ============================================================
   UI-Fixes & Konsistenz-Patch
   ============================================================
   (Merged from cms-fixes.css, which used to load after this file —
   kept in the same relative order below so cascade/overrides are
   unchanged.)

   1. Brand palette — replace Bulma indigo (#485fc7) everywhere
   2. Form controls — brand focus rings, native accent-color
   3. Dark-mode contrast repairs
   4. Mobile fixes — sidebar backdrop, table overflow, stacked
      error-log rows, editor field overflow
   5. Dashboard v2 components (stat tiles, quick actions,
      activity feed)
   ============================================================ */

/* ── 1. Brand palette: kill Bulma indigo ───────────────────── */

/* Bulma "is-link" defaults to indigo #485fc7 — force brand blue */
.button.is-link {
    background-color: var(--cms-accent);
    border-color: transparent;
    color: #fff;
}
.button.is-link:hover {
    background-color: var(--cms-accent-hover);
    color: #fff;
}
.button.is-link.is-light {
    background-color: rgba(0, 138, 199, 0.12);
    color: var(--npt-accent-blue);
}
.button.is-link.is-light:hover,
.button.is-link.is-light.is-active {
    background-color: rgba(0, 138, 199, 0.2);
    color: var(--npt-accent-blue);
}

/* Pagination current page: was indigo */
.pagination-link.is-current {
    background-color: var(--cms-accent) !important;
    border-color: var(--cms-accent) !important;
    color: #fff !important;
}
.pagination-link:focus,
.pagination-previous:focus,
.pagination-next:focus {
    border-color: var(--npt-accent-blue);
}

/* Bulma info tags: align with brand sky blue in light mode too */
.tag.is-info.is-light {
    background-color: rgba(0, 138, 199, 0.1);
    color: #00679a;
}
.tag.is-primary.is-light {
    background-color: rgba(0, 44, 86, 0.08);
    color: var(--npt-navy-blue);
}
html[data-theme="dark"] .tag.is-primary.is-light {
    background-color: rgba(0, 138, 199, 0.15);
    color: #90cdf4;
}

/* ── 2. Form controls: brand focus + native accents ────────── */

.input:focus, .textarea:focus, .select select:focus,
.input:active, .textarea:active {
    border-color: var(--npt-accent-blue) !important;
    box-shadow: 0 0 0 0.125em rgba(0, 138, 199, 0.2) !important;
}

/* Checkboxes, radios, progress: browser accent was default blue/indigo */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--npt-accent-blue);
}

/* Datetime inputs overflowing their column (news editor):
   let them shrink instead of forcing intrinsic width */
input[type="datetime-local"].input, input[type="date"].input {
    min-width: 0;
    width: 100%;
}

/* This Bulma build gives .button a shorter fixed height (~2em) than
   .input's content-driven height (~2.5em) at the same font-size, so any
   button paired with an input in a .field.has-addons row (media-browse,
   upload, copy-url buttons next to their input) sits shorter than the
   input instead of lining up with it. */
.field.has-addons .button {
    height: 2.5em;
}

/* ── 3. Dark-mode contrast repairs ──────────────────────────── */

/* Primary action buttons must use the sky-blue accent in dark mode
   (navy-on-dark is unreadable) — cms-btn-accent already follows
   --cms-accent; catch Bulma primaries that don't. */
html[data-theme="dark"] .button.is-primary,
html[data-theme="dark"] .button.is-link {
    background-color: var(--cms-accent);
    color: #fff;
}
html[data-theme="dark"] .button.is-primary:hover,
html[data-theme="dark"] .button.is-link:hover {
    background-color: var(--cms-accent-hover);
}

/* Table rows in dark mode: raise row separation & hover contrast */
html[data-theme="dark"] .cms-table tbody td {
    border-bottom-color: #253041;
}

/* "is-light" neutral buttons (e.g. Abbrechen) in dark mode */
html[data-theme="dark"] .button.is-light {
    background-color: #1f2937;
    border-color: var(--cms-border);
    color: var(--cms-text);
}
html[data-theme="dark"] .button.is-light:hover {
    background-color: #374151;
    color: var(--cms-text);
}

/* Editor toolbar buttons keep visible borders in dark mode */
html[data-theme="dark"] .editor-toolbar {
    background: #0d1320;
}
html[data-theme="dark"] .editor-toolbar button {
    background: #1f2937;
    border-color: #2b3648;
}
html[data-theme="dark"] .editor-toolbar select.editor-format-select,
html[data-theme="dark"] .toolbar-popover {
    background: #1f2937;
    border-color: #2b3648;
    color: var(--cms-text);
}
html[data-theme="dark"] .toolbar-color-swatch.is-none {
    background: #1f2937;
}
html[data-theme="dark"] .toolbar-table-cell {
    background: #1f2937;
    border-color: #2b3648;
}

/* ── 4. Mobile fixes ────────────────────────────────────────── */

/* 4a. Sidebar slide-out gets a dimming backdrop */
.cms-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.55);
    z-index: 99; /* below .cms-sidebar (100) */
    opacity: 0;
    transition: opacity var(--cms-transition);
}
@media (max-width: 64rem) {
    .cms-sidebar-backdrop.is-open {
        display: block;
        opacity: 1;
    }
}

/* 4b. Wide tables scroll horizontally instead of clipping */
.cms-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cms-table-scroll > .cms-table {
    min-width: 640px;
}

/* 4c. Error log & user table: stack to cards on small screens */
@media (max-width: 64rem) {
    .cms-table--stack { min-width: 0 !important; }
    .cms-table--stack thead { display: none; }
    .cms-table--stack tbody tr {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px solid var(--cms-border);
    }
    .cms-table--stack tbody tr:last-child { border-bottom: none; }
    .cms-table--stack tbody td {
        display: block;
        border-bottom: none;
        padding: 2px 0;
    }
    .cms-table--stack tbody td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--cms-text-muted);
    }
    .cms-table--stack .cms-td-inline {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
    .cms-table--stack .cms-table__actions,
    .cms-table--stack .error-actions {
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/* 4d. Editor metadata: Bulma .columns inside panels must wrap */
.cms-editor-panel .columns {
    flex-wrap: wrap;
}

/* 4d-2. Editor metadata panel: on mobile, cms.css hides
   .filters-collapse-content unless .is-active — but the metadata
   block is driven by <details>[open], so the body was unreachable
   on phones. Follow the details state instead. */
@media (max-width: 64rem) {
    .cms-metadata-details[open] .filters-collapse-content {
        display: block !important;
    }
}

/* 4e. Bottom tab bar: content never hides behind it.
   (cms.css already pads .cms-main; also pad modals & guarantee
   the bar sits above content) */
@media (max-width: 64rem) {
    .cms-bottom-nav { z-index: 96; }
    .modal-card { margin-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Active state for bottom tab bar */
.cms-bottom-nav-item.is-active {
    color: var(--npt-accent-blue);
    font-weight: 600;
}

/* ── 5. Dashboard v2 components ─────────────────────────────── */

/* Stat tiles: consistent brand-tinted icon squares */
.cms-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 18px 20px;
    margin-bottom: 0;
}
/* The value/label block needs to be allowed to shrink below its content
   width — otherwise on a narrow 2-up phone card (issue N13) the row's
   total content overflows the card instead of wrapping. */
.cms-stat > div:not(.cms-stat__icon) {
    min-width: 0;
}
.cms-stat__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(0, 138, 199, 0.12);
    color: var(--npt-accent-blue);
}
.cms-stat__icon--danger {
    background: rgba(226, 0, 38, 0.1);
    color: var(--cms-danger);
}
html[data-theme="dark"] .cms-stat__icon {
    background: rgba(0, 138, 199, 0.16);
    color: #4dc3f0;
}
html[data-theme="dark"] .cms-stat__icon--danger {
    background: rgba(226, 0, 38, 0.18);
    color: var(--cms-danger-soft);
}
.cms-stat__value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cms-text);
}
.cms-stat__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cms-text-muted);
    font-weight: 600;
    margin-top: 2px;
}
.cms-stat__link {
    margin-left: auto;
    font-size: 0.8rem;
    white-space: nowrap;
    /* var(--cms-accent) flips to a brighter blue in dark mode, unlike the
       static --npt-accent-blue the generic dark-mode link rule below
       falls back to, which read as low-contrast against the dark
       stat-card background. !important to beat that rule's higher
       specificity (html[data-theme="dark"] a:not(...):not(...):not(...)). */
    color: var(--cms-accent) !important;
}

/* Redakteure don't see the admin-only "Offene Fehler" card — without this,
   the remaining 3 stat cards keep their 25%-wide (4-column) sizing and
   leave the 4th slot as dead space. Widen them to fill the row instead. */
@media (min-width: 769px) {
    #stats-grid.cms-stats--3col .cms-stat-col {
        width: 33.3333% !important;
    }
}

/* Content-activity chart (dashboard) */
.cms-chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.cms-chart-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cms-fs-sm);
    color: var(--cms-text-muted);
    font-weight: 500;
}
.cms-chart-legend__item i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.cms-chart-bar-articles { fill: var(--cms-chart-articles); }
.cms-chart-bar-news { fill: var(--cms-chart-news); }
.cms-chart-axis-label {
    fill: var(--cms-text-muted);
    font-size: 10px;
    font-family: inherit;
}
.cms-chart-gridline {
    stroke: var(--cms-chart-grid);
    stroke-width: 1;
}
.cms-chart-bar-group {
    cursor: pointer;
}
.cms-chart-bar-group:hover rect {
    opacity: 0.8;
}
.cms-chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    border-radius: 6px;
    box-shadow: var(--cms-shadow-md);
    padding: 8px 10px;
    font-size: var(--cms-fs-sm);
    color: var(--cms-text);
    z-index: 200;
    display: none;
    white-space: nowrap;
}
.cms-chart-tooltip strong { display: block; margin-bottom: 4px; }
.cms-chart-tooltip__row { display: flex; align-items: center; gap: 6px; }
.cms-chart-tooltip__row i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* Dashboard: recent-items lists render as a table on desktop and as a
   stacked card list on mobile (matches the card view already used on the
   Artikel/News list pages), instead of squeezing a wide table into a
   narrow viewport. */
.cms-dash-card-item {
    padding: 12px 4px;
    border-bottom: 1px solid var(--cms-border);
}
.cms-dash-card-item:last-child {
    border-bottom: none;
}
.cms-dash-card-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.cms-dash-card-item__title {
    font-weight: 600;
    color: var(--cms-text);
}
.cms-dash-card-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--cms-text-muted);
}

/* Quick actions: uniform rows, no pastel rainbow */
.cms-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--cms-border);
    color: var(--cms-text) !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--cms-transition);
    margin-bottom: 8px;
}
.cms-quick-action:hover {
    border-color: var(--npt-accent-blue);
    background: rgba(0, 138, 199, 0.06);
}
.cms-quick-action i:first-child {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 138, 199, 0.12);
    color: var(--npt-accent-blue);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.cms-quick-action .fa-chevron-right {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--cms-text-muted);
}

/* Activity feed: no clipped entries, clean meta line */
.cms-activity {
    max-height: 420px;
    overflow-y: auto;
}
.cms-activity .activity-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cms-activity .activity-item__meta {
    font-size: 0.78rem;
    color: var(--cms-text-muted);
}

/* ── 6. Additional fixes not covered by the design patch ────── */

/* System-Konfiguration divider stayed Bulma's light-gray default */
.cms-divider {
    border: none;
    border-top: 1px solid var(--cms-border);
    margin: 20px 0;
}

/* Inline <code> (Datasource IDs etc.) inherited Bulma's default pink/red —
   neutral gray chip in both themes instead (red reads as error/delete elsewhere) */
code {
    background-color: #e5e7eb;
    color: #374151;
}

html[data-theme="dark"] code {
    background-color: #1f2937;
    color: #e2e8f0;
}