/* Portal Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    background-color: var(--portal-bg);
    margin: 0;
    padding: 0;
}

/* Layout */
.portal-layout {
    display: flex;
    min-height: 100vh;
}

.portal-sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: rgba(255, 255, 255, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Decorative gradient overlay */
.portal-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(
        ellipse at top left,
        rgba(99, 91, 255, 0.15) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

.portal-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: var(--spacing-6);
}

/* ========================================
   SIDEBAR COMPONENTS - Modern Design
   ======================================== */

.sidebar-logo {
    padding: var(--spacing-5) var(--spacing-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
}

.sidebar-logo img {
    max-height: 36px;
    max-width: 100%;
    border-radius: 8px;
}

.sidebar-logo-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    padding: var(--spacing-3) var(--spacing-3);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

/* Remove all list styles in sidebar */
.sidebar-nav ul,
.sidebar-nav li {
    list-style: none !important;
    list-style-type: none !important;
}

.sidebar-nav li::before,
.sidebar-nav li::marker {
    display: none !important;
    content: none !important;
}

/* Custom scrollbar for sidebar nav */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Firefox */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.03);
}

.sidebar-section {
    margin-bottom: var(--spacing-2);
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

.sidebar-section-title i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-menu li {
    list-style: none !important;
}

.sidebar-menu li::before,
.sidebar-menu li::marker {
    display: none !important;
    content: none !important;
}

.sidebar-menu-item {
    margin-bottom: 2px;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    padding: 8px var(--spacing-4);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: var(--radius-base);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    position: relative;
}

.sidebar-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar-menu-link.active {
    background-color: rgba(99, 91, 255, 0.12);
    color: #ffffff;
}

.sidebar-menu-link.active::before {
    display: none;
}

.sidebar-menu-link i {
    width: 20px;
    margin-right: var(--spacing-2);
    font-size: 13px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.sidebar-menu-link:hover i,
.sidebar-menu-link.active i {
    opacity: 1;
}

/* Subtle icon colors */
.sidebar-menu-link i.fa-chart-line {
    color: #60a5fa;
}
.sidebar-menu-link i.fa-handshake {
    color: #34d399;
}
.sidebar-menu-link i.fa-users {
    color: #a78bfa;
}
.sidebar-menu-link i.fa-user-tie {
    color: #f472b6;
}
.sidebar-menu-link i.fa-building {
    color: #fbbf24;
}
.sidebar-menu-link i.fa-globe {
    color: #2dd4bf;
}
.sidebar-menu-link i.fa-hotel {
    color: #fb923c;
}
.sidebar-menu-link i.fa-hiking {
    color: #4ade80;
}
.sidebar-menu-link i.fa-car {
    color: #f87171;
}
.sidebar-menu-link i.fa-plane {
    color: #38bdf8;
}
.sidebar-menu-link i.fa-file-invoice {
    color: #c084fc;
}
.sidebar-menu-link i.fa-calculator {
    color: #22d3ee;
}
.sidebar-menu-link i.fa-calendar-check {
    color: #a3e635;
}
.sidebar-menu-link i.fa-credit-card {
    color: #fb7185;
}
.sidebar-menu-link i.fa-file-invoice-dollar {
    color: #facc15;
}
.sidebar-menu-link i.fa-cog {
    color: #94a3b8;
}
.sidebar-menu-link i.fa-crown {
    color: #fbbf24;
}

/* Manufacturer Portal additional icon colors */
.sidebar-menu-link i.fa-tachometer-alt {
    color: #60a5fa;
}
.sidebar-menu-link i.fa-list {
    color: #fbbf24;
}
.sidebar-menu-link i.fa-funnel-dollar {
    color: #34d399;
}
.sidebar-menu-link i.fa-tasks {
    color: #a78bfa;
}
.sidebar-menu-link i.fa-chart-bar {
    color: #38bdf8;
}
.sidebar-menu-link i.fa-book {
    color: #60a5fa;
}
.sidebar-menu-link i.fa-newspaper {
    color: #f472b6;
}
.sidebar-menu-link i.fa-plug {
    color: #fbbf24;
}
.sidebar-menu-link i.fa-search {
    color: #2dd4bf;
}
.sidebar-menu-link i.fa-puzzle-piece {
    color: #a78bfa;
}
.sidebar-menu-link i.fa-users-cog {
    color: #fb923c;
}
.sidebar-menu-link i.fa-heartbeat {
    color: #f87171;
}
.sidebar-menu-link i.fa-shield-virus {
    color: #fb7185;
}
.sidebar-menu-link i.fa-rocket {
    color: #38bdf8;
}
.sidebar-menu-link i.fa-bug {
    color: #f59e0b;
}
.sidebar-menu-link i.fa-shield-alt {
    color: #10b981;
}
.sidebar-menu-link i.fa-laptop {
    color: #94a3b8;
}

/* Sidebar Section Toggle (Collapsible Groups) */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-section-toggle:hover .sidebar-section-title {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-section-chevron {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease;
    margin-right: var(--spacing-3);
}

.sidebar-section-chevron.rotated {
    transform: rotate(180deg);
}

/* Sidebar Collapsible Menu Transitions */
.sidebar-menu-collapsible {
    overflow: hidden;
}

.sidebar-collapse-enter {
    transition:
        opacity 0.15s ease,
        max-height 0.2s ease;
}

.sidebar-collapse-enter-start {
    opacity: 0;
    max-height: 0;
}

.sidebar-collapse-enter-end {
    opacity: 1;
    max-height: 500px;
}

.sidebar-collapse-leave {
    transition:
        opacity 0.1s ease,
        max-height 0.15s ease;
}

.sidebar-collapse-leave-start {
    opacity: 1;
    max-height: 500px;
}

.sidebar-collapse-leave-end {
    opacity: 0;
    max-height: 0;
}

/* Sidebar Status Dot (e.g., 2FA active indicator) */
.sidebar-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
    background: var(--color-gray-500, #6b7280);
}

.sidebar-status-dot.active {
    background: #10b981;
}

/* Sidebar Logout Button */
.sidebar-logout-button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.sidebar-logout-button:hover {
    opacity: 1;
    color: #dc2626;
}

/* Mobile Sidebar Toggle */
.sidebar-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: calc(var(--z-fixed, 100) + 10);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 6px);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: 16px;
}

.sidebar-mobile-toggle:hover {
    color: #ffffff;
}

/* Mobile Overlay */
.sidebar-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-fixed, 100) - 1);
}

