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

/* Sticky Pagination Footer: bleibt am unteren Viewport-Rand haengen,
   solange die zugehoerige Card sichtbar ist. Voraussetzung: Parent-Card
   darf kein overflow:hidden haben (Override via :has() unten). */
.portal-card-footer-sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

*:has(> .portal-card-footer-sticky) {
    overflow: visible;
}

@media (max-width: 768px) {
    .portal-card-footer-sticky {
        position: static;
        box-shadow: none;
    }
}

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

/* .table ist ein Alias auf .portal-table — viele Manufacturer-Views nutzen
   noch class="table" (war historisch ein Bootstrap-Reflex). Ohne diese
   Aliase blieb die Tabelle auf Browser-Default width:auto stehen — wirkte
   wie ein fixe-Breiten-Bug, war aber nur fehlende CSS-Definition. */
.portal-table,
.table {
    width: 100%;
    border-collapse: collapse;
}

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

.portal-table th,
.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,
.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,
.table tbody tr {
    transition: background-color var(--transition-fast);
}

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

.portal-table tbody tr:last-child td,
.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);
}

/* Kompakte Tabelle */
.portal-table-sm th,
.portal-table-sm td {
    padding: var(--spacing-2) var(--spacing-4);
}

/* Buchungen-Tabelle: Expand-Spalte und Detail-Row */
.booking-expand-col {
    width: 32px;
    text-align: center;
}

.booking-expand-icon {
    transition: transform 0.15s;
    color: var(--color-gray-400);
    font-size: var(--font-size-xs);
}

.booking-invoice-detail-row:hover {
    background-color: transparent !important;
}

.booking-invoice-detail-row > td {
    border-bottom: none;
}

.booking-actions-col {
    width: 50px;
}

.booking-summary-border {
    border-top-width: 2px;
    border-color: var(--color-gray-300);
}

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

/* Attribute (Tag) Filter Panel — fn-28 */
.attribute-filter-card {
    margin-bottom: var(--spacing-4);
}

.attribute-filter-card .portal-card-header {
    gap: var(--spacing-2);
}

.attribute-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.attribute-filter-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.attribute-filter-actions {
    display: flex;
    gap: var(--spacing-2);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-gray-200);
}

.attribute-filter-chips-row {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    border-top: 1px solid var(--color-gray-200);
}

.attribute-filter-panel {
    margin: 0;
    padding: 0;
    border: 0;
}

.attribute-filter-heading {
    margin-bottom: var(--spacing-3);
}

.attribute-filter-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.attribute-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.attribute-filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.attribute-filter-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.attribute-filter-select-wrap {
    margin-bottom: 0;
    min-width: 200px;
}

.attribute-filter-empty-link {
    margin-left: var(--spacing-2);
    color: var(--color-primary);
    text-decoration: underline;
    font-size: var(--font-size-sm);
}

.portal-select-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
}

/* 3-State Tag Toggle */
.attribute-tri {
    display: inline-block;
}

.attribute-tri-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background: #ffffff;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.attribute-tri-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.attribute-tri-btn.attribute-tri-include {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.attribute-tri-btn.attribute-tri-exclude {
    background: var(--color-error-light, #fee2e2);
    border-color: var(--color-error);
    color: var(--color-error);
    text-decoration: line-through;
}

.attribute-tri-count {
    font-size: var(--font-size-xs);
    opacity: 0.75;
}

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

/* Static read-only value — matches portal-input height, no border/interaction */
.portal-static-value {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    min-height: calc(var(--spacing-3) * 2 + var(--font-size-sm) * var(--line-height-normal));
}

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

/* --- Laravel-Paginator Portal-Theme (vendor/pagination/portal.blade.php) --- */
.pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-5);
}
.pagination {
    display: flex;
    list-style: none;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.pagination li {
    padding: 8px 12px;
    border-radius: 4px;
}
.pagination li.disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-400);
}
.pagination li.dots {
    background: transparent;
}
.pagination li.active {
    background: var(--color-primary);
    color: white;
}
.pagination a {
    display: block;
    margin: -8px -12px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.pagination a:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

/* ==================== 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-1              { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.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-0              { padding-top: 0; padding-bottom: 0; }
.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; }
.w-7-pct  { width: 7%; }
.w-9-pct  { width: 9%; }
.w-10-pct { width: 10%; }
.w-11-pct { width: 11%; }
.w-12-pct { width: 12%; }
.w-13-pct { width: 13%; }
.w-14-pct { width: 14%; }
.w-16-pct { width: 16%; }
.w-20-pct { width: 20%; }
.w-22-pct { width: 22%; }
.w-5-pct  { width: 5%; }
.w-8-pct  { width: 8%; }
.w-28px   { width: 28px; }
.w-70px   { width: 70px; }
.gap-px   { gap: 2px; }

/* --- Margin-Input (kleiner rechtsbuendiger Prozent-Input) --- */
.input-margin-pct {
    width: 55px;
    text-align: right;
    padding: 0.2rem 0.3rem;
    font-size: 0.85rem;
}

/* --- Items-Table Category-Heading (fur Gruppenueberschriften) --- */
.items-table-category-heading {
    padding: var(--spacing-4) var(--spacing-4) 0;
}
.text-7  { font-size: 0.65rem; }
.text-8  { font-size: 0.7rem; }
.text-9  { font-size: 0.8rem; }
.text-14 { font-size: 0.85rem; }
.text-green-700 { color: #15803d; }
.text-5 { font-size: 0.5rem; }
.text-55 { font-size: 0.55rem; }

/* --- Code-Tag (Travel-Code oder kleine Highlighted Code-Snippets) --- */
.code-tag {
    font-size: 0.8rem;
    background: var(--color-primary-50);
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- Info-Bar (kleine Info-Leiste in Modals) --- */
.portal-info-bar {
    background: var(--color-gray-100);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-3);
    font-size: 0.875rem;
}
.text-6 { font-size: 0.6rem; }
.text-7 { font-size: 0.65rem; }
.align-super { vertical-align: super; }
.right-0 { right: 0; }
.min-w-150 { min-width: 150px; }
.min-w-160 { min-width: 160px; }
.btn-icon-sm { padding: 4px 8px; border-color: var(--color-gray-300); }
.btn-multiplier-xs { padding: 0.1rem 0.2rem; font-size: 0.6rem; }
.bg-blue-50  { background-color: #eff6ff; }
.bg-green-50 { background-color: #f0fdf4; }
.ml-px { margin-left: 2px; }
.pl-6 { padding-left: var(--spacing-6); }
.pl-4 { padding-left: var(--spacing-4); }
.table-fixed-100 {
    margin: 0;
    table-layout: fixed;
    width: 100%;
}
.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-visible  { overflow: visible; }
.overflow-auto     { overflow: auto; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }

/* --- Cursor --- */
.cursor-pointer    { cursor: pointer; }
.cursor-grab       { cursor: grab; }
.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; }

/* --- Transform / Scale (Alpine.js x-transition) --- */
.scale-95          { transform: scale(0.95); }
.scale-100         { transform: scale(1); }
.ease-out          { transition-timing-function: ease-out; }
.ease-in           { transition-timing-function: ease-in; }
.duration-75       { transition-duration: 75ms; }
.duration-100      { transition-duration: 100ms; }

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

/*
    Modifier: Modal mit fixer Höhe. Wird für Tab-Modals genutzt, damit die
    Modal-Größe sich nicht je nach Tab-Inhalt ändert; der innere Body scrollt.
*/
.portal-modal-content--fixed-height {
    height: 90vh;
}

/*
    Wenn ein <form> direkt im Modal Header/Body/Footer wrappt, muss es selbst
    Flex-Container werden — sonst kann .portal-modal-body (flex:1, overflow:auto)
    seine Hoehe nicht ausrechnen und das Modal scrollt nicht.
*/
.portal-modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

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

/*
    Modal-Section-Pattern: Mehrere logische Bereiche in einem Modal
    (Beispiel: Hotel-Preisdatensatz-Modal mit Grunddaten/Agenturen/Kalkulation/Texte).
*/
.portal-modal-section + .portal-modal-section {
    margin-top: var(--spacing-5);
}

.portal-modal-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin: 0 0 var(--spacing-3) 0;
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-200);
}

.portal-modal-section-title--toggle {
    cursor: pointer;
}

.portal-modal-section-chevron {
    margin-left: auto;
    transition: transform 0.2s;
}

.portal-modal-section-chevron--open {
    transform: rotate(180deg);
}

/* Suffix-Row: Zahleneingabe mit Einheit (% oder Waehrung) */
.portal-modal-suffix-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Checkbox-Label, vertikal an Form-Group ausgerichtet */
.portal-modal-check-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: var(--spacing-6);
}

/* Radio-Group fuer Typ-Umschalter (z.B. supplier vs. travel_agent) */
.portal-modal-radio-row {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.portal-modal-radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

.portal-modal-error-list {
    margin: 0;
    padding-left: var(--spacing-4);
}

/* Selection Cards (z.B. Rechnungstyp-Auswahl im Modal) */
.portal-selection-card {
    @apply cursor-pointer rounded-lg border-2 border-transparent bg-white p-4 text-center transition-all duration-200;
    box-shadow: var(--shadow-sm);
}

.portal-selection-card:hover {
    @apply border-gray-300;
    box-shadow: var(--shadow-md);
}

.portal-selection-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md);
}

.portal-selection-card.is-selected .portal-selection-card-icon {
    color: var(--color-primary);
}

.portal-selection-card-icon {
    @apply text-3xl mb-2;
    color: var(--color-gray-400);
}

.portal-selection-card-title {
    @apply font-semibold mb-1;
}

.portal-selection-card-desc {
    @apply text-xs;
    color: var(--color-gray-500);
}

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

/*
    Container mit `overflow: hidden` (portal-card, portal-table-container)
    schneiden Action-Dropdowns ab. Wenn ein Dropdown drinsteckt, lassen
    wir den Container sichtbar überfließen, damit das Burger-Menü nicht
    geclippt wird.
*/
.portal-card:has(.actions-dropdown),
.portal-table-container:has(.actions-dropdown) {
    overflow: visible;
}

/*
    Stacking-Lift: Der Wrapping-<div class="relative"> ist der Anker fuer
    das absolute Dropdown. Ohne eigenen z-index liegt er im normalen Fluss,
    und folgende <tr>s/Sektionen uebermalen das Menue. Sobald das Dropdown
    offen ist (Alpine x-show entfernt das inline display:none), heben wir
    den Wrapper hoch genug, dass er ueber alles in seiner Stacking-Kette
    liegt — inklusive nachfolgender .cost-category-Bloecke.
*/
.relative:has(> .actions-dropdown:not([style*="display: none"])) {
    z-index: 1000;
}

/* Auch die Tabellenzelle/-zeile bekommt einen Stacking-Lift, falls eine
   Outer-Stacking-Kette (z.B. portal-card-body p-0) den Wrapper-z-index
   schluckt. */
.portal-table tr:has(.actions-dropdown:not([style*="display: none"])),
.portal-table td:has(.actions-dropdown:not([style*="display: none"])) {
    position: relative;
    z-index: 1000;
}

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

/* fn-33.6: Translatable-Tab-Header mit DeepL-Translate-Button rechts */
.translatable-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: 8px;
}
.translatable-tabs-row .translatable-normal-tabs,
.translatable-tabs-row .translatable-compact-tabs {
    margin-bottom: 0;
}
.translatable-translate-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* fn-33.6: Mini-Icon-Button fuer DeepL-Translate (x-translation-button) */
.portal-translate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--color-gray-300);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-gray-500);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.portal-translate-button:hover:not(:disabled) {
    background: var(--color-primary-50, #fef2f4);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.portal-translate-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.portal-translate-button .portal-translate-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--color-gray-300);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: portal-translate-spin 0.7s linear infinite;
}
@keyframes portal-translate-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 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: var(--dyn-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;
    }
}

/* --- Search Field (Input mit Lupen-Icon) --- */
.portal-search-field {
    position: relative;
    max-width: 400px;
    flex: 1;
}
.portal-search-field-icon {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}
.portal-search-field .portal-input {
    padding-left: 38px;
}
.portal-search-field-icon-right {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}

/* --- Tabellen-Namen-Link (Bold Gray + Red Underline on Hover) --- */
.portal-table-name-link {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.portal-table-name-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Zelle: Kundennummer / Monospace-ID --- */
.portal-table-id {
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-size-sm);
}

/* --- Zelle: Hervorgehobene Zahl (z. B. Buchungen-Count) --- */
.portal-table-count {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}

/* --- Table-Body ohne Padding (full-bleed) --- */
.portal-card-body-flush {
    padding: 0;
}

/* --- Section-Separator (margin-top + padding-top + border) --- */
.portal-section-divider {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-gray-200);
}

/* --- Section-Heading (Uppercase-Small-Caps Label) --- */
.portal-section-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}
.portal-section-heading-xs {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

/* --- Modal-Sektion (padding-top + border-top, ohne margin-top) --- */
.portal-modal-section {
    margin-bottom: var(--spacing-3);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-gray-200);
}

