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

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


:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 68px;
}


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

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

.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: 20px; 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;
}

.topbar-actions {
    display: flex; align-items: center; gap: 8px;
}

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

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

.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; justify-content: space-between; position: sticky; top: 0; z-index: 50;
}

.topbar h1 {
    font-size: 1.2rem; font-weight: 700;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

.topbar .breadcrumb-bar {
    font-size: 0.8rem;
}

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


.content-area {
    padding: 2rem;
}


/* ── 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; }
.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: var(--sidebar-width) !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; }
}

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



/* 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: #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: #E87A1E; margin: 0 2px 0 0;
}
.hoc-columns-divider {
    height: 1px; margin: 4px 0;
}
.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; }
.hoc-filter-icon { margin-left: 6px; font-size: 0.7rem; opacity: 0.35; vertical-align: middle; }
.hoc-filterable:hover .hoc-filter-icon { opacity: 0.6; }
.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;
}

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


.hoc-modal-footer {
    display: flex; 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;
}


/* ── 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; animation: kaFadeIn 0.15s ease;
}

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

.hoc-modal-dialog.hoc-modal-lg {
    max-width: 680px;
}

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


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


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

@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: 260px;
}

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

#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-hover, rgba(0,0,0,0.03));
}

.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-secondary, #f8f9fc);
}
.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-hover, rgba(0,0,0,0.03));
}
.hoc-ft-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-secondary, #64748b);
    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-secondary, #64748b);
}
.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: var(--text-primary, #1e293b);
}
.hoc-ft-count {
    color: var(--text-secondary, #64748b);
    font-size: 0.78rem;
    margin-left: 4px;
}
.hoc-ft-size {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    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-secondary, #64748b);
    border-top: 1px solid var(--border-default, #e2e5f0);
    background: var(--bg-secondary, #f8f9fc);
}
.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-secondary, #64748b);
    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: #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: #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-secondary, #64748b);
    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-secondary, #64748b);
    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-secondary, #64748b);
}
.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-secondary, #64748b);
}
.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-secondary, #64748b);
    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-secondary, #64748b);
    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-secondary, #64748b);
    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. We deliberately do NOT remove the native
   focus outline — :focus-visible adds the ring on top, browsers that
   don't support :focus-visible fall back to their default outline. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea: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,
[contenteditable="true"]:focus-visible,
[tabindex]:not([tabindex="-1"]):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. Modules that want a stronger loading state 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;
    }
}