/* Super Admin Link */
.sidebar-menu-link.superadmin-link {
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.12) 0%,
        rgba(245, 158, 11, 0.08) 100%
    );
    border: 1px solid rgba(251, 191, 36, 0.15);
    margin: var(--spacing-2) var(--spacing-3);
    padding: 10px var(--spacing-3);
}

.sidebar-menu-link.superadmin-link:hover {
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.2) 0%,
        rgba(245, 158, 11, 0.12) 100%
    );
}

.sidebar-footer {
    padding: var(--spacing-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: rgba(15, 23, 42, 0.5);
}

.sidebar-user {
    display: flex;
    align-items: center;
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}

.sidebar-user:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--portal-primary) 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-3);
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.3);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-user-role::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
}

/* Cards */
.portal-card {
    background-color: var(--portal-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-6);
    overflow: hidden;
}

.portal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.portal-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
}

.portal-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-1);
}

.portal-card-actions {
    display: flex;
    gap: var(--spacing-2);
}

.portal-card-body {
    padding: var(--spacing-6);
}

.portal-card-body:empty {
    padding: 0;
}

/* Compact Card Variant - for dense data displays */
.portal-card-compact .portal-card-header {
    padding: var(--spacing-3) var(--spacing-4);
}

.portal-card-compact .portal-card-body {
    padding: var(--spacing-4);
}

.portal-card-compact .portal-card-title {
    font-size: var(--font-size-sm);
}

.portal-card-footer {
    padding: var(--spacing-4) var(--spacing-6);
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

/* Card Aliases (unprefixed versions) */
.card {
    background-color: var(--portal-card-bg, #fff);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    margin-bottom: var(--spacing-6, 1.5rem);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5, 1.25rem) var(--spacing-6, 1.5rem);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.card-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-900, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title i {
    color: var(--color-primary, #6366f1);
}

.card-body {
    padding: var(--spacing-6, 1.5rem);
}

.card-body:empty {
    padding: 0;
}

/* KPI Cards (unprefixed) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6, 1.5rem);
    margin-bottom: var(--spacing-8, 2rem);
}

.kpi-card {
    background-color: var(--portal-card-bg, #fff);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    padding: var(--spacing-6, 1.5rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kpi-icon.primary {
    background-color: var(--color-primary-100, #e0e7ff);
    color: var(--color-primary-600, #4f46e5);
}

.kpi-icon.success {
    background-color: var(--color-success-light, #d1fae5);
    color: var(--color-success, #10b981);
}

.kpi-icon.info {
    background-color: var(--color-info-light, #dbeafe);
    color: var(--color-info, #3b82f6);
}

.kpi-icon.warning {
    background-color: var(--color-warning-light, #fef3c7);
    color: var(--color-warning, #f59e0b);
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-900, #111827);
    line-height: 1;
}

.kpi-label {
    font-size: 0.875rem;
    color: var(--color-gray-500, #6b7280);
    margin-top: 0.25rem;
}

/* KPI Cards */
.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.portal-kpi-card {
    background-color: var(--portal-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-6);
    transition: all var(--transition-base);
}

.portal-kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.portal-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.portal-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
}

.portal-kpi-icon.primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-600);
}

.portal-kpi-icon.success {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.portal-kpi-icon.warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.portal-kpi-icon.info {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.portal-kpi-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.portal-kpi-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.portal-kpi-change {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.portal-kpi-change.positive {
    color: var(--color-success);
}

.portal-kpi-change.negative {
    color: var(--color-error);
}

/* Tables */
.portal-table-container {
    background-color: var(--portal-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
}

.portal-table thead {
    background-color: var(--color-gray-50);
}

.portal-table th {
    padding: var(--spacing-4) var(--spacing-6);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
    border-bottom: 1px solid var(--color-gray-200);
}

.portal-table td {
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.portal-table tbody tr {
    transition: background-color var(--transition-fast);
}

.portal-table tbody tr:hover {
    background-color: var(--color-gray-50);
}

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

/* Sort-Link in Tabellen-Spaltenköpfen */
.portal-table-sort-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

/* Hamburger-Action-Button in Tabellenzeilen */
.portal-table-action-btn {
    padding: var(--spacing-1) var(--spacing-2);
}

/* Badges */
.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.portal-badge-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.portal-badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.portal-badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.portal-badge-danger {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

.portal-badge-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.portal-badge-secondary {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Badge aliases (shorthand classes) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

.badge-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.badge-danger {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

.badge-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.badge-secondary {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

.badge-purple {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.badge-orange {
    background-color: #ffedd5;
    color: #c2410c;
}

.badge-teal {
    background-color: #ccfbf1;
    color: #0f766e;
}

.badge-indigo {
    background-color: #e0e7ff;
    color: #4338ca;
}

.badge-pink {
    background-color: #fce7f3;
    color: #be185d;
}

/* Filter Chips */
.portal-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
}

.portal-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    text-decoration: none;
    white-space: nowrap;
}

.portal-filter-chip:hover {
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
}

.portal-filter-chip-icon {
    font-size: 10px;
    opacity: 0.6;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--color-gray-600);
    color: #ffffff;
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-700);
}

.btn-success {
    background-color: var(--color-success);
    color: #ffffff;
}

.btn-success:hover:not(:disabled) {
    background-color: var(--color-success-dark);
}

.btn-danger {
    background-color: var(--color-error);
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--color-error-dark);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--color-gray-50);
}

.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-gray-600);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    min-height: 30px;
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-base);
}

/* Forms */
.portal-form-group {
    margin-bottom: var(--spacing-5);
}

/* Compact Form Variant - for dense data entry */
.portal-form-compact .portal-form-group {
    margin-bottom: var(--spacing-3);
}

.portal-form-compact .portal-label {
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-xs);
}

.portal-form-compact .portal-input,
.portal-form-compact .portal-select,
.portal-form-compact .portal-textarea {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.portal-form-compact .portal-form-grid-2,
.portal-form-compact .portal-form-grid-3,
.portal-form-compact .portal-form-grid-4 {
    gap: var(--spacing-3);
}

/* Detail View Compact - reduced spacing for detail pages */
.detail-view-compact .portal-card {
    margin-bottom: var(--spacing-3);
}

.detail-view-compact .portal-card-header {
    padding: var(--spacing-2) var(--spacing-4);
}

.detail-view-compact .portal-card-body {
    padding: var(--spacing-2) var(--spacing-3);
}

.detail-view-compact .portal-card-title {
    font-size: var(--font-size-sm);
}

.detail-view-compact .portal-form-group {
    margin-bottom: var(--spacing-2);
}

.detail-view-compact .portal-label {
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-gray-500);
}