/* --- Contact Tab Layout (Persons) --- */
.contact-split-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--spacing-4);
    min-height: 400px;
}
.contact-list-sidebar {
    height: fit-content;
}
.contact-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.contact-grid-stacked {
    display: grid;
    gap: var(--spacing-2);
}

/* --- Person-Group-Header mit dynamischer Farbe (CSS custom prop --person-color) --- */
.person-group-header {
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background: color-mix(in srgb, var(--person-color, var(--color-gray-500)) 10%, transparent);
}
.person-group-header-icon,
.person-group-header-label {
    color: var(--person-color, var(--color-gray-500));
}
.person-group-header-icon {
    font-size: var(--font-size-sm);
}
.person-group-header-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.person-group-header-count {
    background: color-mix(in srgb, var(--person-color, var(--color-gray-500)) 20%, transparent);
    color: var(--person-color, var(--color-gray-500));
    font-size: 10px;
    padding: 1px 6px;
}

/* --- Contact-List-Item innere Struktur --- */
.contact-list-item-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.contact-list-item-body {
    flex: 1;
    min-width: 0;
}
.contact-list-item-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-list-item-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-list-item-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* --- Contact-Avatar dynamische Farbe (--person-color) --- */
.contact-avatar-dynamic,
.contact-avatar-large-dynamic {
    background: var(--person-color, var(--color-gray-400));
}
.contact-avatar--primary,
.contact-avatar-large--primary { --person-color: var(--color-primary); }

/* --- Fixed-Width-Utilities (Filter-Dropdowns, Checkbox-Spalten) --- */
.w-20px { width: 20px; }
.w-30px { width: 30px; }
.w-40px { width: 40px; }
.w-80 { width: 80px; }
.w-80px { width: 80px; }
.w-180 { width: 180px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.w-140px { width: 140px; }
.min-w-140 { min-width: 140px; }
.min-w-160 { min-width: 160px; }
.w-150 { width: 150px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-h-60 { max-height: 60px; }

/* --- JSON-Snapshot Pre-Block (scrollbar) --- */
.portal-pre-snapshot {
    background: var(--color-gray-50);
    padding: var(--spacing-4);
    border-radius: var(--radius-base);
    overflow: auto;
    max-height: 500px;
}

/* --- Purple-Text-Utility (fuer Hotel-Only Icons etc., gleiche Farbe wie .badge-purple) --- */
.text-purple { color: #7c3aed; }
.text-amber-400 { color: #fbbf24; }
.text-blue-600 { color: #2563eb; }

/* --- Input-Number-LG (grosses zentriertes Zahl-Input, z.B. Nights-Counter) --- */
.input-number-lg {
    width: 80px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

/* --- Wizard-Spezifische Image-Classes --- */
.wizard-hotel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.wizard-flight-image {
    width: 80px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

/* --- Border-Top Dashed (fuer Sekundaer-Separator) --- */
.border-t-dashed {
    border-top: 1px dashed var(--color-gray-200);
}
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }

/* --- Sticky-Container (z.B. Sidebars) --- */
.sticky-top-4 {
    position: sticky;
    top: var(--spacing-4);
}

/* --- Builder-Map-Layout (offers/builder/index.blade.php) --- */
.builder-map-card {
    height: 100%;
    min-height: 500px;
}
.builder-map-body {
    padding: 0;
    height: calc(100% - 60px);
}
.builder-map-canvas {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* --- h-full Utility --- */
.h-full { height: 100%; }
.justify-center { justify-content: center; }

/* --- Offers/Itinerary-Layout (resources-lib + day-editor) --- */
.itinerary-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-6);
}
.itinerary-sidebar-scroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding: var(--spacing-3);
}

/* --- Star-Rating (ausgelagert aus travel-agents/detail.blade.php, 18.04.2026) --- */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.star-rating input {
    display: none;
}
.star-rating label {
    cursor: pointer;
    color: var(--color-gray-300);
    transition: color 0.2s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--color-warning);
}

/* --- Flush Table-Container (keine Shadow/Border-Radius, fuer Card-Body) --- */
.portal-table-container-flush {
    box-shadow: none;
    border-radius: 0;
}

/* --- Bulk-Actions-Bar (Leiste unter Tabelle mit Multi-Select-Aktionen) --- */
.portal-bulk-actions-bar {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

/* --- Reset-Button (transparenter Button, full-width, left-aligned) --- */
.btn-reset {
    padding: var(--spacing-3) var(--spacing-4);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

/* --- Extra-kleiner Button (Icon-only oder Text, kleiner als btn-sm) --- */
.btn-xs {
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

/* --- Extra-kleines Badge (font-size 9px, padding 1px 5px) --- */
.portal-badge-2xs {
    font-size: 9px;
    padding: 1px 5px;
}

/* --- Height: fit-content (fuer Cards die nicht den Parent ausfuellen sollen) --- */
.h-fit { height: fit-content; }

/* --- Plain Primary-Link (kein Underline, z.B. in Text-Bereichen) --- */
.text-decoration-none { text-decoration: none; }

.portal-link-plain {
    color: var(--color-primary);
    text-decoration: none;
}
.portal-link-plain:hover {
    text-decoration: underline;
}

/* --- Button-Size Base (fuer Action-Buttons zwischen sm und regular) --- */
.btn-size-base {
    font-size: var(--font-size-base);
    padding: var(--spacing-2) var(--spacing-3);
}

/* --- Image-Gallery Item (fuer Hotel-Galerie, Asset-Listen) --- */
.portal-gallery-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}
.portal-gallery-image-sm {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
    opacity: 0.8;
}

/* --- Map-Preview (Hotels, Destinations) --- */
.portal-map-preview {
    height: 180px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.portal-map-preview-lg {
    height: 200px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-2);
}

/* --- Auto-Fill Grid Layouts --- */
.grid-autofill-150 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-3);
}
.grid-autofill-100 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-2);
}

/* --- Max-Width Utility 100px (fuer kompakte Number-Inputs) --- */
.max-w-100 { max-width: 100px; }

/* --- Readonly-Text-Box (Display-Only-Werte in Detail-Views, bg-gray-50, pre-line) --- */
.portal-readonly-box {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    white-space: pre-line;
    font-size: var(--font-size-sm);
}

/* --- Akzentuierte Checkbox (gross, mit Primary-Accent) --- */
.portal-checkbox-lg {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

/* --- Contacts-Overview-Partial Layouts (partials/contacts-overview.blade.php) --- */
.contacts-overview-item {
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
}
.contacts-overview-item-full {
    flex: 1;
    min-width: 250px;
    max-width: 50%;
}
.contacts-overview-item-divider {
    border-right: 1px solid var(--color-gray-100);
}

/* --- Sub-Tab-Navigation (Alpine.js tab-buttons innerhalb einer Card) --- */
.portal-subtab-nav {
    display: flex;
    margin-bottom: -1px;
}
.portal-subtab-btn {
    padding: var(--spacing-2) var(--spacing-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-gray-500);
    cursor: pointer;
}
.portal-subtab-btn.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Resource-Card (Border + Rounded-Box fuer Mini-Content-Cards) --- */
.portal-resource-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    padding: var(--spacing-4);
}

/* --- Contact-List Base-Klassen (ausgelagert aus customers/tabs/persons.blade.php, 18.04.2026) --- */
.contact-list {
    max-height: 500px;
    overflow-y: auto;
}
.contact-list-item {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
    transition: background-color 0.15s;
}
.contact-list-item:last-child {
    border-bottom: none;
}
.contact-list-item:hover {
    background-color: var(--color-gray-50);
}
.contact-list-item.active {
    background-color: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
}
.contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.contact-avatar-large {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}
.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}
.contact-info-row i {
    width: 20px;
    color: var(--color-gray-400);
    margin-top: 2px;
}
.contact-info-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.contact-info-value {
    color: var(--color-gray-900);
}
.contact-info-value.empty {
    color: var(--color-gray-400);
}
.contact-info-value.link {
    color: var(--color-primary);
    text-decoration: none;
}
.contact-info-value.link:hover {
    text-decoration: underline;
}

/* --- Person-Details Header --- */
.person-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}
.person-detail-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}
.person-detail-badges {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    flex-wrap: wrap;
}
.person-detail-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* --- Badge mit dynamischer Farbe (--badge-color) --- */
.portal-badge-dynamic {
    background: color-mix(in srgb, var(--badge-color, var(--color-gray-500)) 20%, transparent);
    color: var(--badge-color, var(--color-gray-500));
}

/* --- Badge extra-small --- */
.portal-badge-xs {
    font-size: 10px;
    padding: 2px 6px;
}

/* --- Empty-State kleiner (inline in Card-Body) --- */
.portal-empty-state-inline {
    padding: var(--spacing-4);
    text-align: center;
    color: var(--color-gray-500);
}
.portal-empty-state-inline-icon {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2);
    display: block;
}
.portal-empty-state-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    color: var(--color-gray-500);
}
.portal-empty-state-centered-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-300);
}

/* --- Modal-Content Varianten --- */
.portal-modal-content-scroll {
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.portal-modal-content-small {
    max-width: 450px;
}
.portal-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.portal-modal-body-scroll {
    overflow-y: auto;
    flex: 1;
}
.portal-modal-header-fixed,
.portal-modal-footer-fixed {
    flex-shrink: 0;
}

/* --- Icon-Button-Danger (Text-Farbe) --- */
.btn-icon-danger {
    color: var(--color-danger);
}

/* --- Checkbox-Label (Inline mit Icon + Hint) --- */
.portal-check-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}
.portal-check-label-inline {
    white-space: nowrap;
    padding: 6px 0;
    align-items: flex-end;
}

/* --- Form-Group ohne Bottom-Margin --- */
.portal-form-group-flush {
    margin-bottom: 0;
}

/* --- Modal Grid-Layout (Varianten mit fixer Spalte) --- */
.portal-form-grid-salutation {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}
.portal-form-grid-relation {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-gray-200);
}
.portal-form-grid-address {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 2fr;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}
.portal-form-grid-2-compact,
.portal-form-grid-3-compact {
    display: grid;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}
.portal-form-grid-2-compact {
    grid-template-columns: 1fr 1fr;
}
.portal-form-grid-3-compact {
    grid-template-columns: 1fr 1fr 1fr;
}

/* --- Passport-Copy Aktionen (kleiner Button-Group) --- */
.passport-copy-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.btn-xs-action {
    padding: 2px 6px;
    font-size: 10px;
}

/* --- Notes-Block (pre-wrap Paragraph) --- */
.portal-notes-block {
    color: var(--color-gray-700);
    margin: 0;
    white-space: pre-wrap;
}
.whitespace-pre-line {
    white-space: pre-line;
}

/* --- Icon-Margin (rechts kleiner Abstand) --- */
.icon-mr-xs {
    margin-right: 4px;
}
.icon-ml-xs {
    margin-left: 4px;
}

/* --- Detail-View Haupt-Layout (Flexbox mit fixer Höhe) --- */
.detail-view-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}
.detail-view-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-view-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-3);
    background: #f9fafb;
}

/* --- Section-Card Edit-Actions (Save/Cancel-Buttons) --- */
.section-card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.section-card-actions-inline {
    display: flex;
    gap: var(--spacing-2);
}

/* --- Spezial-Brand-Buttons (WhatsApp + 360° Gradient) --- */
.btn-whatsapp {
    background: #25D366;
    color: white;
    border: none;
}
.btn-whatsapp:hover {
    background: #1DA851;
    color: white;
}
.btn-360 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}
.btn-360:hover {
    color: white;
    opacity: 0.9;
}

/* --- Generic Divider with gray border (not border-gray-200 var) --- */
.portal-section-divider-light {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid #e5e7eb;
}
.portal-section-divider-light-sm {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid #e5e7eb;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* --- Card Header-Title Subtitel (klein, grau) --- */
.portal-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: var(--spacing-1) 0 0;
}

/* --- Modal-Overlay (fixed, full-screen, centered) --- */
.portal-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.portal-modal-overlay.is-open {
    display: flex;
}
.portal-modal-box {
    max-height: 90vh;
    overflow-y: auto;
    margin: var(--spacing-4);
    width: 100%;
}
.portal-modal-box-sm { max-width: 600px; }
.portal-modal-box-md { max-width: 700px; }
.portal-modal-box-lg { max-width: 800px; }
.portal-modal-box-xl { max-width: 900px; }

/* --- Quick-Overview / Meta-Row (rechts Toolbar) --- */
.quick-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #6b7280;
}

/* --- Empty-State Icons Sizes --- */
.empty-state-icon-sm {
    font-size: 1.5rem;
    color: #9ca3af;
    margin-bottom: var(--spacing-2);
}
.empty-state-icon-md {
    font-size: 2rem;
    color: #9ca3af;
    margin-bottom: var(--spacing-3);
}

