/* ==============================================
   ASIKATEC Admin Panel – Base Stylesheet (Structure)
   ============================================== */

/* ==============================================
   ASIKATEC Admin Panel – Stylesheet (Light Theme)
   ============================================== */


:root {
    /* In rem, damit die Sidebar der Schriftgroessen-Stufe folgt (Topbar ->
       Benutzermenue -> Schriftgroesse setzt html{font-size} in Prozent).
       Bei 100% ergibt das exakt die alten 260px / 68px. */
    --sidebar-width: 16.25rem;
    --sidebar-collapsed-width: 4.25rem;
}


* {
    margin: 0; padding: 0; box-sizing: border-box;
}

/* Global form control tint — overrides the browser's blue default with the
   HOC primary accent so all checkboxes / radios / progress elements match. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary, #E87A1E);
}


html, body {
    overscroll-behavior: none;
}

body {
    font-family: 'Inter', sans-serif; min-height: 100vh;
}


/* ══════════════════════════════════════
   LOGIN-LAYOUT
══════════════════════════════════════ */

.bg-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden;
}

.bg-pattern::before {
    content: ''; position: absolute; width: 800px; height: 800px; top: -200px; right: -200px; border-radius: 50%; animation: float1 20s ease-in-out infinite;
}

.bg-pattern::after {
    content: ''; position: absolute; width: 600px; height: 600px; bottom: -150px; left: -100px; border-radius: 50%; animation: float2 25s ease-in-out infinite;
}

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,30px); } }

@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } }


.grid-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: 60px 60px; z-index: 0;
}

.login-wrapper {
    position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center;
}

.login-page-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
}

.logo-area {
    text-align: center; margin-bottom: 2rem;
}

.logo-area img {
    height: 60px; width: auto; margin-bottom: 1rem;
}

.logo-area h1 {
    font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem;
}

.logo-area .subtitle {
    font-size: 0.85rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
}

.login-card {
    width: 100%; border: 1px solid transparent; border-radius: 24px; padding: 2.5rem; backdrop-filter: blur(20px);
}

.login-card h2 {
    font-size: 1.35rem; font-weight: 700; margin-bottom: 0.25rem;
}

.login-card .login-desc {
    font-size: 0.88rem; margin-bottom: 2rem;
}


.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.5rem;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i.field-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; pointer-events: none;
}

.form-input {
    width: 100%; padding: 0.85rem 1rem 0.85rem 2.8rem; border: 1.5px solid transparent; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 0.95rem; transition: all 0.3s;
}

.form-input[type="password"] {
    padding-right: 2.8rem;
}



.pw-toggle {
    background: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: none; cursor: pointer; padding: 4px; font-size: 0.9rem; transition: color 0.3s;
}



.btn-login {
    width: 100%; padding: 0.9rem; border: none; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s;
}

.btn-login:hover {
    transform: translateY(-2px);
}

.btn-login:active {
    transform: translateY(0);
}

.remember-me-group {
    margin-bottom: 1rem;
}

.remember-me-label {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; user-select: none;
}

.remember-me-label input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary, #E87A1E);
}

.login-error {
    border: 1px solid transparent; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.88rem;
}

.security-badge {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid transparent;
}

.security-badge i, .security-badge span {
    font-size: 0.75rem;
}

.back-link {
    font-size: 0.85rem; text-decoration: none; transition: color 0.3s; margin-top: 1.5rem;
}


.login-copyright {
    margin-top: 0.75rem; font-size: 0.75rem; text-align: center; line-height: 1.5;
}

.login-vendor {
    display: inline-block; letter-spacing: 0.09em; font-weight: 600;
}

.bereich-login-icon {
    width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1rem;
}

.login-bottom-actions {
    display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem;
}

.login-lang-switch {
    display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem;
}

.login-lang-switch a {
    text-decoration: none; transition: color 0.3s;
}

.login-lang-switch .lang-active {
    font-weight: 600;
}

.login-lang-wrap {
    flex-wrap: wrap; gap: 4px; font-size: 0.75rem;
}

.login-lang-wrap .lang-pill {
    padding: 4px 10px; border-radius: 6px; text-decoration: none; font-weight: 600; border: 1px solid transparent; transition: all 0.2s;
}

.login-lang-wrap .lang-active {
    font-weight: 700;
}


/* ══════════════════════════════════════
   ADMIN-LAYOUT (Sidebar)
══════════════════════════════════════ */

.sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; border-right: 1px solid transparent; display: flex; flex-direction: column; z-index: 100; transition: transform 0.3s, width 0.3s;
}

.sidebar-header {
    padding: 1.5rem; border-bottom: 1px solid transparent; display: flex; align-items: center; gap: 12px;
}

.sidebar-header img {
    height: 36px; width: auto;
}

.sidebar-header .brand {
    font-weight: 700; font-size: 1.1rem;
}

.sidebar-header .brand-sub {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px;
}

/* ── Brand-Layout: stacked variant (Logo top centred, name below centred) ─── */
.sidebar.sidebar-brand-stacked:not(.collapsed) .sidebar-header {
    flex-direction: column; align-items: center; text-align: center; gap: 10px;
    padding-bottom: 0.75rem;
}
.sidebar.sidebar-brand-stacked:not(.collapsed) .sidebar-header img {
    height: 56px;
}