.detail-view-compact .portal-form-grid-2,
.detail-view-compact .portal-form-grid-3,
.detail-view-compact .portal-form-grid-4 {
    gap: var(--spacing-3);
}

/* Kompaktere Inputs in Detail-Views */
.detail-view-compact .portal-input,
.detail-view-compact .portal-select,
.detail-view-compact .portal-textarea {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

/* Kompaktere Key-Value-Listen */
.detail-view-compact .compact-data-list {
    gap: var(--spacing-2);
}

.detail-view-compact .data-row,
.detail-view-compact .data-row-half > div {
    padding: var(--spacing-1) var(--spacing-2);
}

/* Kompaktere Grid-Abstände */
.detail-view-compact .detail-grid {
    gap: var(--spacing-4);
}

.detail-view-compact .detail-grid-col {
    gap: var(--spacing-3);
}
@media (min-width: 1024px) {
    .detail-view-compact.detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.portal-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.portal-label.required::after {
    content: "*";
    color: var(--color-error);
    margin-left: var(--spacing-1);
}

.portal-input,
.portal-select,
.portal-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    transition: all var(--transition-fast);
}

.portal-input:focus,
.portal-select:focus,
.portal-textarea:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
}

.portal-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Compact input variant */
.portal-input-sm,
.portal-input.portal-input-sm,
.portal-select.portal-input-sm,
.portal-textarea.portal-input-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
}

.portal-textarea.portal-input-sm {
    min-height: 40px;
}

.portal-hint {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.portal-error {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

.portal-input.is-invalid,
.portal-select.is-invalid,
.portal-textarea.is-invalid {
    border-color: var(--color-error);
}

.portal-input.is-invalid:focus,
.portal-select.is-invalid:focus,
.portal-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.portal-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-5);
}

.portal-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
}

/* Page Titles */
.portal-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.portal-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
}

/* Definition List */
.portal-dl {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.portal-dl dt {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-1);
}

.portal-dl dd {
    color: var(--color-gray-900);
    margin: 0;
}

.portal-dl code {
    background-color: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

/* Toggle Switch */
.portal-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.portal-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.portal-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-gray-300);
    transition: var(--transition-base);
    border-radius: var(--radius-full);
}

.portal-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--transition-base);
    border-radius: var(--radius-full);
}

.portal-toggle input:checked + .portal-toggle-slider {
    background-color: var(--portal-primary);
}

.portal-toggle input:checked + .portal-toggle-slider:before {
    transform: translateX(24px);
}

/* Empty State */
.portal-empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
}

.portal-empty-state i {
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-4);
}

.portal-empty-state h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.portal-empty-state p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-6);
}

/* Breadcrumbs */
.portal-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-6);
}

.portal-breadcrumbs a {
    color: var(--portal-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.portal-breadcrumbs a:hover {
    color: var(--color-primary);
}

/* Messages */
.portal-message {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

.portal-message i {
    font-size: var(--font-size-lg);
}

.portal-message-good {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
    border-left: 4px solid var(--color-success);
}

.portal-message-bad {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
    border-left: 4px solid var(--color-error);
}

.portal-message-info {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
    border-left: 4px solid var(--color-info);
}

.portal-message-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
    border-left: 4px solid var(--color-warning);
}

/* Info Box */
.portal-info-box {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--color-info-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-info);
    margin-bottom: var(--spacing-5);
}

.portal-info-box i {
    color: var(--color-info);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.portal-info-box strong {
    display: block;
    margin-bottom: var(--spacing-1);
    color: var(--color-info-dark);
}

.portal-info-box p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* ==================== MANUFACTURER COMPONENTS ==================== */
/*
 * Wiederverwendbare Komponenten fuer das Manufacturer-Portal und Detail-Views.
 * Ersetzen die haeufigsten Inline-Style-Muster in Detail/Show/Dashboard-Views.
 */

/* --- Tabs --- */
.portal-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-100);
    margin-bottom: 0;
}

.portal-tab-btn {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.portal-tab-btn:hover {
    color: var(--color-gray-700);
}

.portal-tab-btn.active {
    font-weight: var(--font-weight-semibold);
    color: var(--portal-primary);
    border-bottom: 2px solid var(--portal-primary);
    margin-bottom: -2px;
}

.portal-tab-btn .portal-badge {
    margin-left: var(--spacing-1);
    vertical-align: middle;
}

/* --- Tab Content --- */
.portal-tab-content {
    margin-top: var(--spacing-5);
}

/* --- Detail/Property Table --- */
.portal-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.portal-detail-table tr {
    border-bottom: 1px solid var(--color-gray-100);
}

.portal-detail-table tr:last-child {
    border-bottom: none;
}

.portal-detail-table td {
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
}

.portal-detail-table .dt-label {
    color: var(--color-gray-500);
    width: 140px;
}

.portal-detail-table .dt-value {
    font-weight: var(--font-weight-medium);
}

/* --- Stat Label (uppercase small gray) --- */
.portal-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-2);
}