/* --- Common Widths (column sizing) --- */
.w-14px { width: 14px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-140 { width: 140px; }

/* --- Textarea (Memo) full-feature --- */
.memo-display {
    min-height: 120px;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    line-height: 1.6;
}
.memo-textarea {
    min-height: 200px;
    font-family: inherit;
}

/* --- Small emphasized text --- */
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-gray-muted { color: #9ca3af; }
.text-gray-medium { color: #6b7280; font-weight: 500; }

/* --- Dynamic color utility (uses --dyn-color custom prop) --- */
.text-dyn { color: var(--dyn-color, var(--color-gray-500)); }
.bg-dyn { background: var(--dyn-color, var(--color-gray-500)); }
.bg-dyn-soft { background: color-mix(in srgb, var(--dyn-color, var(--color-gray-500)) 10%, transparent); }
.border-dyn { border: 1px solid var(--dyn-color, var(--color-gray-500)); }
.border-dyn-soft { border: 1px solid color-mix(in srgb, var(--dyn-color, var(--color-gray-500)) 30%, transparent); }
.border-l-dyn-4 { border-left: 4px solid var(--dyn-color, var(--color-gray-500)); }

/* --- Attribut-Template-Badge (customer-attributes) --- */
.attr-template-chip {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: color-mix(in srgb, var(--dyn-color, var(--color-gray-500)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--dyn-color, var(--color-gray-500)) 30%, transparent);
    border-radius: 8px;
    min-width: 200px;
}

/* --- Card mit farbiger linker Kante --- */
.portal-info-box-colored {
    padding: var(--spacing-4);
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    border-left: 4px solid var(--dyn-color, var(--color-gray-500));
}

/* --- Call-Log Status-Badge (Accepted/Missed/Other) --- */
.call-status-badge-accepted { background: #dcfce7; color: #16a34a; }
.call-status-badge-missed { background: #fee2e2; color: #dc2626; }
.call-status-badge-default { background: #f3f4f6; color: #6b7280; }

/* --- WhatsApp Chat Layout --- */
.whatsapp-chat {
    background: #e5ddd5;
    border-radius: 8px;
    padding: var(--spacing-3);
    max-height: 400px;
    overflow-y: auto;
}
.whatsapp-bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 8px;
}
.whatsapp-bubble-outbound { background: #dcf8c6; }
.whatsapp-bubble-inbound { background: white; }
.whatsapp-bubble-failed { border: 1px solid #ef4444; }
.whatsapp-bubble-meta {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    font-size: 11px;
    color: #667781;
    margin-top: 4px;
}

/* --- Email-Thread Row --- */
.email-thread-row {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-bottom: 1px solid #e5e7eb;
}
.email-thread-row-unread {
    background: #eff6ff;
}
.email-thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.email-thread-avatar-read { background: #f3f4f6; }
.email-thread-avatar-unread { background: #dbeafe; }
.email-thread-title {
    font-weight: 400;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-thread-title-unread {
    font-weight: 600;
}
.email-thread-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

/* --- Flex-Gap Combos (specific to detail) --- */
.flex-gap-1 { display: flex; gap: var(--spacing-1); }
.flex-gap-3-end { display: flex; gap: var(--spacing-3); justify-content: flex-end; }
.flex-gap-3-wrap { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.flex-gap-6-center { display: flex; align-items: center; gap: var(--spacing-6); }
.flex-between-start { display: flex; justify-content: space-between; align-items: flex-start; }
.flex-between-center { display: flex; justify-content: space-between; align-items: center; }

/* --- Modal-Footer Actions (flex-gap-3 right) --- */
.portal-modal-footer-actions {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
}

/* --- Section-Title klein --- */
.portal-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}

/* --- Tab-badge dynamischer Zähler --- */
.tab-count-badge {
    margin-left: 4px;
    padding: 2px 6px;
    vertical-align: middle;
}

/* --- Info-Hint klein unter Formfeld --- */
.portal-hint-xs {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--spacing-1);
}
.portal-hint-xs-block {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    display: block;
    margin-top: 2px;
}
.portal-hint-italic {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-style: italic;
}

/* --- Passport-Copy Preview (iframe/image) --- */
.passport-preview {
    width: 100%;
    min-height: 400px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
}

.break-words { word-wrap: break-word; overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.max-h-96 { max-height: 400px; }
.max-h-300 { max-height: 300px; }
.ml-auto { margin-left: auto; }
.flex-2 { flex: 2; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.text-2xl { font-size: 1.5rem; }
.text-32 { font-size: 32px; }
.text-48 { font-size: 48px; }
.font-normal { font-weight: normal; }
.uppercase { text-transform: uppercase; }
.mt-px { margin-top: 2px; }
.mt-1-5 { margin-top: 6px; }
.mb-px { margin-bottom: 2px; }
.gap-5 { gap: var(--spacing-5); }
.items-end { align-items: flex-end; }
.italic { font-style: italic; }
.font-400 { font-weight: 400; }
.font-600 { font-weight: 600; }
.text-whatsapp { color: #25D366; }
.text-whatsapp-meta { color: #667781; }
.text-10 { font-size: 10px; }

/* --- Grid Layouts --- */
.grid-2fr-1fr {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-4);
}
.grid-1fr-1fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.grid-3fr-2fr {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-3);
}
.grid-1fr-2fr-2fr {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: var(--spacing-3);
}
.grid-auto-1fr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    font-size: 14px;
}
.grid-autofill-350 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-3);
}
.grid-autofill-250 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
}
.grid-autofill-180 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}
.text-indigo-700 { color: #1d4ed8; }
.bg-indigo-50 { background: #dbeafe; }
.text-blue-500 { color: #3b82f6; }
.text-green-500 { color: #10b981; }
.text-amber-500 { color: #f59e0b; }
.text-blue-read { color: #53bdeb; }
.text-red-danger { color: #ef4444; }

/* --- Dropdown Popover (absolut platziert, versteckt bis JS toggle) --- */
.portal-dropdown-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --- Kleine Success-Box (Inline-Hinweis, JS-gesteuert) --- */
.portal-success-box-sm {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
}

/* --- Success-Alert-Box (info) --- */
.success-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    margin-bottom: var(--spacing-3);
}

/* ================================================================
   CUSTOMER 360 DASHBOARD (admin/customers/360.blade.php)
   Migrated from inline <style>-block (18.04.2026).
   Prefix c360- verhindert Kollisionen mit generischen Klassen
   wie .section-card, .timeline, .empty-state etc.
   ================================================================ */

/* ===== Customer 360 Main Layout ===== */
.c360-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    max-width: 1600px;
}

/* ===== Quick Actions Bar ===== */
.c360-quick-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-2);
}

.c360-quick-actions-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.c360-quick-actions-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.c360-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-200);
    background: white;
    color: var(--color-gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.c360-quick-action-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.c360-quick-action-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.c360-quick-action-btn.primary:hover {
    background: var(--color-primary-dark);
}

.c360-quick-action-btn-sm {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* ===== Customer Header ===== */
.c360-customer-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-5);
    color: white;
    position: relative;
    overflow: hidden;
}

.c360-customer-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.c360-customer-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.c360-customer-header-content {
    position: relative;
    z-index: 1;
}

.c360-customer-header-top {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.c360-customer-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    border: 4px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.c360-customer-main-info {
    flex: 1;
}

.c360-customer-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.c360-customer-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.c360-customer-badges {
    display: flex;
    gap: var(--spacing-2);
}

.c360-customer-badge {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.c360-customer-badge.vip {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #7c5e00;
}

.c360-customer-badge.segment-premium {
    background: rgba(255, 255, 255, 0.25);
}

.c360-customer-contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    font-size: 0.9rem;
    opacity: 0.9;
}

.c360-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.c360-contact-item i {
    width: 18px;
    opacity: 0.8;
}

.c360-customer-since {
    margin-top: var(--spacing-2);
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ===== Health Score ===== */
.c360-health-score-container {
    text-align: center;
    min-width: 140px;
}

.c360-health-score-circle {
    width: 90px;
    height: 90px;
    margin: 0 auto var(--spacing-2);
    position: relative;
}

.c360-health-score-circle svg {
    transform: rotate(-90deg);
    width: 90px;
    height: 90px;
}

.c360-health-score-circle circle {
    fill: none;
    stroke-width: 8;
}

.c360-health-score-bg {
    stroke: rgba(255, 255, 255, 0.2);
}

.c360-health-score-value {
    stroke: currentColor;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
    color: var(--dyn-color);
    stroke-dasharray: var(--dyn-dasharray, 0);
    stroke-dashoffset: var(--dyn-dashoffset, 0);
}

.c360-health-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
}

.c360-health-score-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* ===== KPI Cards Grid ===== */
.c360-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-top: calc(-1 * var(--spacing-8));
    padding: 0 var(--spacing-4);
    position: relative;
    z-index: 2;
}

.c360-kpi-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.c360-kpi-card .c360-kpi-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-1);
}

.c360-kpi-card .c360-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.c360-kpi-card .c360-kpi-subtitle {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: var(--spacing-1);
}

/* ===== Main Content Grid ===== */
.c360-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

@media (max-width: 1200px) {
    .c360-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Section Cards ===== */
.c360-section-card {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.c360-section-card-header {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c360-section-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.c360-section-card-title i {
    color: var(--color-primary);
}

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

/* ===== Booking Timeline ===== */
.c360-timeline {
    position: relative;
    padding-left: var(--spacing-6);
}

.c360-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-200);
}

.c360-timeline-item {
    position: relative;
    padding-bottom: var(--spacing-4);
}

.c360-timeline-item:last-child {
    padding-bottom: 0;
}

.c360-timeline-marker {
    position: absolute;
    left: -26px;
    top: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
}

.c360-timeline-marker.confirmed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.c360-timeline-marker.pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.c360-timeline-marker.cancelled {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.c360-timeline-marker.completed {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.c360-timeline-content {
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
    padding: var(--spacing-3);
    border-left: 3px solid var(--color-primary);
}

.c360-timeline-title {
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c360-timeline-title a {
    color: inherit;
    text-decoration: none;
}

.c360-timeline-title a:hover {
    color: var(--color-primary);
}

.c360-timeline-meta {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.c360-timeline-date {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-2);
}

.c360-booking-price {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* ===== Financial Summary ===== */
.c360-financial-summary {
    display: grid;
    gap: var(--spacing-4);
}

.c360-financial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
}

.c360-financial-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.c360-financial-value {
    font-size: 1.125rem;
    font-weight: 600;
}

.c360-financial-value.positive {
    color: var(--color-success);
}

.c360-financial-value.negative {
    color: var(--color-danger);
}

/* ===== Family Overview ===== */
.c360-family-list {
    display: grid;
    gap: var(--spacing-3);
}

.c360-family-member {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
}

.c360-family-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.c360-family-info {
    flex: 1;
}

.c360-family-name {
    font-weight: 600;
    color: var(--color-gray-900);
}

.c360-family-relation {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.c360-family-age {
    font-size: 0.8rem;
    color: var(--color-gray-400);
}

/* ===== Suppliers Analysis ===== */
.c360-supplier-list {
    display: grid;
    gap: var(--spacing-3);
}

.c360-supplier-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
}

.c360-supplier-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.c360-supplier-info {
    flex: 1;
}

.c360-supplier-name {
    font-weight: 600;
    color: var(--color-gray-900);
}

.c360-supplier-stats {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.c360-supplier-revenue {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* ===== Destinations Analysis ===== */
.c360-destination-list {
    display: grid;
    gap: var(--spacing-3);
}

.c360-destination-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
}

.c360-destination-flag {
    font-size: 1.5rem;
}

.c360-destination-info {
    flex: 1;
}

.c360-destination-name {
    font-weight: 600;
    color: var(--color-gray-900);
}

.c360-destination-stats {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

/* ===== Alerts Section ===== */
.c360-alerts-list {
    display: grid;
    gap: var(--spacing-3);
}

.c360-alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--border-radius);
}

.c360-alert-item.warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}

.c360-alert-item.danger {
    background: #fee2e2;
    border-left: 3px solid #ef4444;
}

.c360-alert-item.info {
    background: #dbeafe;
    border-left: 3px solid #3b82f6;
}

.c360-alert-item.success {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}

.c360-alert-icon {
    font-size: 1.2rem;
}

.c360-alert-item.warning .c360-alert-icon {
    color: #f59e0b;
}

.c360-alert-item.danger .c360-alert-icon {
    color: #ef4444;
}

.c360-alert-item.info .c360-alert-icon {
    color: #3b82f6;
}

.c360-alert-item.success .c360-alert-icon {
    color: #10b981;
}

.c360-alert-content {
    flex: 1;
}

.c360-alert-title {
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.c360-alert-text {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

/* ===== Insights Section ===== */
.c360-insights-list {
    display: grid;
    gap: var(--spacing-3);
}

.c360-insight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--border-radius);
    border-left: 3px solid #0ea5e9;
    transition: transform 0.2s, box-shadow 0.2s;
}

.c360-insight-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.c360-insight-item.action {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left-color: #f59e0b;
}

.c360-insight-item.opportunity {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left-color: #10b981;
}

.c360-insight-item.high-priority {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left-color: #ef4444;
}

.c360-insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.c360-insight-item.action .c360-insight-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.c360-insight-item.opportunity .c360-insight-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.c360-insight-item.high-priority .c360-insight-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.c360-insight-content {
    flex: 1;
    min-width: 0;
}

.c360-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-1);
}

.c360-insight-title {
    font-weight: 600;
    color: var(--color-gray-900);
}

.c360-insight-score {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-gray-600);
}

.c360-insight-text {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.c360-insight-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    background: white;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.c360-insight-action:hover {
    background: var(--color-primary);
    color: white;
}

.c360-insight-priority {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: var(--spacing-2);
}

.c360-insight-priority.high {
    background: #fee2e2;
    color: #dc2626;
}

.c360-insight-priority.medium {
    background: #fef3c7;
    color: #d97706;
}

.c360-insight-priority.low {
    background: #e0e7ff;
    color: #4f46e5;
}

/* ===== Preferences Tags ===== */
.c360-preferences-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.c360-preference-tag {
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-gray-100);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--color-gray-700);
}

.c360-preference-tag.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* ===== Empty State ===== */
.c360-empty-state {
    text-align: center;
    padding: var(--spacing-6);
    color: var(--color-gray-400);
}

.c360-empty-state i {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

/* ===== Sidebar Column ===== */
.c360-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* ===== Profile Completeness ===== */
.c360-profile-completeness {
    padding: var(--spacing-4);
}

.c360-completeness-bar {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-2);
}

.c360-completeness-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease-out;
    width: var(--dyn-width, 0%);
}

.c360-completeness-text {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    display: flex;
    justify-content: space-between;
}

.c360-missing-fields {
    margin-top: var(--spacing-3);
}

.c360-missing-field {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.8rem;
    color: var(--color-gray-500);
    padding: var(--spacing-1) 0;
}

.c360-missing-field i {
    color: var(--color-warning);
}

/* --- Group-Calculations Migration (fn: inline-style migration) --- */
.max-w-450 { max-width: 450px; }
.w-45px { width: 45px; }
.p-xs { padding: 2px 4px; }
.p-2-6 { padding: 2px 6px; }
.pl-5 { padding-left: var(--spacing-5); }

.grid-2fr-1fr-1fr {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-4);
}
.grid-2fr-1fr-gap3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3);
}
.tier-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    font-size: 0.75rem;
    color: var(--color-gray-600);
}
.tier-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