.sidebar-nav {
    flex: 1; padding: 1rem 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.nav-section {
    padding: 0.5rem 1.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-top: 0.75rem;
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none;
    margin-left: 0.75rem; margin-right: 0.75rem; padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.nav-section:hover { opacity: 0.95; }
.nav-section-arrow { font-size: 0.55rem; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-section.collapsed .nav-section-arrow { transform: rotate(-90deg); }
.nav-section-items { overflow: hidden; transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; max-height: 2000px; opacity: 1; }
.nav-section-items.collapsed { max-height: 0; opacity: 0; }

.nav-item {
    display: flex; align-items: center; gap: 12px; padding: 0.55rem 0.75rem; text-decoration: none; font-size: 0.9rem; font-weight: 500;
    margin: 2px 0.75rem; border-radius: 6px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-item:active { transform: scale(0.98); }
.nav-item i { transition: transform 0.18s ease; }
.nav-item:hover i { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .nav-section, .nav-section-arrow, .nav-section-items, .nav-item, .nav-item i {
        transition: none !important;
    }
    .nav-item:active { transform: none; }
    .nav-item:hover i { transform: none; }
}



.nav-item i {
    width: 1.25rem; text-align: center; font-size: 0.9rem;
}

.badge-soon {
    margin-left: auto; padding: 2px 8px; border-radius: 50px; font-size: 0.72rem; font-weight: 600;
}

.sidebar-footer {
    padding: 1rem 1.5rem; border-top: 1px solid transparent;
}

.user-info {
    display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem;
}

.user-avatar {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; position: relative;
}

.user-name {
    font-size: 0.88rem; font-weight: 600;
}

.user-role {
    font-size: 0.78rem;
}

/* Schrumpfbar statt starr, und die min-width-Kette bis zum Anzeigenamen durch:
   so weicht bei schmalem Fenster der Name (Ellipse) und der Block bleibt
   innerhalb der Leiste. Mit `flex: 0 0 auto` schob er sich ab ~900 px ueber
   den rechten Rand hinaus — das tat er vor dem Umbau ebenfalls. */
.topbar-actions {
    display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
}

.topbar-lang-switch {
    display: flex; align-items: center; gap: 4px;
}

.topbar-lang-switch .lang-btn {
    padding: 6px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.75rem; border: 1px solid transparent; transition: all 0.2s;
}

.user-dropdown-row-collapsible {
    cursor: pointer; user-select: none;
}

.user-dropdown-row-collapsible .lang-current {
    font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; gap: 4px;
}

.user-dropdown-row-collapsible .lang-chevron {
    font-size: 0.6rem; transition: transform 0.2s; opacity: 0.5;
}

.user-dropdown-row-collapsible.open .lang-chevron {
    transform: rotate(180deg);
}

.topbar-lang-grid {
    display: none; grid-template-columns: 1fr 1fr; gap: 3px; padding: 0 4px 4px;
}

.user-dropdown-row-collapsible.open + .topbar-lang-grid {
    display: grid;
}

.topbar-lang-grid .lang-grid-btn {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
    text-decoration: none; font-size: 0.8rem; border: 1px solid transparent; transition: all 0.2s;
}

.topbar-lang-grid .lang-grid-code {
    font-weight: 700; font-size: 0.72rem; min-width: 22px;
}

.topbar-lang-grid .lang-grid-name {
    font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-fontsize {
    display: flex; align-items: center; gap: 2px;
}
.fontsize-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; transition: all 0.2s; padding: 0;
}
.fontsize-label {
    width: 28px; text-align: center; font-size: 0.8rem; font-weight: 600; user-select: none; display: flex; align-items: center; justify-content: center;
}



/* ── Topbar User (Avatar + Dropdown) ──── */

.topbar-user {
    position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 4px 10px; border-radius: 10px; transition: background 0.2s; margin-left: 4px;
    min-width: 0;
}

.topbar-user:hover {
    background: var(--primary-bg-hover, rgba(0,0,0,0.04));
}

.topbar-user .user-avatar {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; position: relative; flex-shrink: 0;
}

.topbar-user-name {
    font-size: 0.82rem; font-weight: 500; white-space: nowrap;
    max-width: 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

.topbar-user-chevron {
    font-size: 0.6rem; opacity: 0.5; transition: transform 0.2s;
}

.topbar-user.open .topbar-user-chevron {
    transform: rotate(180deg);
}

/* ── User Dropdown ──── */

.user-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    width: 320px; border-radius: 12px; z-index: 9999;
    display: none; flex-direction: column; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    animation: notifFlyIn 0.2s ease;
}

.user-dropdown.open {
    display: flex;
}

.user-dropdown-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
}

.user-dropdown-header .user-avatar {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; flex-shrink: 0;
    background: var(--primary-color, #4f46e5); color: #fff;
}

.user-dropdown-name {
    font-size: 0.88rem; font-weight: 600;
}

.user-dropdown-email {
    font-size: 0.75rem; opacity: 0.6; margin-top: 2px;
}

.user-dropdown-divider {
    height: 1px; background: var(--border-color, rgba(0,0,0,.08)); margin: 0;
}

.user-dropdown-section {
    padding: 8px;
}

.user-dropdown-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 8px 4px; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5;
}

.user-dropdown-section-header button {
    border: none; background: none; cursor: pointer; font-size: 13px;
    opacity: 0.5; padding: 4px 6px; border-radius: 6px;
}

.user-dropdown-section-header button:hover { opacity: 1; }

.user-dropdown-section-actions {
    display: flex; gap: 2px; align-items: center;
}

.user-dropdown-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; border-radius: 8px;
}

.user-dropdown-row-label {
    font-size: 0.82rem; font-weight: 500; display: flex; align-items: center; gap: 8px;
}

.user-dropdown-row-label i {
    width: 16px; text-align: center; opacity: 0.5; font-size: 0.8rem;
}

.user-dropdown .notif-flyout-body {
    max-height: 200px;
}

.user-dropdown .notif-flyout-empty {
    padding: 20px 16px;
}

.user-dropdown-logout {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-size: 0.82rem; font-weight: 500;
    text-decoration: none; color: var(--danger-color, #dc3545);
    transition: background 0.2s; cursor: pointer;
}

.user-dropdown-logout:hover {
    background: var(--primary-bg-hover, rgba(0,0,0,0.04));
}

.user-dropdown-logout i {
    width: 16px; text-align: center;
}

.btn-logout {
    width: 100%; padding: 0.6rem; border: 1px solid transparent; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}


.main-content {
    margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left 0.3s;
}

.topbar {
    padding: 1rem 2rem; border-bottom: 1px solid transparent; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 50;
}

/* Zwei Flex-Kinder: links Brotkrume ueber Titel, rechts die Aktionen.
   Der Titel stand frueher absolut mittig ueber der ganzen Leiste und wusste
   damit nichts vom Aktionsblock rechts — bei langem Anzeigenamen oder grosser
   Schriftstufe schoben sich beide uebereinander (ab Stufe 100 % messbar).
   Jetzt steht er im Fluss unter der Brotkrume, linksbuendig, und kuerzt mit
   Ellipse, bevor er den Aktionsblock erreichen koennte. */
.topbar-lead {
    flex: 1 1 auto; min-width: 0;
}

.topbar h1,
.topbar-title {
    font-size: 1.2rem; font-weight: 700; margin-top: 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar .breadcrumb-bar {
    font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar .breadcrumb-bar a {
    text-decoration: none;
}


.content-area {
    padding: 2rem;
}

/* #hoc-main is programmatically focused by HocRouter after navigation for
   A11y (screen-reader anchor). It has tabindex="-1" so the global
   :focus-visible whitelist excludes it, but Chrome still paints the native
   focus ring on programmatic focus. Suppress it — the focus move itself
   (which is what screen readers need) still happens. */
.content-area:focus,
.content-area:focus-visible {
    outline: none;
}


/* ── Sidebar Collapsed (early, on html element to prevent FOUC) ── */

html.sidebar-is-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

html.sidebar-is-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* ── Sidebar Collapse Toggle ─────────────────── */

.sidebar-collapse-btn {
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.6rem;
    background: var(--sidebar-collapse-bg, var(--dark, #1a1a2e));
    color: var(--sidebar-collapse-color, rgba(255,255,255,0.5));
    border: 1px solid var(--sidebar-collapse-border, rgba(255,255,255,0.1));
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: absolute; right: -12px; top: 32px; z-index: 101;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.sidebar-collapse-btn:hover {
    background: var(--sidebar-collapse-hover-bg, rgba(255,255,255,0.12));
    color: var(--sidebar-collapse-hover-color, rgba(255,255,255,0.95));
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.sidebar-collapse-btn:active {
    transform: scale(0.92);
}

.sidebar-collapse-btn i {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

/* ── Sidebar Collapsed State (Desktop) ──────── */

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-header {
    padding: 1rem 0; flex-direction: column; align-items: center; gap: 6px;
}

.sidebar.collapsed .sidebar-header > div {
    display: none;
}

.sidebar.collapsed .sidebar-header img {
    height: 28px;
}


.sidebar.collapsed .nav-section-arrow { display: none; }
.sidebar.collapsed .nav-section-items.collapsed { max-height: 500px; opacity: 1; }
.sidebar.collapsed .nav-section {
    font-size: 0; padding: 0.25rem 1.5rem; overflow: hidden;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06)); margin: 0.25rem 0.75rem; padding: 0;
}

.sidebar.collapsed .nav-item {
    justify-content: center; padding: 0.7rem; border-left: none;
}

.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar.collapsed .nav-item i {
    width: auto; font-size: 1.05rem;
}

.sidebar.collapsed .badge-soon {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.75rem; display: flex; flex-direction: column; align-items: center;
}

.sidebar.collapsed .btn-logout span {
    display: none;
}

.sidebar.collapsed .btn-logout {
    padding: 0.6rem; justify-content: center;
}

.sidebar.collapsed .btn-logout i {
    margin: 0;
}

/* Tooltip fuer collapsed nav-items */
.sidebar.collapsed .nav-item {
    position: relative;
}

.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 500;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.15s;
    background: var(--tooltip-bg, #1a1a2e); color: var(--tooltip-color, #fff);
    margin-left: 8px; z-index: 200;
}

.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
}


/* Mobile */

.mobile-toggle {
    display: none; position: fixed; top: 1rem; left: 1rem; z-index: 200; width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center;
}

.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 90;
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: min(var(--sidebar-width), 84vw) !important; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .mobile-toggle { display: flex; }
    body:has(.sidebar.open) .mobile-toggle { display: none; }
    .topbar .breadcrumb-bar { display: none; }
    .main-content { margin-left: 0 !important; }
    .topbar { padding-left: 5rem; padding-top: 1.35rem; }
    .content-area { padding: 1.25rem; }
    .sidebar-collapse-btn { display: none !important; }
    .sidebar.collapsed .nav-item span { display: inline; }
    .sidebar.collapsed .sidebar-header > div { display: block; }
    .sidebar.collapsed .nav-section { font-size: 0.7rem; padding: 0.5rem 1.5rem; border-bottom: none; margin: 0; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 0.7rem 1.5rem; border-left: 3px solid transparent; }
    .sidebar.collapsed .sidebar-footer { padding: 1rem 1.5rem; flex-direction: column; align-items: stretch; }
    .sidebar.collapsed .btn-logout span { display: inline; }
    .topbar-user-name { display: none; }
    /* Without the name nothing in the user block can give way: the block
       keeps its size, the actions never get narrower than their content,
       and the page title (ellipsis) takes what is left. Shrunk below their
       content, avatar and chevron ran over the right edge and widened the
       whole page (sticky topbar) -- 411 px in a 390 px window. 2.30.82. */
    .topbar-actions { min-width: auto; }
    .topbar-user { flex-shrink: 0; }
}

@media (max-width: 480px) {
    .login-card { padding: 2rem 1.5rem; border-radius: 20px; }
    .logo-area img { height: 48px; }
}


/* ══════════════════════════════════════
   DASHBOARD
══════════════════════════════════════ */

.welcome-card {
    border: 1px solid var(--primary-bg-emphasis); border-radius: 20px; padding: 2.5rem; margin-bottom: 2rem;
}

.welcome-card h2 {
    font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;
}

.welcome-card p {
    font-size: 0.95rem; margin: 0;
}

.placeholder-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;
}

.placeholder-card {
    border: 1px solid transparent; border-radius: 16px; padding: 2rem; text-align: center; transition: border-color 0.3s;
}


.placeholder-card .card-icon {
    width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.3rem;
}

.placeholder-card h3 {
    font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem;
}

.placeholder-card p {
    font-size: 0.82rem; margin: 0;
}

.badge-coming {
    display: inline-block; padding: 0.2rem 0.75rem; border-radius: 50px; font-size: 0.7rem; font-weight: 600; margin-top: 0.75rem;
}

.badge-core {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 50px; font-size: 0.72rem; font-weight: 600; margin-left: 0.4rem; vertical-align: middle; letter-spacing: 0.03em;
}


.hoc-toggle-switch-sm {
    transform: scale(0.8); transform-origin: right center;
}

.hoc-toggle-sm {
    gap: 0;
}


.placeholder-card.has-link {
    text-decoration: none; display: block; cursor: pointer;
}


.badge-count {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 28px; height: 28px; padding: 0 0.5rem; border: 1px solid transparent; border-radius: 50px; font-size: 0.85rem; font-weight: 700; margin-top: 0.75rem;
}




/* ══════════════════════════════════════
   EINSTELLUNGEN – Pill-Tabs
══════════════════════════════════════ */

.hoc-tabs-pill {
    display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}

.hoc-tabs-pill::-webkit-scrollbar {
    display: none;
}

.hoc-tab-pill {
    background: transparent; display: inline-flex; align-items: center; gap: 6px; padding: 0.55rem 1.1rem; border: 1.5px solid transparent; border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}





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

.hoc-tab-panel.active,
.hoc-tab-panel.active {
    display: block;
}

/* ── Tab Scroll Wrapper ───────────────── */

.hoc-tabs-scroll {
    position: relative; margin-bottom: 1.5rem;
}

.hoc-tabs-scroll .hoc-tabs-pill,
.hoc-tabs-scroll .hoc-tabs {
    margin-bottom: 0;
}

.hoc-tabs-arrow {
    display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
    align-items: center; justify-content: center; font-size: 12px; line-height: 1;
    transition: opacity 0.2s, background 0.2s; opacity: 0; pointer-events: none;
    padding: 0; flex-shrink: 0;
}

.hoc-tabs-arrow.visible {
    display: flex; opacity: 1; pointer-events: auto;
}

.hoc-tabs-arrow--left {
    left: 0;
}

.hoc-tabs-arrow--right {
    right: 0;
}

.hoc-tabs-scroll.has-overflow-left .hoc-tabs-pill,
.hoc-tabs-scroll.has-overflow-left .hoc-tabs {
    mask-image: linear-gradient(to right, transparent, black 40px); -webkit-mask-image: linear-gradient(to right, transparent, black 40px);
}

.hoc-tabs-scroll.has-overflow-right .hoc-tabs-pill,
.hoc-tabs-scroll.has-overflow-right .hoc-tabs {
    mask-image: linear-gradient(to left, transparent, black 40px); -webkit-mask-image: linear-gradient(to left, transparent, black 40px);
}

.hoc-tabs-scroll.has-overflow-left.has-overflow-right .hoc-tabs-pill,
.hoc-tabs-scroll.has-overflow-left.has-overflow-right .hoc-tabs {
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}

.hoc-tabs-arrow svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


/* ══════════════════════════════════════
   EINSTELLUNGEN – Sektionen
══════════════════════════════════════ */

.hoc-section {
    border: 1px solid transparent; border-radius: 16px; margin-bottom: 1.5rem;
}

.hoc-section-header {
    position: relative; padding: 1.25rem 1.5rem; border-bottom: 1px solid transparent; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0.5rem;
}

.hoc-section-header > i {
    width: 20px; text-align: center;
}

.hoc-section-header h3 {
    font-size: 0.95rem; font-weight: 600; margin: 0;
}

/* Stats container: children become direct flex items of the header, so badges
   (.hoc-stats-center) can break to their own centered row below, while action
   buttons stay right-aligned on the title row. */
.hoc-section-stats {
    display: contents;
}

.hoc-section-stats > :first-child:not(.hoc-stats-center),
.hoc-section-stats > .hoc-stats-center + * {
    margin-left: auto;
}

.hoc-section-header-right {
    margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

/* ── HocToolbar – permanent overflow menu ─────────────────────────
   Usage: <div class="hoc-toolbar" data-hoc-toolbar>
            <button title="Foo">…</button>                  <!-- hidden <992px, copy in menu -->
            <button data-hoc-toolbar-always="1">Publish</button>  <!-- always visible -->
            <div data-hoc-toolbar-menu-extra hidden>        <!-- optional menu-only items -->
              <button>Menu-only entry</button>
            </div>
          </div>
   JS (toolbar.js) always renders a ⋮ toggle with a dropdown that
   holds copies of every non-always item plus any menu-extra entries.
   Below 992px the non-always items in the toolbar are hidden via CSS,
   leaving only the always-visible items + the ⋮ menu.
*/
.hoc-toolbar {
    position: relative; display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; min-width: 0;
}

/* Small visual gap between the collapsible buttons and the right-most group
   (always-visible button + ⋮ toggle). Marker class is set by toolbar.js. */
.hoc-toolbar-right-start {
    margin-left: 1rem;
}

.hoc-toolbar-overflow-toggle {
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .hoc-toolbar-collapsible {
        display: none !important;
    }
}

.hoc-toolbar-overflow-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; max-width: 320px; padding: 0.35rem; border-radius: 10px; z-index: 200; display: flex; flex-direction: column; gap: 0.15rem;
}

.hoc-toolbar-overflow-menu[hidden] { display: none; }

.hoc-toolbar-overflow-menu > button,
.hoc-toolbar-overflow-menu > a {
    display: flex; align-items: center; width: 100%; justify-content: flex-start; margin: 0; border: none; background: transparent; padding: 0.5rem 0.75rem; border-radius: 7px; text-align: left; cursor: pointer; font-family: inherit; font-size: 0.85rem; gap: 0.6rem; white-space: normal;
}

.hoc-toolbar-overflow-menu > button > i,
.hoc-toolbar-overflow-menu > a > i {
    width: 1em; text-align: center; flex-shrink: 0;
}

.hoc-toolbar-overflow-menu > hr {
    border: none; border-top: 1px solid rgba(128,128,128,0.2); margin: 0.25rem 0;
}

.hoc-toolbar-item-label {
    display: none;
}

.hoc-toolbar-overflow-menu .hoc-toolbar-item-label {
    display: inline;
}

.hoc-section-body {
    padding: 1.5rem;
}


.hoc-setting-row {
    display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid transparent;
}

.hoc-setting-row:last-child {
    border-bottom: none; padding-bottom: 0;
}

.hoc-setting-row:first-child {
    padding-top: 0;
}

.hoc-setting-label .label-title,
.hoc-setting-label .label-title {
    font-size: 0.9rem; font-weight: 500; margin-bottom: 0.2rem;
}

.hoc-setting-label .label-desc,
.hoc-setting-label .label-desc {
    font-size: 0.78rem; line-height: 1.4;
}


.hoc-input {
    width: 100%; padding: 0.7rem 1rem; border: 1.5px solid transparent; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.9rem; transition: all 0.2s;
}

/* ── Input-Group: Input + Button(s) inline, gleiche Hoehe ─────────── */

.hoc-input-group {
    display: flex; align-items: stretch; gap: 0.5rem;
}
.hoc-input-group .hoc-input {
    flex: 1; min-width: 0; width: auto;
}
.hoc-input-group .hoc-btn-primary,
.hoc-input-group .hoc-btn-secondary,
.hoc-input-group .hoc-btn-danger {
    flex-shrink: 0; white-space: nowrap;
}
@media (max-width: 640px) {
    .hoc-input-group { flex-direction: column; }
    .hoc-input-group .hoc-input { width: 100%; }
}


/* ── Passwort-Feld mit Auge-Toggle ──────────────────────────────────── */

.hoc-pw-wrap {
    position: relative; display: flex; align-items: center;
}

.hoc-pw-wrap .hoc-input {
    padding-right: 2.8rem; width: 100%;
}

.hoc-pw-toggle {
    background: none; position: absolute; right: 0.8rem; border: none; cursor: pointer; padding: 0.2rem; font-size: 0.88rem; line-height: 1; transition: color 0.2s; flex-shrink: 0;
}

/* Passwort-Regeln "i"-Info-Icon (Tooltip bei Hover/Fokus) */
.hoc-pwrule { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35em; line-height: 1; }
.hoc-pwrule-i { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border: 1px solid currentColor; border-radius: 50%; color: #7a8595; font: italic 700 .78em/1 Georgia, "Times New Roman", serif; cursor: pointer; flex: none; transition: color .12s, border-color .12s; }
.hoc-pwrule-i:hover, .hoc-pwrule-i:focus { color: #2563eb; border-color: #2563eb; }
.hoc-pwrule-tip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: .5rem .65rem; background: #1f2937; color: #f9fafb; border-radius: 8px; font: 400 .78rem/1.45 system-ui, -apple-system, sans-serif; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; z-index: 100000; pointer-events: none; }
.hoc-pwrule-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1f2937; }
.hoc-pwrule-i:hover + .hoc-pwrule-tip, .hoc-pwrule-i:focus + .hoc-pwrule-tip { opacity: 1; visibility: visible; }



/* Select als hoc-input */

select.hoc-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.2rem; cursor: pointer;
}




.hoc-btn-save {
    border: none; border-radius: 10px; padding: 0.7rem 2rem; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}

.hoc-btn-save:hover {
    transform: translateY(-1px);
}


.save-success {
    display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 0.75rem 1.25rem; font-size: 0.88rem; margin-bottom: 1.5rem;
}


/* Toggle Switch */

.hoc-toggle {
    display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
}

.hoc-toggle-switch {
    position: relative; width: 48px; height: 26px; flex-shrink: 0;
}

.hoc-toggle-switch input {
    width: 0; height: 0;
}

.hoc-toggle-slider {
    position: absolute; inset: 0; border: 1px solid transparent; border-radius: 50px; cursor: pointer; transition: all 0.25s;
}

.hoc-toggle-slider::before {
    content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 50%; transform: translateY(-50%); border-radius: 50%; transition: all 0.25s;
}


.hoc-toggle-switch input:checked + .hoc-toggle-slider::before {
    transform: translate(22px, -50%);
}

.hoc-toggle-label {
    font-size: 0.88rem; font-weight: 500; transition: color 0.2s;
}



@media (max-width: 640px) {
    .hoc-setting-row { grid-template-columns: 1fr; gap: 0.5rem; }
}


/* ── Einstellungen: Log-Level ─────────────────────────────────── */

.log-level-select-wrap {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
}

.log-level-opt {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: 0.88rem; transition: all 0.2s;
}





/* ══════════════════════════════════════
   KONTAKTANFRAGEN
══════════════════════════════════════ */

.hoc-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;
}

.hoc-stats {
    display: flex; align-items: center; gap: 1rem;
}

.hoc-stats-center {
    flex: 1 1 100%; order: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem;
}

/* Desktop: lift the badges out of the header flow and plant them on the
   header/filter divider line, horizontally + vertically centered. */
@media (min-width: 1200px) {
    .hoc-stats-center {
        position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); z-index: 2; flex: none; order: 0; flex-wrap: nowrap;
    }
}

.hoc-stat-badge {
    border: 1px solid var(--primary-bg-strong); padding: 0.3rem 0.9rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600;
}


.hoc-limit-wrap {
    display: flex; align-items: center; gap: 0.75rem;
}

.hoc-limit-label {
    font-size: 0.82rem;
}

.hoc-limit-select {
    border: 1px solid transparent; border-radius: 8px; padding: 0.4rem 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; cursor: pointer;
}

/* ── Filter-Bar (between section-header and body) ──────────────────── */
.hoc-filter-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-subtle, #eef0f5);
}
.hoc-search {
    position: relative; display: flex; align-items: center;
}
.hoc-search i.fa-search {
    position: absolute; left: 10px; color: var(--text-muted, #999); font-size: 0.8rem; pointer-events: none;
}
.hoc-search input {
    padding: 5px 30px 5px 30px; border: 1px solid var(--border-default, #e2e5f0); border-radius: 6px;
    font-size: 0.82rem; width: 220px; background: var(--bg-input, #fff); color: var(--text-primary, #333); outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hoc-search input:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-shadow-sm);
}
.hoc-search-clear {
    position: absolute; right: 8px; background: none; border: none;
    color: var(--text-muted, #999); cursor: pointer; font-size: 0.8rem; padding: 0; display: none;
}

/* Active filter chips rendered by HocColumns next to the search field */
.hoc-filter-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
}
.hoc-filter-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 3px 4px 3px 10px; border-radius: 999px;
    background: var(--primary-bg-hover, rgba(232,122,30,0.08));
    border: 1px solid var(--primary-bg-strong, rgba(232,122,30,0.25));
    color: var(--primary, inherit); font-size: 0.78rem; font-weight: 500; line-height: 1;
}
.hoc-filter-chip-label {
    white-space: nowrap;
}
.hoc-filter-chip-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; margin: 0;
    border: none; background: transparent; cursor: pointer;
    color: inherit; font-size: 1rem; line-height: 1; border-radius: 50%;
    transition: background 0.15s;
}
.hoc-filter-chip-clear:hover {
    background: var(--primary-bg-strong, rgba(232,122,30,0.25));
}

.hoc-perpage {
    display: inline-flex; border: 1px solid var(--border-default, #e2e5f0); border-radius: 6px; overflow: hidden; font-size: 0.78rem;
}
.hoc-perpage-btn {
    padding: 3px 10px; border: none; background: none; cursor: pointer; color: var(--text-muted, #888);
}
.hoc-perpage-btn + .hoc-perpage-btn {
    border-left: 1px solid var(--border-default, #e2e5f0);
}
.hoc-perpage-btn[data-active="1"] {
    background: var(--primary, #E87A1E); color: #fff;
}

/* ── Column Picker ─────────────────────────────────────── */
.hoc-columns-wrap {
    position: relative; margin-left: 0.5rem;
}
.hoc-columns-toggle {
    background: none; border: 1px solid var(--border-default, #e2e5f0); border-radius: 6px;
    padding: 4px 8px; cursor: pointer; color: var(--text-muted, #888); font-size: 0.82rem;
    transition: color 0.2s, border-color 0.2s;
}
.hoc-columns-toggle:hover {
    color: var(--text-primary, #333); border-color: var(--border-hover, #ccc);
}
.hoc-columns-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    min-width: 200px; border-radius: 10px; z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 0;
    animation: notifFlyIn 0.2s ease;
}
.hoc-columns-header {
    padding: 10px 14px 6px; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.hoc-columns-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; cursor: pointer; font-size: 0.82rem;
    transition: background 0.15s;
}
.hoc-columns-row input[type="checkbox"] {
    cursor: pointer; accent-color: var(--primary, #E87A1E); margin: 0 2px 0 0;
}
.hoc-columns-divider {
    height: 1px; margin: 4px 0;
}
/* Aktions-Eintrag im Zahnrad (z. B. Export). Bewusst ein <button> und keine
   Checkbox-Zeile: eine Aktion hat keinen Zustand. Steht ueber dem Reset,
   das die abgerundete Unterkante des Dropdowns traegt. */
.hoc-columns-action {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 14px;
    background: none; border: none; border-radius: 0;
    font-size: 0.82rem; font-family: inherit; cursor: pointer; text-align: left;
    transition: background 0.15s, color 0.15s;
}
.hoc-columns-action i {
    width: 14px; text-align: center; font-size: 0.78rem;
}
.hoc-columns-reset {
    display: block; width: 100%; padding: 8px 14px;
    background: none; border: none; border-radius: 0 0 10px 10px;
    font-size: 0.78rem; cursor: pointer; text-align: left;
    transition: background 0.15s, color 0.15s;
}

/* ── Column Resize Handles ─────────────────────────────── */
.hoc-col-resize {
    position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
    cursor: col-resize; user-select: none; z-index: 2;
    background: transparent;
}
.hoc-table.hoc-col-lines .hoc-col-resize {
    background: var(--border-default, #e2e5f0);
}
.hoc-table:not(.hoc-col-lines) thead:hover .hoc-col-resize {
    background: var(--border-default, #e2e5f0);
}

/* ── Sortable Column Headers ──────────────────────────── */
.hoc-sortable { cursor: pointer; user-select: none; }
.hoc-sort-icon { margin-left: 6px; font-size: 0.7rem; opacity: 0.35; vertical-align: middle; }
.hoc-sortable:hover .hoc-sort-icon { opacity: 0.6; }
.hoc-sorted-asc .hoc-sort-icon,
.hoc-sorted-desc .hoc-sort-icon { opacity: 1; color: var(--primary, #E87A1E); }

/* ── Filterable Column Headers ──────────────────────────── */
.hoc-filterable { cursor: pointer; user-select: none; }
/* Der Trichter ist bei sortierbaren Spalten eine eigene Schaltflaeche (nur er
   oeffnet dort den Filter, der uebrige Kopf sortiert) — deshalb Klickpolster
   und eigener Hover-Zustand. Das negative margin-right haelt das Layout. */
.hoc-filter-icon { margin-left: 6px; font-size: 0.7rem; opacity: 0.35; vertical-align: middle; padding: 4px; margin-right: -4px; border-radius: 3px; cursor: pointer; }
.hoc-filterable:hover .hoc-filter-icon { opacity: 0.6; }
.hoc-filterable .hoc-filter-icon:hover { opacity: 1; background: var(--bg-hover, rgba(0,0,0,.08)); }
.hoc-filtered .hoc-filter-icon { opacity: 1; color: var(--primary, #E87A1E); }

.hoc-filter-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    min-width: 160px; border-radius: 8px; z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px 0;
    background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e2e5f0);
    animation: notifFlyIn 0.15s ease;
}
.hoc-filter-option {
    padding: 7px 14px; cursor: pointer; font-size: 0.82rem;
    white-space: nowrap; transition: background 0.15s;
}
.hoc-filter-option:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
.hoc-filter-option.hoc-filter-active { color: var(--primary, #E87A1E); font-weight: 600; }
.hoc-filter-option.hoc-filter-active::before {
    content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    margin-right: 8px; font-size: 0.7rem;
}

.hoc-table-wrap {
    position: relative; overflow-x: auto; overflow-y: hidden;
}

.hoc-table {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
}

.hoc-table thead th {
    padding: 1rem 1.25rem; border-bottom: 1px solid transparent; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
}

.hoc-table .hoc-td-center {
    text-align: center; width: 44px;
}

.hoc-table thead th .th-checkbox,
.hoc-table thead th .th-checkbox {
    cursor: pointer;
}

.hoc-table tbody tr {
    border-bottom: 1px solid transparent; transition: background 0.2s;
}

.hoc-table tbody tr:last-child {
    border-bottom: none;
}



.hoc-table tbody td {
    padding: 0.9rem 1.25rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis;
}

.hoc-tr-clickable { cursor: pointer; }
.hoc-tr-clickable:hover td { opacity: 0.8; }

.hoc-badge-unread {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0;
}

.hoc-td-name {
    font-weight: 600; display: flex; align-items: center; min-width: 0; max-width: 220px;
}
.hoc-td-name-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hoc-td-email {
    font-size: 0.82rem;
}

.hoc-td-code {
    font-family: var(--font-mono, monospace); font-size: 0.82rem;
}

.hoc-td-subject {
    padding: 0.2rem 0.6rem; border-radius: 50px; font-size: 0.75rem; white-space: nowrap;
}

.hoc-td-subject-none {
    font-size: 0.8rem;
}

.hoc-td-date {
    font-size: 0.8rem; white-space: nowrap;
}

.hoc-td-preview {
    max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem;
}

.hoc-td-status-read {
    font-size: 0.78rem;
}

.hoc-td-status-new {
    font-size: 0.78rem; font-weight: 600;
}

.hoc-unread-dot {
    font-size: 0.5rem;
}

.hoc-td-actions {
    display: flex; gap: 0.4rem; justify-content: flex-end;
}

.hoc-td-actions form {
    display: inline;
}

.hoc-table input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--primary, #E87A1E);
}


.hoc-btn-detail {
    border: 1px solid transparent; border-radius: 7px; padding: 0.3rem 0.6rem; font-size: 0.8rem; cursor: pointer; text-decoration: none; transition: all 0.2s;
}


.hoc-btn-del {
    border: 1px solid transparent; border-radius: 7px; padding: 0.3rem 0.6rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}



/* Bulk-Delete Bar */

.hoc-bulk-bar {
    display: none; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--primary-bg-emphasis);
}

.hoc-bulk-bar.active,
.hoc-bulk-bar.active {
    display: flex;
}

.hoc-bulk-bar span {
    font-size: 0.85rem;
}

/* Sammelleiste UNTER der Tabelle (HocTable::bulkActions mit .hoc-bulk-bar als
   aeusserstem Element, seit 2.30.74): klebt beim Blaettern am unteren
   Fensterrand. Ueber der Tabelle schob ihr Erscheinen alle Zeilen nach unten,
   der naechste Klick traf eine andere Zeile. Nur direkte Kinder des
   Sektionsrumpfs — eine Leiste in einer Modul-Werkzeugleiste bleibt, wie sie
   war. So breit wie ihr Inhalt und mittig: beide unteren Ecken bleiben frei
   (dort schweben z. B. der Chat-Knopf oder der DEBUG-Streifen); 1.75rem ueber
   dem Rand, weil der DEBUG-Streifen (.hoc-status-bar) 23px hoch ist. Farben
   und Schatten: admin_light.css / admin_dark.css. */
.hoc-section-body > .hoc-bulk-bar {
    position: sticky; bottom: 1.75rem; z-index: 6; flex-wrap: wrap; gap: 0.5rem 1rem; width: fit-content; max-width: calc(100% - 1.5rem); margin: 0.5rem auto; border-radius: 12px;
}

.hoc-btn-bulk-del {
    border: 1px solid transparent; border-radius: 8px; padding: 0.35rem 0.9rem; font-size: 0.82rem; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif;
}



/* Pagination */

.hoc-pagination {
    display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-top: 1px solid transparent; flex-wrap: wrap; gap: 0.75rem;
}

.hoc-pagination .info {
    flex: 1 1 0; font-size: 0.8rem; min-width: 0;
}

.hoc-pagination .info:last-child {
    text-align: right;
}

.hoc-page-btns {
    display: flex; gap: 0.4rem; flex: 0 0 auto;
}

.hoc-page-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; font-size: 0.82rem; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}



.hoc-page-btn.disabled,
.hoc-page-btn.disabled {
    pointer-events: none;
}


/* Modal */

.hoc-modal-backdrop {
    display: none; position: fixed; inset: 0; z-index: 500; align-items: center; justify-content: center;
}

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

.hoc-modal {
    border: 1px solid transparent; border-radius: 20px; max-width: 580px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}

.hoc-modal > .hoc-modal-header {
    padding: 1.5rem 2rem 1rem; border-bottom: none;
}
.hoc-modal > .hoc-modal-header h4 { margin: 0; font-size: 1.1rem; }
.hoc-modal > .hoc-modal-header .hoc-toggle { margin: 0; }
.hoc-modal > .hoc-modal-header .hoc-modal-meta { font-size: 0.8rem; margin-top: 0.25rem; }

.hoc-modal > form {
    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}

.hoc-modal > .hoc-modal-body,
.hoc-modal > form > .hoc-modal-body {
    padding: 0.5rem 2rem 0; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain;
}

.hoc-modal > .hoc-modal-footer,
.hoc-modal > form > .hoc-modal-footer {
    padding: 1rem 2rem 1.5rem;
}


.hoc-form-disabled {
    opacity: 0.45; pointer-events: none;
}

.hoc-modal-field {
    margin-bottom: 1rem;
}

.hoc-modal-field label:not(.hoc-toggle) {
    display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.3rem;
}

.hoc-modal-field .val,
.hoc-modal-field .val {
    font-size: 0.9rem; line-height: 1.6;
}

.hoc-modal-field .val.hoc-val-message,
.hoc-modal-field .val.hoc-val-message {
    border: 1px solid transparent; border-radius: 10px; padding: 0.75rem 1rem; white-space: pre-wrap;
}


/* The buttons wrap onto a second row instead of running out of the dialog
   to the left, where nothing can scroll to them (an open ui-pro invoice
   has seven buttons; a narrow window fits even fewer). Since 2.30.82. */
.hoc-modal-footer {
    display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; justify-content: flex-end;
}

.hoc-btn-modal-close {
    border: 1px solid transparent; border-radius: 10px; padding: 0.55rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.88rem; cursor: pointer; transition: all 0.2s;
}


.hoc-btn-modal-del {
    display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 10px; padding: 0.55rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.88rem; cursor: pointer; transition: all 0.2s;
}
.hoc-btn-modal-del:disabled,
.hoc-btn-modal-close:disabled {
    opacity: 0.35; cursor: not-allowed; pointer-events: none;
}
.hoc-lock-countdown {
    font-size: 0.72rem; margin-top: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 8px; text-align: center; transition: all 0.3s;
}
.hoc-lock-countdown i { margin-right: 0.35rem; }

/* ── Lock-Overlay (Page/Section Lock) ──────────────────────────── */
.hoc-locked { position: relative; min-height: 200px; }
.hoc-lock-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 3rem; border-radius: inherit; pointer-events: auto; opacity: 1 !important;
    cursor: default;
}
.hoc-lock-panel * { pointer-events: auto; }
.hoc-lock-panel {
    max-width: 480px; width: 90%; border-radius: 12px; padding: 2rem 2rem 1.5rem;
    text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.hoc-lock-panel-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.hoc-lock-panel-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.hoc-lock-panel-text { font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
.hoc-lock-panel .hoc-lock-countdown { margin-bottom: 1rem; }
.hoc-lock-panel-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1.2rem; border-radius: 8px; border: 1px solid transparent;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hoc-lock-panel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.hoc-empty {
    text-align: center; padding: 4rem 2rem;
}

.hoc-empty i {
    font-size: 2.5rem; margin-bottom: 1rem; display: block;
}

.hoc-empty p {
    font-size: 0.9rem; margin: 0;
}


#bulkForm {
    display: none;
}


/* ══════════════════════════════════════
   SHARED: Modal-Labels, Buttons
══════════════════════════════════════ */

.hoc-modal .hoc-modal-field label:not(.hoc-toggle) {
    display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.4rem; font-weight: 600;
}

.hoc-modal .hoc-input {
    margin-bottom: 0;
}


/* Confirm-Modal (generisch, fuer alle Module nutzbar) */

.modal-confirm-text {
    font-size: 0.92rem; margin: 0.85rem 0 1rem; line-height: 1.6;
}

.modal-confirm-subject {
    font-weight: 600; display: block; margin-top: 0.25rem;
}

.modal-confirm-warn {
    display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; line-height: 1.5; margin: 0; padding: 0.65rem 0.85rem; border: 1px solid transparent; border-radius: 10px;
}

.modal-confirm-warn i {
    flex-shrink: 0; margin-top: 2px;
}


.hoc-btn-del[disabled] {
    cursor: not-allowed; pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════
   GENERISCH: hoc-* Admin-Komponenten
   Einheitliche UI-Bausteine fuer alle Module
   ══════════════════════════════════════════════════════════════════ */


/* ── Buttons ───────────────────────────────────────────────────── */

.hoc-btn-primary {
    border: none; border-radius: 10px; padding: 0.55rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

.hoc-btn-primary:hover {
    transform: none;
}

.hoc-btn-primary:disabled,
.hoc-btn-primary.hoc-btn-disabled {
    cursor: not-allowed; transform: none; opacity: 0.5; pointer-events: none;
}


.hoc-btn-secondary {
    display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1rem; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border-default, #ddd); white-space: nowrap;
}


.hoc-btn-secondary:disabled {
    cursor: not-allowed;
}


.hoc-btn-danger {
    border: none; border-radius: 8px; padding: 0.5rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}


.hoc-btn-danger:disabled {
    cursor: not-allowed;
}


.hoc-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 0.55rem 1.25rem; border: 1px solid transparent; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; text-decoration: none;
}

.hoc-btn:disabled {
    cursor: not-allowed; opacity: 0.5;
}

.hoc-btn-sm {
    padding: 0.35rem 0.85rem; font-size: 0.78rem; border-radius: 8px;
}

.hoc-btn-xs {
    padding: 0.2rem 0.6rem; font-size: 0.72rem; border-radius: 6px;
}

.hoc-btn-ghost {
    background: transparent; border: 1px solid transparent;
}

.hoc-btn-warning {
    border: none; border-radius: 8px; font-weight: 600;
}

.hoc-btn-icon {
    background: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 0.8rem;
}


/* ── HocForm: Checkbox & Radio ─────────────────────────────────── */

.hoc-check,
.hoc-radio {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 0.88rem;
}

.hoc-check input,
.hoc-radio input {
    width: 16px; height: 16px; margin: 0; cursor: pointer;
}

.hoc-check-label,
.hoc-radio-label {
    font-weight: 500;
}

/* Gruppe gleichnamiger Radios. Untereinander, damit lange Beschriftungen
   nicht umbrechen; inline nur, wo die Optionen kurz sind. */
.hoc-radio-group {
    display: flex; flex-direction: column; gap: 6px;
}
.hoc-radio-group-inline {
    flex-direction: row; flex-wrap: wrap; gap: 6px 18px;
}
.hoc-radio input:disabled,
.hoc-check input:disabled {
    cursor: not-allowed;
}
.hoc-radio:has(input:disabled) .hoc-radio-label,
.hoc-check:has(input:disabled) .hoc-check-label {
    opacity: 0.5; cursor: not-allowed;
}

/* Scrollbare Kaestchenliste — Spaltenauswahl im Export-Dialog. */
.hoc-check-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 190px; overflow-y: auto;
    border-radius: 8px; padding: 8px 10px;
}

/* Nebensatz an einer Option — Begruendung, warum sie gesperrt ist o. ae. */
.hoc-hint {
    font-size: 0.76rem; opacity: 0.65;
}

/* Export-Dialog */
.hoc-export-form .hoc-modal-section { margin-bottom: 0.9rem; }
.hoc-export-form .hoc-modal-section:last-child { margin-bottom: 0; }
.hoc-export-head { margin: 0 0 1rem; font-size: 0.86rem; line-height: 1.6; }
.hoc-export-form [hidden] { display: none; }


/* ── HocForm: Form Group (Modal/Inline) ────────────────────────── */

.hoc-form-group {
    margin-bottom: 1rem;
}

.hoc-form-label {
    display: block; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;
}

.hoc-form-hint {
    margin: 0.35rem 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted);
}

.hoc-modal-hint {
    margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
}

.hoc-required {
    margin-left: 2px;
}


/* ── HocForm: Actions Row ──────────────────────────────────────── */

.hoc-form-actions {
    display: flex; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem;
}

.hoc-form-actions-right { justify-content: flex-end; }
.hoc-form-actions-between { justify-content: space-between; }


/* ── Underline Tabs ────────────────────────────────────────────── */

.hoc-tabs {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; border-bottom: 2px solid var(--border-default, #e2e5f0); padding-bottom: 0;
}

.hoc-tabs::-webkit-scrollbar {
    display: none;
}

.hoc-tab {
    background: none; border: none; padding: 0.6rem 1.25rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
}


.hoc-tab.active,
.hoc-tab.active {
    font-weight: 600;
}

.hoc-tab-count {
    padding: 1px 7px; border-radius: 50px; font-size: 0.78rem; font-weight: 600;
}



/* ── Badges ────────────────────────────────────────────────────── */

.hoc-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 0.2rem 0.7rem; border-radius: 50px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}

.hoc-badge i {
    font-size: 0.45rem;
}







/* ── Alerts ────────────────────────────────────────────────────── */

.hoc-alert {
    padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.88rem; font-weight: 500; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}

.hoc-alert i:first-child { flex-shrink: 0; }

.hoc-alert-success {
    border: 1px solid transparent;
}

.hoc-alert-error {
    border: 1px solid transparent;
}

.hoc-alert-warning {
    border: 1px solid transparent;
}

.hoc-alert-info {
    border: 1px solid transparent;
}

.hoc-alert-dismiss {
    margin-left: auto; background: none; border: none; cursor: pointer; padding: 0 4px; font-size: 1.1rem; line-height: 1; opacity: 0.5; transition: opacity 0.2s;
}

.hoc-alert-dismiss:hover { opacity: 1; }


/* ── Modal (Animations-basiert) ────────────────────────────────── */

.hoc-modal-overlay {
    position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: kaFadeIn 0.15s ease;
}

/* Gestapelte Dialoge: den Blur nur einmal anwenden. Zwei uebereinander
   liegende backdrop-filter addieren sich sonst zu einem trueben Brei —
   z-index setzt HocModal je Ebene selbst. */
.hoc-modal-overlay-stacked {
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

.hoc-modal-dialog {
    border: 1px solid var(--border-default, #e2e5f0); border-radius: 16px; width: 95vw; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; animation: kaSlideUp 0.2s ease;
}

.hoc-modal-dialog.hoc-modal-sm {
    max-width: 400px;
}

/* lg: 780 px -- what every lg dialog already got from hocwizard_light.css
   (loaded on every admin page, both themes); 680 px here only applied where
   that file is missing. Since 2.30.82. */
.hoc-modal-dialog.hoc-modal-lg {
    max-width: 780px;
}

/* xl (since 2.30.82): wide content -- document positions, previews,
   editors. Below 1100 px it is 95vw wide like every other size. */
.hoc-modal-dialog.hoc-modal-xl {
    max-width: 1100px;
}

.hoc-modal-header {
    display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--border-default, #e2e5f0); flex-wrap: wrap;
}

.hoc-modal-header h3 {
    margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px;
}

.hoc-modal-subtitle {
    width: 100%; font-size: 0.8rem; margin-top: 4px;
}

.hoc-modal-close {
    background: none; border: none; font-size: 1.4rem; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s;
}

/* A long title wraps within itself instead of pushing the close button
   onto a line of its own: the header wraps (for .hoc-modal-subtitle), so a
   title as wide as the header left no room for the button. 2.5rem = the
   button plus a gap; headers without a close button keep the full width. */
.hoc-modal-header > :is(h3, h4):has(~ .hoc-modal-close) {
    max-width: calc(100% - 2.5rem); overflow-wrap: anywhere;
}


.hoc-modal-body {
    padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; overscroll-behavior: contain;
}

.hoc-modal-dialog .hoc-modal-footer {
    gap: 8px; padding: 0.75rem 1.5rem 1.25rem; border-top: 1px solid var(--border-default, #e2e5f0);
}

.hoc-modal-dialog form {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}






/* ── Spinner ────────────────────────────────────────────────────── */

.hoc-spinner {
    width: 40px; height: 40px; border: 3px solid var(--border-default, #e2e5f0); border-radius: 50%; animation: kaSpin 0.8s linear infinite;
}

.hoc-spinner-sm {
    width: 20px; height: 20px; border-width: 2px;
}


/* ── Empty State ────────────────────────────────────────────────── */

.hoc-empty {
    text-align: center; padding: 3rem 1rem;
}

.hoc-empty i {
    font-size: 2.5rem; margin-bottom: 0.75rem; display: block;
}

.hoc-empty p {
    margin: 0; font-size: 0.9rem;
}

.hoc-empty-sm {
    padding: 1.5rem; text-align: center; font-size: 0.88rem;
}


/* ── Table loading ──────────────────────────────────────────────── */
/* A list without rows says that it is loading (HocSection._showLoading) —
   otherwise loading looks exactly like an empty result. The row fades in
   after 300ms, so a fast answer replaces it before anyone sees it. */

.hoc-table tbody tr.hoc-table-loading-row,
.hoc-table tbody tr.hoc-table-loading-row:hover {
    background: transparent;
}

.hoc-table tbody tr.hoc-table-loading-row > td {
    padding: 0;
}

.hoc-table-loading {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 2.5rem 1rem; font-size: 0.88rem; color: var(--text-muted, #888899);
    animation: hocTableLoadingIn 0.2s ease-out 0.3s both;
}

.hoc-table-loading .hoc-spinner {
    width: 18px; height: 18px; border-width: 2px; flex: none;
}

/* The pager still counts the previous query — hide it while the loading
   row is up, after the same delay so a fast answer does not blink it. */
.hoc-table-wrap:has(tr.hoc-table-loading-row) ~ .hoc-pagination {
    animation: hocTableLoadingHide 0s linear 0.3s both;
}

@keyframes hocTableLoadingIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hocTableLoadingHide { to { visibility: hidden; } }


/* ── Stats Row ──────────────────────────────────────────────────── */

.hoc-stats-row {
    display: flex; gap: 12px; margin-bottom: 1.5rem; flex-wrap: wrap;
}

.hoc-stat-card {
    flex: 1; min-width: 140px; border: 1px solid var(--border-default, #e2e5f0); border-radius: 12px; padding: 1rem 1.25rem; text-align: center;
}

.hoc-stat-number {
    font-size: 1.75rem; font-weight: 700; line-height: 1;
}

.hoc-stat-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;
}

.hoc-stat-icon {
    font-size: 1.5rem; margin-bottom: 0.5rem;
}

.hoc-stat-sub {
    font-size: 0.72rem; margin-top: 2px;
}

.hoc-stat-card.hoc-stat-clickable { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }


/* ── Upload & Progress ──────────────────────────────────────────── */

.hoc-upload-zone {
    border: 2px dashed var(--border-default, #ddd); border-radius: 12px; padding: 3rem 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}


.hoc-upload-zone i {
    font-size: 2.5rem; margin-bottom: 0.75rem; display: block;
}

.hoc-progress {
    display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0;
}

.hoc-progress-bar {
    flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
}

.hoc-progress-fill {
    height: 100%; border-radius: 4px; transition: width 0.3s ease;
}

.hoc-progress-label {
    font-size: 0.8rem; font-weight: 600; min-width: 3em; text-align: right; white-space: nowrap;
}

.hoc-progress-sm .hoc-progress-bar { height: 4px; }

@keyframes hocProgressIndeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.hoc-progress-indeterminate .hoc-progress-fill {
    width: 40% !important; animation: hocProgressIndeterminate 1.5s ease-in-out infinite;
}


/* ── Code Block ────────────────────────────────────────────────── */

.hoc-code-block {
    position: relative; border-radius: 8px; overflow: hidden; margin: 0.5rem 0; border: 1px solid transparent;
}

.hoc-code-block pre {
    margin: 0; padding: 1rem; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.82rem; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

.hoc-code-block code { font-family: inherit; }

.hoc-code-copy {
    position: absolute; top: 8px; right: 8px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; font-size: 0.75rem; cursor: pointer; opacity: 0; transition: opacity 0.2s;
}

.hoc-code-block:hover .hoc-code-copy { opacity: 1; }

.hoc-code-copy.copied { opacity: 1; }


/* ── Info Grid ─────────────────────────────────────────────────── */

.hoc-info-grid {
    display: grid; gap: 0.75rem;
}

.hoc-info-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hoc-info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hoc-info-grid-1 { grid-template-columns: 1fr; }

.hoc-info-item { padding: 0.5rem 0; }

.hoc-info-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}

.hoc-info-value {
    font-size: 0.92rem; font-weight: 500; word-break: break-word;
}


/* ── Button Group (Segmented Control) ──────────────────────────── */

.hoc-btn-group {
    display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid transparent;
}

.hoc-btn-group-item {
    padding: 0.4rem 0.85rem; font-size: 0.82rem; font-weight: 500; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap;
}

.hoc-btn-group-item + .hoc-btn-group-item { border-left: 1px solid transparent; }

.hoc-btn-group-sm .hoc-btn-group-item { padding: 0.25rem 0.6rem; font-size: 0.75rem; }


/* ── Accordion ─────────────────────────────────────────────────── */

.hoc-accordion {
    border: 1px solid transparent; border-radius: 10px; overflow: hidden;
}

.hoc-accordion-item + .hoc-accordion-item { border-top: 1px solid transparent; }

.hoc-accordion-header {
    /* Renders as <button> since 2026-05-07 (A11y disclosure pattern). The
       block below resets native button chrome so we keep the visual look. */
    background: transparent; border: 0; color: inherit; font-family: inherit; width: 100%; text-align: inherit;
    display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; cursor: pointer; font-weight: 600; font-size: 0.88rem; user-select: none; transition: background 0.15s;
}

.hoc-accordion-header i.hoc-accordion-chevron {
    font-size: 0.7rem; transition: transform 0.2s;
}

.hoc-accordion-item.open .hoc-accordion-header i.hoc-accordion-chevron {
    transform: rotate(180deg);
}

.hoc-accordion-body {
    display: none; padding: 0 1rem 1rem;
}

.hoc-accordion-item.open .hoc-accordion-body { display: block; }


/* ── Grouped List ──────────────────────────────────────────────── */
/* Generic collapsible-section list. Each item has a header (icon, title,
   subtitle, count, badges, meta, chevron) and an expandable body. Used for
   timelines, threaded conversations, log streams, anything grouped. */

.hoc-grouped-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    --gl-accent: transparent;
}

.hoc-grouped-list-item {
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hoc-grouped-list-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--gl-accent, transparent);
    transition: width 0.15s;
}

.hoc-grouped-list-item[style*="--gl-accent"]::before { width: 3px; }

.hoc-gl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    min-height: 52px;
}

.hoc-grouped-list-item.hoc-gl-static .hoc-gl-header { cursor: default; }

.hoc-gl-header-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.hoc-gl-icon {
    font-size: 0.95rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.hoc-gl-titlewrap {
    flex: 1;
    min-width: 0;
}

.hoc-gl-title {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hoc-gl-subtitle {
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.15rem;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hoc-gl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.hoc-gl-header-aside {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.hoc-gl-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.hoc-gl-meta {
    font-size: 0.72rem;
    opacity: 0.6;
    white-space: nowrap;
}

.hoc-gl-chevron {
    font-size: 0.7rem;
    opacity: 0.55;
    transition: transform 0.2s;
}

.hoc-grouped-list-item.open .hoc-gl-chevron { transform: rotate(180deg); }

.hoc-gl-body {
    display: none;
    padding: 0;
    border-top: 1px solid transparent;
}

.hoc-grouped-list-item.open .hoc-gl-body { display: block; }

.hoc-gl-rows {
    display: flex;
    flex-direction: column;
}

.hoc-gl-rows > * + * { border-top: 1px solid transparent; }

.hoc-gl-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.55;
}

@media (max-width: 600px) {
    .hoc-gl-meta { display: none; }
    .hoc-gl-header { padding: 0.65rem 0.75rem; }
}


/* ── Filter Row ────────────────────────────────────────────────── */

.hoc-filter-row {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.75rem 0;
}

.hoc-filter-items {
    display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; align-items: center;
}

.hoc-filter-items select,
.hoc-filter-items input { max-width: 200px; }

.hoc-filter-search {
    display: flex; gap: 0;
}

.hoc-filter-search input {
    border-radius: 8px 0 0 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem;
}

.hoc-filter-search-btn {
    border-radius: 0 8px 8px 0; padding: 0.5rem 0.75rem; border: none; cursor: pointer; transition: background 0.15s;
}


/* ── Detail Layout (Main + Sidebar) ────────────────────────────── */

.hoc-detail-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem;
}

.hoc-detail-sidebar {
    height: fit-content;
}

.hoc-detail-sidebar.hoc-detail-sticky {
    position: sticky; top: 1rem;
}

@media (max-width: 992px) {
    .hoc-detail-layout { grid-template-columns: 1fr; }
}


/* ── Form Row (Side-by-Side Fields) ────────────────────────────── */

.hoc-form-row {
    display: flex; gap: 12px;
}

.hoc-form-row > .hoc-form-group {
    flex: 1;
}

.hoc-form-row[hidden] { display: none; }

@media (max-width: 600px) {
    .hoc-form-row { flex-direction: column; }
}


/* ── Date / DateTime / Time Picker ──────────────────────────────── */

.hoc-datepicker-wrap {
    position: relative; display: flex; align-items: center; flex: 1;
}
/* Hide entire wrap when the input inside is hidden (so the FA icon doesn't stay dangling) */
.hoc-datepicker-wrap:has(> .hoc-datepicker[hidden]) { display: none; }
.hoc-datepicker-wrap > i {
    position: absolute; left: 12px; pointer-events: none;
    font-size: 0.88rem; opacity: 0.55; transition: opacity 0.15s, color 0.15s;
}
.hoc-datepicker-wrap:focus-within > i {
    opacity: 1; color: var(--hoc-accent, var(--primary, #E87A1E));
}
.hoc-datepicker {
    padding-left: 2.3rem !important;
}
/* Hide native calendar picker icon on WebKit: we show our own FA icon on the left */
.hoc-datepicker::-webkit-calendar-picker-indicator {
    opacity: 0.35; cursor: pointer;
}
.hoc-datepicker::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }


/* ── HOC Custom Date Picker (.hoc-dp) ───────────────────────────── */
/* Custom replacement for the native datetime popup so font-scale,
   accent color, light/dark theme and locale formatting stay consistent. */

.hoc-dp {
    position: relative; display: flex; align-items: center; flex: 1;
}
.hoc-dp-display {
    padding-left: 2.3rem !important; padding-right: 2.3rem !important;
    cursor: pointer; width: 100%;
    text-overflow: ellipsis;
}
.hoc-dp.is-disabled .hoc-dp-display {
    cursor: not-allowed; opacity: 0.55;
}
.hoc-dp-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.88rem; opacity: 0.55; transition: opacity 0.15s, color 0.15s;
}
.hoc-dp:focus-within > .hoc-dp-icon,
.hoc-dp.is-open > .hoc-dp-icon {
    opacity: 1; color: var(--hoc-accent, var(--primary, #E87A1E));
}
.hoc-dp-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted, #888); font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.6; transition: background 0.15s, opacity 0.15s, color 0.15s;
    padding: 0;
}
.hoc-dp-clear:hover {
    background: var(--bg-subtle, rgba(0,0,0,0.06));
    color: var(--text-primary, #1a1a2e); opacity: 1;
}
.hoc-dp-clear[hidden] { display: none; }

/* Popup (portaled to body) */
.hoc-dp-popup {
    position: absolute; z-index: 10050;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-default, #e2e5f0);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(10, 20, 60, 0.12);
    font-size: 0.875rem;
    color: var(--text-primary, #1a1a2e);
    padding: 0.5em;
    min-width: 18em;
    user-select: none;
    animation: hocDpIn 0.12s ease-out;
}
@keyframes hocDpIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hoc-dp-head {
    display: flex; align-items: center; gap: 0.25em;
    padding: 0.25em 0.25em 0.5em;
}
.hoc-dp-nav {
    width: 2em; height: 2em; border-radius: 6px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary, #555); font-size: 0.85em;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.hoc-dp-nav:hover {
    background: var(--bg-subtle, rgba(0,0,0,0.05));
    color: var(--text-primary, #1a1a2e);
}
.hoc-dp-title {
    flex: 1; display: flex; gap: 0.35em; justify-content: center;
}
.hoc-dp-month, .hoc-dp-year {
    font: inherit; color: inherit;
    background: transparent;
    border: 1px solid transparent; border-radius: 6px;
    padding: 0.25em 0.4em; cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.hoc-dp-month:hover, .hoc-dp-year:hover,
.hoc-dp-month:focus, .hoc-dp-year:focus {
    background: var(--bg-subtle, rgba(0,0,0,0.04));
    border-color: var(--border-default, #e2e5f0);
    outline: none;
}

.hoc-dp-weekrow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 0.1em; padding: 0 0.25em;
    font-size: 0.75em; font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.hoc-dp-weekrow > span {
    text-align: center; padding: 0.4em 0;
}
.hoc-dp-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 0.1em; padding: 0.1em 0.25em 0.25em;
}
.hoc-dp-day {
    appearance: none; background: transparent; border: none;
    font: inherit; color: inherit;
    aspect-ratio: 1; width: 100%;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s, color 0.1s, box-shadow 0.1s;
    padding: 0;
}
.hoc-dp-day:hover:not(:disabled) {
    background: var(--bg-subtle, rgba(0,0,0,0.05));
}
.hoc-dp-day:focus-visible {
    outline: 2px solid var(--hoc-accent, var(--primary, #E87A1E));
    outline-offset: -2px;
}
.hoc-dp-day.is-outside {
    color: var(--text-faint, #aaaabb); opacity: 0.55;
}
.hoc-dp-day.is-today {
    box-shadow: inset 0 0 0 1px var(--hoc-accent, var(--primary, #E87A1E));
    font-weight: 600;
}
.hoc-dp-day.is-selected {
    background: var(--hoc-accent, var(--primary, #E87A1E));
    color: #fff; font-weight: 600;
}
.hoc-dp-day.is-selected:hover {
    background: var(--hoc-accent, var(--primary, #E87A1E));
    filter: brightness(0.95);
}
.hoc-dp-day.is-disabled,
.hoc-dp-day:disabled {
    color: var(--text-faint, #c8c8d4); cursor: not-allowed;
    opacity: 0.4;
}

.hoc-dp-time {
    display: flex; align-items: center; gap: 0.5em;
    padding: 0.5em 0.5em 0.25em; border-top: 1px solid var(--border-default, #e2e5f0);
    margin-top: 0.25em;
}
.hoc-dp-time > i { color: var(--text-muted, #888); opacity: 0.7; }
.hoc-dp-time-label {
    font-size: 0.78em; color: var(--text-muted, #888); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em; flex: 1;
}
.hoc-dp-time-fields {
    display: flex; align-items: center; gap: 0.25em;
}
.hoc-dp-time-h, .hoc-dp-time-m {
    width: 3em; text-align: center;
    font: inherit; font-variant-numeric: tabular-nums;
    color: inherit;
    background: var(--bg-input, #fff);
    border: 1px solid var(--border-input, var(--border-default, #e2e5f0));
    border-radius: 6px;
    padding: 0.25em 0.15em;
    -moz-appearance: textfield;
}
.hoc-dp-time-h::-webkit-outer-spin-button,
.hoc-dp-time-h::-webkit-inner-spin-button,
.hoc-dp-time-m::-webkit-outer-spin-button,
.hoc-dp-time-m::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.hoc-dp-time-h:focus, .hoc-dp-time-m:focus {
    outline: none; border-color: var(--hoc-accent, var(--primary, #E87A1E));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hoc-accent, var(--primary, #E87A1E)) 18%, transparent);
}
.hoc-dp-time-sep {
    color: var(--text-muted, #888); font-weight: 600;
}
.hoc-dp-time-nudge {
    width: 1.6em; height: 1.6em; border-radius: 5px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted, #888); font-size: 0.7em;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.hoc-dp-time-nudge:hover {
    background: var(--bg-subtle, rgba(0,0,0,0.05));
    color: var(--text-primary, #1a1a2e);
}

.hoc-dp-foot {
    display: flex; justify-content: flex-end; gap: 0.35em;
    padding: 0.5em 0.25em 0.25em; border-top: 1px solid var(--border-default, #e2e5f0);
    margin-top: 0.25em;
}
.hoc-dp-btn {
    appearance: none; border: 1px solid transparent;
    padding: 0.4em 0.9em; border-radius: 6px;
    font: inherit; font-size: 0.85em; font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hoc-dp-btn-ghost {
    background: transparent; color: var(--text-secondary, #555);
}
.hoc-dp-btn-ghost:hover {
    background: var(--bg-subtle, rgba(0,0,0,0.05));
    color: var(--text-primary, #1a1a2e);
}
.hoc-dp-btn-primary {
    background: var(--hoc-accent, var(--primary, #E87A1E));
    color: #fff;
}
.hoc-dp-btn-primary:hover { filter: brightness(0.95); }
.hoc-dp-action-clear { margin-right: auto; color: var(--danger, #dc3545); }
.hoc-dp-action-clear:hover {
    background: rgba(220, 53, 69, 0.08); color: var(--danger, #dc3545);
}


/* ── Color Swatches (radio picker) ──────────────────────────────── */

.hoc-color-swatches {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.hoc-color-swatch {
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hoc-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.hoc-color-swatch:hover { transform: scale(1.08); }
.hoc-color-swatch.is-active {
    border-color: var(--hoc-accent, var(--primary, #E87A1E));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--hoc-accent, var(--primary, #E87A1E)) 22%, transparent);
}
.hoc-color-swatch i {
    font-size: 11px; opacity: 0.45;
}
.hoc-color-swatches-sm .hoc-color-swatch { width: 22px; height: 22px; }
.hoc-color-swatches-lg .hoc-color-swatch { width: 36px; height: 36px; }


/* ── Weekday Picker (segmented chips) ───────────────────────────── */

.hoc-weekday-picker {
    display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}
.hoc-weekday-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; padding: 6px 12px; border-radius: 18px;
    border: 1px solid transparent; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; user-select: none; transition: all 0.15s;
}
.hoc-weekday-btn input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.hoc-weekday-btn.is-on {
    background: var(--hoc-accent, var(--primary, #E87A1E));
    border-color: var(--hoc-accent, var(--primary, #E87A1E));
    color: #fff;
}


/* ── Modal Section (visual divider inside modal body) ───────────── */

.hoc-modal-section {
    margin-bottom: 1.5rem;
}
.hoc-modal-section:last-child { margin-bottom: 0; }
.hoc-modal-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem; border-bottom: 1px solid transparent;
}
.hoc-modal-section-title > i {
    font-size: 0.85rem; color: var(--hoc-accent, var(--primary, #E87A1E)); opacity: 0.85;
}
.hoc-modal-section-body {
    display: flex; flex-direction: column; gap: 10px;
}
.hoc-modal-section-body > .hoc-form-group { margin-bottom: 0; }
.hoc-modal-section-body > .hoc-form-row   { margin-bottom: 0; }
.hoc-modal-section-body .hoc-form-row > .hoc-form-group { margin-bottom: 0; }


/* ── Detail-Cards ──────────────────────────────────────────────── */

.hoc-inspect-card {
    border-radius: 8px; padding: 1rem;
}

.hoc-inspect-label {
    display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem;
}

.hoc-inspect-value {
    font-size: 1.1rem; font-weight: 600;
}


/* ── Pagination (erweitert) ─────────────────────────────────────── */

.hoc-page-btn {
    background: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.82rem; text-decoration: none; cursor: pointer; transition: all 0.15s;
}


.hoc-page-btn.active,
.hoc-page-btn.active {
    font-weight: 600;
}

.hoc-page-btn.disabled,
.hoc-page-btn.disabled {
    pointer-events: none;
}

.hoc-page-info {
    margin-left: auto; font-size: 0.8rem;
}


/* ── Stat-Badge ─────────────────────────────────────────────────── */

.hoc-stat-badge {
    display: inline-flex; align-items: center; gap: 0.3em; padding: 0.3rem 0.75rem; border-radius: 8px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border-default, #e2e5f0);
}

.hoc-stat-badge.hoc-stat-clickable {
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.hoc-stat-badge.hoc-stat-clickable:hover {
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.hoc-stat-badge.hoc-stat-clickable:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}


/* ── Animations ─────────────────────────────────────────────────── */

@keyframes kaFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes kaSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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















/* ══════════════════════════════════════════════════════════════════════
   HOC HTML-Editor (code editor stays dark themed)
   ══════════════════════════════════════════════════════════════════════ */

.hoc-editor {
    display: flex; border: 1px solid transparent; border-radius: 8px; overflow: hidden; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; font-size: 13px; line-height: 1.6; position: relative;
}



/* ── Zeilennummern ── */

.hoc-editor-gutter {
    flex-shrink: 0; width: 48px; padding: 12px 0; text-align: right; border-right: 1px solid transparent; overflow: hidden; user-select: none; white-space: pre; font-family: inherit; font-size: inherit; line-height: inherit; box-sizing: border-box; padding-right: 10px;
}


/* ── Code-Bereich (Overlay-Technik) ── */

.hoc-editor-code {
    flex: 1; position: relative; overflow: hidden; min-height: 280px; max-height: 500px;
}

.hoc-editor-highlight,
.hoc-editor-input {
    background: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 12px 14px; border: none; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre; overflow: auto; box-sizing: border-box; tab-size: 2; -moz-tab-size: 2;
}

.hoc-editor-highlight {
    pointer-events: none; z-index: 1;
}

.hoc-editor-input {
    resize: none; z-index: 2;
}



/* ── Syntax-Farben ── */





.hl-cmt {
    font-style: italic;
}


.hl-ph {
    font-weight: 700; border-radius: 3px; padding: 0 2px;
}


/* ── Format-Button ── */

.btn-format-html {
    border: 1px solid transparent; border-radius: 8px; padding: 0.5rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}



/* ══════════════════════════════════════════════════════════════════════
   HOC Editor – Mode Toggle & Visual Editor (Light Theme)
   ══════════════════════════════════════════════════════════════════════ */


/* ── Editor Container ── */

.hoc-editor-container {
    position: relative;
}


/* ── Mode Toggle Bar ── */

.hoc-editor-modebar {
    display: flex; gap: 0; margin-bottom: 0; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; overflow: hidden;
}

.hoc-modebtn {
    background: transparent; flex: 0 0 auto; padding: 0.45rem 1.1rem; border: none; border-right: 1px solid transparent; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}



.hoc-modebar-right {
    display: flex; margin-left: auto;
}

.hoc-modebar-right .hoc-modebtn {
    border-right: none; border-left: 1px solid transparent;
}

.hoc-btn-fullscreen {
    padding: 0.45rem 0.75rem;
}


/* Panels innerhalb des Containers → abgerundete Ecken unten */

.hoc-editor-container > .hoc-editor,
.hoc-editor-container > .hoc-editor-visual,
.hoc-editor-container > .hoc-editor-preview,
.hoc-editor-container > .hoc-editor-images {
    border-radius: 0 0 8px 8px;
}


/* ── Visual Editor Container ── */

.hoc-editor-visual {
    border: 1px solid transparent; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden;
}



/* ── Visual Toolbar ── */

.hoc-visual-toolbar {
    display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid transparent; flex-wrap: wrap;
}

.hoc-toolbar-btn {
    background: transparent; display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 1px solid transparent; border-radius: 4px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
}



.hoc-toolbar-sep {
    width: 1px; height: 18px; margin: 0 4px;
}


/* ── Visual Editor iframe ── */

.hoc-visual-iframe {
    width: 100%; min-height: 280px; height: 320px; display: block; border: none;
}


/* ── Preview Container ── */

.hoc-editor-preview {
    border: 1px solid transparent; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden;
}

.hoc-preview-iframe {
    width: 100%; min-height: 280px; height: 320px; display: block; border: none;
}


/* ── Images Panel ── */

.hoc-editor-images {
    border: 1px solid transparent; border-top: none; border-radius: 0 0 8px 8px; overflow: auto; padding: 16px; min-height: 200px; max-height: 500px;
}


/* ── Fullscreen ── */

.hoc-fullscreen {
    position: fixed !important; inset: 0; z-index: 9999; display: flex; flex-direction: column; border-radius: 0;
}

.hoc-fullscreen .hoc-editor-modebar {
    border-radius: 0; flex-shrink: 0;
}

.hoc-fullscreen > .hoc-editor,
.hoc-fullscreen > .hoc-editor-visual,
.hoc-fullscreen > .hoc-editor-preview,
.hoc-fullscreen > .hoc-editor-images {
    flex: 1; border-radius: 0; max-height: none;
}

.hoc-fullscreen .hoc-editor-code {
    max-height: none; min-height: 0;
}

.hoc-fullscreen .hoc-visual-iframe,
.hoc-fullscreen .hoc-preview-iframe {
    height: 100%; min-height: 0;
}


/* ── Bild-Auswahl-Overlay ── */

.hoc-image-picker-overlay {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
}

.hoc-image-picker-dialog {
    border: 1px solid transparent; border-radius: 12px; width: 90%; max-width: 520px; max-height: 70vh; display: flex; flex-direction: column;
}

.hoc-image-picker-header {
    display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-bottom: 1px solid transparent; font-weight: 600; font-size: 0.9rem;
}

.hoc-image-picker-close {
    background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px;
}


.hoc-image-picker-body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; padding: 1rem; overflow-y: auto;
}

.hoc-image-picker-item {
    cursor: pointer; border-radius: 8px; border: 2px solid transparent; overflow: hidden; transition: border-color 0.15s; text-align: center;
}


.hoc-image-picker-item img {
    width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block;
}

.hoc-image-picker-label {
    display: block; font-size: 0.68rem; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ── Find & Replace Bar ── */

.hoc-find-bar {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-bottom: none; font-size: 0.8rem;
}

.hoc-find-input {
    flex: 0 1 180px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; font-family: inherit; font-size: 0.8rem; outline: none;
}

.hoc-find-count {
    font-size: 0.72rem; white-space: nowrap; min-width: 60px;
}

.hoc-find-btn {
    background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
}

.hoc-find-close {
    margin-left: auto;
}


/* ── Placeholder Autocomplete ── */

.hoc-autocomplete {
    position: absolute; z-index: 100; min-width: 180px; max-width: 320px; max-height: 200px; overflow-y: auto; border: 1px solid transparent; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
}

.hoc-ac-item {
    padding: 5px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ── Character Counter ── */

.hoc-editor-counter {
    padding: 4px 12px; font-size: 0.7rem; text-align: right; border: 1px solid transparent; border-top: none; border-radius: 0 0 8px 8px;
}


/* ── Preview Responsive Bar ── */

.hoc-preview-bar {
    display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid transparent;
}

.hoc-preview-device {
    background: transparent; border: 1px solid transparent; border-radius: 4px; width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}


/* ── Toolbar Dropdown ── */

.hoc-toolbar-dropdown {
    position: relative; display: inline-flex;
}

.hoc-toolbar-dropdown-btn {
    min-width: auto; padding: 0 8px;
}

.hoc-toolbar-dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 200; min-width: 160px; border: 1px solid transparent; border-radius: 6px; padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.hoc-dropdown-item {
    padding: 6px 12px; cursor: pointer; font-size: 0.82rem; transition: background 0.1s;
}


/* ══════════════════════════════════════
   THEME TOGGLE (Topbar)
══════════════════════════════════════ */

.theme-toggle-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.2s; flex-shrink: 0;
}


#themeIconLight,
#themeIconDark,
#themeIconSystem {
    display: none;
}


/* ══════════════════════════════════════
   THEME SELECT (Einstellungen)
══════════════════════════════════════ */

.theme-select-wrap {
    display: flex; gap: 0.75rem;
}

.theme-opt {
    display: flex; align-items: center; gap: 8px; padding: 0.65rem 1.25rem; border-radius: 10px; border: 1.5px solid transparent; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all 0.2s; user-select: none;
}


.theme-opt.active {
    font-weight: 600;
}

.theme-opt input[type="radio"] {
    display: none;
}

.theme-opt i {
    font-size: 1rem;
}


/* ── Accent-Theme-Auswahl ── */

.accent-theme-grid {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
}

.accent-theme-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 2px solid var(--border-default); border-radius: 10px; cursor: pointer; transition: all 0.2s; min-width: 80px;
}



.accent-theme-card input[type="radio"] {
    display: none;
}

.accent-preview {
    width: 36px; height: 36px; border-radius: 50%; transition: transform 0.2s;
}

.accent-theme-card:hover .accent-preview {
    transform: scale(1.1);
}

.accent-name {
    font-size: 0.82rem; font-weight: 500;
}

.accent-theme-card.active .accent-name {
    font-weight: 600;
}


/* ── Multi-Dashboard: Theme-Zeile ── */

.md-theme-row {
    padding: 0.75rem 1rem 0.75rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-top: 1px solid var(--border-subtle);
}

.md-theme-label {
    font-size: 0.85rem; font-weight: 500; white-space: nowrap;
}

.md-theme-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; flex: 1;
}

/* Kompakte Varianten der Farbkacheln */

.accent-theme-card-sm {
    padding: 0.4rem 0.6rem; min-width: auto; gap: 0.3rem;
}

.accent-preview-sm {
    width: 24px; height: 24px;
}

.accent-theme-card-sm .accent-name {
    font-size: 0.75rem;
}

/* Kompakte Theme-Mode Auswahl */

.md-theme-mode {
    display: flex; gap: 0.25rem;
}

.theme-opt-sm {
    display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; font-size: 0.82rem; transition: all 0.2s;
}

.theme-opt-sm input[type="radio"] {
    display: none;
}



.md-theme-selectable {
    display: flex; align-items: center;
}

.hoc-btn-save-sm {
    padding: 0.35rem 0.75rem; font-size: 0.82rem;
}


/* ── Flash-Stack Container (oben mittig, stapelbar) ──── */

#hoc-flash-stack {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    z-index: 99998; display: flex; flex-direction: column; align-items: center;
    gap: 1px; pointer-events: none;
}

/* ── Globale Flash-Nachrichten (oben mittig) ─────────── */

.hoc-flash {
    position: relative; top: auto; left: auto; transform: none;
    z-index: 99998; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 20px; font-size: 13px; font-weight: 600;
    font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
    border-radius: 0; white-space: nowrap;
    pointer-events: auto; animation: hocFlashIn 0.3s ease;
    overflow: hidden;
}

#hoc-flash-stack > :last-child {
    border-radius: 0 0 8px 8px;
}

/* ── Status-Bar (Debug, Cache – unten rechts, nebeneinander) ── */

#hoc-status-bar {
    position: fixed; bottom: 0; right: 0;
    z-index: 99997; display: inline-flex; gap: 1px; pointer-events: none;
}

.hoc-status-badge {
    background: #6c757d; color: #fff; padding: 4px 14px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    font-family: 'Inter', monospace; border-radius: 0;
    pointer-events: auto; position: relative;
}

.hoc-status-badge-danger {
    background: #dc3545;
}

.debug-error-count {
    display: none; min-width: 18px; height: 18px; line-height: 18px;
    background: #fff; color: #dc3545; font-size: 10px; font-weight: 700;
    border-radius: 50%; text-align: center; padding: 0 4px;
    margin-left: 6px; vertical-align: middle;
}

.debug-error-count.has-errors {
    display: inline-block;
}

#hoc-status-bar > :first-child {
    border-radius: 6px 0 0 0;
}

#hoc-status-bar > :last-child {
    border-radius: 0;
}

#hoc-status-bar > :only-child {
    border-radius: 6px 0 0 0;
}

.hoc-flash i {
    font-size: 14px;
}

.hoc-flash-close {
    border: none; font-size: 16px; cursor: pointer; padding: 0 0 0 6px; line-height: 1;
}






.hoc-flash-out {
    transform: translateY(-100%);
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@keyframes hocFlashIn {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Notification Badge ─────────────────────────────────── */

.notif-badge {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
    border-radius: 9px; font-size: 10px; font-weight: 700; text-align: center;
    line-height: 17px; padding: 0 4px; display: none; pointer-events: none;
}

#hocUserToggle { cursor: pointer; }

/* ── Notification Flyout ───────────────────────────────── */

.notif-flyout {
    position: absolute; bottom: 64px; left: 12px; width: 330px;
    max-height: 420px; border-radius: 12px; z-index: 9999;
    display: none; flex-direction: column; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    animation: notifFlyIn 0.2s ease;
}
.notif-flyout.open {
    display: flex;
}

.notif-flyout-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.notif-flyout-header button {
    border: none; background: none; cursor: pointer; font-size: 14px;
    opacity: 0.5; padding: 4px 6px; border-radius: 6px;
}
.notif-flyout-header button:hover { opacity: 1; }

.notif-flyout-body {
    overflow-y: auto; flex: 1; max-height: 340px; overscroll-behavior: contain;
}

.notif-flyout-empty {
    padding: 32px 24px; text-align: center; font-size: 13px; opacity: 0.5;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.notif-flyout-empty i { font-size: 22px; }

/* ── Notification Item ─────────────────────────────────── */

.notif-item {
    display: flex; gap: 10px; padding: 10px 16px; font-size: 13px;
    align-items: flex-start; transition: background 0.15s;
}

.notif-item-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-text { line-height: 1.4; }
.notif-item-meta { font-size: 11px; margin-top: 3px; opacity: 0.5; }

.notif-item-archive {
    flex-shrink: 0; border: none; background: none;
    cursor: pointer; opacity: 0.3; font-size: 12px; padding: 4px;
    border-radius: 4px; transition: opacity 0.15s;
}
.notif-item-archive:hover { opacity: 1; }

/* Entry with a target (detail = admin page path, index.tpl notifLink()):
   the message is a link whose ::after covers the whole entry, so a click
   anywhere on it opens the page; the archive/copy buttons sit above that
   layer. Same in the notifications window (.hoc-notif-modal-item-link).
   The layer needs its z-index: the meta and detail lines are dimmed with
   opacity, which paints them above an un-indexed layer — a click on
   "Öffnen" itself would have hit them. isolation keeps the numbers local.
   Only the arrow takes the accent colour: --primary is too light for
   small text on white. */
.notif-item,
.hoc-notif-modal-item { position: relative; isolation: isolate; }
.notif-item-link,
.hoc-notif-modal-item-link { color: inherit; text-decoration: none; }
.notif-item-link::after,
.hoc-notif-modal-item-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.notif-item-link:hover,
.hoc-notif-modal-item-link:hover { text-decoration: underline; }
.notif-item-link:focus-visible,
.hoc-notif-modal-item-link:focus-visible { outline: none; }
.notif-item-link:focus-visible::after,
.hoc-notif-modal-item-link:focus-visible::after {
    outline: var(--hoc-focus-ring-width, 2px) solid var(--hoc-focus-ring-color, #E87A1E); outline-offset: -2px;
}
.notif-item-archive,
.hoc-notif-modal-item-actions { position: relative; z-index: 2; }
.notif-item-open { margin-left: 8px; white-space: nowrap; }
.notif-item-open i,
.hoc-notif-modal-item-open i { color: var(--primary, #E87A1E); font-size: 0.9em; }
.hoc-notif-modal-item:has(.hoc-notif-modal-item-link):hover { background: rgba(127,127,127,0.08); }

@keyframes notifFlyIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Nachrichten-Modal ────────────────────────────────── */

.hoc-notif-modal-header {
    display: flex; justify-content: space-between; align-items: center;
}
.hoc-notif-modal-header h4 {
    margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem;
}
.hoc-notif-modal-actions {
    display: flex; gap: 4px;
}
.hoc-notif-modal-action-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: none; cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.5; transition: opacity 0.15s, background 0.15s;
}
.hoc-notif-modal-action-btn:hover { opacity: 1; }

/* Filter-Leiste */
.hoc-notif-modal-filter {
    display: flex; gap: 6px; margin-bottom: 1rem; flex-wrap: wrap;
}
.hoc-notif-filter-btn {
    padding: 5px 12px; border-radius: 8px; border: 1px solid transparent;
    font-size: 0.78rem; font-family: 'Inter', sans-serif; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.15s; font-weight: 500;
}

/* Body */
.hoc-notif-modal-body {
    max-height: 55vh; overflow-y: auto; margin: 0 -2rem; padding: 0 2rem; overscroll-behavior: contain;
}

.hoc-notif-modal-empty {
    padding: 3rem 2rem; text-align: center; font-size: 0.9rem; opacity: 0.5;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hoc-notif-modal-empty i { font-size: 1.8rem; }

/* Item */
.hoc-notif-modal-item {
    display: flex; gap: 12px; padding: 12px 0; font-size: 0.88rem;
    align-items: flex-start; transition: background 0.15s;
    border-bottom: 1px solid transparent;
}
.hoc-notif-modal-item:last-child { border-bottom: none; }

.hoc-notif-modal-item-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.hoc-notif-modal-item-body { flex: 1; min-width: 0; }
.hoc-notif-modal-item-text { line-height: 1.5; }
.hoc-notif-modal-item-detail {
    font-size: 0.8rem; margin-top: 4px; line-height: 1.4; opacity: 0.7;
    white-space: pre-wrap;
}
.hoc-notif-modal-item-meta {
    display: flex; gap: 10px; margin-top: 6px; font-size: 0.75rem; opacity: 0.5;
    align-items: center;
}

/* Typ-Tag */
.hoc-notif-modal-type-tag {
    padding: 1px 7px; border-radius: 5px; font-size: 0.7rem; font-weight: 600;
}

/* Aktionen */
.hoc-notif-modal-item-actions {
    flex-shrink: 0; display: flex; gap: 2px;
}
.hoc-notif-modal-action-sm {
    width: 28px; height: 28px; border-radius: 6px; border: none;
    background: none; cursor: pointer; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.3; transition: opacity 0.15s, background 0.15s;
}
.hoc-notif-modal-action-sm:hover { opacity: 1; }


/* ══════════════════════════════════════
   DEBUG-KONSOLE
══════════════════════════════════════ */

.hoc-debug-panel {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99996;
    height: 0; overflow: hidden; transition: height 0.25s ease;
    display: flex; flex-direction: column; opacity: 0.85;
    background: #1a1a2e; color: #e0e0e0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px; border-top: 2px solid #dc3545;
    box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}

.hoc-debug-panel.open {
    height: var(--hoc-debug-h, 260px);
}

.hoc-debug-panel.resizing { transition: none; user-select: none; }

.hoc-debug-resize {
    position: absolute; top: 0; left: 0; right: 0; height: 8px;
    cursor: ns-resize; z-index: 5; touch-action: none;
}
.hoc-debug-resize:hover::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: #ff5c6c; box-shadow: 0 0 6px rgba(220,53,69,.7);
}

.hoc-debug-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 14px; background: #16162a; flex-shrink: 0;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    color: #dc3545; user-select: none;
}

.hoc-debug-header i:first-child {
    margin-right: 6px;
}

.hoc-debug-btn {
    background: none; border: 1px solid rgba(255,255,255,.1); color: #999;
    width: 26px; height: 26px; border-radius: 4px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; transition: all 0.15s; margin-left: 4px;
}

.hoc-debug-btn:hover {
    color: #fff; border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.05);
}
.hoc-debug-btn.active {
    color: #ef5350; border-color: rgba(239,83,80,.4);
    background: rgba(239,83,80,.12);
}

.hoc-debug-body {
    flex: 1; overflow-y: auto; padding: 6px 14px;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}

.hoc-debug-body::-webkit-scrollbar { width: 6px; }
.hoc-debug-body::-webkit-scrollbar-track { background: transparent; }
.hoc-debug-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.hoc-debug-entry {
    padding: 2px 0; line-height: 1.5; white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.03);
}

.hoc-debug-ts {
    color: #666; font-size: 11px; margin-right: 6px;
}

.hoc-debug-msg {
    color: #ccc;
}

.hoc-debug-data {
    color: #888; font-size: 11px; margin-left: 6px;
}

/* Live-Speicher-Monitor im Debug-Header */
.hoc-debug-header { position: relative; }
.hoc-debug-mem {
    position: absolute; left: 50%; transform: translateX(-50%);
    cursor: pointer; color: #81c784; font-weight: 600; letter-spacing: 0;
    font-size: 11px; padding: 2px 8px; border-radius: 4px;
    border: 1px solid transparent; transition: all 0.15s; white-space: nowrap;
}
.hoc-debug-mem:hover { background: rgba(129,199,132,.12); border-color: rgba(129,199,132,.4); }
.hoc-debug-mem.active { background: rgba(129,199,132,.18); border-color: rgba(129,199,132,.5); }
.hoc-debug-graph {
    flex-shrink: 0; height: 92px; background: #101024;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.hoc-debug-graph canvas { display: block; width: 100%; height: 100%; }

/* ── Debug-Konsole: Tabs + Header-Layout ──────────────────────── */
.hoc-debug-header { justify-content: flex-start; gap: 10px; }
.hoc-debug-title { color: #dc3545; }
.hoc-debug-spacer { flex: 1 1 auto; }
.hoc-debug-actions { display: inline-flex; align-items: center; }

.hoc-debug-tabs { display: inline-flex; gap: 2px; }
.hoc-debug-tab {
    background: none; border: 1px solid transparent; color: #90a4ae;
    padding: 3px 10px; border-radius: 5px; cursor: pointer;
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
    display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
}
.hoc-debug-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.hoc-debug-tab.active {
    color: #fff; border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
}

/* Mem-Badge nicht mehr absolut zentriert (Tabs belegen die Mitte) */
.hoc-debug-mem { position: static; left: auto; transform: none; }

/* ── Info-Tab: Instrument-Cluster ─────────────────────────────── */
.hoc-debug-info {
    flex: 1; overflow-y: auto; padding: 12px 14px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.hoc-debug-info::-webkit-scrollbar { width: 6px; }
.hoc-debug-info::-webkit-scrollbar-track { background: transparent; }
.hoc-debug-info::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Hero-Statusleiste */
.hoc-info-hero {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.07); border-left: 3px solid #607d8b;
}
.hoc-info-hero.tone-good { border-left-color: #81c784; }
.hoc-info-hero.tone-warn { border-left-color: #ffb74d; }
.hoc-info-hero.tone-bad  { border-left-color: #ef5350; }

.hero-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: #607d8b; }
.hero-dot.v-good { background: #81c784; }
.hero-dot.v-warn { background: #ffb74d; }
.hero-dot.v-bad  { background: #ef5350; }
.hero-dot.pulse  { animation: hocInfoPulse 2s ease-out infinite; }
@keyframes hocInfoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(129,199,132,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(129,199,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(129,199,132,0); }
}

.hero-txt { flex: 1 1 200px; min-width: 0; }
.hero-title { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }
.hero-sub   { color: #90a4ae; font-size: 11px; margin-top: 2px; }

.hero-metrics { display: flex; gap: 22px; flex-wrap: wrap; }
.metric { display: flex; flex-direction: column; align-items: flex-end; }
.metric-v {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    color: #e0e0e0; font-size: 16px; font-weight: 600; line-height: 1.1;
    border-radius: 3px; padding: 0 2px;
}
.metric-k { color: #78909c; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; }

/* Karten */
.hoc-info-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.hoc-info-card {
    background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px; padding: 10px 12px 8px;
}
.card-head {
    display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
    color: #4fc3f7; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
}
.card-head i { font-size: 11px; opacity: .85; }
.card-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 4px 0; border-top: 1px solid rgba(255,255,255,.045);
}
.card-row:first-of-type { border-top: none; }
.card-label { color: #8b9aa5; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.card-val {
    font-size: 12px; text-align: right; color: #e6ebee; line-height: 1.4;
    overflow-wrap: anywhere; border-radius: 3px; padding: 0 2px;
}
.card-val.v-mono, .card-val.v-flag {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
.card-val.v-good { color: #81c784; }
.card-val.v-warn { color: #ffb74d; }
.card-val.v-bad  { color: #ef5350; }

/* Boolean-Punkt */
.card-val.v-flag { display: inline-flex; align-items: center; gap: 6px; color: #cfd8dc; }
.v-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #607d8b; }
.v-dot.v-good    { background: #81c784; }
.v-dot.v-warn    { background: #ffb74d; }
.v-dot.v-bad     { background: #ef5350; }
.v-dot.v-neutral { background: #607d8b; }

/* ── Debug-Konsole: Seite-Tab ─────────────────────────────────── */
.hoc-info-hero.tone-page { border-left-color: #4fc3f7; }
.hoc-page-empty { color: #78909c; font-size: 11px; padding: 4px 2px; font-style: italic; }
.hoc-page-sub {
    color: #4fc3f7; font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
    margin: 7px 0 2px; opacity: .85; font-weight: 700;
}

/* Wert-Änderung: kurzer Aufblitz */
.v-flash { animation: hocInfoFlash .7s ease-out; }
@keyframes hocInfoFlash {
    0%   { background: rgba(79,195,247,.32); }
    100% { background: transparent; }
}

#hocDebugToggle {
    pointer-events: auto;
}


/* ── Menu Sort (Einstellungen → Navigation) ───────────────────────── */

.menu-sort-section {
    margin-bottom: 1.5rem;
}

.menu-sort-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-default, #e2e5f0);
}

.menu-sort-section-title {
    font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em;
}

.menu-sort-reset {
    background: none; border: none; cursor: pointer; padding: 0.3rem 0.5rem;
    border-radius: 6px; font-size: 0.85rem; transition: all 0.15s;
}

.menu-sort-reset:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
}

.menu-sort-list {
    display: flex; flex-direction: column; gap: 2px;
}

.menu-sort-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border-radius: 8px; cursor: grab; transition: all 0.15s; user-select: none;
    border: 1.5px solid transparent;
}

.menu-sort-item:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.04));
}

.menu-sort-item:active,
.menu-sort-item.dragging {
    cursor: grabbing; opacity: 0.6;
    background: var(--bg-hover, rgba(0,0,0,0.05));
    border-color: var(--accent-primary, #E87A1E);
}

.menu-sort-item.drag-over {
    border-top: 2px solid var(--accent-primary, #E87A1E);
}

.menu-sort-handle {
    color: var(--text-muted, #aaa); font-size: 0.85rem; flex-shrink: 0;
}

.menu-sort-icon {
    width: 1.2rem; text-align: center; font-size: 0.85rem; flex-shrink: 0;
}

.menu-sort-label {
    font-size: 0.88rem; font-weight: 450;
}

/* ── Detail Row (aufklappbare verschachtelte Inhalte) ──────────── */

.hoc-detail-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 50px;
    font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--primary-border-default);
    background: none; cursor: pointer;
    color: var(--primary);
    transition: all 0.2s;
}
.hoc-detail-toggle i {
    font-size: 0.6rem;
    transition: transform 0.2s;
}
.hoc-detail-toggle:hover {
    background: var(--primary-bg-subtle, rgba(99,102,241,0.08));
}
.hoc-detail-toggle.open i {
    transform: rotate(180deg);
}

.hoc-detail-row > td {
    padding: 0 !important;
    border-bottom: none !important;
    position: relative;
    z-index: 3;
}
.hoc-detail-row-content {
    padding: 0;
}


/* ── Nested Table (Sub-Tabelle in Detail Row) ──────────────────── */

.hoc-nested-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.88rem;
}
.hoc-nested-table th {
    text-align: left; font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 1rem 1.25rem;
    white-space: nowrap;
}
.hoc-nested-table td {
    padding: 1rem 1.25rem;
    font-size: 0.88rem; white-space: nowrap;
    vertical-align: middle;
}
.hoc-nested-table tbody tr {
    border-bottom: 1px solid var(--border-default, #e2e5f0);
}
.hoc-nested-table tbody tr:last-child {
    border-bottom: none;
}

/* Spaltenlinien nur wenn Haupttabelle hoc-col-lines hat */
.hoc-col-lines .hoc-nested-table th,
.hoc-col-lines .hoc-nested-table td {
    border-right: 1px solid var(--border-default, #e2e5f0);
}
.hoc-col-lines .hoc-nested-table th:last-child,
.hoc-col-lines .hoc-nested-table td:last-child {
    border-right: none;
}

/* Resize-Handles in Nested Table */
.hoc-nested-table .hoc-col-resize {
    position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
    cursor: col-resize; user-select: none; z-index: 2;
    background: transparent;
}
.hoc-col-lines .hoc-nested-table .hoc-col-resize {
    background: var(--border-default, #e2e5f0);
}

/* ═══════════════════════════════════════════════════════════════════
   HocFileTree – interactive hierarchical file selector
   ═══════════════════════════════════════════════════════════════════ */
.hoc-file-tree {
    border: 1px solid var(--border-default, #e2e5f0);
    border-radius: 8px;
    overflow: hidden;
}
.hoc-ft-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default, #e2e5f0);
    background: var(--bg-subtle, rgba(255,255,255,0.04));
}
.hoc-ft-search {
    flex: 1;
    min-width: 0;
    padding: 5px 10px !important;
    font-size: 0.85rem !important;
}
.hoc-ft-toolbar-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.hoc-ft-toolbar-actions .hoc-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
}
.hoc-ft-tree {
    max-height: 400px;
    overflow-y: auto;
    padding: 6px 0;
    font-size: 0.85rem;
}
.hoc-ft-node {
    user-select: none;
}
.hoc-ft-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px 2px 0;
    cursor: default;
    border-radius: 3px;
}
.hoc-ft-row:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.04));
}
.hoc-ft-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-muted, #888);
    font-size: 0.7rem;
}
.hoc-ft-toggle.hoc-ft-spacer {
    cursor: default;
}
.hoc-ft-check {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary, #E87A1E);
}
.hoc-ft-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted, #888);
}
.hoc-ft-icon .fa-folder,
.hoc-ft-icon .fa-folder-open {
    color: #e8a317;
}
.hoc-ft-icon .fa-file-code {
    color: var(--primary, #3b82f6);
}
.hoc-ft-icon .fa-file-image {
    color: #10b981;
}
.hoc-ft-icon .fa-file-archive {
    color: #8b5cf6;
}
.hoc-ft-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}
.hoc-ft-count {
    color: var(--text-muted, #888);
    font-size: 0.78rem;
    margin-left: 4px;
}
.hoc-ft-size {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
    min-width: 55px;
    text-align: right;
}
.hoc-ft-children {
    padding-left: 20px;
}
.hoc-ft-stats {
    padding: 6px 12px;
    font-size: 0.82rem;
    color: var(--text-muted, #888);
    border-top: 1px solid var(--border-default, #e2e5f0);
    background: var(--bg-subtle, rgba(255,255,255,0.04));
}
.hoc-ft-hidden {
    display: none !important;
}
.hoc-ft-default-excluded > .hoc-ft-row {
    opacity: 0.5;
}
.hoc-ft-default-excluded > .hoc-ft-row .hoc-ft-name {
    font-style: italic;
}
.hoc-ft-dir-checked > .hoc-ft-row .hoc-ft-name {
    text-decoration: line-through;
    opacity: 0.6;
}
.hoc-ft-blocked > .hoc-ft-row {
    opacity: 0.45;
    cursor: default;
}
.hoc-ft-blocked-icon {
    color: var(--danger, #dc3545) !important;
    font-size: 0.72rem !important;
}
.hoc-ft-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
}




/* ============================================================
   Setup Checklist – Onboarding Modal (HocSetupChecklist)
   Prefix: hoc-scl-*
   ============================================================ */
.hoc-scl-menu-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--primary, #f59e0b); color: #fff;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
}
#hocSetupMenuEntry:hover { background: var(--hoc-bg-hover, rgba(0,0,0,0.04)); }
.user-avatar.has-setup-pending::before {
    content: ''; position: absolute; top: -2px; right: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary, #f59e0b); border: 2px solid var(--topbar-bg, #fff);
    z-index: 2;
}
.user-avatar { position: relative; }

.hoc-scl-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: hocSclFade 0.18s ease-out;
}
@keyframes hocSclFade { from { opacity: 0; } to { opacity: 1; } }
body.hoc-scl-open { overflow: hidden; }

.hoc-scl-card {
    background: var(--surface, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%; max-width: 640px;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    animation: hocSclPop 0.2s ease-out;
}
@keyframes hocSclPop {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1);     opacity: 1; }
}

.hoc-scl-head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 20px 22px 12px 22px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.hoc-scl-head-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--hoc-accent, #E87A1E) 15%, transparent);
    color: var(--hoc-accent, #E87A1E);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.hoc-scl-head-text { flex: 1 1 auto; min-width: 0; }
.hoc-scl-head-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem; font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.hoc-scl-head-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted, #888);
    line-height: 1.4;
}
.hoc-scl-close {
    flex: 0 0 auto;
    background: transparent; border: 0;
    width: 32px; height: 32px;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #888);
    border-radius: 8px;
    transition: background 0.12s;
}
.hoc-scl-close:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.hoc-scl-list {
    list-style: none; margin: 0; padding: 8px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.hoc-scl-item {
    display: flex; gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.hoc-scl-item:last-child { border-bottom: 0; }
.hoc-scl-item-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-muted, #888);
}
.hoc-scl-prio-critical .hoc-scl-item-icon {
    background: color-mix(in srgb, var(--danger, #dc3545) 15%, transparent);
    color: var(--danger, #dc3545);
}
.hoc-scl-prio-recommended .hoc-scl-item-icon {
    background: color-mix(in srgb, var(--hoc-accent, #E87A1E) 15%, transparent);
    color: var(--hoc-accent, #E87A1E);
}
.hoc-scl-item-body { flex: 1 1 auto; min-width: 0; }
.hoc-scl-item-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.hoc-scl-item-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary, #0f172a);
}
.hoc-scl-item-prio {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-muted, #888);
}
.hoc-scl-prio-critical .hoc-scl-item-prio {
    background: color-mix(in srgb, var(--danger, #dc3545) 18%, transparent);
    color: var(--danger, #dc3545);
}
.hoc-scl-prio-recommended .hoc-scl-item-prio {
    background: color-mix(in srgb, var(--hoc-accent, #E87A1E) 18%, transparent);
    color: var(--hoc-accent, #E87A1E);
}
.hoc-scl-item-desc {
    font-size: 0.84rem;
    color: var(--text-muted, #888);
    line-height: 1.5;
    margin-bottom: 10px;
}
.hoc-scl-item-actions {
    display: flex; gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.hoc-scl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.2;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hoc-scl-btn-primary {
    background: var(--hoc-accent, #E87A1E);
    color: #fff;
}
.hoc-scl-btn-primary:hover {
    background: color-mix(in srgb, var(--hoc-accent, #E87A1E) 88%, #000);
    color: #fff;
}
.hoc-scl-btn-ghost {
    background: transparent;
    color: var(--text-muted, #888);
    border: 1px solid var(--border, #e2e8f0);
}
.hoc-scl-btn-ghost:hover {
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-primary, #0f172a);
}
.hoc-scl-btn-link {
    background: transparent;
    color: var(--text-muted, #888);
    padding: 6px 10px;
}
.hoc-scl-btn-link:hover {
    color: var(--text-primary, #0f172a);
}

.hoc-scl-foot {
    padding: 12px 22px;
    border-top: 1px solid var(--border, #e2e8f0);
    display: flex; justify-content: flex-end;
}

@media (max-width: 600px) {
    .hoc-scl-overlay { padding: 0; align-items: flex-end; }
    .hoc-scl-card { max-height: 90vh; border-radius: 14px 14px 0 0; }
    .hoc-scl-head, .hoc-scl-item, .hoc-scl-foot { padding-left: 16px; padding-right: 16px; }
    .hoc-scl-item-actions { flex-direction: column; align-items: stretch; }
    .hoc-scl-btn { width: 100%; }
}

/* ── Global Loading Overlay ──────────────────────────
   Element lives in index.tpl (#globalLoadingOverlay), available on every
   admin page. Without a default style it would sit in the body flow
   ~20px tall and create an outer scrollbar on every page that doesn't
   load the customer_portal stylesheet. Default = hidden, .active = shown. */
.kd-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.kd-loading-overlay.active { display: flex; }
.kd-loading-box {
    text-align: center;
    padding: 2.5rem 3rem;
    border-radius: 16px;
}
.kd-loading-text { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.kd-loading-sub  { font-size: 0.8rem; transition: opacity 0.2s; }

/* ── HocGadgets: resize-handle ───────────────────────────────── */
.hoc-resize-handle {
    height: 8px;
    cursor: ns-resize;
    position: relative;
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
}
.hoc-resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-default, #c7ccdb);
    transition: background 0.15s;
}
.hoc-resize-handle:hover::before,
.hoc-resize-handle.is-dragging::before {
    background: var(--primary, #0078d4);
}
/* While a drag is active, suppress text selection + iframe pointer-events
   globally so the cursor doesn't flicker out of ns-resize mode. */
body.hoc-resizing {
    user-select: none;
    cursor: ns-resize;
}
body.hoc-resizing iframe { pointer-events: none; }


/* ══════════════════════════════════════
   HocShortcuts — Keyboard layer + cheat sheet
   ══════════════════════════════════════ */

/* Reusable keycap. Inline use is fine: <kbd class="hoc-kbd">⌘</kbd> */
.hoc-kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 2px 6px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-primary, #1f2230);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-default, #d6dae4);
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    vertical-align: middle;
    white-space: nowrap;
}
.hoc-kbd-plus,
.hoc-kbd-sep {
    display: inline-block;
    padding: 0 3px;
    font-size: 0.75rem;
    color: var(--text-muted, #777e94);
    vertical-align: middle;
}

/* Cheat sheet (rendered into HocModal lg) */
.hoc-shortcuts-toolbar {
    margin-bottom: 12px;
}
.hoc-shortcuts-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: var(--bg-input, #f6f7fb);
    border: 1px solid var(--border-input, var(--border-default, #d6dae4));
    border-radius: 8px;
    color: var(--text-primary, #1f2230);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hoc-shortcuts-search:focus {
    border-color: var(--primary, #E87A1E);
    box-shadow: 0 0 0 3px rgba(232, 122, 30, 0.15);
}

.hoc-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hoc-shortcuts-group-title {
    margin: 0 0 6px 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #777e94);
}
.hoc-shortcuts-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-default, #e2e5f0);
    border-radius: 8px;
    overflow: hidden;
}
.hoc-shortcuts-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-subtle, var(--border-default, #eef0f5));
    font-size: 0.88rem;
    color: var(--text-primary, #1f2230);
}
.hoc-shortcuts-item:first-child { border-top: none; }
.hoc-shortcuts-item:hover {
    background: var(--bg-hover, var(--bg-subtle, rgba(0,0,0,0.025)));
}
.hoc-shortcuts-keys {
    flex: 0 0 auto;
    min-width: 110px;
    text-align: right;
}
.hoc-shortcuts-label {
    flex: 1 1 auto;
    color: var(--text-secondary, #51566b);
}
.hoc-shortcuts-empty {
    margin: 12px 0;
    color: var(--text-muted, #777e94);
    text-align: center;
    font-style: italic;
}

/* Sequence indicator (bottom-right) — visible while a multi-key shortcut
   like "g d" is being typed. */
.hoc-shortcut-seq-indicator {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 600;
    padding: 8px 14px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-primary, #ffffff);
    background: rgba(31, 34, 48, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hoc-shortcuts-search { transition: none; }
}


/* ══════════════════════════════════════
   A11y baseline (Phase 2)
   ══════════════════════════════════════ */

:root {
    --hoc-focus-ring-color: var(--primary, #E87A1E);
    --hoc-focus-ring-width: 2px;
    --hoc-focus-ring-offset: 2px;
}

/* Global :focus-visible — only kicks in for keyboard navigation, not mouse
   clicks (browser-decided). Modules with their own :focus-visible rules
   still win via specificity. Form fields (input/select/textarea/
   contenteditable) are intentionally excluded: they already carry their
   own focus ring via border-color + box-shadow, and adding the outline
   on top renders as two concentric rings on Tab focus. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="treeitem"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):not([contenteditable="true"]):focus-visible {
    outline: var(--hoc-focus-ring-width) solid var(--hoc-focus-ring-color);
    outline-offset: var(--hoc-focus-ring-offset);
}

/* Skip link — hidden until focused, then jumps to top-left */
.hoc-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 9999;
    padding: 10px 18px;
    background: var(--primary, #E87A1E);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: top 0.15s ease;
}
.hoc-skip-link:focus,
.hoc-skip-link:focus-visible {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* aria-busy on a section container — semantic only (screen readers).
   Visual feedback would flash on every <100ms reload, so we keep it minimal
   to a wait-cursor. A list WITHOUT rows is the exception: it gets a delayed
   loading row (see „Table loading“). Modules that want a stronger loading
   state for filled lists should use a skeleton or spinner explicitly. */
[aria-busy="true"] {
    cursor: progress;
}

/* ══════════════════════════════════════
   HocCommand — Command palette (Mod+K)
   ══════════════════════════════════════ */

/* Palette body fills the modal — strip the modal's default padding when our
   palette wrapper is the first child. Uses :has() (2023+, all evergreen
   browsers); on unsupported engines the layout is slightly more padded but
   still functional. */
.hoc-modal-body:has(> .hoc-cmd-palette) {
    padding: 0;
}
.hoc-cmd-palette {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hoc-cmd-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-default, #e2e5f0);
}
.hoc-cmd-search-icon {
    color: var(--text-muted, #777e94);
    font-size: 1rem;
    flex: 0 0 auto;
}
.hoc-cmd-search {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary, #1f2230);
    padding: 4px 0;
}
.hoc-cmd-search::placeholder {
    color: var(--text-muted, #777e94);
    font-weight: 400;
}

.hoc-cmd-results {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.hoc-cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary, #1f2230);
}
.hoc-cmd-item.is-selected {
    background: var(--bg-hover, var(--bg-subtle, rgba(0,0,0,0.045)));
}
.hoc-cmd-icon {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    color: var(--text-muted, #777e94);
}
.hoc-cmd-item.is-selected .hoc-cmd-icon {
    color: var(--primary, #E87A1E);
}
.hoc-cmd-label {
    flex: 1 1 auto;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hoc-cmd-group {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--text-muted, #777e94);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hoc-cmd-aux {
    flex: 0 0 auto;
    margin-left: 4px;
}
.hoc-cmd-empty {
    padding: 18px;
    text-align: center;
    color: var(--text-muted, #777e94);
    font-style: italic;
}

.hoc-cmd-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid var(--border-default, #e2e5f0);
    background: var(--bg-subtle, rgba(0,0,0,0.02));
    font-size: 0.78rem;
    color: var(--text-muted, #777e94);
    flex-wrap: wrap;
}
.hoc-cmd-hint .hoc-kbd {
    font-size: 0.7rem;
    padding: 1px 5px;
    margin: 0 2px;
}
.hoc-cmd-sep {
    color: var(--border-default, #d6dae4);
}


/* prefers-reduced-motion — kill all animations + transitions globally.
   W3C-recommended pattern. Comes LAST in admin.css so it wins via order. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════
   HocForm::card — structured list/detail card
   ══════════════════════════════════════ */

.hoc-card {
    border: 1px solid var(--border-default, #e2e5f0);
    border-radius: 8px;
    background: var(--hoc-card-bg, var(--bg-surface, #fff));
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.hoc-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.hoc-card-title-wrap { flex: 1; min-width: 0; }

.hoc-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    flex-wrap: wrap;
}

.hoc-card-icon {
    color: var(--primary, #E87A1E);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.hoc-card-title-text { min-width: 0; }

.hoc-card-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    margin-top: 0.2rem;
}

.hoc-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hoc-card-body {
    border-top: 1px solid var(--border-subtle, #eef0f5);
    padding: 0.75rem 1rem;
}

/* Body sub-elements may want to break out of the default padding (e.g. lists
   with their own padding). Modules can opt out with .hoc-card-body-flush. */
.hoc-card-body-flush { padding: 0; }


/* ══════════════════════════════════════
   HocForm::collapsibleGroup — categorical sectioning with foldable groups.
   Each .hoc-cg-group has a clickable header (chevron + icon + label + count)
   and a body. State optionally persisted per group via data-cg-persist on the
   outer .hoc-cg wrapper.
   ══════════════════════════════════════ */

.hoc-cg {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hoc-cg-group {
    border: 1px solid var(--border-default, #e2e5f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card, transparent);
}

.hoc-cg-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: var(--bg-subtle, rgba(255,255,255,0.04));
    border: none;
    border-bottom: 1px solid var(--border-subtle, #eef0f5);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    user-select: none;
}

.hoc-cg-header:hover { background: var(--bg-card-hover, rgba(255,255,255,0.04)); }

.hoc-cg-chevron {
    font-size: 0.75rem;
    width: 14px;
    transition: transform 0.15s ease;
    opacity: 0.7;
}

.hoc-cg-icon {
    color: var(--primary, #E87A1E);
    width: 18px;
    text-align: center;
}

.hoc-cg-label {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.hoc-cg-count {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
}

.hoc-cg-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hoc-cg-group.hoc-cg-collapsed > .hoc-cg-body { display: none; }
.hoc-cg-group.hoc-cg-collapsed > .hoc-cg-header { border-bottom: none; }
.hoc-cg-group.hoc-cg-collapsed .hoc-cg-chevron { transform: rotate(-90deg); }


/* ══════════════════════════════════════
   Section toolbar — flex row of compact buttons above a list. Distinct from
   .hoc-toolbar (the overflow-menu pattern in page headers) and from
   .hoc-toolbar-btn (icon-only square buttons in the visual HTML editor).
   Use .hoc-section-toolbar as the wrapper, .hoc-section-toolbar-btn for
   buttons within it. -active marks pressed state, -danger marks
   destructive/error-filter buttons.
   ══════════════════════════════════════ */

.hoc-section-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle, #eef0f5);
    flex-wrap: wrap;
}

.hoc-section-toolbar-btn {
    background: none;
    border: 1px solid var(--border-default, #e2e5f0);
    color: var(--text-muted, #888);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.hoc-section-toolbar-btn:hover {
    border-color: var(--primary, #E87A1E);
    color: var(--primary, #E87A1E);
}

.hoc-section-toolbar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.hoc-section-toolbar-btn-active {
    border-color: var(--primary, #E87A1E);
    color: var(--primary, #E87A1E);
    background: var(--accent-tint, rgba(232,122,30,0.08));
}

.hoc-section-toolbar-btn-danger {
    border-color: #ef4444;
    color: #ef4444;
}

.hoc-section-toolbar-btn-danger:hover {
    background: rgba(239,68,68,0.08);
}

/* ── Text-Selection Opt-In/Opt-Out via data-Attribute ─────────
 * Pattern für Admin: standardmäßig native Browser-Selection überall,
 * pro Element manuell unterdrückbar oder explizit erzwingbar.
 *   data-no-select  → Auswahl aus (z.B. Toolbar-Labels, Tab-Bars)
 *   data-select     → Auswahl ein (z.B. innerhalb eines no-select-Containers)
 */
[data-no-select],
[data-no-select] * {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
[data-select],
[data-select] * {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

/* ── Admin-weiter Vollbild-Toggle pro .hoc-section ──────────────
 * JS: admin-fullscreen.js  injiziert den Button + togglet die Klasse.
 * Negiert das content-area-Padding (2rem default, 1.25rem ≤768px).
 */
.hoc-section-fullscreen {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: 6px; color: var(--text-muted, #6c757d);
    cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
    /* 4px Abstand zum vorhergehenden Action-Button (z.B. Popout).
       margin-left:auto greift nur falls keine vorherige Action existiert,
       sonst entstuende ein zweiter auto-margin und beide Buttons teilen
       sich den Restplatz (Bug: Popout landet in der Mitte). */
    margin-left: 4px;
    padding: 0;
}
/* Wenn der Fullscreen-Button die einzige Action im Header ist,
   pushe ihn selbst nach rechts. */
.hoc-section-header > .hoc-section-fullscreen:only-of-type,
.hoc-section-header > .hoc-section-fullscreen:first-child { margin-left: auto; }
.hoc-section-fullscreen:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-color, #222);
    border-color: rgba(0,0,0,0.1);
}
.hoc-section-fullscreen > i { font-size: 14px; }
.hoc-section-header-right .hoc-section-fullscreen { margin-left: 0; }
.hoc-section.is-fullscreen {
    border-radius: 0 !important;
    margin: -2rem !important;
    max-width: none !important;
}
@media (max-width: 768px) {
    .hoc-section.is-fullscreen { margin: -1.25rem !important; }
}

/* Vollbild-Button im Popup-Mode unsichtbar — Popup IST schon eigenes Fenster. */
html.hoc-popup-early .hoc-section-fullscreen,
html.hoc-popup-early [data-fullscreen-toggle] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HocAtlas — world map (hoc/public/js/atlas.js, hoc/core/atlas.php,
   docs hoc/core/HOCATLAS.md). The map itself is dark in both themes;
   the side panel follows the theme tokens.
   ═══════════════════════════════════════════════════════════════════ */
/* the side panel goes below the map when the map would get less than ~560 px
   (container query: the admin sidebar takes a varying share of the window) */
.hoc-atlas { --hoc-atlas-zoom: 1; container-type: inline-size; }
.hoc-atlas-layout {
    display: grid; grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--hoc-border, #e3e6ea); border-radius: 8px;
    overflow: hidden; background: var(--hoc-bg-surface, #fff);
}
.hoc-atlas-layout.has-panel { grid-template-columns: minmax(0, 1fr) 320px; }
@container (max-width: 900px) {
    .hoc-atlas-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
    .hoc-atlas-panel { border-left: 0 !important; border-top: 1px solid var(--hoc-border, #e3e6ea); max-height: none !important; }
}
/* height from the width only: a min-height together with aspect-ratio would force a
   minimum WIDTH and cover the side panel */
.hoc-atlas-map { position: relative; background: #050d1f; aspect-ratio: 2 / 1; min-width: 0; cursor: grab; overflow: hidden; touch-action: none; }
.hoc-atlas-map.is-panning { cursor: grabbing; }
.hoc-atlas-svg { display: block; width: 100%; height: 100%; user-select: none; }
.hoc-world-path {
    fill: #1a3050; stroke: rgba(0, 0, 0, .5); stroke-width: .4; vector-effect: non-scaling-stroke;
    transition: filter .12s ease, fill .2s ease; cursor: pointer;
}
.hoc-world-path:hover { filter: brightness(1.3) saturate(1.2); }
.hoc-world-path.is-active { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
.hoc-world-path.is-marked { stroke: #ffd166; stroke-width: 1.2; }
.hoc-atlas-dot { pointer-events: none; }
.hoc-atlas-dot.is-data, .hoc-atlas-dot.is-marked { pointer-events: auto; cursor: pointer; }
.hoc-atlas-dot-circle { fill: #94a3b8; fill-opacity: .4; r: calc(1.4 / var(--hoc-atlas-zoom, 1)); transition: fill .2s ease; }
.hoc-atlas-dot.is-data .hoc-atlas-dot-circle, .hoc-atlas-dot.is-marked .hoc-atlas-dot-circle { fill-opacity: 1; r: calc(2.4 / var(--hoc-atlas-zoom, 1)); }
.hoc-atlas-dot.is-marked .hoc-atlas-dot-circle { stroke: #ffd166; stroke-width: calc(.8 / var(--hoc-atlas-zoom, 1)); }
.hoc-atlas-dot:hover .hoc-atlas-dot-circle,
.hoc-atlas-dot.is-active .hoc-atlas-dot-circle { fill: #fff !important; r: calc(3.2 / var(--hoc-atlas-zoom, 1)); }
.hoc-atlas-floater {
    position: absolute; z-index: 10; pointer-events: none; white-space: nowrap;
    padding: 6px 10px; border-radius: 6px; font-size: 13px;
    background: rgba(15, 23, 42, .95); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    opacity: 0; transform: translate(10px, -50%); transition: opacity .15s ease;
}
.hoc-atlas-floater.is-visible { opacity: 1; }
.hoc-atlas-floater-flag { font-size: 17px; margin-right: 4px; vertical-align: middle; }
.hoc-atlas-floater-name { font-weight: 600; }
.hoc-atlas-floater-count { margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: rgba(255, 255, 255, .15); }
.hoc-atlas-legend {
    position: absolute; left: 10px; bottom: 10px; z-index: 5;
    display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px;
    background: rgba(15, 23, 42, .85); color: #fff; font-size: 11px;
}
.hoc-atlas-legend-bar { width: 80px; height: 9px; border-radius: 2px; background: linear-gradient(to right, #2c4666, #4a6fa5, #6ba3d8, #ffd166, #ef4444); }
.hoc-atlas.is-palette-red .hoc-atlas-legend-bar { background: linear-gradient(to right, #7f1d1d, #991b1b, #b91c1c, #dc2626, #ef4444); }
.hoc-atlas-legend-max { margin-left: 4px; opacity: .85; }
.hoc-atlas-hint {
    position: absolute; top: 10px; right: 10px; z-index: 5; pointer-events: none;
    padding: 4px 8px; border-radius: 4px; font-size: 11px; background: rgba(15, 23, 42, .7); color: #ccd5e0;
}
.hoc-atlas-missing { display: none; position: absolute; left: 10px; right: 10px; bottom: 44px; z-index: 6; padding: 8px 10px; border-radius: 6px; font-size: 12px; background: rgba(15, 23, 42, .9); color: #fff; }
.hoc-atlas.is-map-missing .hoc-atlas-missing { display: block; }
.hoc-atlas-panel { border-left: 1px solid var(--hoc-border, #e3e6ea); background: var(--hoc-bg-surface, #fff); overflow-y: auto; max-height: 560px; min-width: 0; }
.hoc-atlas-panel-empty { padding: 36px 20px; text-align: center; color: var(--hoc-text-muted, #636e72); font-size: 13px; }
.hoc-atlas-panel-empty i { font-size: 28px; opacity: .5; margin-bottom: 10px; }
.hoc-atlas-panel-loading { padding: 30px; text-align: center; color: var(--hoc-text-secondary, #4a5568); font-size: 13px; }
.hoc-atlas-panel-body { padding-bottom: 12px; }
/* building blocks for the panel body (optional) */
.hoc-atlas-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hoc-border, #e3e6ea); background: var(--hoc-bg-elev-1, #f7f8fa); }
.hoc-atlas-head-flag { font-size: 28px; line-height: 1; }
.hoc-atlas-head h4 { margin: 0; font-size: 15px; }
.hoc-atlas-head p { margin: 2px 0 0; font-size: 12px; color: var(--hoc-text-muted, #636e72); }
.hoc-atlas-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 4px 8px; font-size: 16px; color: var(--hoc-text-muted, #636e72); }
.hoc-atlas-close:hover { color: var(--hoc-text-primary, #1a202c); }
.hoc-atlas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 12px 14px 4px; }
.hoc-atlas-stats > div { background: var(--hoc-bg-elev-1, #f7f8fa); border-radius: 6px; padding: 8px; text-align: center; }
.hoc-atlas-stats strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.hoc-atlas-stats span { font-size: 11px; color: var(--hoc-text-muted, #636e72); }
.hoc-atlas-panel-body h5 { margin: 12px 14px 4px; font-size: 12px; font-weight: 600; color: var(--hoc-text-muted, #636e72); }
.hoc-atlas-list { width: calc(100% - 28px); margin: 0 14px; border-collapse: collapse; font-size: 13px; }
.hoc-atlas-list td { padding: 4px 6px; border-bottom: 1px solid var(--hoc-border-light, #f0f1f5); vertical-align: top; }
.hoc-atlas-list td:first-child { word-break: break-all; }
.hoc-atlas-list td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hoc-atlas-list tr:last-child td { border-bottom: 0; }
.hoc-atlas-spark { margin: 0 14px; }
.hoc-atlas-spark svg { display: block; width: 100%; overflow: visible; }
.hoc-atlas-spark-base { stroke: var(--hoc-border, #e3e6ea); stroke-width: .5; }
.hoc-atlas-spark-line { fill: none; stroke: #3b82f6; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hoc-atlas-spark-line.is-alt { stroke: #ef4444; stroke-width: 1.2; stroke-dasharray: 3 3; }
.hoc-atlas-spark-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--hoc-text-muted, #636e72); margin-top: 2px; }
.hoc-atlas-spark-key i { display: inline-block; width: 12px; height: 0; margin: 0 4px 3px 8px; vertical-align: middle; border-top: 2px solid #3b82f6; }
.hoc-atlas-spark-key i.is-alt { border-top: 2px dashed #ef4444; }