/* --- Stat Value (large number) --- */
.portal-stat-value {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

.portal-stat-value.lg {
    font-size: 32px;
}

.portal-stat-value.sm {
    font-size: 20px;
}

.portal-stat-sub {
    font-size: 11px;
    color: var(--color-gray-400);
    margin-top: var(--spacing-1);
}

/* --- Stat Card (centered mini) --- */
.portal-stat-card {
    padding: var(--spacing-5);
    text-align: center;
}

/* --- Alert Boxes --- */
.portal-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.portal-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.portal-alert-danger i { color: #ef4444; }
.portal-alert-danger strong { color: #991b1b; }
.portal-alert-danger p { color: #991b1b; font-size: var(--font-size-sm); margin: var(--spacing-1) 0 0; }

.portal-alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.portal-alert-warning i { color: #f59e0b; }
.portal-alert-warning strong { color: #92400e; }
.portal-alert-warning p { color: #92400e; font-size: var(--font-size-sm); margin: var(--spacing-1) 0 0; }

.portal-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.portal-alert-success i { color: #16a34a; }
.portal-alert-success strong { color: #166534; }
.portal-alert-success p { color: #166534; font-size: var(--font-size-sm); margin: var(--spacing-1) 0 0; }

.portal-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.portal-alert-info i { color: #3b82f6; }
.portal-alert-info strong { color: #1e40af; }
.portal-alert-info p { color: #1e40af; font-size: var(--font-size-sm); margin: var(--spacing-1) 0 0; }

/* --- Inline Code --- */
.portal-code {
    background: var(--color-gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-mono, 'JetBrains Mono', monospace);
}

/* --- Icon Box (gradient bg with centered icon) --- */
.portal-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.portal-icon-box.sm {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
}

.portal-icon-box.md {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}

.portal-icon-box.lg {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
}

.portal-icon-box.xl {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
}

.portal-icon-box.xxl {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-xl);
    font-size: 1.5rem;
}

/* --- Integration Card (clickable card with hover border + themed icon/badge) --- */
.portal-integration-card {
    @apply no-underline transition;
    color: inherit;
    border: 2px solid transparent;
}

.portal-integration-card:hover {
    border-color: var(--portal-integration-color, var(--color-gray-300));
}

.portal-integration-card .portal-integration-icon {
    background: color-mix(in srgb, var(--portal-integration-color) 10%, transparent);
    color: var(--portal-integration-color);
}

.portal-integration-card .portal-integration-badge {
    background: color-mix(in srgb, var(--portal-integration-color) 10%, transparent);
    color: var(--portal-integration-color);
}

/* --- Status Dot --- */
.portal-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.portal-status-dot.active { background: #22c55e; }
.portal-status-dot.inactive { background: #ef4444; }
.portal-status-dot.warning { background: #f59e0b; }

/* --- Status Badge (pill) --- */
.portal-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

.portal-status-pill.active {
    background: #dcfce7;
    color: #166534;
}

.portal-status-pill.inactive {
    background: #fef2f2;
    color: #991b1b;
}

.portal-status-pill.warning {
    background: #fffbeb;
    color: #92400e;
}

.portal-status-pill.trial {
    background: #fef3c7;
    color: #92400e;
}

.portal-status-pill.core {
    background: #dbeafe;
    color: #1e40af;
}

.portal-status-pill.cancelled {
    background: #fef2f2;
    color: #991b1b;
}

.portal-status-pill.sm {
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
}

/* --- Link styles --- */
.portal-link {
    color: var(--portal-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.portal-link:hover {
    color: var(--portal-primary-dark, #4f46e5);
    text-decoration: underline;
}

/* --- Quick Link Item --- */
.portal-quick-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-gray-700);
    background: var(--color-gray-50);
    transition: background var(--transition-fast);
    font-size: var(--font-size-sm);
}

.portal-quick-link:hover {
    background: #f0f0ff;
}

.portal-quick-link.disabled {
    color: var(--color-gray-400);
    cursor: not-allowed;
}

.portal-quick-link i {
    width: 16px;
    text-align: center;
}

/* --- Activity Item --- */
.portal-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
}

.portal-activity-item:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-100);
}

/* --- Section Title (used inside cards) --- */
.portal-section-title {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-4) 0;
}

.portal-section-title i {
    color: var(--portal-primary);
    margin-right: var(--spacing-2);
}

/* --- Dashboard Alert Row --- */
.portal-dashboard-alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
}

.portal-dashboard-alert.critical {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}

.portal-dashboard-alert.warning {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

.portal-dashboard-alert.info {
    background: #f9fafb;
    border-left: 3px solid #6b7280;
}

/* --- Cost Summary Grid --- */
.portal-cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.portal-cost-card {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.portal-cost-card.highlight {
    background: rgba(99, 91, 255, 0.06);
    border: 1px solid rgba(99, 91, 255, 0.2);
}

/* --- Module Card --- */
.portal-module-card {
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}

.portal-module-card.assigned {
    border-color: rgba(99, 91, 255, 0.25);
    background: rgba(99, 91, 255, 0.03);
}

.portal-module-card.cancelled {
    border-color: #fecaca;
}

/* --- Progress Bar --- */
.portal-progress-bar {
    background: var(--color-gray-200);
    border-radius: var(--radius-sm);
    height: 6px;
    overflow: hidden;
    margin-top: var(--spacing-2);
}

.portal-progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}

/* --- Server Status Card --- */
.portal-server-metric {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
}

.portal-server-metric .metric-value {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}

.portal-server-metric .metric-label {
    font-size: 12px;
    color: var(--color-gray-500);
}

/* --- Software Version Tag --- */
.portal-version-tag {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
}

.portal-version-tag .version-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.portal-version-tag .version-value {
    font-weight: var(--font-weight-medium);
}

/* --- Service Status Card --- */
.portal-service-card {
    padding: var(--spacing-4);
    border-radius: var(--radius-base);
}

.portal-service-card .service-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

/* --- Radio/Checkbox Option Card --- */
.portal-radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.2s;
}

.portal-radio-option:hover {
    border-color: var(--color-gray-300);
}

.portal-radio-option.selected {
    border-color: #3b82f6;
}

.portal-radio-option input[type="radio"],
.portal-radio-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.portal-radio-option .portal-radio-icon {
    font-size: 24px;
    width: 32px;
    text-align: center;
}

.portal-radio-option p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* --- Checkbox Label --- */
.portal-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.portal-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* --- Password Field with Toggle --- */
.portal-password-field {
    position: relative;
}

.portal-password-field .portal-input {
    padding-right: 40px;
}

.portal-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-500);
}

/* --- Avatar (Initials Circle) --- */
.portal-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.portal-avatar.sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.portal-avatar.lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* --- Native Dialog --- */
.portal-dialog {
    padding: 0;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    max-width: 500px;
    width: 100%;
}

.portal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.portal-dialog-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.portal-dialog-header h2 {
    margin: 0;
    font-size: 18px;
}

.portal-dialog-body {
    padding: var(--spacing-6);
}

.portal-dialog-footer {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-gray-50);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* --- Health Check Item --- */
.portal-health-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: 14px 0;
}

.portal-health-item:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-100);
}

/* --- Status Banner --- */
.portal-status-banner {
    padding: var(--spacing-4) var(--spacing-5);
    border-left: 4px solid;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.portal-status-banner i {
    font-size: 20px;
}

/* --- Event Type Card --- */
.portal-event-type-card {
    background: var(--color-gray-50);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Filter Bar --- */
.portal-filter-bar {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    align-items: center;
}

/* --- Thumbnail (List Image) --- */
.portal-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.portal-thumbnail-placeholder {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* --- Danger Zone Card --- */
.portal-danger-zone { border-color: var(--color-danger); }
.portal-danger-zone .card-header { background: rgba(239, 68, 68, 0.05); border-bottom-color: rgba(239, 68, 68, 0.2); }
.portal-danger-zone .card-title { color: var(--color-danger); }

/* --- Pagination Controls --- */
.portal-pagination { display: flex; gap: var(--spacing-2); align-items: center; }
.portal-pagination .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ==================== UTILITY CLASSES ==================== */
/*
 * Portal Utility-Klassen — Ersatz fuer Inline-Styles.
 * Namenskonvention orientiert sich an Tailwind, nutzt aber portal Design-Tokens.
 * Jede Klasse mappt auf EINE CSS-Property (single responsibility).
 *
 * Reihenfolge: Display/Layout → Flexbox → Grid → Spacing → Typography → Colors → Misc
 */

/* --- Display --- */
.d-none          { display: none; }
.d-block         { display: block; }
.d-inline        { display: inline; }
.d-inline-block  { display: inline-block; }
.d-flex          { display: flex; }
.d-inline-flex   { display: inline-flex; }
.d-grid          { display: grid; }

/* --- Flexbox --- */
.flex-row          { flex-direction: row; }
.flex-col          { flex-direction: column; }
.flex-wrap         { flex-wrap: wrap; }
.flex-nowrap       { flex-wrap: nowrap; }
.flex-1            { flex: 1; }
.flex-auto         { flex: auto; }
.flex-none         { flex: none; }
.flex-shrink-0     { flex-shrink: 0; }
.flex-grow-0       { flex-grow: 0; }

.items-start       { align-items: flex-start; }
.items-center      { align-items: center; }
.items-end         { align-items: flex-end; }
.items-stretch     { align-items: stretch; }
.items-baseline    { align-items: baseline; }

.justify-start     { justify-content: flex-start; }
.justify-center    { justify-content: center; }
.justify-end       { justify-content: flex-end; }
.justify-between   { justify-content: space-between; }
.justify-around    { justify-content: space-around; }

.self-start        { align-self: flex-start; }
.self-center       { align-self: center; }
.self-end          { align-self: flex-end; }

/* --- Grid --- */
.grid-cols-1       { grid-template-columns: 1fr; }
.grid-cols-2       { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3       { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4       { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5       { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6       { grid-template-columns: repeat(6, 1fr); }
.col-span-2        { grid-column: span 2; }
.col-span-3        { grid-column: span 3; }
.col-span-full     { grid-column: 1 / -1; }

/* --- Gap (Flex + Grid) --- */
.gap-0             { gap: 0; }
.gap-1             { gap: var(--spacing-1); }
.gap-2             { gap: var(--spacing-2); }
.gap-3             { gap: var(--spacing-3); }
.gap-4             { gap: var(--spacing-4); }
.gap-5             { gap: var(--spacing-5); }
.gap-6             { gap: var(--spacing-6); }
.gap-8             { gap: var(--spacing-8); }

/* --- Margin --- */
.m-0               { margin: 0; }
.mt-0              { margin-top: 0; }
.mt-1              { margin-top: var(--spacing-1); }
.mt-2              { margin-top: var(--spacing-2); }
.mt-3              { margin-top: var(--spacing-3); }
.mt-4              { margin-top: var(--spacing-4); }
.mt-5              { margin-top: var(--spacing-5); }
.mt-6              { margin-top: var(--spacing-6); }
.mt-8              { margin-top: var(--spacing-8); }

.mb-0              { margin-bottom: 0; }
.mb-1              { margin-bottom: var(--spacing-1); }
.mb-2              { margin-bottom: var(--spacing-2); }
.mb-3              { margin-bottom: var(--spacing-3); }
.mb-4              { margin-bottom: var(--spacing-4); }
.mb-5              { margin-bottom: var(--spacing-5); }
.mb-6              { margin-bottom: var(--spacing-6); }
.mb-8              { margin-bottom: var(--spacing-8); }

.ml-0              { margin-left: 0; }
.ml-1              { margin-left: var(--spacing-1); }
.ml-2              { margin-left: var(--spacing-2); }
.ml-3              { margin-left: var(--spacing-3); }
.ml-4              { margin-left: var(--spacing-4); }
.ml-auto           { margin-left: auto; }

.mr-0              { margin-right: 0; }
.mr-1              { margin-right: var(--spacing-1); }
.mr-2              { margin-right: var(--spacing-2); }
.mr-3              { margin-right: var(--spacing-3); }
.mr-4              { margin-right: var(--spacing-4); }
.mr-auto           { margin-right: auto; }

.mx-auto           { margin-left: auto; margin-right: auto; }

/* --- Padding --- */
.p-0               { padding: 0; }
.p-1               { padding: var(--spacing-1); }
.p-2               { padding: var(--spacing-2); }
.p-3               { padding: var(--spacing-3); }
.p-4               { padding: var(--spacing-4); }
.p-5               { padding: var(--spacing-5); }
.p-6               { padding: var(--spacing-6); }
.p-8               { padding: var(--spacing-8); }

.pt-0              { padding-top: 0; }
.pt-2              { padding-top: var(--spacing-2); }
.pt-3              { padding-top: var(--spacing-3); }
.pt-4              { padding-top: var(--spacing-4); }
.pt-6              { padding-top: var(--spacing-6); }

.pb-0              { padding-bottom: 0; }
.pb-2              { padding-bottom: var(--spacing-2); }
.pb-3              { padding-bottom: var(--spacing-3); }
.pb-4              { padding-bottom: var(--spacing-4); }
.pb-6              { padding-bottom: var(--spacing-6); }

.pl-0              { padding-left: 0; }
.pl-2              { padding-left: var(--spacing-2); }
.pl-4              { padding-left: var(--spacing-4); }

.pr-0              { padding-right: 0; }
.pr-2              { padding-right: var(--spacing-2); }
.pr-4              { padding-right: var(--spacing-4); }

.px-2              { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3              { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4              { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-6              { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

.py-1              { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2              { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3              { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4              { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

/* --- Width / Height --- */
.w-full            { width: 100%; }
.w-auto            { width: auto; }
.min-w-0           { min-width: 0; }
.max-w-sm          { max-width: 24rem; }
.max-w-md          { max-width: 28rem; }
.max-w-lg          { max-width: 32rem; }
.max-w-xl          { max-width: 36rem; }
.max-w-2xl         { max-width: 42rem; }
.max-w-full        { max-width: 100%; }
.h-full            { height: 100%; }

/* --- Typography --- */
.text-xs           { font-size: var(--font-size-xs); }
.text-sm           { font-size: var(--font-size-sm); }
.text-base         { font-size: var(--font-size-base); }
.text-lg           { font-size: var(--font-size-lg); }
.text-xl           { font-size: var(--font-size-xl); }
.text-2xl          { font-size: var(--font-size-2xl); }
.text-3xl          { font-size: var(--font-size-3xl); }

.font-light        { font-weight: var(--font-weight-light); }
.font-normal       { font-weight: var(--font-weight-normal); }
.font-medium       { font-weight: var(--font-weight-medium); }
.font-semibold     { font-weight: var(--font-weight-semibold); }
.font-bold         { font-weight: var(--font-weight-bold); }

.font-mono         { font-family: var(--font-family-mono); }

.leading-tight     { line-height: var(--line-height-tight); }
.leading-normal    { line-height: var(--line-height-normal); }
.leading-relaxed   { line-height: var(--line-height-relaxed); }

.text-left         { text-align: left; }
.text-center       { text-align: center; }
.text-right        { text-align: right; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.underline         { text-decoration: underline; }
.no-underline      { text-decoration: none; }
.uppercase         { text-transform: uppercase; }
.lowercase         { text-transform: lowercase; }
.capitalize        { text-transform: capitalize; }
.italic            { font-style: italic; }

/* --- Text Colors --- */
.text-muted        { color: var(--color-gray-600); }
.text-gray-400     { color: var(--color-gray-400); }
.text-gray-500     { color: var(--color-gray-500); }
.text-gray-600     { color: var(--color-gray-600); }
.text-gray-700     { color: var(--color-gray-700); }
.text-gray-800     { color: var(--color-gray-800); }
.text-gray-900     { color: var(--color-gray-900); }
.text-white        { color: #ffffff; }
.text-primary      { color: var(--color-primary); }
.text-success      { color: var(--color-success); }
.text-success-dark { color: var(--color-success-dark); }
.text-warning      { color: var(--color-warning); }
.text-warning-dark { color: var(--color-warning-dark); }
.text-error        { color: var(--color-error); }
.text-info         { color: var(--color-info); }
.text-inherit      { color: inherit; }

/* --- Background Colors --- */
.bg-white          { background-color: #ffffff; }
.bg-gray-50        { background-color: var(--color-gray-50); }
.bg-gray-100       { background-color: var(--color-gray-100); }
.bg-gray-200       { background-color: var(--color-gray-200); }
.bg-success-light  { background-color: var(--color-success-light); }
.bg-warning-light  { background-color: var(--color-warning-light); }
.bg-error-light    { background-color: var(--color-error-light); }
.bg-info-light     { background-color: var(--color-info-light); }
.bg-primary-50     { background-color: var(--color-primary-50); }
.bg-transparent    { background-color: transparent; }

/* --- Border --- */
.border            { border: 1px solid var(--color-gray-200); }
.border-0          { border: none; }
.border-t          { border-top: 1px solid var(--color-gray-200); }
.border-b          { border-bottom: 1px solid var(--color-gray-200); }
.border-l          { border-left: 1px solid var(--color-gray-200); }
.border-r          { border-right: 1px solid var(--color-gray-200); }
.border-gray-300   { border-color: var(--color-gray-300); }

.rounded-none      { border-radius: var(--radius-none); }
.rounded-sm        { border-radius: var(--radius-sm); }
.rounded           { border-radius: var(--radius-base); }
.rounded-md        { border-radius: var(--radius-md); }
.rounded-lg        { border-radius: var(--radius-lg); }
.rounded-xl        { border-radius: var(--radius-xl); }
.rounded-full      { border-radius: var(--radius-full); }

/* --- Position --- */
.relative          { position: relative; }
.absolute          { position: absolute; }
.fixed             { position: fixed; }
.sticky            { position: sticky; }
.inset-0           { top: 0; right: 0; bottom: 0; left: 0; }
.top-0             { top: 0; }
.right-0           { right: 0; }
.bottom-0          { bottom: 0; }
.left-0            { left: 0; }

/* --- Overflow --- */
.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }

/* --- Cursor --- */
.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab       { cursor: grab; }
.cursor-move       { cursor: move; }

/* --- Opacity --- */
.opacity-0         { opacity: 0; }
.opacity-50        { opacity: 0.5; }
.opacity-75        { opacity: 0.75; }
.opacity-100       { opacity: 1; }

/* --- Shadow --- */
.shadow-none       { box-shadow: none; }
.shadow-sm         { box-shadow: var(--shadow-sm); }
.shadow            { box-shadow: var(--shadow-base); }
.shadow-md         { box-shadow: var(--shadow-md); }
.shadow-lg         { box-shadow: var(--shadow-lg); }

/* --- Visibility --- */
.visible           { visibility: visible; }
.invisible         { visibility: hidden; }

/* --- Transition --- */
.transition        { transition: all var(--transition-base); }
.transition-fast   { transition: all var(--transition-fast); }
.transition-slow   { transition: all var(--transition-slow); }
.transition-none   { transition: none; }

/* --- Pointer Events --- */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* --- Shorthand Composites (haeufige Inline-Style-Kombinationen) --- */
.portal-flex-center {
    display: flex;
    align-items: center;
}

.portal-flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-flex-center-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.portal-flex-col {
    display: flex;
    flex-direction: column;
}

.portal-inline-flex-center {
    display: inline-flex;
    align-items: center;
}

/* --- Responsive: hide/show at breakpoints --- */
@media (max-width: 768px) {
    .hidden-mobile     { display: none !important; }
    .grid-cols-2       { grid-template-columns: 1fr; }
    .grid-cols-3       { grid-template-columns: 1fr; }
    .grid-cols-4       { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
    .hidden-desktop    { display: none !important; }
}

/* ==================== MODAL STYLES ==================== */
.portal-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}

.portal-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.portal-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.portal-modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
}

.portal-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-gray-500);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.portal-modal-close:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.portal-modal-body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
}

.portal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

/* Form Grid Layouts for Modals */
.portal-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.portal-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.portal-form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Actions Dropdown (Burger-Menü in Listen) */
.actions-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9000;
    min-width: 200px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
}

.actions-dropdown form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block;
}

.actions-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--color-gray-700) !important;
    cursor: pointer !important;
    text-align: left !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    justify-content: flex-start !important;
}

.actions-dropdown-item:hover {
    background: var(--color-gray-50, #f9fafb) !important;
    color: var(--color-gray-700) !important;
}

.actions-dropdown-item i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 12px;
}

.actions-dropdown-item-danger {
    color: var(--color-danger, #dc2626) !important;
}

.actions-dropdown-item-danger:hover {
    background: #fef2f2 !important;
    color: var(--color-danger, #dc2626) !important;
}

.actions-dropdown-divider {
    border: none;
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
    margin: 4px 0;
    padding: 0;
    height: 0;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .portal-modal-content {
        max-width: 100% !important;
        max-height: 100vh;
        border-radius: 0;
    }

    .portal-form-grid-2,
    .portal-form-grid-3,
    .portal-form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==================== CATALOG VIEW - Compact Styles ==================== */
/* Kompakte Darstellung für Katalog-Seiten (Destinations, Hotels, Activities, etc.) */

.catalog-view {
    --catalog-spacing-xs: 4px;
    --catalog-spacing-sm: 8px;
    --catalog-spacing-md: 12px;
    --catalog-spacing-lg: 16px;
}

/* Kompaktere Page Headers */
.catalog-view .mb-6 {
    margin-bottom: var(--catalog-spacing-lg) !important;
}

.catalog-view .mb-8 {
    margin-bottom: var(--catalog-spacing-lg) !important;
}

.catalog-view .portal-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--catalog-spacing-xs);
}

.catalog-view .portal-subtitle {
    font-size: var(--font-size-sm);
}

/* Kompaktere Cards */
.catalog-view .portal-card {
    margin-bottom: var(--catalog-spacing-md);
}

.catalog-view .portal-card-header {
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-md);
}

.catalog-view .portal-card-body {
    padding: var(--catalog-spacing-md);
}

.catalog-view .portal-card-footer {
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-md);
}

.catalog-view .portal-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.catalog-view .portal-card-title i {
    font-size: var(--font-size-sm);
}

/* Kompaktere KPI Cards */
.catalog-view .portal-kpi-grid {
    gap: var(--catalog-spacing-md);
    margin-bottom: var(--catalog-spacing-lg);
}

.catalog-view .portal-kpi-card {
    padding: var(--catalog-spacing-md);
}

.catalog-view .portal-kpi-header {
    margin-bottom: var(--catalog-spacing-sm);
}

.catalog-view .portal-kpi-icon {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-base);
}

.catalog-view .portal-kpi-value {
    font-size: var(--font-size-xl);
    margin-bottom: var(--catalog-spacing-xs);
}

.catalog-view .portal-kpi-label {
    font-size: var(--font-size-xs);
}

/* Kompaktere Tabellen */
.catalog-view .portal-table th {
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-md);
    font-size: 10px;
}

.catalog-view .portal-table td {
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-md);
    font-size: var(--font-size-xs);
}

/* Kompaktere Formulare */
.catalog-view .portal-form-group {
    margin-bottom: var(--catalog-spacing-md);
}

.catalog-view .portal-label {
    margin-bottom: var(--catalog-spacing-xs);
    font-size: var(--font-size-xs);
}

.catalog-view .portal-input,
.catalog-view .portal-select,
.catalog-view .portal-textarea {
    padding: var(--catalog-spacing-sm) var(--catalog-spacing-sm);
    font-size: var(--font-size-sm);
}

.catalog-view .portal-form-grid-2,
.catalog-view .portal-form-grid-3,
.catalog-view .portal-form-grid-4 {
    gap: var(--catalog-spacing-md);
    margin-bottom: var(--catalog-spacing-md);
}

/* Kompaktere Definition Lists für Detail-Ansichten */
.catalog-view dl {
    gap: var(--catalog-spacing-xs) !important;
}

.catalog-view .data-row {
    padding: var(--catalog-spacing-xs) var(--catalog-spacing-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.catalog-view .data-row-half {
    gap: var(--catalog-spacing-xs);
}

.catalog-view .data-row-half > div {
    padding: var(--catalog-spacing-xs) var(--catalog-spacing-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.catalog-view dt {
    font-size: var(--font-size-xs) !important;
    margin-bottom: 1px !important;
}

.catalog-view dd {
    font-size: var(--font-size-sm) !important;
    line-height: 1.3;
}

/* Kompaktere Grid-Layouts in Detail-Ansichten */
.catalog-view [style*="display: grid"] {
    gap: var(--catalog-spacing-sm);
}

/* Kompaktere Empty States */
.catalog-view .portal-empty-state {
    padding: var(--catalog-spacing-lg) var(--catalog-spacing-md);
}

.catalog-view .portal-empty-state i {
    font-size: 2rem !important;
    margin-bottom: var(--catalog-spacing-sm);
}

.catalog-view .portal-empty-state h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--catalog-spacing-xs);
}

.catalog-view .portal-empty-state p {
    font-size: var(--font-size-xs);
    margin-bottom: var(--catalog-spacing-md);
}

/* Kompaktere Badges */
.catalog-view .portal-badge {
    padding: 2px var(--catalog-spacing-sm);
    font-size: 10px;
}

/* Kompaktere Buttons in Tabellen */
.catalog-view .btn-sm {
    padding: var(--catalog-spacing-xs) var(--catalog-spacing-sm);
    font-size: 10px;
}

/* Kompaktere Abstände für inline Styles */
.catalog-view [style*="gap: var(--spacing-6)"] {
    gap: var(--catalog-spacing-md) !important;
}

.catalog-view [style*="gap: var(--spacing-4)"] {
    gap: var(--catalog-spacing-sm) !important;
}

.catalog-view [style*="gap: var(--spacing-3)"] {
    gap: var(--catalog-spacing-sm) !important;
}

.catalog-view [style*="margin-bottom: var(--spacing-6)"] {
    margin-bottom: var(--catalog-spacing-md) !important;
}

.catalog-view [style*="margin-bottom: var(--spacing-4)"] {
    margin-bottom: var(--catalog-spacing-sm) !important;
}

.catalog-view [style*="padding: var(--spacing-6)"] {
    padding: var(--catalog-spacing-md) !important;
}

.catalog-view [style*="padding: var(--spacing-4)"] {
    padding: var(--catalog-spacing-sm) !important;
}

/* Kompaktere Info-Boxen mit Icons */
.catalog-view
    [style*="text-align: center"][style*="padding: var(--spacing-3)"] {
    padding: var(--catalog-spacing-sm) !important;
}

.catalog-view [style*="font-size: var(--font-size-2xl)"] {
    font-size: var(--font-size-lg) !important;
}

/* Kompaktere Statistik-Cards */
.catalog-view .stat-card,
.catalog-view
    [style*="background: var(--color-gray-50)"][style*="border-radius"] {
    padding: var(--catalog-spacing-sm) !important;
}

/* Horizontale Trennlinien kompakter */
.catalog-view hr {
    margin: var(--catalog-spacing-sm) 0 !important;
}

/* Sort-Link in kompakter Tabellenansicht */
.catalog-view .portal-table-sort-link {
    gap: var(--catalog-spacing-xs);
}

/* ==================== MOBILE RESPONSIVE ==================== */
/* Grundlegende Mobile-Unterstützung */

@media (max-width: 1024px) {
    /* Sidebar auf Tablets schmaler */
    .portal-sidebar {
        width: 220px;
    }

    .portal-main {
        margin-left: 220px;
    }
}

@media (max-width: 768px) {
    /* Mobile Sidebar: Off-canvas with slide-in */
    .portal-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: calc(var(--z-fixed, 100) + 5);
    }

    .portal-sidebar.sidebar-mobile-open {
        transform: translateX(0);
    }

    /* Show mobile toggle button */
    .sidebar-mobile-toggle {
        display: flex;
    }

    /* Show mobile overlay (controlled by Alpine x-show) */
    .sidebar-mobile-overlay {
        display: block;
    }

    /* Main-Bereich nimmt volle Breite */
    .portal-main {
        margin-left: 0;
        padding: var(--spacing-4);
        padding-top: calc(
            var(--spacing-4) + 52px
        ); /* Space for mobile toggle */
    }

    /* KPI Grid auf Mobile einspaltig */
    .portal-kpi-grid,
    .kpi-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    /* Form Grids auf Mobile einspaltig */
    .portal-form-grid-2,
    .portal-form-grid-3,
    .portal-form-grid-4 {
        grid-template-columns: 1fr;
    }

    /* Tabellen horizontal scrollbar */
    .portal-table-container {
        overflow-x: auto;
    }

    .portal-table {
        min-width: 600px;
    }

    /* Kleinere Titel */
    .portal-title {
        font-size: var(--font-size-2xl);
    }

    /* Card Header auf Mobile stacken */
    .portal-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .portal-card-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Buttons volle Breite auf Mobile */
    .portal-card-actions .btn {
        flex: 1;
    }

    /* Impersonate Banner anpassen */
    .impersonate-banner,
    .manufacturer-banner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* Noch kleinere Abstände auf kleinen Phones */
    .portal-main {
        padding: var(--spacing-3);
    }

    .portal-card-body {
        padding: var(--spacing-4);
    }

    .portal-card-header {
        padding: var(--spacing-3) var(--spacing-4);
    }

    /* KPI Cards kompakter */
    .portal-kpi-card,
    .kpi-card {
        padding: var(--spacing-4);
    }

    .portal-kpi-value,
    .kpi-value {
        font-size: var(--font-size-2xl);
    }

    /* Buttons auf Mobile stacken */
    .portal-card-actions {
        flex-direction: column;
    }

    .portal-card-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Detail View - Read-only mode (Inline-Edit)
   ============================================ */

/* Hero block: Name + Meta + Badges */
.detail-view-hero {
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: var(--spacing-4);
}
.detail-view-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
    line-height: 1.3;
}
.detail-view-meta {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-2);
}
.detail-view-badges {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* Icon-field rows (Kontakt, Adresse) */
.detail-view-section {
    margin-bottom: var(--spacing-3);
}
.detail-view-field {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-1) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}
.detail-view-field-icon {
    width: 16px;
    color: var(--color-gray-400);
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.detail-view-field-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    font-weight: var(--font-weight-medium);
    display: block;
    margin-bottom: 1px;
}
.detail-view-address {
    line-height: 1.7;
}
.detail-view-address-country {
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
}
.detail-view-divider {
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.detail-view-audit {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* Compact translatable-input — für inline-edit in data-rows (wie CRM-Masken) */
.translatable-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}
.translatable-compact-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.translatable-compact-tabs {
    display: flex;
    gap: 2px;
}
.translatable-compact .translatable-tab {
    padding: 1px 6px !important;
    font-size: 10px !important;
    line-height: 1.7 !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 3px !important;
    background: var(--color-white) !important;
    color: var(--color-gray-500) !important;
    cursor: pointer;
    transition:
        background 0.1s,
        color 0.1s;
}
.translatable-compact .translatable-tab.active {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}
.translatable-normal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

/* Inputs direkt in compact-data-list (Inline-Edit Pattern) */
.compact-data-list .portal-input,
.compact-data-list .portal-select,
.compact-data-list .portal-textarea {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    margin-top: 2px;
}

/* Compact key-value list — Standard für alle Show-Views (Vorgabe: Hotel-Style) */
.compact-data-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
}
.compact-data-list dt {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 2px;
    display: block;
}
.compact-data-list dd {
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    margin: 0;
}
.data-row {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
}
.data-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}
.data-row-half > div {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
}
.data-section-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--portal-primary);
    padding-top: var(--spacing-3);
    margin-top: var(--spacing-2);
    border-top: 1px solid var(--color-border);
}
/* Responsive 2fr/1fr Detail-Grid (Vorgabe für Customer, Hotel etc.) */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}
.detail-grid-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}
@media (min-width: 1024px) {
    .detail-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* ============================================================
   CRM Fieldset (disabled state — crmDetailView Pattern)
   ============================================================ */
.crm-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.crm-fieldset:disabled {
    opacity: 1;
}
.crm-fieldset:disabled .portal-input,
.crm-fieldset:disabled .portal-select,
.crm-fieldset:disabled .portal-textarea,
.crm-fieldset:disabled select,
.crm-fieldset:disabled input,
.crm-fieldset:disabled textarea {
    background-color: var(--color-gray-50);
    cursor: default;
    color: var(--color-gray-700);
}
.crm-fieldset:disabled input[type="checkbox"] {
    cursor: default;
}

/* ============================================================
   Toast Notifications (sectionCard / crmDetailView)
   ============================================================ */
#crm-toast-container {
    position: fixed;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.notification-toast {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    min-width: 250px;
}
.notification-toast.show {
    opacity: 1;
    transform: translateX(0);
}
.notification-toast.notification-success {
    background: #059669;
}
.notification-toast.notification-error {
    background: #dc2626;
}

/* ==================== SLIDE-OVER PANEL ==================== */
.portal-slide-over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.portal-slide-over-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.portal-slide-over-panel {
    position: relative;
    width: 60%;
    max-width: 100%;
    height: 100vh;
    background: white;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 200ms ease-out;
}

.portal-slide-over-panel.slide-enter {
    transform: translateX(100%);
}

.portal-slide-over-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    flex-shrink: 0;
}

.portal-slide-over-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
}

.portal-slide-over-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-gray-500);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.portal-slide-over-close:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.portal-slide-over-body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
}

.portal-slide-over-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    flex-shrink: 0;
}

/* Responsive Slide-Over */
@media (max-width: 768px) {
    .portal-slide-over-panel {
        width: 100% !important;
    }
}

/* Responsive Tab-Bar: horizontal scrollbar on mobile */
.booking-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.booking-tab-bar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
@media (max-width: 768px) {
    .tab-button {
        white-space: nowrap;
        flex-shrink: 0;
    }
}