/* --- Group-Calculations Show: Zusatz-Utilities --- */
.w-32px { width: 32px; }
.w-55px { width: 55px; }
.w-220px { width: 220px; }
.h-32px { height: 32px; }
.min-w-130 { min-width: 130px; }

.bg-orange-50 { background-color: var(--color-orange-50); }
.bg-yellow-50 { background-color: var(--color-yellow-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-green-100 { background-color: var(--color-green-100); }
.bg-blue-100 { background-color: var(--color-blue-100); }
.bg-purple-50 { background-color: var(--color-purple-50); }
.bg-purple-100 { background-color: var(--color-purple-100); }

.text-green-600 { color: var(--color-green-600); }
.text-blue-700 { color: var(--color-blue-700); }
.text-red-600 { color: var(--color-red-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-purple-600 { color: var(--color-purple-600); }

.font-size-xs2 { font-size: 0.7rem; }
.font-size-xs3 { font-size: 0.75rem; }
.font-size-sm1 { font-size: 0.85rem; }
.font-size-md1 { font-size: 0.95rem; }
.font-size-lg1 { font-size: 1.1rem; }

.avatar-xs {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    min-width: 200px;
}

/*
    Wenn ein .dropdown-panel offen ist (Inline-Toggle ueber JS entfernt das
    display:none-Style), heben wir den umschliessenden .dropdown-Wrapper, damit
    z-index 9999 nicht in der Stacking-Kette der Karte/des sticky-Headers
    verloren geht.
*/
.dropdown:has(> .dropdown-panel:not([style*="display: none"])) {
    position: relative;
    z-index: 9999;
}

/*
    .portal-card hat overflow: hidden — das schneidet jedes Dropdown ab, das
    ueber den Card-Rand hinaus ragt (z.B. das + Hinzufuegen-Panel im
    Empty-State von Grundprogramm/Zusatzleistungen). Sobald ein
    .dropdown-panel offen ist, schalten wir overflow auf visible, damit das
    Menue sichtbar bleibt.
*/
.portal-card:has(.dropdown-panel:not([style*="display: none"])),
.portal-card-body:has(.dropdown-panel:not([style*="display: none"])) {
    overflow: visible;
}

/*
    Einzelne Eintraege in .dropdown-panel. Ohne diese Regel fallen die
    <button>-Tags auf Browser-Defaults zurueck (grosses Padding, eigene Border,
    Background) und wirken klobig.
*/
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-gray-700);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.dropdown-item:hover {
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-900);
}

.dropdown-item i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-gray-500);
}

.dropdown-item:hover i {
    color: var(--color-gray-700);
}

.dropdown-panel-centered {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.dropdown-panel-large {
    min-width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border: none;
}

.dropdown-panel-header {
    padding: 8px 12px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.btn-abs-top-right {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0.1rem 0.25rem;
    font-size: 0.65rem;
    background: white;
}

.border-t-dashed-top-3 {
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px dashed var(--color-gray-300);
}

.btn-tier-add {
    padding: 6px 12px;
}

.btn-icon-xs {
    padding: 3px 6px;
}

.line-through {
    text-decoration: line-through;
}

.white-space-prewrap {
    white-space: pre-wrap;
}

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

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

.dropdown-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
    transition: background 0.15s;
}
.dropdown-menu-row:hover {
    background: var(--color-gray-50);
}

.code-tag-primary {
    font-size: 0.8rem;
    background: var(--color-primary-50);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
}

.calc-bg {
    background: #f9fafb;
}

.stat-box-compact {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.field-separator-b {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.field-separator-r {
    padding: var(--spacing-3);
    border-right: 1px solid var(--color-gray-200);
}

.field-separator-br {
    padding: var(--spacing-3);
    border-right: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}

.td-p2 {
    text-align: right;
    padding: var(--spacing-2);
}

.td-p2-left {
    text-align: left;
    padding: var(--spacing-2);
}

.td-p2-center {
    text-align: center;
    padding: var(--spacing-2);
}

.group-link-item-padded {
    display: block;
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.kpi-grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid-cols-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }

/* --- Cruises / Ships Migration (fn: inline-style migration, 19.04.2026) --- */

.portal-subform-label {
    font-size: var(--font-size-xs);
    margin-bottom: 2px;
}

.portal-mini-stat {
    text-align: center;
    padding: var(--spacing-2);
    background: var(--color-gray-50);
    border-radius: 6px;
}

.portal-table-head-compact {
    background: var(--color-gray-50);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.portal-section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
}

.portal-action-group-compact {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.portal-empty-inline {
    padding: var(--spacing-4);
    text-align: center;
    color: var(--color-gray-500);
}
.portal-empty-inline-lg {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-gray-500);
}
.portal-empty-inline-xl {
    padding: var(--spacing-8);
    text-align: center;
    color: var(--color-gray-500);
}

.portal-empty-icon-24 {
    font-size: 24px;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-300);
}
.portal-empty-icon-32 {
    font-size: 32px;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-300);
}
.portal-empty-icon-32-block {
    font-size: 32px;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-300);
    display: block;
}

.portal-progress-thin {
    background: var(--color-gray-200);
    border-radius: 2px;
    height: 3px;
    overflow: hidden;
}
.portal-progress-thin-4 {
    background: var(--color-gray-200);
    border-radius: 2px;
    height: 4px;
    overflow: hidden;
}
.portal-progress-thin-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    width: var(--dyn-width, 0%);
    transition: width 0.3s ease;
}
.portal-progress-thin-fill-success {
    height: 100%;
    background: var(--color-green-500);
    border-radius: 2px;
    width: var(--dyn-width, 0%);
}

.portal-progress-6 {
    background: var(--color-gray-200);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
    width: 100%;
}
.portal-progress-6-fill {
    height: 100%;
    background: var(--color-green-500);
    border-radius: 3px;
    width: var(--dyn-width, 0%);
}

.w-60px { width: 60px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.min-w-120 { min-width: 120px; }
.min-w-180 { min-width: 180px; }
.max-h-80vh { max-height: 80vh; }
.max-h-85vh { max-height: 85vh; }
.max-h-90vh { max-height: 90vh; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }
.max-w-900 { max-width: 900px; }
.max-w-300 { max-width: 300px; }

.cruise-participant-circle {
    width: 24px;
    height: 24px;
    background: var(--color-gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

.cruise-occupancy-mini {
    width: 40px;
    height: 3px;
    background: var(--color-gray-200);
    border-radius: 2px;
    margin-top: 2px;
    overflow: hidden;
}

.cruise-capacity-mini {
    width: 60px;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.portal-modal-sticky-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.portal-modal-search-bar {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

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

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

.portal-modal-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-3);
}
.portal-modal-scroll-body-gray {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-3);
    background: #f9fafb;
}
.portal-modal-scroll-flush {
    flex: 1;
    overflow-y: auto;
}

.cruise-show-detail {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.position-rel-inline-block {
    position: relative;
    display: inline-block;
}
.text-body-sm-muted {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.text-body-sm-gray600 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.text-body-xs-muted {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.text-10-gray-500 {
    font-size: 10px;
    color: var(--color-gray-500);
}
.font-medium-primary {
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}
.font-bold-primary {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.font-bold-green-600 {
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
}
.font-bold-red-600 {
    font-weight: var(--font-weight-bold);
    color: var(--color-red-600);
}
.font-bold-yellow-600 {
    font-weight: var(--font-weight-bold);
    color: var(--color-yellow-600);
}
.kpi-value-lg-primary {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.kpi-value-lg-green {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
}
.kpi-value-lg-yellow {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-yellow-600);
}
.kpi-value-base-primary {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.kpi-value-base-green {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-green-600);
}
.kpi-value-base-yellow {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-yellow-600);
}
.kpi-value-base-red {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-red-600);
}

.card-section-title-sm {
    margin: 0;
    font-size: var(--font-size-sm);
}
.card-section-title-base-bold {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.button-row-compact {
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.mr-4px { margin-right: 4px; }

.cruise-participant-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    background: var(--dyn-color, var(--color-gray-400));
}

.inline-chip-primary-soft {
    background: var(--color-primary-50);
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.mb-0-mt-2 {
    margin-bottom: 0;
    margin-top: var(--spacing-2);
}

.p-2-3 {
    padding: var(--spacing-2) var(--spacing-3);
}

.font-size-10 { font-size: 10px; }
.font-size-11 { font-size: 11px; }

.text-right-sm-11 {
    text-align: right;
    font-size: 11px;
}

.flex-between-10 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-bottom: 2px;
}

.grid-cols-6-custom {
    grid-template-columns: repeat(6, 1fr);
}

.grid-autofill-120 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-2);
}

.grid-autofill-140 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-2);
}

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

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

.cruise-flex-modal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 0;
}

.cruise-flex-modal-body-single {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.portal-input-compact {
    width: 160px;
    height: 32px;
    font-size: 0.875rem;
    padding-left: 32px;
}

.portal-select-compact {
    width: auto;
    min-width: 140px;
    height: 32px;
    font-size: 0.875rem;
    padding-right: 28px;
}

.portal-search-field-icon-sm {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}

.btn-icon-sm-compact {
    padding: var(--spacing-1) var(--spacing-2);
}

.max-w-500 { max-width: 500px; }
.max-h-200 { max-height: 200px; }

.gallery-edit-preview {
    max-width: 100%;
    max-height: 200px;
}

.gallery-category-icon {
    width: 20px;
    text-align: center;
}

.cruise-cs-search-input {
    padding-left: 40px;
    padding-right: 40px;
}

.cruise-cs-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.cruise-cs-th-household {
    width: 80px;
    text-align: center;
}

.cruise-cs-page-indicator {
    min-width: 80px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.text-danger { color: var(--color-danger, #dc2626); }
.text-gray-300 { color: var(--color-gray-300); }

.cruise-cabin-counter-success-dark { background: var(--color-success-700); }
.cruise-cabin-counter-error { background: var(--color-error); }

.cruise-shore-excursion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-2);
}
.cruise-shore-excursion-port {
    padding: var(--spacing-2);
    background: var(--color-gray-50);
    border-radius: 6px;
}
.cruise-shore-excursion-port-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-xs);
}
.cruise-shore-excursion-item {
    font-size: 10px;
    padding: 2px 0;
    border-top: 1px solid var(--color-gray-200);
}
.cruise-services-category-header {
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-gray-50);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
}
.cruise-services-category-section {
    border-bottom: 1px solid var(--color-gray-200);
}
.cruise-services-total-bar {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-100);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}
.cruise-services-name-col { width: 35%; }

.portal-inline-checkbox-label {
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cruise-invoice-type-card {
    padding: var(--spacing-2);
    background: var(--color-gray-50);
    border-radius: 6px;
}
.cruise-invoice-type-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: 2px;
    font-size: var(--font-size-xs);
}

.dashboard-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}
.text-success { color: var(--color-success); }

.page-title-xl {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}
.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
}

