/* ============================================================
   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%);
}

/* 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%);
}

/* ── 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;
}

.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;
}

/* 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;
    }
}

/* ── 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;
}

/* 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
   ============================================================ */

.cms-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cms-border);
    margin-bottom: 24px;
    /* Tabs don't wrap (white-space: nowrap below), so on narrow viewports
       let the bar scroll horizontally instead of overflowing the page. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cms-tab {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cms-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--cms-transition), border-color var(--cms-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.cms-tab:hover { color: var(--cms-text); }
.cms-tab.is-active {
    color: var(--cms-accent) !important;
    border-bottom-color: var(--cms-accent) !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;
}
.status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 5px;
}
.status-dot.active { background: var(--cms-success); }
.status-dot.inactive { background: var(--cms-text-muted); }

/* -- 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;
}

.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;
}

.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);
}

/* 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%;
}

/* ── 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;
}

/* ── 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 .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;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 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;
}

/* 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.) stayed light in dark mode */
html[data-theme="dark"] code {
    background-color: #1f2937;
    color: #e2e8f0;
}