.mix-blend-hard-light { mix-blend-mode: hard-light; }
.mix-blend-plus-darker { mix-blend-mode: plus-darker; }

.login-forgot-link {
    display: block;
    text-align: center;
    margin-top: var(--spacing-4);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
}
.password-cancel-link {
    margin-top: 12px;
    display: block;
    text-align: center;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
}

.max-w-150 { max-width: 150px; }
.max-w-160 { max-width: 160px; }
.max-w-200 { max-width: 200px; }
.max-w-220 { max-width: 220px; }
.text-075rem { font-size: 0.75rem; }

.text-primary { color: var(--color-primary); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-900 { color: var(--color-gray-900); }

.bookings-group-link {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.stats-grid-autofit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}
.stat-value-2xl-primary {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.stat-value-2xl-warning {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-warning);
}
.stat-value-2xl-success {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
}
.stat-label-sm {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-top: var(--spacing-1);
}
.portal-tabs-bar {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}
.portal-table-container-flat {
    box-shadow: none;
    border-radius: 0;
}
.portal-card-footer-padded {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}
.booking-tag-xs {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    margin-top: 2px;
}

/* --- Groups Migration (fn: inline-style migration) --- */

.groups-recipient-box {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
}
.icon-primary-mr-1 {
    color: var(--color-primary);
    margin-right: var(--spacing-1);
}
.groups-accordion-btn {
    padding: var(--spacing-3) var(--spacing-4);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.border-t-gray-200 { border-top: 1px solid var(--color-gray-200); }
.border-gray-200 { border-color: var(--color-gray-200); }
.portal-modal-body-scroll-450 {
    padding: var(--spacing-4);
    max-height: 400px;
    overflow-y: auto;
}
.text-danger-sm { color: var(--color-danger); }
.portal-modal-overflow-scroll-flex {
    overflow-y: auto;
    flex: 1;
}
.label-checkbox-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}
.d-none-mt-3 {
    display: none;
    margin-top: var(--spacing-3);
}
.card-action-row-mt-6 {
    margin-top: var(--spacing-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
}
.portal-form-grid-2-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}
.header-row-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}
.d-flex-gap-4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}
.text-success-sm { color: var(--color-success); }
.font-size-9 { font-size: 9px; }
.text-10-ml-2px {
    font-size: 10px;
    margin-left: 2px;
}
.portal-input-icon-left {
    position: relative;
}
.portal-input-icon-left-icon {
    position: absolute;
    left: 12px;
    color: var(--color-gray-400);
}
.portal-input-with-icon-left {
    padding-left: 38px;
}
.cruise-modal-body-scroll-400 {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
}
.height-100vh-minus-120 {
    height: calc(100vh - 120px);
}
.text-2rem-icon { font-size: 2rem; }
.border-b-gray-border { border-bottom: 1px solid var(--color-border); }
.bg-gray-f9 { background: #f9fafb; }
.max-w-750 { max-width: 750px; }
.max-h-90vh-bare { max-height: 90vh; }
.field-cluster-mt-1 {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
}
.field-cluster-mt-1-wrap {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
    flex-wrap: wrap;
}
.mr-4px-xs {
    font-size: var(--font-size-xs);
    margin-right: 4px;
}
.mt-3-sm-muted {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.d-none-warning-ml-2 {
    display: none;
    color: var(--color-warning);
    margin-left: var(--spacing-2);
}
.groups-center-empty {
    flex: 1;
    text-align: center;
    color: var(--color-gray-500);
}
.groups-modal-scroll-flex {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-4);
}
.fw-medium-gray-700 {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}
.text-right-semibold {
    text-align: right;
    font-weight: var(--font-weight-semibold);
}
.d-flex-gap-1 {
    display: flex;
    gap: var(--spacing-1);
}
.empty-icon-2rem-gray-400 {
    font-size: 2rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-2);
    display: block;
}
.empty-state-centered-8 {
    padding: var(--spacing-8);
    text-align: center;
}
.z-10001 { z-index: 10001; }
.max-h-400 { max-height: 400px; }
.font-size-12 { font-size: 12px; }

.accommodation-stars-base {
    color: var(--color-warning);
    font-size: var(--font-size-base);
}
.text-warning { color: var(--color-warning); }
.portal-form-grid-3-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}
.portal-section-divider-ht {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.total-row-bold {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.filter-row-flex-wrap {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

/* --- Group-Calculations Edit: Zusaetzliche Utilities (19.04.2026) --- */

/* Font-Sizes */
.text-2rem        { font-size: 2rem; }

/* Widths */
.w-65px { width: 65px; }
.w-75px { width: 75px; }
.w-70px { width: 70px; }

/* Text-Overflow */
.text-ellipsis    { overflow: hidden; text-overflow: ellipsis; }

/* Font-weight shortcuts */
.font-500         { font-weight: 500; }

/* Group-Calculations: JS-Modal Calc Table Cells */
.gc-calc-td              { padding: var(--spacing-2); }
.gc-calc-td-right        { padding: var(--spacing-2); text-align: right; white-space: nowrap; }
.gc-calc-td-right-dim    { padding: var(--spacing-2); text-align: right; color: var(--color-gray-600); white-space: nowrap; }
.gc-calc-td-right-500    { padding: var(--spacing-2); text-align: right; font-weight: 500; white-space: nowrap; }
.gc-calc-td-right-blue   { padding: var(--spacing-2); text-align: right; color: var(--color-blue-700); white-space: nowrap; }
.gc-calc-td-left-ellipsis { padding: var(--spacing-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-calc-th-left         { padding: var(--spacing-2); text-align: left; }
.gc-calc-th-right        { padding: var(--spacing-2); text-align: right; }
.gc-calc-td-empty        { padding: var(--spacing-2); color: var(--color-gray-500); font-style: italic; }
.gc-calc-td-muted        { padding: var(--spacing-2); color: var(--color-gray-400); font-size: 0.75rem; }
.gc-calc-table           { width: 100%; font-size: 0.85rem; border-collapse: collapse; table-layout: fixed; }
.gc-calc-table-lg        { width: 100%; font-size: 0.9rem; border-collapse: collapse; table-layout: fixed; }

/* Group-Calculations: Pricing-Table Sticky Label Cells */
.gc-label-cell           { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: white; }
.gc-label-cell-blue      { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: var(--color-blue-50); font-weight: 600; }
.gc-label-cell-green     { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: var(--color-green-50); font-weight: 600; }
.gc-label-cell-purple    { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: var(--color-purple-50); font-weight: 500; }
.gc-label-cell-primary   { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: var(--color-primary-50); font-weight: 600; }
.gc-label-cell-yellow    { position: sticky; left: 0; padding: var(--spacing-1) var(--spacing-2); background: var(--color-yellow-50); }

/* Group-Calculations: Pricing-Table Data Cells */
.gc-data-cell            { text-align: center; padding: var(--spacing-1) var(--spacing-2); }
.gc-data-cell-blue       { text-align: center; padding: var(--spacing-1) var(--spacing-2); background: var(--color-blue-50); }
.gc-data-cell-green      { text-align: center; padding: var(--spacing-1) var(--spacing-2); background: var(--color-green-50); font-weight: 600; color: var(--color-green-700); }
.gc-data-cell-purple     { text-align: center; padding: var(--spacing-1) var(--spacing-2); background: var(--color-purple-50); }
.gc-data-cell-yellow     { text-align: center; padding: var(--spacing-1) var(--spacing-2); background: var(--color-yellow-50); }
.gc-data-cell-primary    { text-align: center; padding: var(--spacing-1) var(--spacing-2); background: var(--color-primary-50); position: relative; }

/* Group-Calculations: Narrow Input Cells */
.gc-narrow-input         { width: 55px; text-align: center; padding: 2px 4px; }
.gc-narrow-input-right   { width: 55px; text-align: right; padding: 2px 4px; }
.gc-tier-input           { width: 45px; text-align: center; padding: 2px 4px; }
.gc-price-input          { width: 75px; text-align: right; padding: 2px 4px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); font-size: 0.8rem; }
.gc-margin-input         { width: 65px; text-align: right; padding: 2px 4px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-sm); font-size: 0.8rem; }

/* Group-Calculations: Small Buttons */
.gc-btn-xs               { padding: 2px 6px; font-size: 0.7rem; }
.gc-btn-xs-disabled      { opacity: 0.5; cursor: default; padding: 2px 6px; font-size: 0.7rem; }
.gc-reset-price-btn      { background: none; border: none; color: var(--color-gray-400); cursor: pointer; padding: 1px; }
.gc-reset-price-btn:hover { color: var(--color-danger); }

/* Group-Calculations: Info/Preview-Boxes */
.gc-info-box-blue        { margin-top: var(--spacing-2); padding: var(--spacing-2); background: var(--color-blue-50); border-radius: var(--radius-md); font-size: 0.85rem; }
.gc-info-box-gray        { margin-top: var(--spacing-2); padding: var(--spacing-2); background: var(--color-gray-50); border-radius: var(--radius-md); font-size: 0.85rem; }
.gc-info-box-white       { margin-top: var(--spacing-3); padding: var(--spacing-2); background: white; border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--color-gray-600); }
.gc-info-box-gray-lg     { margin-top: var(--spacing-4); padding: var(--spacing-3); background: var(--color-gray-100); border-radius: var(--radius-md); }
.gc-info-box-scenario    { margin-top: var(--spacing-4); padding: var(--spacing-3); background: var(--color-gray-50); border-radius: var(--radius-md); }
.gc-preview-highlight    { background: var(--color-blue-50); padding: var(--spacing-4); border-radius: var(--radius-md); margin-bottom: var(--spacing-4); }

/* Group-Calculations: Group Link Items (Sidebar) */
.gc-group-link           { display: block; padding: var(--spacing-2); background: var(--color-gray-50); border-radius: var(--radius-sm); text-decoration: none; color: inherit; font-size: 0.8rem; }
.gc-group-link:hover     { background: var(--color-gray-100); }

/* Group-Calculations: Tiers-Footer */
.gc-tiers-footer         { padding: var(--spacing-2) var(--spacing-3); border-top: 1px solid var(--color-gray-200); display: flex; gap: var(--spacing-2); justify-content: space-between; align-items: center; }

/* Group-Calculations: Grid Layouts */
.gc-grid-item-form       { display: grid; grid-template-columns: 1fr auto auto 1fr 1fr; gap: var(--spacing-4); }
.gc-grid-1fr-auto        { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-4); }
.gc-grid-scenario-info   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-3); background: var(--color-gray-50); padding: var(--spacing-3); border-radius: var(--radius-md); }
.gc-grid-tier            { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--spacing-2); margin-bottom: var(--spacing-2); }
.gc-grid-charts          { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-6); margin-bottom: var(--spacing-6); }

/* Group-Calculations: Tab-Card Compact Padding */
.portal-card-header-compact { padding: var(--spacing-2) var(--spacing-3); }
.portal-card-body-compact   { padding: var(--spacing-3); }
.portal-card-body-flush     { padding: 0; }
.portal-card-body-flush-scroll { padding: 0; overflow-x: auto; }

/* Group-Calculations: Readonly/Disabled Input */
.gc-input-readonly       { background-color: var(--color-gray-100); }
.gc-input-readonly-right { text-align: right; background-color: var(--color-gray-100); cursor: not-allowed; }

/* Group-Calculations: Divider Line (vertical) */
.gc-divider-vertical     { border-left: 1px solid var(--color-gray-300); height: 1.5rem; display: inline-block; }

/* Group-Calculations: Flex-Justify-Space-Between */
.gc-flex-split           { display: flex; justify-content: space-between; align-items: center; }

/* Group-Calculations: Inline-Flex with gap */
.gc-inline-flex-2        { display: inline-flex; align-items: center; gap: 2px; }

/* Group-Calculations: Row highlight backgrounds (tr) */
.gc-row-blue             { background: var(--color-blue-100); font-weight: 600; }
.gc-row-green            { background: var(--color-green-100); font-weight: 600; }
.gc-row-purple           { background: var(--color-purple-100); font-weight: 600; }
.gc-row-gray             { background: var(--color-gray-200); }
.gc-row-purple-light     { background: var(--color-purple-50); }
.gc-row-green-light      { background: var(--color-green-50); }
.gc-row-bordered         { border-bottom: 1px solid var(--color-gray-200); }
.gc-row-bordered-dark    { border-bottom: 1px solid var(--color-gray-300); }

/* Group-Calculations: Amount Display */
.gc-amount-pill          { font-size: 1.25rem; font-weight: 700; color: var(--color-primary-700); }
.gc-participants-count   { color: var(--color-gray-400); font-size: 0.7rem; }
.gc-group-meta           { color: var(--color-gray-500); margin-left: 4px; font-size: 0.85rem; }

/* Group-Calculations Checkbox Sizes */
.w-18px { width: 18px; }
.h-18px { height: 18px; }

/* Group-Calculations: Max-Heights */
.max-h-400 { max-height: 400px; overflow-y: auto; }

/* Group-Calculations: Paragraphs inside boxes */
.gc-m-reset-3    { margin: 0 0 var(--spacing-3) 0; }
.gc-m-reset-2    { margin: 0 0 var(--spacing-2) 0; }
.gc-m-top-2-0    { margin: var(--spacing-2) 0 0 0; }
.gc-m-heading-primary { margin: 0 0 var(--spacing-2) 0; color: var(--color-primary-600); }

/* ===================================================================
   Settings/CI Page (ci.blade.php)
   =================================================================== */

/* AI Website Extractor Banner */
.ci-ai-banner {
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.ci-ai-banner-body { padding: var(--spacing-5); }
.ci-ai-icon-circle {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ci-ai-icon {
    font-size: 24px;
    color: white;
}
.ci-ai-input {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    border: none;
    min-width: 280px;
    font-size: var(--font-size-sm);
}
.ci-ai-btn {
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    color: #764ba2;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: all 0.2s;
}
.ci-ai-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.ci-ai-btn-apply {
    padding: var(--spacing-3) var(--spacing-5);
    background: #38a169;
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.ci-ai-results {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-5);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ci-ai-text-white-soft   { color: rgba(255, 255, 255, 0.8); }
.ci-ai-text-white-softer { color: rgba(255, 255, 255, 0.7); }
.ci-ai-text-white-softest{ color: rgba(255, 255, 255, 0.9); }

/* CI Color Picker Row */
.ci-color-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.ci-color-input-native {
    width: 50px;
    height: 38px;
    border: none;
    cursor: pointer;
}
.ci-color-input-text {
    flex: 1;
    font-family: monospace;
}
.ci-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
}

/* CI Color Preview Box */
.ci-color-preview-box {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}
.ci-color-preview-inner {
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
}
.ci-preview-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-3);
}
.ci-preview-btn {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
}

/* CI Font Preview */
.ci-font-preview-box {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}
.ci-font-preview-heading { font-size: 18px; margin-bottom: var(--spacing-2); }
.ci-font-preview-body    { font-size: 12px; }

/* CI Page Layout helpers */
.ci-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}
.ci-submit-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}
.ci-margins-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}
.ci-flex-1-min-200 { flex: 1; min-width: 200px; }
.ci-min-w-150      { flex-shrink: 0; min-width: 150px; }
.ci-banner-content-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}
.ci-banner-results-row {
    display: flex;
    gap: var(--spacing-6);
    flex-wrap: wrap;
    align-items: flex-start;
}

/* CI Extracted Colors rendering (used by JS) */
.ci-extracted-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ci-extracted-color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.ci-extracted-color-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}
.ci-extracted-more-row {
    display: flex;
    gap: 4px;
    margin-left: 16px;
    flex-wrap: wrap;
}
.ci-extracted-dot {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.ci-fonts-line { margin-bottom: 8px; }
.ci-fonts-more {
    margin-top: 12px;
    font-size: 11px;
    opacity: 0.7;
}
.ci-success-inner { text-align: center; padding: 16px; }
.ci-success-icon {
    font-size: 32px;
    color: #38a169;
    margin-bottom: 8px;
}
.ci-success-title {
    color: white;
    font-weight: 600;
}
.ci-success-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.ci-ai-alert { margin-bottom: var(--spacing-6); }

/* ===================================================================
   Settings/Users Page (users.blade.php)
   =================================================================== */

/* License Overview Card */
.users-license-card {
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
}
.users-license-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.users-license-info { display: flex; align-items: center; gap: 16px; }
.users-license-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.users-license-icon { color: white; font-size: 1.25rem; }
.users-license-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}
.users-license-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.users-license-stats { display: flex; gap: 24px; align-items: center; }
.users-license-stat  { text-align: center; }
.users-license-stat-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
}
.users-license-stat-value--total      { color: #1d4ed8; }
.users-license-stat-value--used       { color: #f59e0b; }
.users-license-stat-value--free       { color: #10b981; }
.users-license-stat-value--free-zero  { color: #ef4444; }
.users-license-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
}
.users-license-progress-wrap  { width: 120px; }
.users-license-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.users-license-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #10b981 0%, #10b981 100%);
}
.users-license-progress-fill--warning {
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 100%);
}
.users-license-progress-caption {
    font-size: 11px;
    color: var(--color-gray-500);
    margin-top: 4px;
    text-align: center;
}
.users-license-alert {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 12px;
}
.users-license-alert--danger  { background: #fef2f2; border: 1px solid #fecaca; }
.users-license-alert--warning { background: #fffbeb; border: 1px solid #fcd34d; }
.users-license-alert--danger  .users-license-alert-icon  { color: #ef4444; }
.users-license-alert--warning .users-license-alert-icon  { color: #f59e0b; }
.users-license-alert--danger  .users-license-alert-text  { color: #991b1b; font-size: var(--font-size-sm); }
.users-license-alert--warning .users-license-alert-text  { color: #92400e; font-size: var(--font-size-sm); }

/* Locked Form (when license limit reached) */
.users-form-locked { opacity: 0.5; pointer-events: none; }
.users-lock-box {
    padding: 24px;
    text-align: center;
    background: #fef2f2;
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}
.users-lock-box-icon {
    font-size: 2rem;
    color: #ef4444;
    margin-bottom: 12px;
}
.users-lock-box-title { color: #991b1b; margin-bottom: 8px; }
.users-lock-box-text  { color: #991b1b; margin-bottom: 0; }

/* Users Modals (custom backdrop) */
.users-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.users-modal--top { z-index: 1001; }
.users-modal-card {
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}
.users-modal-card--sm { max-width: 500px; width: 90%; }
.users-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.users-new-password-header { background: var(--color-success); color: white; }
.users-new-password-header .portal-card-title { color: white; }
.users-password-display {
    background: var(--color-gray-100);
    padding: var(--spacing-4);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 18px;
    text-align: center;
    margin-bottom: var(--spacing-4);
}
.users-password-copy-btn {
    margin-left: var(--spacing-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
}
.users-name-cell {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}
.users-table-container { box-shadow: none; border-radius: 0; }
.users-modal-footer {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
}
.users-modal-body-p { margin-bottom: var(--spacing-4); }
.users-modal-body-p--muted {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}
.users-warning-text {
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}
.users-submit-row { margin-top: var(--spacing-4); }
.users-form-grid-gap { margin-top: var(--spacing-3); }
.users-profile-hint {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-2);
}

/* Asset Picker image + placeholder (used in users modal JS) */
.users-asset-preview-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-lg);
    object-fit: contain;
}
.users-asset-placeholder {
    padding: var(--spacing-6);
    background: var(--color-gray-50);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
}
.users-asset-placeholder-icon {
    font-size: 2rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-2);
}
.users-asset-placeholder-text {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* ===================================================================
   Settings/Masks Page (masks.blade.php)
   =================================================================== */

.masks-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.masks-stat-body {
    text-align: center;
    padding: var(--spacing-4);
}
.masks-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.masks-stat-label {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.masks-tab-header {
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 0;
}
.masks-tab-nav {
    display: flex;
    gap: var(--spacing-1);
}

.masks-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}
.masks-header-row-desc {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin: 0;
}
.masks-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}
.masks-category-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.masks-clickable { cursor: pointer; }

.masks-salutation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}
.masks-salutation-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2);
}

.masks-desc-block { margin-bottom: var(--spacing-4); }
.masks-desc-block p {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-4) 0;
}
.masks-card-spaced { margin-bottom: var(--spacing-4); }
.masks-empty-templates {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing-4);
}
.masks-template-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}
.masks-template-row .portal-form-group { margin-bottom: 0; }
.masks-template-actions {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.masks-preview-card {
    margin-bottom: var(--spacing-4);
    background: var(--color-blue-50);
    border-color: var(--color-blue-200);
}
.masks-preview-card .category-header {
    border-bottom-color: var(--color-blue-200);
}
.masks-preview-body { padding: var(--spacing-2); }
.masks-preview-intro {
    font-size: var(--font-size-sm);
    color: var(--color-blue-700);
    margin-bottom: var(--spacing-3);
}
.masks-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}
.masks-preview-label {
    font-size: var(--font-size-xs);
    color: var(--color-blue-600);
    font-weight: var(--font-weight-medium);
}
.masks-preview-value {
    background: white;
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.masks-save-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

.masks-form-hint {
    color: var(--color-gray-500);
}
.masks-color-input {
    height: 42px;
    padding: 4px;
}
.masks-modal-footer {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-4);
}

.masks-info-card {
    margin-top: var(--spacing-4);
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
}
.masks-info-row {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}
.masks-info-icon {
    color: var(--color-blue-500);
    font-size: var(--font-size-lg);
    margin-top: 2px;
}
.masks-info-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
    margin-bottom: var(--spacing-1);
}
.masks-info-text {
    color: var(--color-blue-700);
    font-size: var(--font-size-sm);
    margin: 0;
}

.text-pink-500   { color: #ec4899; }
.text-purple-500 { color: #a855f7; }
.text-blue-800   { color: #1e40af; }

/* ===================================================================
   Settings/Tour32 Import (tour32-import.blade.php)
   =================================================================== */

.t32-grid-col-span-2 { grid-column: span 2; }
.t32-form-footer {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
}
.t32-footer-wrap {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.t32-tab-bar {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
}
.t32-mapping-scroll {
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}
.t32-mapping-head {
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 1;
}
.t32-th-40 { width: 40%; }
.t32-th-20 { width: 20%; }
.t32-field-code {
    font-size: 11px;
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}
.t32-footer-note { align-self: center; }

.t32-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
}
.t32-import-card { border: 1px solid var(--color-gray-200); }
.t32-import-card-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.t32-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.t32-icon-box i { color: white; font-size: 1.25rem; }
.t32-icon-box--blue   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.t32-icon-box--green  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.t32-icon-box--orange { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.t32-icon-box--purple { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.t32-card-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.t32-progress-panel {
    margin-top: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
}
.t32-progress-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}
.t32-spinner-24 { width: 24px; height: 24px; }
.t32-progress-label { font-weight: var(--font-weight-medium); }
.t32-progress-track {
    height: 8px;
    border-radius: 4px;
    background: var(--color-gray-200);
}
.t32-progress-fill {
    width: 0%;
    background: var(--color-primary);
}
.t32-result-wrap { margin-top: var(--spacing-6); }

.t32-result-success {
    padding: var(--spacing-4);
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: var(--border-radius);
}
.t32-result-error {
    padding: var(--spacing-4);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--border-radius);
}
.t32-result-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.t32-result-success-icon { color: #10b981; font-size: 1.5rem; }
.t32-result-error-icon   { color: #ef4444; font-size: 1.5rem; }
.t32-result-success-title { color: #065f46; }
.t32-result-error-title   { color: #991b1b; }
.t32-result-success-meta {
    margin-top: var(--spacing-2);
    color: #047857;
}

.t32-badge-purple { background: #8b5cf6; color: white; }

/* Group-Calculations: Padding for Modal Body */
.gc-p-4          { padding: var(--spacing-4); }

/* Group-Calculations: Info-Box with Margin-Top-4 */
.gc-info-box-blue-mt4    { margin-top: var(--spacing-4); padding: var(--spacing-3); background: var(--color-blue-50); border-radius: var(--radius-md); font-size: 0.85rem; }

/* Group-Calculations: Center flex with flex-wrap */
.gc-center-wrap  { margin-top: var(--spacing-4); display: flex; gap: var(--spacing-2); justify-content: center; flex-wrap: wrap; }

/* Group-Calculations: Inline-Flex 2px */
.gc-inline-flex-2-small  { display: inline-flex; gap: 2px; }

/* Group-Calculations: 1fr 1fr 1fr grid with gap-3 + mt-2 */
.gc-grid-3-mt2   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-3); margin-top: var(--spacing-2); }

/* Group-Calculations: charts grid */
.gc-grid-2-mb6   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-6); margin-bottom: var(--spacing-6); }

/* Group-Calculations: 2fr 1fr grids */
.gc-grid-2fr-1fr-3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-3); }
.gc-grid-2fr-1fr-4 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-4); }

/* Group-Calculations: Margin-right-2px */
.gc-mr-2px       { margin-right: 2px; }
.gc-ml-1-text-8  { margin-left: var(--spacing-1); font-size: 0.7rem; }

/* Group-Calculations: Pricing reset button font size */
.gc-text-6       { font-size: 0.6rem; }

/* Group-Calculations: Empty-state td */
.gc-empty-td     { text-align: center; padding: var(--spacing-2); color: var(--color-gray-500); font-size: 0.8rem; }

/* Group-Calculations: Small font inline */
.gc-text-7-dim   { font-size: 0.65rem; color: var(--color-gray-500); }
.gc-text-badge-xs { font-size: 0.65rem; padding: 1px 4px; flex-shrink: 0; }

/* Group-Calculations: 1fr 1fr 1fr 1fr grid */
.gc-grid-4-3     { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--spacing-3); }

/* Group-Calculations: Specific Widths */
.w-150px { width: 150px; }
.w-140px { width: 140px; }
.w-180px { width: 180px; }
.w-60px  { width: 60px; }
.w-50px  { width: 50px; }

/* Group-Calculations: Table-Full widths */
.gc-table-fixed     { width: 100%; font-size: 0.85rem; border-collapse: collapse; table-layout: fixed; }
.gc-table-fixed-lg  { width: 100%; font-size: 0.9rem; border-collapse: collapse; table-layout: fixed; }

/* Group-Calculations: Td-right-1-2 */
.gc-td-right-1-2 { text-align: right; padding: var(--spacing-1) var(--spacing-2); }

/* Group-Calculations: Readonly VK */
.gc-vk-readonly  { text-align: right; background-color: var(--color-gray-100); cursor: not-allowed; }

/* Group-Calculations: Center-Italic Muted */
.gc-center-empty { padding: var(--spacing-2); color: var(--color-gray-500); font-style: italic; }

/* Group-Calculations: Text-Small Italic Muted */
.gc-col-auto     { width: auto; font-size: 0.8rem; }

/* Group-Calculations: Width-50px Combined */
.w-50px-py-1-px-2 { width: 50px; padding: var(--spacing-1) var(--spacing-2); }
.w-100px-py-1-px-2 { width: 100px; padding: var(--spacing-1) var(--spacing-2); }
.w-120px-py-1-px-2 { width: 120px; padding: var(--spacing-1) var(--spacing-2); }

/* Group-Calculations: TH Utility */
.gc-th-right-sm  { width: 80px; text-align: right; }
.gc-th-center-60 { width: 60px; text-align: center; }

/* Group-Calculations: Widths with Text-Right */
.w-55px-right    { width: 55px; text-align: right; padding: 2px 4px; }
.w-55px-center   { width: 55px; text-align: center; padding: 2px 4px; }

/* Group-Calculations: Plain button reset (transparent) */
.btn-plain-reset { background: none; border: none; cursor: pointer; color: inherit; padding: 0; line-height: 1; }

/* Group-Calculations Show: Edit-Modal */
.price-edit-modal-wide { max-width: 900px; }
.tier-range-hint { font-size: 0.8rem; margin-bottom: var(--spacing-3); }
.calc-header-row {
    margin-bottom: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
}
.calc-header-grid { font-weight: 600; font-size: 0.8rem; color: var(--color-gray-600); }
.cursor-default { cursor: default; }
.font-normal { font-weight: normal; }
.justify-center { justify-content: center; }

.text-inherit { color: inherit; }
.btn-icon-tight { padding: 2px 4px; }

.groups-empty-state {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}
.groups-empty-icon {
    color: var(--color-gray-400);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-2);
}
.groups-empty-text {
    margin: 0;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.group-search-list {
    margin-top: var(--spacing-3);
    max-height: 300px;
    overflow-y: auto;
}
.group-search-empty {
    text-align: center;
    padding: var(--spacing-4);
    color: var(--color-gray-500);
}
.group-search-result-card {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    cursor: pointer;
    transition: all 0.2s;
}

.profit-center-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.price-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.catalog-view-fullheight {
    height: calc(100vh - 120px);
}

.meta-box {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }

/* ===================================================================
   Settings/Backups (backups/*.blade.php)
   =================================================================== */

.backup-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.backup-header-actions {
    display: flex;
    gap: var(--spacing-2);
}
.backup-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.backup-stat-body {
    text-align: center;
    padding: var(--spacing-4);
}
.backup-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}
.backup-stat-value--primary { color: var(--portal-primary); }
.backup-stat-value--success { color: var(--color-success); }
.backup-stat-value--info    { color: var(--color-info); }
.backup-stat-value--gray    { color: var(--color-gray-500); }
.backup-stat-label {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.backup-filter-card { margin-bottom: var(--spacing-4); }
.backup-filter-body { padding: var(--spacing-3); }
.backup-filter-form {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
}
.backup-filter-select {
    width: auto;
    min-width: 150px;
}
.backup-filter-select--wide { min-width: 180px; }

.backup-empty {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-gray-500);
}
.backup-empty-icon {
    font-size: 3rem;
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-3);
}
.backup-empty-title { font-size: var(--font-size-lg); margin: 0; }
.backup-empty-sub   { font-size: var(--font-size-sm); margin-top: var(--spacing-1); }
.backup-empty-cta   { margin-top: var(--spacing-4); }

.backup-col-stack {
    display: flex;
    flex-direction: column;
}
.backup-db-name { font-weight: var(--font-weight-medium); }
.backup-db-meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.backup-rows-count {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-left: var(--spacing-1);
}
.backup-error-icon {
    color: var(--color-error);
    margin-left: 4px;
    cursor: help;
}
.backup-expire-empty { color: var(--color-gray-400); }
.backup-row-actions {
    display: flex;
    gap: var(--spacing-1);
}
.backup-pagination {
    padding: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.backup-th-actions { width: 120px; }

.backup-info-card {
    margin-top: var(--spacing-4);
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
}
.backup-info-row {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}
.backup-info-icon {
    color: var(--color-blue-500);
    font-size: var(--font-size-lg);
    margin-top: 2px;
}
.backup-info-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
    margin-bottom: var(--spacing-1);
}
.backup-info-text {
    color: var(--color-blue-700);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Backups Browse */
.backup-browse-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}
.backup-browse-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}
.backup-browse-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-left: calc(var(--spacing-8) + var(--spacing-3));
}
.backup-browse-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-6);
}
.backup-browse-sidebar-card {
    position: sticky;
    top: var(--spacing-4);
}
.backup-browse-empty {
    text-align: center;
    padding: var(--spacing-12);
}
.backup-browse-empty-icon {
    font-size: 3rem;
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-4);
}
.backup-browse-empty-title {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}
.backup-browse-empty-sub { color: var(--color-gray-500); }
.backup-browse-error-card { border-color: var(--color-error); }
.backup-browse-error {
    text-align: center;
    padding: var(--spacing-8);
}
.backup-browse-error-icon {
    font-size: 2rem;
    color: var(--color-error);
    margin-bottom: var(--spacing-4);
}
.backup-browse-error-title { color: var(--color-error); }
.backup-browse-error-sub   { color: var(--color-gray-600); }
.backup-browse-toolbar { margin-bottom: var(--spacing-4); }
.backup-browse-toolbar-body {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}
.backup-browse-search-form { flex: 1; min-width: 200px; }
.backup-browse-info {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}
.backup-browse-selection-row {
    display: flex;
    gap: var(--spacing-2);
}
.backup-browse-table-wrap {
    padding: 0;
    overflow-x: auto;
}
.backup-browse-empty-records {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-gray-500);
}
.backup-browse-col-check   { width: 40px; }
.backup-browse-col-more    { color: var(--color-gray-400); }
.backup-browse-col-actions { width: 80px; }
.backup-browse-row-actions {
    display: flex;
    gap: var(--spacing-1);
}
.backup-browse-pager {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
}
.backup-browse-pager-ellipsis {
    align-self: center;
    color: var(--color-gray-400);
}
.backup-browse-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}
.backup-browse-modal-card {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.backup-browse-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.backup-browse-modal-body {
    overflow-y: auto;
    flex: 1;
}
.backup-browse-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
}
.backup-browse-preview-spinner-box {
    text-align: center;
    padding: var(--spacing-8);
}
.backup-browse-preview-spinner {
    font-size: 2rem;
    color: var(--color-primary);
}
.backup-browse-preview-alert { margin-bottom: var(--spacing-4); }
.backup-browse-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.backup-browse-compare-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}
.backup-browse-compare-title--success { color: var(--color-success); }
.backup-browse-compare-title--muted   { color: var(--color-gray-500); }
.backup-browse-deleted-box {
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    text-align: center;
}
.backup-browse-hidden-form { display: none; }

/* Backups Create/Settings/Show */
.backup-form-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-6);
}
.backup-card-spaced { margin-bottom: var(--spacing-4); }
.backup-db-card-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.backup-db-icon-box {
    width: 48px;
    height: 48px;
    background: var(--color-primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.backup-db-icon {
    font-size: var(--font-size-xl);
    color: var(--portal-primary);
}
.backup-db-name-lg { font-size: var(--font-size-base); }
.backup-db-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}
.backup-isolation-info {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-info-light, #dbeafe);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-info, #3b82f6);
}
.backup-isolation-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: flex-start;
}
.backup-isolation-icon {
    color: var(--color-info, #3b82f6);
    margin-top: 2px;
}
.backup-isolation-title {
    font-size: var(--font-size-sm);
    color: var(--color-info-dark, #1e40af);
}
.backup-isolation-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: var(--spacing-1) 0 0;
}
.backup-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.backup-header-btn-row {
    display: flex;
    gap: var(--spacing-2);
}
.backup-loading-box {
    text-align: center;
    padding: var(--spacing-8);
}
.backup-loading-icon {
    font-size: 2rem;
    color: var(--portal-primary);
}
.backup-loading-label {
    margin-top: var(--spacing-2);
    color: var(--color-gray-500);
}
.backup-no-tables {
    text-align: center;
    padding: var(--spacing-4);
    color: var(--color-gray-500);
}
.backup-no-tables-icon { color: var(--color-warning); }
.backup-s3-unconfigured {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.backup-summary-card { background: var(--color-gray-50); }

.backup-heading-icon { margin-right: var(--spacing-2); }
.backup-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.backup-grid-2--mt4 {
    margin-top: var(--spacing-4);
}
.backup-section-divider {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.backup-section-label { margin-bottom: var(--spacing-2); }
.backup-col-stack-gap-2 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.backup-col-stack-gap-3 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.backup-form-top { margin-top: var(--spacing-4); }
.backup-connection-note {
    margin-left: var(--spacing-3);
    font-size: var(--font-size-sm);
}
.backup-sticky-actions {
    margin-bottom: var(--spacing-4);
    position: sticky;
    top: var(--spacing-4);
}
.backup-settings-info-card {
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-200);
}

/* Backup Show */
.backup-show-storage-aws  { color: var(--color-info); }
.backup-show-storage-local { color: var(--color-gray-500); }
.backup-show-badge-expired { margin-left: var(--spacing-1); }
.backup-show-error-note { margin-top: var(--spacing-4); }
.backup-show-code {
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--font-size-sm);
}
.backup-show-total-row { background: var(--color-gray-50); }
.backup-show-action-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.backup-show-no-path {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* Backup Restore */
.backup-restore-warning-card {
    margin-bottom: var(--spacing-4);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
}
.backup-restore-warning-row {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}
.backup-restore-warning-icon {
    color: var(--color-warning-dark);
    font-size: var(--font-size-xl);
    margin-top: 2px;
}
.backup-restore-warning-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-dark);
    margin-bottom: var(--spacing-1);
}
.backup-restore-warning-text {
    color: var(--color-warning-dark);
    font-size: var(--font-size-sm);
    margin: 0;
}
.backup-restore-confirm-label { color: var(--color-error); }

/* ===================================================================
   Settings/Integrations/PandaDoc
   =================================================================== */

.pd-alert-spaced { margin-bottom: var(--spacing-4); }
.pd-form-locked { opacity: 0.5; pointer-events: none; }
.pd-info-box-spaced { margin-bottom: var(--spacing-4); }
.pd-hint-success { color: #059669; }
.pd-hint-error   { color: #dc2626; }
.pd-info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}
.pd-info-icon-mt2 { margin-top: 2px; }

.pd-card-spaced { margin-top: var(--spacing-6); }
.pd-input-group {
    display: flex;
    gap: 0;
}
.pd-input-group-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.pd-input-group-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pd-events-box {
    background: var(--color-gray-50);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--color-gray-200);
}
.pd-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pd-events-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-200);
}
.pd-events-list li:last-child { border-bottom: none; }
.pd-event-code {
    background: var(--color-gray-200);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.pd-advanced-grid-mt4 { margin-top: var(--spacing-4); }
.pd-advanced-actions {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
}
.pd-docs-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}
.pd-docs-text {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}
.pd-docs-list {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
    padding-left: 1.5rem;
}
.pd-placeholders-intro {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-3);
}
.pd-placeholder-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* ===================================================================
   Settings/Webhooks
   =================================================================== */

.wh-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.wh-back-link { text-decoration: none; }
.wh-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.wh-header-actions {
    display: flex;
    gap: var(--spacing-2);
}
.wh-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.wh-details-key {
    font-weight: var(--font-weight-medium);
    width: 30%;
}
.wh-details-key-auto { font-weight: var(--font-weight-medium); }
.wh-url-code {
    font-size: var(--font-size-sm);
    word-break: break-all;
}
.wh-events-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.wh-badge-xs { font-size: var(--font-size-xs); }

.wh-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    text-align: center;
}
.wh-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}
.wh-stat-value--primary { color: var(--portal-primary); }
.wh-stat-label { font-size: var(--font-size-sm); }

.wh-secret-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.wh-secret-display {
    flex: 1;
    padding: var(--spacing-2);
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: var(--font-size-sm);
}
.wh-info-box-spaced { margin-top: var(--spacing-4); }
.wh-info-code { margin-left: var(--spacing-2); }

.wh-table-container {
    box-shadow: none;
    border-radius: 0;
}
.wh-delivery-time { font-size: var(--font-size-sm); }
.wh-delivery-response { font-size: var(--font-size-sm); }

.wh-danger-card {
    margin-top: var(--spacing-4);
    border-color: var(--color-red-200);
}
.wh-danger-header { background: var(--color-red-50); }
.wh-danger-title { color: var(--color-red-700); }
.wh-danger-body-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wh-danger-sub {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ===================================================================
   Settings/General
   =================================================================== */

.gen-social-fb { color: #1877f2; margin-right: 8px; }
.gen-social-ig { color: #e4405f; margin-right: 8px; }
.gen-social-tw { color: #1da1f2; margin-right: 8px; }
.gen-social-li { color: #0a66c2; margin-right: 8px; }
.gen-social-yt { color: #ff0000; margin-right: 8px; }
.gen-social-tt { color: #000000; margin-right: 8px; }

.gen-preview-box {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}
.gen-preview-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}
.gen-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
}
.gen-preview-label { color: var(--color-gray-500); display: block; font-size: var(--font-size-xs); }
.gen-preview-value { font-weight: var(--font-weight-bold); }
.gen-preview-value--primary { color: var(--color-primary); }
.gen-preview-value--success { color: var(--color-success); }

/* --- Groups Batch 3: hotel-assignment-overview, itinerary-content-form, passolution-result-sections --- */

/* Hotel-Assignment Modal */
.portal-modal-content-800-col {
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.portal-modal-body-scroll-flex-nopad {
    overflow-y: auto;
    flex: 1;
    padding: 0;
}
.ha-toolbar {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
}
.ha-search-wrap {
    flex: 1;
    max-width: 250px;
}
.ha-loading {
    text-align: center;
    padding: var(--spacing-6);
}
.ha-loading-spinner {
    font-size: 2rem;
    color: var(--color-gray-400);
}
.ha-status-wrap {
    margin: var(--spacing-3);
}
.ha-row-content {
    flex: 1;
    min-width: 0;
}
.ha-badge-xs {
    font-size: 10px;
}
.ha-hotel-info-warning { color: var(--color-warning); }
.ha-hotel-info-success { color: var(--color-success); }
.ha-room-type-hint {
    font-weight: normal;
    text-transform: none;
}

/* Itinerary language tabs (shared: content-form + itinerary-template-modal etc.) */
.translatable-normal-tabs .translatable-tab,
.itinerary-lang-tabs .translatable-tab {
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.translatable-normal-tabs .translatable-tab.active,
.itinerary-lang-tabs .translatable-tab.active {
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary-700, #4338ca);
    border-color: var(--color-primary-300, #a5b4fc);
}

/* Passolution Result Sections */
.psl-sections-wrap {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.psl-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
}
.psl-section-body {
    font-size: var(--font-size-sm);
}
.psl-list {
    margin: 0;
    padding-left: var(--spacing-4);
}
.psl-kv-block { margin-bottom: var(--spacing-2); }
.psl-kv-nested { margin-left: var(--spacing-3); }
.psl-kv-row    { margin-bottom: var(--spacing-1); }

/* ========================================
 * Settings: Room Categories
 * ======================================== */
.rc-col-sm { width: 80px; }
.rc-col-actions { width: 120px; text-align: right; }
.rc-code-system {
    font-family: monospace;
    font-weight: var(--font-weight-bold);
    background: var(--color-gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}
.rc-code-tenant {
    font-family: monospace;
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-50);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--color-primary-700);
}
.rc-row-actions {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
}
.rc-empty {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-gray-500);
}
.rc-add-grid {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 100px;
    gap: var(--spacing-4);
    align-items: end;
}
.rc-input-uppercase { text-transform: uppercase; }
.rc-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}
.rc-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

/* ========================================
 * Settings: Email Signatures Form
 * ======================================== */
.es-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-4);
}
.es-breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
}
.es-breadcrumb-sep { margin: 0 var(--spacing-2); }
.es-required { color: var(--color-danger); }
.es-error-text {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}
.es-form-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-6);
}
.es-options-row {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}
.es-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}
.es-form-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-end;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.es-sidebar-card { position: sticky; top: var(--spacing-4); }
.es-sidebar-body {
    max-height: 500px;
    overflow-y: auto;
}
.es-group-section { margin-bottom: var(--spacing-4); }
.es-group-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2);
    text-transform: uppercase;
}
.es-placeholder-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}
.es-placeholder-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}
.es-placeholder-btn:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
}
.es-placeholder-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.es-placeholder-code {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: var(--color-primary-50);
    padding: 2px 6px;
    border-radius: 4px;
}
.es-hint-section {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.es-hint-text {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
.es-preview-box {
    padding: var(--spacing-3);
    background: var(--color-gray-50);
    border-radius: var(--border-radius);
    min-height: 100px;
    font-size: var(--font-size-sm);
}
.es-preview-empty {
    color: var(--color-gray-400);
    text-align: center;
}

/* ========================================
 * Settings: ProfitCenter Detail
 * ======================================== */
.pc-tab-bar {
    display: flex;
    gap: var(--spacing-4);
    border-bottom: 2px solid var(--color-gray-200);
}
.pc-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
}
.pc-section-hint {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}
.pc-form-grid-2-gap6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}
.pc-form-grid-2-gap8 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}
@media (max-width: 768px) {
    .pc-form-grid-2-gap6,
    .pc-form-grid-2-gap8 {
        grid-template-columns: 1fr;
    }
}
.pc-error-text {
    color: var(--color-red-600);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}
.pc-form-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}
.pc-form-actions-simple {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-6);
}
.pc-section-spaced { margin-bottom: var(--spacing-6); }
.pc-payment-card {
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
}
.pc-payment-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
}
.pc-days-row {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.pc-radio-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.pc-radio-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.pc-remaining-form-group { max-width: 300px; }

/* ──────────────────────────────────────────────────────────────── */
/* Accordion (fn-20: Haben-Tab Teilrechnungen + Revisionen)         */
/* ──────────────────────────────────────────────────────────────── */

.portal-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.portal-accordion-item {
    background-color: var(--portal-card-bg, #fff);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 150ms ease;
}

.portal-accordion-item.is-open {
    border-color: var(--color-primary, #c41e3a);
    box-shadow: var(--shadow-sm);
}

.portal-accordion-item.is-locked {
    border-left: 3px solid var(--color-warning, #f59e0b);
}

.portal-accordion-item.is-historical {
    opacity: 0.7;
    border-left: 3px solid var(--color-gray-400);
}

.portal-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    user-select: none;
    background-color: var(--color-gray-50);
    border-bottom: 1px solid transparent;
    transition: background-color 150ms ease;
}

.portal-accordion-header:hover {
    background-color: var(--color-gray-100);
}

.portal-accordion-item.is-open > .portal-accordion-header {
    background-color: var(--color-gray-100);
    border-bottom-color: var(--color-gray-200);
}

.portal-accordion-chevron {
    color: var(--color-gray-500);
    transition: transform 200ms ease;
    width: var(--spacing-4);
    flex-shrink: 0;
}

.portal-accordion-item.is-open > .portal-accordion-header .portal-accordion-chevron {
    transform: rotate(90deg);
}

.portal-accordion-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.portal-accordion-number {
    font-family: var(--font-family-mono, monospace);
    color: var(--color-gray-900);
}

.portal-accordion-total {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    white-space: nowrap;
    margin-left: auto;
}

.portal-accordion-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.portal-accordion-body {
    padding: var(--spacing-4);
    background-color: var(--portal-card-bg, #fff);
}

.portal-accordion-body-flush {
    padding: 0;
}

.portal-accordion-section {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

.portal-accordion-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.portal-accordion-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin: 0 0 var(--spacing-2) 0;
}

.portal-accordion-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.portal-accordion-footer-total {
    color: var(--color-success-700, #15803d);
}

.portal-accordion-actions-bar {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-top: var(--spacing-3);
}

.portal-accordion-empty {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* Lock-Badge (DATEV) */
.portal-badge-lock {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #92400e);
    border: 1px solid var(--color-warning-300, #fcd34d);
    border-radius: var(--radius-full);
}

/* Historisch-Badge (durchgestrichen) */
.portal-badge-historical {
    text-decoration: line-through;
    opacity: 0.8;
}

.portal-accordion-row-cancelled {
    text-decoration: line-through;
    opacity: 0.55;
}

/* Inputs / Column widths inside accordion tables */
.portal-accordion-input-sm { width: 60px; }
.portal-accordion-input-md { width: 80px; }
.portal-accordion-input-lg { width: 100px; }
.portal-accordion-input-xl { width: 120px; }

.portal-accordion-row-new {
    background: var(--color-success-50, #f0fdf4);
}

/* Historische Rechnungen Section */
.portal-accordion-history {
    margin-top: var(--spacing-4);
}

.portal-accordion-history-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
}

.portal-accordion-history-row:last-child {
    border-bottom: 0;
}

.portal-accordion-history-row-strikethrough {
    text-decoration: line-through;
    color: var(--color-gray-500);
}

.portal-accordion-history-meta {
    flex: 1;
    min-width: 0;
    color: var(--color-gray-600);
}

/* fn-23 Stornobedingungen — Settings-Form (kompakt) */
.cancellation-policy-form-compact .portal-form-group {
    margin-bottom: var(--spacing-3);
}

.cancellation-policy-form-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-3);
    align-items: end;
    margin-bottom: var(--spacing-3);
}

.cancellation-policy-form-divider {
    border: 0;
    border-top: 1px solid var(--color-gray-200);
    margin: var(--spacing-3) 0;
}

.cancellation-policy-stage-header {
    display: grid;
    grid-template-columns: 90px 72px 90px 100px 1fr 40px;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--spacing-1);
}

.cancellation-policy-stage {
    display: grid;
    grid-template-columns: 90px 72px 90px 100px 1fr 40px;
    gap: var(--spacing-2);
    align-items: center;
    padding: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-100);
}

.cancellation-policy-stage:last-of-type {
    border-bottom: 0;
}

.cancellation-policy-stage .portal-input-sm {
    height: 32px;
}

@media (max-width: 768px) {
    .cancellation-policy-stage-header {
        display: none;
    }
    .cancellation-policy-stage {
        grid-template-columns: 1fr 1fr;
        padding: var(--spacing-3);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-2);
    }
    .cancellation-policy-form-top {
        grid-template-columns: 1fr;
    }
}

.cancellation-policy-stage-input-disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-400);
}


/* ================================================================
   fn-25: Replicate Wizard (Anreisetermine setzen)
   ================================================================ */

/* Stepper */
.portal-wizard-steps {
    display: flex;
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}
.portal-wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    transition: all 0.15s ease;
}
.portal-wizard-step.is-active {
    background: var(--portal-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
}
.portal-wizard-step.is-done {
    background: var(--color-success-light, #e6f7ed);
    color: var(--color-success, #0a7a35);
}
.portal-wizard-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}
.portal-wizard-step:not(.is-active):not(.is-done) .portal-wizard-step-index {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}
.portal-wizard-step-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Option-Cards (Checkbox / Radio) */
.portal-option-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
}
.portal-option-card:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}
.portal-option-card.is-selected {
    border-color: var(--portal-primary);
    background: var(--portal-primary-light, #f0eeff);
}
.portal-option-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: var(--font-size-lg);
}
.portal-option-card.is-selected .portal-option-card-icon {
    background: var(--portal-primary);
    color: white;
}
.portal-option-card-body {
    flex: 1;
    min-width: 0;
}
.portal-option-card-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}
.portal-option-card-hint {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.3;
}
.portal-option-card-check {
    flex-shrink: 0;
    color: var(--portal-primary);
    font-size: var(--font-size-lg);
}

/* Summary-Liste (Step 4) */
.portal-summary-list {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.portal-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-gray-100);
}
.portal-summary-row:last-child { border-bottom: none; }
.portal-summary-label {
    color: var(--color-gray-600);
    flex-shrink: 0;
}
.portal-summary-value {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

/* Actions-Leiste unten im Slide-Over-Body */
.portal-slide-over-actions {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

/* Readonly travel_code input (wenn manual_override aus) */
.replicate-wizard .portal-input.is-readonly {
    background: var(--color-gray-50);
    color: var(--color-gray-500);
}

/* Active manuell-Toggle */
.replicate-wizard .btn.is-active {
    background: var(--portal-primary);
    color: white;
    border-color: var(--portal-primary);
}

/* fn-32 Image-Pickup: Bild-Grid im KI-Extraction-Modal */
.portal-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.portal-image-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    cursor: pointer;
    transition: var(--transition-fast);
}

.portal-image-card:hover {
    border-color: var(--portal-primary);
    background: var(--color-gray-100);
}

.portal-image-card.is-selected {
    border-color: var(--portal-primary);
    background: rgba(99, 91, 255, 0.05);
    box-shadow: 0 0 0 1px var(--portal-primary);
}

.portal-image-card-checkbox {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    z-index: 2;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.portal-image-card-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-gray-200);
}

.portal-image-card-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    color: var(--color-gray-500);
    font-size: var(--font-size-xl);
}

.portal-image-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-1);
}

.portal-image-card-alt {
    line-height: 1.3;
    min-height: 1.3em;
}