/* Global Styles */
:root {
    --primary-color: #2e2e2e;
    --primary-gradient: linear-gradient(135deg, #3e3e3e 0%, #1e1e1e 100%);
    --success-color: #3e3e3e;
    --warning-color: #5e5e5e;
    --text-color: #57636C;
    --background-color: #f8f9fa;
    --card-background: rgba(255, 255, 255, 0.95);
    --sidebar-width: 250px;
    --header-height: 60px;
    --transition-speed: 0.3s;
    --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-background: rgba(255, 255, 255, 0.15);
}

/* Custom Switch/Toggle Styles */
.form-check-input:checked {
    background-color: #98b8cc;
    border-color: #98b8cc;
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(62, 62, 62, 0.25);
}

.form-switch .form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-switch.d-flex label {
    cursor: pointer;
    flex: 1;
}

.form-switch.d-flex .form-check-input {
    flex-shrink: 0;
}

/* Hide menu items based on permissions */
.nav-link.permission-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Bootstrap Utility Classes - Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding Y-Axis (Top & Bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Padding X-Axis (Left & Right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

/* Animation keyframes */

body {
    font-family: 'Segoe UI', sans-serif;
    background: #f0f2f5;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
}


@keyframes darkPulse {
    0%, 100% {
        opacity: 0.02;
    }
    50% {
        opacity: 0.08;
    }
}

@keyframes floatingCircles {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(108, 117, 125, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(173, 181, 189, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 40% 40%, rgba(134, 142, 150, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
    animation: floatingCircles 30s ease-in-out infinite;
}



/* Contacts Table Column Styles */
.call-status-column {
    white-space: nowrap;
}

.lead-status-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override email-table styles for contacts table */
.table:not(.email-table) th:nth-child(5) {  /* Aktualisiert */
    width: 15% !important;
}

.table:not(.email-table) th:nth-child(6) {  /* Lead-Status */
    width: 8% !important;
}

.table:not(.email-table) th:nth-child(7) {  /* Status */
    width: 10% !important;
}

/* Login Screen Styles */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 20px;
}

.login-screen2 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 400px;
    position: relative;
}

.login-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.login-logo {
    width: 300px;
    height: auto;
    margin-bottom: 0px;
}

.login-box h2 {
    color: #333;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 600;
}

.login-box .form-label {
    color: #555;
    font-weight: 500;
}

.login-box .form-control {
    border: 2px solid #eee;
    padding: 12px;
    height: auto;
    font-size: 16px;
    transition: all 0.3s ease;
}

.login-box .form-control:focus {
    border-color: #98b8cc;
    box-shadow: 0 0 0 0.2rem rgba(152, 184, 204, 0.25);
}

.login-box .btn-primary {
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
}

.login-box a {
    color: #666;
    transition: color 0.3s ease;
}

.login-box a:hover {
    color: #D4E157;
    text-decoration: none;
}

.password-toggle-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: #D4E157;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #e8ecf1 0%, #dfe5ed 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow:
        2px 0 10px rgba(0, 0, 0, 0.05),
        inset -1px 0 0 0 rgba(0, 0, 0, 0.05);
}

.sidebar2 {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #e8ecf1 0%, #dfe5ed 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
}

/* Physio Edition: white sidebar */
.physio-edition .sidebar2,
.physio-edition nav.sidebar2,
.physio-edition #mainSidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(46, 139, 87, 0.15) !important;
}

/* Remove Webkit scrollbar styling */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar2::-webkit-scrollbar {
    display: none;
}

.sidebar::-webkit-scrollbar-track {
    display: none;
}

.sidebar2::-webkit-scrollbar-track {
    display: none;
}

.sidebar::-webkit-scrollbar-thumb {
    display: none;
}

.sidebar .nav-link {
    color: rgba(0, 0, 0, 0.7);
    padding: 0.4rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.2rem;
    transition: all var(--transition-speed);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
}

.sidebar2 .nav-link {
    color: rgba(0, 0, 0, 0.7);
    padding: 0.4rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.2rem;
    transition: all var(--transition-speed);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    font-weight: 400;
}

.sidebar .nav-link:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
    transform: translateX(5px);
}

.sidebar .nav-link.active {
    background: rgba(152, 184, 204, 0.15) !important;
    color: #2e2e2e !important;
    transform: translateX(5px);
    border-left: 3px solid #98b8cc !important;
}

.sidebar .nav-link.active i {
    color: #2e2e2e !important;
}

.sidebar2 .nav-link:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
    transform: translateX(5px);
}

.sidebar2 .nav-link.active {
    background: rgba(152, 184, 204, 0.15) !important;
    color: #2e2e2e !important;
    transform: translateX(5px);
    border-left: 3px solid #98b8cc !important;
}

.sidebar2 .nav-link.active i {
    color: #2e2e2e !important;
}

/* Cards - Modern frosted glass effect with animation */
@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 20px;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardFadeIn 0.6s ease-out both;
    position: relative;
    overflow: hidden;
}


.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-body {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(152, 184, 204, 0.05) 100%);
    border-radius: 15px;
}

/* Hamburger Menu Icon - Accent Color */
.fa-bars, 
.fas.fa-bars,
i.fa-bars,
i.fas.fa-bars {
    color: #98b8cc !important;
}

/* Buttons */
.btn {
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--primary-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(46, 46, 46, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 46, 46, 0.4);
}

/* Tables */
.table {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

.table thead th {
    background: rgba(46, 46, 46, 0.1);
    border-bottom: none;
}

/* Inbox Table Specific Styles */
.inbox-table {
    table-layout: fixed !important;
}

.inbox-table col.date-col { width: 14% !important; }
.inbox-table col.from-col { width: 14% !important; }
.inbox-table col.subject-col { width: 30% !important; }
.inbox-table col.preview-col { width: 30% !important; }
.inbox-table col.status-col { width: 6% !important; }
.inbox-table col.actions-col { width: 6% !important; }

.inbox-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-table td.preview-cell {
    white-space: normal;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Charts */
#callChart, #contactChart {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 15px;
}

#callStatsChart {
    min-height: 300px;
    width: 100% !important;
    margin: 1rem 0;
}

.card-body canvas {
    margin: 0 auto;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
}

.toast {
    min-width: 250px;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast.success {
    background-color: #D4E157;
    color: #333;
}

.toast.error {
    background-color: #ff5252;
    color: white;
}

.toast .close-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 5px;
    font-size: 20px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.toast .close-btn:hover {
    opacity: 1;
}

/* Sidebar */
.sidebar-content {
    flex: 1;
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
}

.sidebar.collapsed .nav-link i {
    margin: 0;
    width: 20px;
    text-align: center;
}

.logo-container {
    padding: 20px;
    padding-left: 0px;
    text-align: center;

}

/* Sidebar Logo */
.logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
}

.nav-link {
    padding: 12px 20px;
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-speed);
}

.nav-link i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.nav-link:hover {
    background-color: var(--background-color);
}

.nav-link.active {
    background-color: rgba(152, 184, 204, 0.15) !important;
    color: #2e2e2e !important;
    border-left: 3px solid #98b8cc;
    padding-left: calc(1rem - 3px);
}

.user-info {
    padding: 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: auto;
    text-align: left;
}

.user-info #userDisplayName {
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: 500;
    line-height: 1.3;
}

.user-info #userEmail {
    word-break: break-all;
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
}

.user-info .display-name {
    font-weight: 500;
    color: var(--text-color);
}

.user-info .user-details {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.8;
}

/* Main Content */
.main-content {
    margin-left: 250px; /* Breite der Sidebar */
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 100vh;
    background-color: transparent;
}

@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* Dashboard Styles */
#dashboardStats .card {
    /* Inherit from main .card styles */
    animation-delay: calc(var(--card-index, 0) * 0.1s);
}

/* Staggered animation for dashboard cards */
#dashboardStats .card:nth-child(1) { --card-index: 0; }
#dashboardStats .card:nth-child(2) { --card-index: 1; }
#dashboardStats .card:nth-child(3) { --card-index: 2; }
#dashboardStats .card:nth-child(4) { --card-index: 3; }
#dashboardStats .card:nth-child(5) { --card-index: 4; }
#dashboardStats .card:nth-child(6) { --card-index: 5; }

#dashboardStats .card-title {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

#dashboardStats .card-text {
    color: #bbc34c;
}


.stats-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.stat-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.stat-label {
    color: var(--text-color);
    font-weight: 500;
}

.stat-value {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        height: 100%;
        z-index: 1000;
        transition: 0.3s;
    }

    .sidebar.active {
        left: 0;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }

    .navbar {
        padding: 10px !important;
    }

    .navbar-brand {
        font-size: 1.2rem !important;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .card {
        margin-bottom: 15px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .modal-dialog {
        margin: 10px;
    }

    /* Anpassungen für das Dashboard */
    .stats-card {
        margin-bottom: 15px;
    }

    .chart-container {
        height: 300px !important;
        margin-bottom: 20px;
    }

    /* Verbesserte Touch-Interaktion */
    .btn, .nav-link, .form-control {
        min-height: 44px; /* Mindesthöhe für Touch-Targets */
    }

    /* Hamburger Menu Button */
    .toggle-sidebar {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
        background: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Verbesserte Formular-Elemente für Touch */
    select.form-control {
        padding-right: 30px !important;
    }

    /* Bessere Lesbarkeit auf kleinen Bildschirmen */
    body {
        font-size: 16px !important;
    }

    .table th, .table td {
        white-space: nowrap;
        padding: 12px 8px !important;
    }

    /* Anpassungen für den Kalender */
    .fc-toolbar {
        flex-direction: column;
    }

    .fc-toolbar-chunk {
        margin-bottom: 10px;
    }

    /* Verbesserte Modal-Dialoge */
    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 5px 0;
    }
}

/* Landscape-Orientierung für Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        margin-left: 200px;
    }

    .sidebar {
        width: 200px;
    }

    .chart-container {
        height: 400px !important;
    }
}

/* Clickable Table Rows */
#contactsTableBody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

#contactsTableBody tr:hover {
    background-color: #f8f9fa;
}

#contactsTableBody td:first-child,
#contactsTableBody td:last-child {
    cursor: default;
}

.fc-event-time {
    margin-top: 2px;
}

/* Timeline Styling */
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    position: relative;
    padding: 15px 0;
    border-left: 2px solid #e9ecef;
    margin-left: 20px;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid #fff;
}

.timeline-date {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.timeline-content {
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-left: 10px;
}

.timeline-content h6 {
    color: #495057;
    margin-bottom: 5px;
}

.timeline-content p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Chart styles */
#callChart {
    height: 500px !important;
    width: 100%;
}

#contactChart {
    height: 500px !important;
    width: 600px !important;
}

/* Calendar Styles */
.fc {
    background-color: var(--card-background);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fc .fc-toolbar {
    margin-bottom: 1.5rem;
}

.fc .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 500;
}

.fc .fc-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.fc .fc-button:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
}

.fc-event {
    border: none;
    padding: 2px 4px;
    margin: 1px 0;
    cursor: pointer;
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.fc-daygrid-event {
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
}

.fc-timegrid-event {
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.fc-event:hover {
    opacity: 0.9;
}

/* Fix grid z-index to be behind events */
.fc-timegrid-slots,
.fc-timegrid-slots table,
.fc-timegrid-slots tbody,
.fc-timegrid-slots tr,
.fc-timegrid-slots td,
.fc-timegrid-slot,
.fc-timegrid-slot-lane,
.fc-timegrid-slot-minor,
.fc-scrollgrid-sync-table {
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Ensure event harness containers are also clickable */
.fc-timegrid-event-harness,
.fc-timegrid-event-harness-inset {
    z-index: 999 !important;
    pointer-events: auto !important;
}

.fc-day-today {
    background-color: rgba(46, 46, 46, 0.1) !important;
}

.fc-day-past {
    background-color: #fafafa;
}

.fc th {
    padding: 10px 0;
    font-weight: 500;
}

.fc td {
    border-color: #eee;
}

/* Contact Table Specific Styles */
.contact-table-actions {
    display: flex;
    gap: 8px;
}

.contact-table-actions button {
    padding: 4px 8px;
    font-size: 0.875rem;
}

.edit-button {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: white;
}

.delete-button {
    background-color: #f86c75;
    border-color: #FF5963;
    color: white;
    height: 30px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outbound Table Styles */
.multicall-row:hover {
    background-color: rgba(46, 46, 46, 0.03);
    transition: background-color 0.2s ease;
}

/* Call Summary Table Styles */
.call-summary-table {
    width: 100%;
    margin-bottom: 1rem;
    table-layout: fixed;
}

.call-summary-table th,
.call-summary-table td {
    padding: 0.75rem;
    vertical-align: top;  
    overflow: visible;    
    height: auto;         
    word-wrap: break-word; 
}

.call-summary-table td:nth-child(6) {
    white-space: normal;  
    height: auto;         
    min-height: 50px;     
}

.call-summary-table td:not(:nth-child(6)) {
    white-space: nowrap;  
    text-overflow: ellipsis; 
    overflow: hidden;     
}

.call-summary-table th:last-child,
.call-summary-table td:last-child {
    text-align: center;
    vertical-align: middle; 
}

.call-summary-table td:nth-child(1),  /* Datum */
.call-summary-table td:nth-child(2),  /* Name */
.call-summary-table td:nth-child(3),  /* Telefon */
.call-summary-table td:nth-child(6) { /* Zusammenfassung */
    white-space: normal;
    height: auto;
    min-height: 50px;
    word-wrap: break-word;
    overflow: visible;
    align-content: start;
}

.call-summary-table td:nth-child(4),  /* AB */
.call-summary-table td:nth-child(5),  /* Rückruf */
.call-summary-table td:last-child {   /* Aktionen */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
}

/* Ensure table is scrollable on smaller screens */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Add horizontal padding to prevent cutoff on mobile */
@media (max-width: 768px) {
    .table-responsive {
        padding: 0 5px;
    }
    
    .call-summary-table th,
    .call-summary-table td {
        padding: 0.5rem;
    }
}

.call-summary-table .name-column {
    width: 80px !important;
    max-width: 80px !important;
}

.call-summary-table .summary-column {
    width: 30%;
    max-width: 30%;
}

/* Tabellen-Spaltenbreiten */
.table th:nth-child(2) {  /* Name */
    width: 140px;
    max-width: 140px;
}

.table th:nth-child(3) {  /* Firma */
    width: 40%;
    max-width: 40%;
}

.table th:nth-child(4) {  /* Telefonnummer */
    width: 120px;
    max-width: 120px;
}

.table th:nth-child(5) {  /* Aktualisiert */
    width: 100px;
    min-width: 100px;
}

.table th:nth-child(6) {  /* Lead-Status */
    width: 60%;
    max-width: 60%;
}

.table th:nth-child(7) {  /* Aufgabe */
    width: 120px;
    max-width: 120px;
}

/* Minimize actions column */
th[style*="width: 5%"], 
td[style*="width: 5%"] {
    width: 1% !important;
    white-space: nowrap;
}

/* Maximize message column */
td[style*="width: 70%"] {
    width: 51% !important;
    max-width: 51%;
}

/* Tabellen-Zeilen Hover-Effekt */
.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease;
}

/* Optimize Anrufe table column widths */
.table-hover thead tr th[style*="width: 20%"] {
    width: 25% !important;
}

.table-hover thead tr th[style*="width: 15%"] {
    width: 100px ;
    min-width: 100px ;
    max-width: 100px ;
}

.table-hover thead tr th[style*="width: 55%"] {
    width: calc(75% - 100px - 50px) !important;
}

.table-hover thead tr th:last-child,
.table-hover tbody tr td:last-child {
    width: 50px;
    min-width: 50px;
    white-space: nowrap;
    text-align: center;
}

/* Ensure full width utilization */
.table-hover {
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
}

/* Ensure actions column buttons are visible */
.table-hover .btn-sm {
    padding: 0.1rem 0.2rem;
    font-size: 0.75rem;
}

/* Buttons */
.btn {
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 5px;
    transition: all var(--transition-speed);
}

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

.btn-primary:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: white !important;
}

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

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

/* Custom button styles */
.btn-custom {
    background-color: transparent;
    border: 1px solid #98b8cc;
    color: #98b8cc;
}

.btn-custom:hover,
.btn-custom:active,
.btn-custom:focus {
    background-color: #98b8cc !important;
    border-color: #98b8cc !important;
    color: white !important;
}

/* Button hover effect */
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus {
    background-color: #98b8cc !important;
    border-color: #98b8cc !important;
    color: white !important;
    box-shadow: none !important;
}

.btn.btn-outline-primary {
    border-color: #98b8cc !important;
    color: #98b8cc !important;
}

/* Small buttons */
.btn-sm.btn-danger,
.btn-sm.btn-custom {
    height: 30px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-sm.btn-danger i,
.btn-sm.btn-custom i {
    margin: 0;
    font-size: 14px;
}

/* btntext-v1 (2026-08-21): Die Regel darueber macht kleine danger-Knoepfe 35px breit.
   Das ist fuer reine Symbolknoepfe (Muelleimer) gedacht. Traegt ein Knopf TEXT,
   laeuft der Text sichtbar ueber den Rand hinaus und ueberdeckt den Nachbarknopf.
   Solche Knoepfe bekommen zusaetzlich .btn-mit-text und damit die normale Groesse. */
.btn-sm.btn-danger.btn-mit-text,
.btn-sm.btn-custom.btn-mit-text {
    width: auto;
    height: auto;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.btn-sm.btn-custom.me-3 {
    height: 40px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

i.fas.fa-plus {
    padding-right: 5px;
}

/* Specific styling for buttons with text 'Neue Notiz' and 'Neuer Anruf' */
.btn.btn-sm.btn-custom[onclick*="addNote"], 
.btn.btn-sm.btn-custom[onclick*="addCall"] {
    height: 40px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

/* Custom style for the lead status add button */
.btn-custom-lead-status {
    background-color: #98b8cc !important;
    color: #F1F4F8 !important;
    border-color: #98b8cc !important;
    width: 35px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    margin-top: 0px;
}

i.fas.fa-plus {
    font-size: 10px;
}

button.btn.btn-custom-lead-status.p-0 {
    height: 42px;
}

.btn-custom-lead-status:hover {
    background-color: #7fa0b3 !important;
    border-color: #7fa0b3 !important;
}

/* Forms */
.form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.form-control:focus {
    border-color: #98b8cc;
    box-shadow: 0 0 0 0.2rem rgba(152, 184, 204, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 0;
        transform: translateX(-100%);
    }

    .main-content {
        margin-left: 0;
    }

    .sidebar.show {
        width: var(--sidebar-width);
        transform: translateX(0);
    }
}

/* Loading Spinner */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
}

/* Contact Selection and Status Controls */
.selected-contact {
    background-color: #e9ecef !important;
}

tr[data-contact-id] {
    cursor: pointer;
}

tr[data-contact-id]:hover {
    background-color: #f8f9fa;
}

.status-controls {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
}

.status-controls .form-label {
    font-weight: 600;
    color: #495057;
}

.status-controls .form-select {
    cursor: pointer;
}

.status-controls .form-select:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
}

.status-controls .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(152, 184, 204, 0.25);
}

#changeContactStatusBtn {
    transition: all 0.2s ease;
}

#changeContactStatusBtn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Clickable Table Rows */
#contactsTableBody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

#contactsTableBody tr:hover {
    background-color: #f8f9fa;
}

#contactsTableBody td:first-child,
#contactsTableBody td:last-child {
    cursor: default;
}

.fc-event-time {
    margin-top: 2px;
}

.h2, h2 {
    font-size: 1rem !important;
}

/* Mobile Menu Styles */
.navbar-toggler {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    background: white;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
}

@media (max-width: 768px) {
    .navbar-toggler {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        background: white;
        z-index: 1040;
        transition: left 0.3s ease;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-header {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }

    .sidebar-content {
        padding: 1rem 0;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }

    .nav-link i {
        width: 25px;
        text-align: center;
        margin-right: 10px;
    }

    .sidebar-footer {
        padding: 1rem;
        border-top: 1px solid #dee2e6;
    }

    .main-content {
        margin-left: 0;
        padding-top: 4rem;
    }

    #logoutButton {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-close {
        padding: 0.5rem;
    }
}

/* Verbesserte Touch-Interaktion */
@media (max-width: 768px) {
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .nav-link:active {
        background-color: rgba(0,0,0,0.05);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1030;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

.h2 {
    font-size: 12px;
}

/* Call UI Styles */
.call-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 300px;
}

.call-popup h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.call-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.call-controls {
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.call-controls button {
    margin: 0 5px;
}

#callTimer {
    text-align: center;
    font-size: 1.2em;
    margin: 10px 0;
    font-family: monospace;
}

/* Call Button Styles */
.btn-call {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s ease;
}

.btn-call:hover {
    transform: scale(1.1);
}

.btn-call i {
    font-size: 1.2em;
}

/* Audio Button Styles */
.btn-audio,
.btn-delete {
    padding: 0.25rem;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin: 0 auto;
}

.btn-audio {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
}

.btn-audio i,
.btn-delete i {
    font-size: 0.875rem;
}

.btn-audio:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.btn-delete {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-delete:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Tabellenzellen für Buttons */
.table td {
    vertical-align: middle;
    padding: 0.5rem;
    min-height: 40px;
}

/* Ensure buttons don't get cut off */
.table td button {
    position: relative;
    white-space: nowrap;
}

/* Aktivitäten Tabelle */
.activities-table th:first-child {  /* Datum */
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
}

.activities-table th:nth-child(2) {  /* Zusammenfassung */
    width: calc(100% - 80px - 35px) !important;
}

.activities-table th:last-child {  /* Aktionen */
    width: 35px !important;
    min-width: 35px;
    max-width: 35px;
    text-align: center;
}

/* Schmale Buttons für Audio und Aktionen */
.call-summary-table .btn-audio,
.call-summary-table .btn-sm {
    width: 35px;
    height: 30px;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.call-summary-table .btn-audio i {
    font-size: 0.875rem;
}

/* Kompakte Stile für AB, Rückruf, Audio und Aktionen */
.call-summary-table td:nth-child(4),  /* AB */
.call-summary-table td:nth-child(5),  /* Rückruf */
.call-summary-table td:nth-child(7),  /* Audio */
.call-summary-table td:nth-child(8),  /* Sentiment */
.call-summary-table td:last-child {   /* Delete */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
}

.bg-primary {
    background-color: #d4e157 !important;
}

/* Contacts Table Styles */
.contacts-page {
    padding: 20px;
}

.contacts-page .table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.contacts-page .table th {
    border-top: none;
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.contacts-page .table td {
    vertical-align: middle;
}

.contacts-page .badge {
    padding: 6px 10px;
    font-weight: 500;
}

.contacts-page .btn-group {
    gap: 5px;
}

.contacts-page .card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Form Controls */
.contacts-page .form-control,
.contacts-page .form-select {
    border-radius: 6px;
    border-color: #dee2e6;
}

.contacts-page .form-control:focus,
.contacts-page .form-select:focus {
    border-color: #98b8cc;
    box-shadow: 0 0 0 0.2rem rgba(152, 184, 204, 0.25);
}

/* Delete Selected Button */
#deleteSelectedButton {
    transition: all 0.3s ease;
}

/* Checkbox Styling */
.contact-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Table Responsive */
.table-responsive {
    border-radius: 8px;
    overflow: hidden;
}

/* Status Badge Colors - Clean gray theme */
.badge.bg-info { 
    background-color: #6b7280 !important;
    color: white !important;
}
.badge.bg-warning { 
    background-color: #9ca3af !important;
    color: white !important;
}
.badge.bg-primary { 
    background-color: #2e2e2e !important;
    color: white !important;
}
.badge.bg-secondary { 
    background-color: #94a3b8 !important;
    color: white !important;
}
.badge.bg-success { 
    background-color: #4b5563 !important;
    color: white !important;
}
.badge.bg-danger { 
    background-color: #374151 !important;
    color: white !important;
}

/* Bootstrap Background Colors - Clean gray theme */
.bg-info { background-color: #6b7280 !important; }
.bg-warning { background-color: #9ca3af !important; }
.bg-primary { background-color: #2e2e2e !important; }
.bg-secondary { background-color: #94a3b8 !important; }
.bg-success { background-color: #4b5563 !important; }
.bg-danger { background-color: #374151 !important; }

/* Text Colors - Matching gray theme */
.text-info { color: #6b7280 !important; }
.text-warning { color: #9ca3af !important; }
.text-primary { color: #2e2e2e !important; }
.text-secondary { color: #94a3b8 !important; }
.text-success { color: #4b5563 !important; }
.text-danger { color: #374151 !important; }

/* Kanban Headers - Clean gray theme */
.kanban-header {
    padding: 12px !important;
    border-radius: 8px 8px 0 0 !important;
}

.kanban-header.bg-danger {
    background-color: #374151 !important;
}

.kanban-header.bg-warning {
    background-color: #9ca3af !important;
}

.kanban-header.bg-info {
    background-color: #6b7280 !important;
}

.kanban-header.bg-secondary {
    background-color: #94a3b8 !important;
}

.kanban-header.bg-success {
    background-color: #4b5563 !important;
}

/* Contacts Page Styles */
.contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.contacts-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}

.search-section {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.search-bar {
    flex: 1;
    position: relative;
    max-width: 600px;
}

.search-bar input {
    width: 100%;
    padding: 8px 35px 8px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
}

.search-bar .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

.filters-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.filters-row select {
    min-width: 200px;
}

.contact-count {
    margin-left: auto;
    color: #6c757d;
    font-size: 14px;
}

.contact-count i {
    margin-right: 5px;
}

.bulk-edit-section {
    margin-bottom: 20px;
}

.bulk-selectors {
    display: flex;
    gap: 15px;
    align-items: center;
}

.bulk-selectors select {
    min-width: 200px;
}

.contacts-table {
    background: white;
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

.contacts-table table {
    margin-bottom: 0;
}

.contacts-table th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-weight: 500;
}

.contacts-table td {
    vertical-align: middle;
}

.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: normal;
}

.badge-primary {
    background-color: #2e2e2e;
    color: white;
}

.badge-success {
    background-color: #4b5563;
    color: white;
}

.badge-warning {
    background-color: #9ca3af;
    color: white;
}

.badge-info {
    background-color: #6b7280;
    color: white;
}

.badge-secondary {
    background-color: #94a3b8;
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #8bc34a;
    border-color: #8bc34a;
}

.search-filters {
    margin: 20px;
}

.checkbox-column {
    width: 60px;
}

.form-check-input {
    cursor: pointer;
}

/* Contact table styles */
table.contacts-table {
    table-layout: fixed !important;
    width: 100% !important;
}

table.contacts-table th,
table.contacts-table td {
    padding: 12px 8px !important;
    vertical-align: middle !important;
}

/* Column widths */
table.contacts-table .checkbox-column {
    width: 40px !important;
    min-width: 40px !important;
}

table.contacts-table .name-column,
table.email-table .name-column {
    width: 18% !important;
    min-width: 180px !important;
}

table.contacts-table .company-column,
table.email-table .company-column {
    width: 10% !important;
    min-width: 80px !important;
}

table.contacts-table .phone-column,
table.email-table .phone-column {
    width: 18% !important;
    min-width: 150px !important;
}

table.contacts-table .date-column,
table.email-table .date-column {
    width: 22% !important;
    min-width: 160px !important;
}

table.contacts-table .status-column,
table.email-table .status-column {
    width: 10% !important;
    min-width: 100px !important;
}

table.contacts-table .task-column {
    width: 12% !important;
    min-width: 100px !important;
}

/* Text handling */
table.contacts-table td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

table.contacts-table .email-text {
    display: block;
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges */
table.contacts-table .badge {
    font-size: 0.85em;
    padding: 5px 10px;
    font-weight: normal;
}

/* Date format */
table.contacts-table .date-column {
    font-size: 0.9em;
}

/* Bulk actions styling */
.bulk-actions .form-select {
    width: 100%;
}

.bulk-actions .card-body {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(152, 184, 204, 0.05) 100%);
    border-radius: 15px;
}

.bulk-actions .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.bulk-actions .btn {
    padding: 0.5rem 1.5rem;
}

.table-hover .btn-sm {
    padding: 0.1rem 0.2rem;
    font-size: 0.75rem;
    height: 30px;
}

/* Note Styles */
.note-item {
    background-color: #ffffff;
    border-left: 4px solid #0d6efd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.note-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.note-item p {
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.note-item small {
    color: #6c757d;
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.note-item .delete-note {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: transparent;
    border: none;
    color: #dc3545;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.note-item:hover .delete-note {
    opacity: 1;
}

.note-item .delete-note:hover {
    background-color: #dc3545;
    color: white;
    border-radius: 4px;
}

/* Note Container Styles */
#notesContainer {
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

#notesContainer::-webkit-scrollbar {
    width: 8px;
}

#notesContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#notesContainer::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#notesContainer::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.mb-4 {
    margin-bottom: 20px !important;
}

/* Chat Interface Styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-messages {
    flex: 1;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
}

.chat-controls {
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    display: flex;
    justify-content: center;
}

.chat-controls .btn {
    min-width: 150px;
    font-weight: 500;
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    max-width: 80%;
}

.user-message {
    background-color: #e3f2fd;
    margin-left: auto;
    text-align: right;
}

.ai-message {
    background-color: #f5f5f5;
    margin-right: auto;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f8f9fa;
}

.message {
    margin-bottom: 1rem;
    max-width: 80%;
}

.message.user {
    margin-left: auto;
}

.message.assistant {
    margin-right: auto;
}

.message-content {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background-color: #f8f9fa;
}

.message.user .message-content {
    background: #007bff;
    color: white;
}

.chat-input-container {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
}

.typing-message .message-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-message .dot {
    width: 8px;
    height: 8px;
    background: #6c757d;
    border-radius: 50%;
    animation: bounce 1s infinite;
}

.typing-message .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-message .dot:nth-child(3) {
    animation-delay: 0.4s;
}

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Chat Interface Styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 500px;
}

.messages-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-input-container {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
}

.message {
    margin-bottom: 1rem;
    max-width: 80%;
}

.message.user {
    margin-left: auto;
}

.message.assistant {
    margin-right: auto;
}

.message-content {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background-color: #f8f9fa;
}

.message.user .message-content {
    background: #007bff;
    color: white;
}

/* Recording Button Styles */
#micButton {
    transition: all 0.3s ease;
}

#micButton.recording {
    background-color: #dc3545;
    border-color: #dc3545;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Audio Message Styles */
.audio-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audio-message audio {
    max-width: 200px;
}

.audio-message .transcription {
    margin-top: 0.5rem;
    font-style: italic;
    color: #6c757d;
}

/* Disabled Interface Cards */
.disabled-card {
    position: relative;
    opacity: 0.7;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.disabled-card .card-body {
    position: relative;
}

.coming-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #6c757d;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.disabled-card:hover {
    box-shadow: none !important;
}

.disabled-card button {
    cursor: not-allowed;
}

#profileLink {
    text-decoration: none;
    transition: color 0.2s;
    white-space: normal; /* Erlaube Zeilenumbrüche */
    word-wrap: break-word; /* Erlaube Umbruch langer Wörter */
}

#profileLink:hover {
    color: #007bff !important;
    text-decoration: underline;
}

/* Profile Box Styles */
#profileBox {
    margin: 0px;
    max-width: 800px;
}

#profileBox .card {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#profileBox .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

#profileBox .form-control:disabled {
    background-color: #e9ecef;
}

/* Subscription Banner Styles */
.subscription-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin: 0 auto 20px;
    width: 70%;
    max-width: 500px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.subscription-banner:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.subscription-message {
    font-size: 16px;
    color: #495057;
    font-weight: 500;
}

.subscription-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.subscription-badge.active {
    background-color: #28a745;
    color: white;
}

.subscription-badge.inactive {
    background-color: #dc3545;
    color: white;
}

/* Payment Modal */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.payment-modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}

.payment-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.payment-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#payment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#card-element {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#card-errors {
    color: #f44336;
    margin-top: 10px;
    font-size: 14px;
}

.payment-submit-button {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.payment-submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Subscription Page */
.subscription-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.subscription-page h1 {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
    font-size: 2.5em;
}

.subscription-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.plan-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid #eee;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.plan-card.featured {
    border: 2px solid #4CAF50;
    transform: scale(1.02);
}

.featured-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-card h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.price {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
}

.price span {
    font-size: 0.4em;
    color: #666;
    font-weight: normal;
}

.vat-note {
    color: #666;
    font-size: 0.85em;
    margin-bottom: 20px;
    font-style: italic;
}

.features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    min-height: 180px;
}

.features li {
    padding: 10px 0;
    color: #666;
    border-bottom: 1px solid #eee;
    font-size: 0.95em;
    line-height: 1.4;
}

.features li:last-child {
    border-bottom: none;
}

.subscribe-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscribe-button:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Billing Toggle Switch Styles */
.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    gap: 15px;
}

.billing-option {
    font-size: 1.1em;
    color: #666;
    cursor: pointer;
    transition: color 0.3s ease;
}

.billing-option.active {
    color: #333;
    font-weight: 500;
}

.discount {
    background: #4CAF50;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-left: 5px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background: #4CAF50;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.subscription-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    background: white;
}

.subscription-header .logo {
    max-width: 200px;
    height: auto;
    margin: 0;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: white;
    color: #333;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-button:hover {
    background: #f5f5f5;
    transform: translateX(-2px);
}

.back-button svg {
    width: 16px;
    height: 16px;
}

.subscription-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    background: white;
}

.subscription-header .logo {
    max-width: 200px;
    height: auto;
    margin: 0;
}

.subscription-header .back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.9em;
}

.subscription-header .back-button svg {
    width: 16px;
    height: 16px;
}

/* Plan Cards */
.plan-card .btn {
    width: 100%;
    margin-top: 20px;
}

.plan-card .btn-primary {
    background: var(--primary-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(46, 46, 46, 0.3);
    transition: all 0.3s ease;
}

.plan-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 46, 46, 0.4);
}

/* Section Title Styles */
.section-title {
    text-align: center;
    font-size: 2em;
    margin: 3rem 0 1rem;
    color: #333;
}

.section-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1rem;
    color: #666;
    font-size: 1.1em;
    line-height: 1.5;
}

.setup-fee {
    text-align: center;
    color: #333;
    font-weight: 500;
    margin-bottom: 2rem;
}

.addon-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.addon-plans .plan-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.addon-plans .plan-card h2 {
    font-size: 1.5em;
    margin-bottom: 1rem;
    color: #333;
}

.addon-plans .description {
    flex-grow: 1;
    margin: 1rem 0;
    color: #666;
    line-height: 1.6;
}

/* Billing Toggle Styles */
#addon-billing-toggle:checked + .slider {
    background: var(--primary-gradient);
}

#addon-billing-toggle:checked + .slider:before {
    transform: translateX(26px);
}

/* Subscription Status Badges */
.subscription-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
}

.status-active {
    background-color: #28a745;
    color: white;
}

.status-trial {
    background-color: #17a2b8;
    color: white;
}

.status-canceled {
    background-color: #dc3545;
    color: white;
}

.status-inactive {
    background-color: #6c757d;
    color: white;
}

.deal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.deal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.delete-deal {
    padding: 0;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.delete-deal:hover {
    opacity: 1;
}

/* Sidebar toggle button */
.sidebar-toggle {
    position: absolute;
    right: -20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1500;
    border: none;
    color: white;
    transform: translateX(-2px);
}

.sidebar-toggle:hover {
    transform: scale(1.1);
}

/* Toggle button in collapsed state */
.sidebar.collapsed .sidebar-toggle,
.sidebar2.collapsed .sidebar-toggle {
    position: relative;
    right: auto;
    top: 10px;
    margin: 0 auto 20px auto;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transform: none;
}

.sidebar.collapsed .sidebar-toggle:hover,
.sidebar2.collapsed .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: none;
}

/* Collapsed sidebar styles */
.sidebar.collapsed {
    width: 85px;
    padding: 5px;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-link div {
    display: none !important;
}

.sidebar.collapsed .nav-link i {
    margin: 0;
    font-size: 1.2rem;
}

/* Adjust main content when sidebar is collapsed */
.sidebar.collapsed + .main-content {
    margin-left: 85px;
}

.sidebar.collapsed .user-info,
.sidebar.collapsed .logo-container {
    display: none !important;
}

.sidebar.collapsed #logoutBtn {
    padding: 0.5rem;
    justify-content: center;
}

.sidebar.collapsed #logoutBtn span {
    display: none !important;
}

/* Collapsed sidebar2 styles (for other domains) */
.sidebar2.collapsed {
    width: 85px;
    padding: 5px;
}

.sidebar2.collapsed .nav-link {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar2.collapsed .nav-link span,
.sidebar2.collapsed .nav-link div {
    display: none !important;
}

.sidebar2.collapsed .nav-link i {
    margin: 0;
    font-size: 1.2rem;
}

/* Adjust main content when sidebar2 is collapsed */
.sidebar2.collapsed + .main-content {
    margin-left: 85px;
}

.sidebar2.collapsed .user-info,
.sidebar2.collapsed .logo-container {
    display: none !important;
}

.sidebar2.collapsed #logoutBtn {
    padding: 0.5rem;
    justify-content: center;
}

.sidebar2.collapsed #logoutBtn span {
    display: none !important;
}

/* Email Inbox Styles */
.email-table td,
.email-table th {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* E-Mail-Tabelle */
.email-table th:nth-child(1) {  /* Datum */
    width: 4% !important;
}

.email-table th:nth-child(2) {  /* Von */
    width: 17% !important;
}

.email-table th:nth-child(3) {  /* Betreff */
    width: 30% !important;
}

.email-table th:nth-child(4) {  /* Vorschau */
    width: 12% !important;
}

.email-table th:nth-child(5) {  /* Status */
    width: 10% !important;
}

.email-table th:nth-child(6) {  /* Aktionen */
    width: 13% !important;
}

.fw-bold {
    font-weight: 400 !important;
}

/* Email table styles */
.table td {
    white-space: nowrap;
    overflow: hidden;
  /*  text-overflow: ellipsis; */
    max-width: 0;
}

.table-responsive {
    overflow-x: auto;
}

.table {
    table-layout: fixed;
    width: 100%;
}

/* Zusammenfassungsspalte in der Call Summary Tabelle */
.summary-column {
    width: 30%;
    max-width: 30%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Spezifische Styles für die summary-col Klasse */
.call-summary-table .summary-col,
#callSummariesContainer .summary-col,
th.summary-col,
td.summary-col {
    width: 40% !important;
    max-width: 40% !important;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Z-index für Audio-Controls und Actions */
.call-summary-table .actions-col {
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

/* Call Summaries Container Audio Buttons */
#callSummariesContainer .btn-audio,
#callSummariesContainer .btn-success,
#callSummariesContainer .play-audio,
#callSummariesContainer button.play-audio,
#callSummariesContainer button.btn-audio {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    color: white !important;
}

#callSummariesContainer .btn-audio:hover,
#callSummariesContainer .btn-success:hover,
#callSummariesContainer .play-audio:hover,
#callSummariesContainer button.play-audio:hover,
#callSummariesContainer button.btn-audio:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.call-summary-table .btn-audio,
.call-summary-table .audio-controls,
.call-summary-table .actions-col button,
.call-summary-table .audio-controls-container,
.audio-controls-container {
    position: relative !important;
    z-index: 1000 !important;
}

/* Audio-Controls Container spezifisch */
.call-summary-table td.actions-col .audio-controls-container {
    position: absolute !important;
    right: 0;
    top: 100%;
    z-index: 9999 !important;
    background-color: #f8f9fa !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Parent container muss overflow visible haben */
.call-summary-table td.actions-col > .d-flex {
    position: relative;
    overflow: visible !important;
}

/* Sicherstellen, dass die Zusammenfassungsspalte nicht überlappt */
.call-summary-table .summary-col {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.table td.summary-cell {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chat bubble styles */
.chat-message {
    display: flex;
    margin: 8px 0;
    max-width: 80%;
}

.chat-message.user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.max-width-70 {
    max-width: 70%;
}

.chat-message.assistant .chat-bubble {
    background-color: var(--glass-background);
    margin-right: 40px;
    border-bottom-left-radius: 4px;
}

.chat-message.user .chat-bubble {
    background: var(--primary-gradient);
    color: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-bottom-right-radius: 4px;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 8px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--card-shadow);
}

.chat-message.assistant .chat-avatar {
    background: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.chat-message.user .chat-avatar {
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

#chatBox {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    background: var(--background-color);
    border-radius: 15px;
    margin: 16px;
    box-shadow: var(--card-shadow);
}

.timestamp {
    font-size: 0.75rem;
    color: #666;
    margin: 4px 8px;
}

.chat-message.assistant .timestamp {
    margin-left: 48px;
}

.chat-message.user .timestamp {
    margin-right: 48px;
    text-align: right;
}

.contacts-page .badge {
    font-size: 0.8em;
    padding: 0.4em 0.6em;
}

/* Call Summary Table Styles */
#callSummaryTableBody td {
    white-space: normal;
    height: auto;
    vertical-align: top;
    padding: 12px 8px;
}

#callSummaryTableBody tr {
    height: auto;
}

.call-summary-table {
    table-layout: fixed;
}

.call-summary-table td {
    word-wrap: break-word;
}

/* Tasks Table Styles */
#tasksContainer .table {
    table-layout: fixed;
    margin-bottom: 0;
}

#tasksContainer .table td {
    white-space: normal;
    word-wrap: break-word;
    vertical-align: middle;
    height: auto;
    padding: 12px 8px;
}

#tasksContainer .table th {
    white-space: nowrap;
    padding: 12px 8px;
}

#tasksContainer .table tbody tr {
    height: auto;
}

#tasksContainer .table td p {
    margin-bottom: 0;
}

#tasksContainer .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* Tasks Container Styles */
#tasksContainer {
    height: auto;
    min-height: 50px;
    overflow: visible;
}

#tasksContainer .task-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    height: auto;
}

#tasksContainer .task-item:last-child {
    border-bottom: none;
}

#tasksContainer .task-item p {
    margin-bottom: 8px;
    white-space: normal;
    word-wrap: break-word;
}

#tasksContainer .task-item small {
    color: #666;
    display: block;
    margin-top: 4px;
}

/* Subscription Page Styles */
.subscription-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.subscription-header .back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
}

.subscription-header .logo {
    height: 40px;
}

.subscription-page h1 {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.billing-option {
    font-size: 1.1em;
    color: #666;
}

.billing-option.active {
    color: #333;
    font-weight: 500;
}

.discount {
    background: #4CAF50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    margin-left: 8px;
}

/* Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background: var(--primary-gradient);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Plan Cards */
.subscription-plans, .addon-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.plan-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.plan-card.featured {
    border: 2px solid var(--primary-color);
}

.featured-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--primary-gradient);
    color: white;
    padding: 4px 16px;
    border-radius: 12px;
    font-size: 0.9em;
}

.plan-card h2 {
    color: #333;
    margin-bottom: 24px;
    font-size: 1.8em;
}

.price {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
}

.price span {
    font-size: 0.5em;
    color: #666;
    white-space: nowrap;
    display: inline-block;
}

.price.yearly span {
    white-space: normal;
    display: block;
    line-height: 1.2;
    margin-top: 5px;
}

.vat-note {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 24px;
}

.features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}

.features li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 24px;
}

.features li:before {
    content: "✓";
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

.description {
    color: #666;
    font-size: 0.95em;
    margin: 24px 0;
    text-align: left;
}

.section-title {
    text-align: center;
    margin: 60px 0 16px;
    color: #333;
}

.section-description {
    text-align: center;
    color: #666;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .subscription-page {
        padding: 20px 10px;
    }

    .subscription-header .logo {
        height: 32px;
    }

    .plan-card {
        padding: 24px;
    }

    .featured-badge {
        right: 16px;
    }
}

/* Mobile Navigation Styles */
.navbar-toggler {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    background: white;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
}

.navbar-toggler i {
    font-size: 1.5rem;
    color: var(--text-color);
}

@media (max-width: 768px) {
    .navbar-toggler {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        height: 100vh;
        z-index: 1040;
        transition: left 0.3s ease;
        background: white;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .sidebar.show {
        left: 0;
    }
}
.chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.chat-messages {
    height: 400px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
}

.chat-controls {
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    text-align: center;
}

.chat-controls .btn {
    margin: 0 5px;
}

/* Override Bootstrap padding for container-fluid inside main content */
.main-content .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

/* Contact Detail Styles */
/* ... maybe add specific contact detail styles here ... */


/* Override Bootstrap padding for container-fluid inside main content for mobile */
.main-content .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

/* Restore Bootstrap padding for container-fluid inside main content on medium screens and up */
@media (min-width: 768px) { /* Bootstrap md breakpoint */
    .main-content .container-fluid {
        /* Use Bootstrap's gutter variable for consistency */
        --bs-gutter-x: 1.5rem; /* Default Bootstrap gutter */
        padding-right: calc(var(--bs-gutter-x)* .5) !important; /* ADDED !important */
        padding-left: calc(var(--bs-gutter-x)* .5) !important; /* ADDED !important */
    }
}


/* Container fluid spacing for main content areas */
#mainContent.container-fluid,
#dashboardStats ~ .container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Override Bootstrap mt-4 */
.mt-4 {
    margin-top: 0rem !important;
}

/* Staggered animations for multiple cards */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }
.card:nth-child(5) { animation-delay: 0.4s; }
.card:nth-child(6) { animation-delay: 0.5s; }
.card:nth-child(7) { animation-delay: 0.6s; }
.card:nth-child(8) { animation-delay: 0.7s; }

/* Table row animations */
tbody tr {
    animation: cardFadeIn 0.4s ease-out both;
}
tbody tr:nth-child(1) { animation-delay: 0s; }
tbody tr:nth-child(2) { animation-delay: 0.05s; }
tbody tr:nth-child(3) { animation-delay: 0.1s; }
tbody tr:nth-child(4) { animation-delay: 0.15s; }
tbody tr:nth-child(5) { animation-delay: 0.2s; }
tbody tr:nth-child(6) { animation-delay: 0.25s; }
tbody tr:nth-child(7) { animation-delay: 0.3s; }
tbody tr:nth-child(8) { animation-delay: 0.35s; }
tbody tr:nth-child(9) { animation-delay: 0.4s; }
tbody tr:nth-child(10) { animation-delay: 0.45s; }

/* Mobile specific styles for contact list delete button */
@media (max-width: 767.98px) {
    /* More specific selector targeting the TD as well */
    .email-table td.action-column .delete-contact.btn-sm {
        width: 35px !important;         /* Set equal width and force */
        height: 35px !important;        /* Set equal height and force */
        border-radius: 50% !important;  /* Make it perfectly round and force */
        padding: 0 !important;          /* Remove default button padding and force */
        border: none !important;        /* Explicitly remove any border */
        display: inline-flex !important; /* Use inline-flex for alignment */
        align-items: center !important; /* Center icon vertically */
        justify-content: center !important; /* Center icon horizontally */
        line-height: 1 !important;      /* Adjust line height for icon centering */
        box-sizing: border-box !important; /* Ensure padding/border are included in width/height */
        vertical-align: middle !important; /* Align vertically in the TD */
        overflow: hidden !important;       /* Hide any potential overflow */
        text-align: center;             /* Center text/icon inside */
    }

    /* Ensure the icon inside is centered */
    .email-table td.action-column .delete-contact.btn-sm i {
        font-size: 0.9rem !important; /* Adjust icon size if needed */
        margin: 0 !important;         /* Remove any potential margins */
        line-height: 1 !important;     /* Ensure icon line height matches button */
    }

    /* Optional: Style the TD to better center the button */
    .email-table td.action-column {
        text-align: center !important; /* Center the inline-flex button horizontally */
        vertical-align: middle !important; /* Center vertically */
    }
}

/* Mobile specific styles for agent details buttons (Versuch 2) */
@media (max-width: 767.98px) {
    /* Ziel ist der Container mit der Klasse agent-actions-buttons */
    #agentDetailsContainer .agent-actions-buttons {
        display: flex; /* Sicherstellen, dass Flexbox aktiv ist */
        flex-direction: column; /* Vertikale Anordnung */
        align-items: stretch; /* Elemente auf volle Breite strecken */
        gap: 10px; /* Abstand zwischen den Buttons */
    }

    /* Jeder Button innerhalb dieses Containers */
    #agentDetailsContainer .agent-actions-buttons .btn {
        width: 100%; /* Volle Breite erzwingen */
        margin-bottom: 0; /* Entferne den alten Abstand, da gap verwendet wird */
        text-align: center; /* Text zentrieren */
    }
}

/* Mobile specific styles for agent details title (Versuch 3 - Display Block) */
@media (max-width: 767.98px) {
    /* Titel (h1) als Block-Element darstellen */
    #agentDetailsContainer .card-body h1#agentNameTitle {
        display: block; /* Nimmt volle Breite und erzeugt Zeilenumbruch */
        width: 100%;    /* Stellt sicher, dass es die volle Breite hat */
        margin-bottom: 0.5rem; /* Fügt Abstand nach unten hinzu */
        text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
    }

    /* Badge (span) als Block-Element darstellen */
    #agentDetailsContainer .card-body span.badge {
        display: block; /* Nimmt volle Breite und erzeugt Zeilenumbruch */
        width: fit-content; /* Passt die Breite an den Inhalt an, bleibt aber Block */
        text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
        margin-bottom: 1rem; /* Fügt Abstand nach unten hinzu (angepasst von mb-4) */
    }

    /* Optional: Den ursprünglichen mb-4 Abstand vom Container entfernen, da wir ihn jetzt an den Elementen haben */
    #agentDetailsContainer .d-flex.justify-content-between.align-items-center.mb-4 {
        margin-bottom: 0 !important; /* Entfernt den unteren Abstand vom Flex-Container */
        /* Optional: Entferne Flexbox-Eigenschaften, wenn display:block ausreicht */
        /* display: block; */
    }

    /* NEU: Textumbruch für Kontaktliste auf Mobilgeräten */
    .email-table td {
        white-space: normal !important; /* Erlaube Zeilenumbruch */
        word-wrap: break-word !important; /* Erlaube Umbruch langer Wörter */
        overflow: visible !important; /* Stelle sicher, dass Inhalt nicht abgeschnitten wird */
        text-overflow: clip !important; /* Verhindere '...' */
        height: auto !important; /* Erlaube variable Zeilenhöhe */
        vertical-align: top !important; /* Oben ausrichten für bessere Lesbarkeit bei Umbruch */
    }

    /* Optional: Passe die Schriftgröße an, falls nötig */
    .email-table td, .email-table th {
        font-size: 0.9rem; /* Etwas kleinere Schrift für mehr Platz */
        padding: 8px 5px !important; /* Reduziere Padding leicht */
    }

    /* Entferne feste Breiten für Spalten auf Mobilgeräten, wenn nötig */
    .email-table th, .email-table td {
        /* Entferne ggf. feste Breiten, die Probleme verursachen */
        width: auto !important; /* Breite automatisch anpassen */
        min-width: unset !important; /* Mindestbreite aufheben */
        max-width: unset !important; /* Maximalbreite aufheben */
    }
    /* ENDE NEU */
}

/* AutoCall Regeln Modal Breite */
#autoCallRulesModal .modal-dialog {
    max-width: 1000px !important; /* Wunschbreite 1000px, !important zur Sicherheit */
}

#autoCallRulesModal .modal-content {
    /* Optional: Füge hier weitere spezifische Stile für den Inhalt hinzu, falls nötig */
    /* padding: 20px; */ /* Bootstrap Standard sollte ausreichen */
    /* border-radius: 8px; */ /* Bootstrap Standard sollte ausreichen */
    max-width: 800px !important;
}

/* Custom Styles for VoiceOne App */

/* ... existing styles ... */

/* Email Agent Log Table Column Widths */
.email-log-timestamp-col {
    width: 110px; /* Feste Breite für Zeitstempel (reduziert) */
    min-width: 110px;
    max-width: 110px;
    white-space: nowrap; /* Verhindere Umbruch */
}

.email-log-error-col {
    min-width: 350px; /* Mindestbreite weiter erhöht */
    /* max-width: 400px; */ /* Maximalbreite entfernt, damit sie flexibler ist */
    white-space: normal; /* Erlaube Textumbruch */
    word-break: break-word; /* Erlaube Umbruch langer Wörter/URLs */
}

/* ... rest of existing styles ... */

/* =============================================================================
   SUBDOMAIN MANAGEMENT STYLES
   ============================================================================= */

.subdomain-manager-container {
    margin: 20px 0;
}

.subdomain-management-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.subdomain-management-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-bottom: none;
}

.subdomain-management-card .card-header h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.subdomain-management-card .card-header p {
    margin: 5px 0 0 0;
    opacity: 0.9;
}

.subdomain-management-card .card-body {
    padding: 30px;
}

/* Subdomain Status */
.subdomain-status {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #28a745;
}

.status-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.status-indicator i {
    margin-right: 8px;
    font-size: 0.9rem;
}

.status-indicator span {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subdomain-url {
    font-size: 1.1rem;
}

.subdomain-url strong {
    color: #495057;
}

/* Subdomain Input */
.subdomain-config-section .input-group {
    max-width: 500px;
}

.subdomain-config-section .input-group-text {
    background: #e9ecef;
    border-color: #ced4da;
    font-weight: 500;
    color: #6c757d;
}

.subdomain-config-section .form-control {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: 500;
}

.subdomain-config-section .form-control:focus {
    border-color: #98b8cc;
    box-shadow: 0 0 0 0.2rem rgba(152, 184, 204, 0.25);
}

/* Feature Cards */
.domain-features-section .row {
    margin: 0 -10px;
}

.feature-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.feature-card i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.feature-card h6 {
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.feature-card p {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #6c757d;
}

/* DNS Instructions */
.dns-instructions-section .alert {
    border-radius: 8px;
    border: none;
    background: #e8f4f8;
    border-left: 4px solid #17a2b8;
}

.dns-instructions-section code {
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
    color: #495057;
    border: 1px solid #dee2e6;
    display: inline-block;
    margin-top: 10px;
}

/* Domain Preview */
.preview-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border: 2px dashed #dee2e6;
}

.preview-browser {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.browser-bar {
    background: #f1f3f4;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.browser-buttons {
    display: flex;
    gap: 6px;
    margin-right: 16px;
}

.browser-buttons span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}

.btn-close-preview {
    background: #ff5f56;
}

.btn-minimize {
    background: #ffbd2e;
}

.btn-maximize {
    background: #27ca3f;
}

.address-bar {
    flex: 1;
    background: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    color: #495057;
    border: 1px solid #e0e0e0;
}

.preview-content {
    padding: 40px 20px;
    text-align: center;
    background: white;
}

.preview-logo {
    margin-bottom: 20px;
}

.preview-content p {
    color: #6c757d;
    margin: 0;
}

/* Notifications */
.subdomain-notification {
    margin-bottom: 20px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.subdomain-notification i {
    margin-right: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .subdomain-management-card .card-body {
        padding: 20px;
    }
    
    .feature-card {
        margin: 10px 0;
    }
    
    .browser-bar {
        flex-direction: column;
        gap: 10px;
    }
    
    .browser-buttons {
        margin-right: 0;
    }
    
    .address-bar {
        text-align: center;
    }
}

/* Domain Service Animation */
.domain-transition {
    transition: all 0.3s ease;
}

.domain-loading {
    opacity: 0.7;
    pointer-events: none;
}

.domain-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* FullCalendar Custom Styles */
/* Verbesserte Event-Darstellung */
.fc-event {
    border: none !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 3px 5px !important;
    margin-bottom: 1px !important;
}

/* Zeitgitter Events */
.fc-timegrid-event {
    overflow: visible !important;
}

.fc-timegrid-event .fc-event-main {
    padding: 2px 4px !important;
}

/* Event Harness - FullCalendar Layout nicht überschreiben */
.fc-timegrid-event-harness {
    /* Layout von FullCalendar beibehalten */
}

.fc-timegrid-event-harness-inset {
    /* Layout von FullCalendar beibehalten */
}

/* Event-Titel und Zeit */
.fc-event-title {
    font-weight: 500 !important;
    margin-bottom: 2px !important;
}

.fc-event-time {
    font-size: 11px !important;
    opacity: 0.9 !important;
}

/* Lange Events (>1 Stunde) */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
    min-height: 40px !important;
}

/* Stelle sicher, dass Events ihre volle berechnete Höhe nutzen */
.fc-timegrid-event-harness {
    /* Keine position overrides - FullCalendar berechnet das korrekt */
}

.fc-timegrid .fc-timegrid-event {
    /* Keine position/height overrides - FullCalendar berechnet das korrekt */
}

/* Spezifisch für ganztägige oder sehr lange Events */
.fc-timegrid-event.fc-event-start.fc-event-end {
    /* Visuelles Styling ohne Layout-Änderungen */
}

/* Bessere Lesbarkeit der Zeitslots */
.fc-timegrid-slot-label {
    font-size: 11px !important;
    color: #666 !important;
}

/* Heute hervorheben */
.fc-day-today {
    background-color: rgba(46, 46, 46, 0.05) !important;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
    .fc-header-toolbar {
        font-size: 14px !important;
    }
    
    .fc-button {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    
    .fc-event {
        font-size: 11px !important;
    }
}

/* Fix für Event-Duration-Anzeige */
/* Stelle sicher, dass FullCalendar Events korrekt rendert */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
    /* Keine position overrides */
    position: absolute !important;
}

/* Entferne min-height Beschränkungen für kurze Events */
.fc-timegrid-event {
    min-height: 0px !important;
}

/* Stelle sicher, dass das Event-Harness die volle Höhe nutzt */
.fc-timegrid-event-harness {
    /* Keine height overrides - FullCalendar berechnet das */
}

/* Debug: Zeige Event-Grenzen */
.fc-timegrid-event {
    border: 1px solid rgba(0,0,0,0.2) !important;
}

/* User list highlighting for new and inactive users */
.user-row.new-user {
    background-color: rgba(62, 62, 62, 0.1) !important;
    border-left: 4px solid #9CCC65;
}

.user-row.new-user:hover {
    background-color: rgba(62, 62, 62, 0.2) !important;
}

.user-row.inactive-user {
    background-color: rgba(255, 213, 79, 0.1) !important;
    border-left: 4px solid #FFD54F;
}

.user-row.inactive-user:hover {
    background-color: rgba(255, 213, 79, 0.2) !important;
}

/* Status indicators */
.user-status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.user-status-indicator.new {
    background-color: #9CCC65;
}

.user-status-indicator.inactive {
    background-color: #FFD54F;
}

/* Override Bootstrap Button Colors for #2e2e2e Theme */
.btn-primary {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn-secondary {
    background-color: #4e4e4e !important;
    border-color: #4e4e4e !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover {
    background-color: #3e3e3e !important;
    border-color: #3e3e3e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn-success {
    background-color: #3e3e3e !important;
    border-color: #3e3e3e !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-success:hover {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn-warning {
    background-color: #5e5e5e !important;
    border-color: #5e5e5e !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-warning:hover {
    background-color: #4e4e4e !important;
    border-color: #4e4e4e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn-danger {
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-danger:hover {
    background-color: #3a3a3a !important;
    border-color: #3a3a3a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn-info {
    background-color: #3e3e3e !important;
    border-color: #3e3e3e !important;
    color: white !important;
    transition: all 0.2s ease !important;
}
.btn-info:hover {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Special button styles - with higher specificity */
.btn.btn-audio, 
.btn.play-audio,
button.btn-audio,
button.play-audio {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transition: all 0.2s ease !important;
}
.btn.btn-audio:hover, 
.btn.play-audio:hover,
button.btn-audio:hover,
button.play-audio:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn.mark-processed,
button.mark-processed {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transition: all 0.2s ease !important;
}
.btn.mark-processed:hover,
button.mark-processed:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn.create-task,
button.create-task {
    background-color: #3e3e3e !important;
    border-color: #3e3e3e !important;
    transition: all 0.2s ease !important;
}
.btn.create-task:hover,
button.create-task:hover {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn.forward-email,
button.forward-email {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    transition: all 0.2s ease !important;
}
.btn.forward-email:hover,
button.forward-email:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn.create-ticket,
button.create-ticket {
    background-color: #5e5e5e !important;
    border-color: #5e5e5e !important;
    transition: all 0.2s ease !important;
}
.btn.create-ticket:hover,
button.create-ticket:hover {
    background-color: #4e4e4e !important;
    border-color: #4e4e4e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.btn.delete-summary,
button.delete-summary {
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
    transition: all 0.2s ease !important;
}
.btn.delete-summary:hover,
button.delete-summary:hover {
    background-color: #3a3a3a !important;
    border-color: #3a3a3a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Override inline styles with higher specificity */
button[style*="background-color: #007BFF"] {
    background-color: #2e2e2e !important;
}

/* Override icon colors */
.btn-audio i.fas.fa-play,
.play-audio i.fas.fa-play,
.btn i.text-white,
.btn-sm i.text-white {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure all button icons are visible */
.btn-success i,
.btn-warning i,
.btn-danger i,
.btn-info i,
.btn-primary i,
.btn-secondary i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Override outline buttons */
.btn-outline-primary {
    color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: #2e2e2e !important;
    border-color: #2e2e2e !important;
    color: white !important;
}

.btn-outline-secondary {
    color: #4e4e4e !important;
    border-color: #4e4e4e !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
    background-color: #4e4e4e !important;
    border-color: #4e4e4e !important;
    color: white !important;
}

/* ==============================================
   ACCENT COLOR ADDITIONS (#98b8cc)
   ============================================== */

/* Links - Accent on Hover */
a {
    transition: color 0.2s ease;
}

a:hover:not(.btn):not(.nav-link) {
    color: #98b8cc !important;
}

/* Tab Navigation Active State */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: rgba(152, 184, 204, 0.1) !important;
    border-bottom: 3px solid #98b8cc !important;
    color: #98b8cc !important;
}

/* Pagination */
.page-link {
    color: #2e2e2e;
    transition: all 0.2s;
}

.page-link:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.page-item.active .page-link {
    background-color: #98b8cc !important;
    border-color: #98b8cc !important;
    color: white !important;
}

/* Custom Radio and Checkbox */
.form-check-input[type="radio"]:checked,
.form-check-input[type="checkbox"]:checked {
    background-color: #98b8cc !important;
    border-color: #98b8cc !important;
}

/* Progress Bar with Accent Gradient */
.progress-bar {
    background: linear-gradient(90deg, #2e2e2e 0%, #98b8cc 100%) !important;
}

/* Active List Items */
.list-group-item.active {
    background-color: rgba(152, 184, 204, 0.1) !important;
    border-left: 3px solid #98b8cc !important;
    color: #98b8cc !important;
}

/* Breadcrumb Active */
.breadcrumb-item.active {
    color: #98b8cc !important;
}

/* Table Row Hover */
.table-hover tbody tr:hover {
    background-color: rgba(152, 184, 204, 0.05) !important;
}

/* Selected Table Row */
.table tbody tr.selected {
    background-color: rgba(152, 184, 204, 0.1) !important;
    border-left: 3px solid #98b8cc;
}

/* Custom Scrollbar */
::-webkit-scrollbar-thumb:hover {
    background: #98b8cc !important;
}

/* Dropdown Item Hover/Active */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(152, 184, 204, 0.1) !important;
    color: #98b8cc !important;
}

.dropdown-item.active {
    background-color: #98b8cc !important;
    color: white !important;
}

/* Card Header with Accent */
.card-header.accent {
    background: linear-gradient(135deg, #98b8cc 0%, rgba(152, 184, 204, 0.7) 100%);
    color: white;
}

/* Badge Accent Variant */
.badge-accent,
.bg-accent {
    background-color: #98b8cc !important;
    color: white !important;
}

/* Alert Accent Variant */
.alert-accent {
    background-color: rgba(152, 184, 204, 0.1);
    border-color: #98b8cc;
    color: #2e2e2e;
}

/* Button Accent Variant */
.btn-accent {
    background-color: #98b8cc !important;
    border-color: #98b8cc !important;
    color: white !important;
}

.btn-accent:hover {
    background-color: #7da3b8 !important;
    border-color: #7da3b8 !important;
}

/* Text Color Utility */
.text-accent {
    color: #98b8cc !important;
}

/* Border Color Utility */
.border-accent {
    border-color: #98b8cc !important;
}

/* Background Color Utility */
.bg-accent-light {
    background-color: rgba(152, 184, 204, 0.1) !important;
}

/* Override Bootstrap card backgrounds for Dashboard - With subtle gradients */
.card.bg-primary {
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.card.bg-primary .card-title,
.card.bg-primary .card-text {
    color: #374151 !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.card.bg-danger .card-title,
.card.bg-danger .card-text {
    color: #374151 !important;
}

.card.bg-success {
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.card.bg-success .card-title,
.card.bg-success .card-text {
    color: #374151 !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.card.bg-warning .card-title,
.card.bg-warning .card-text {
    color: #374151 !important;
}

.card.bg-info {
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.card.bg-info .card-title,
.card.bg-info .card-text {
    color: #374151 !important;
}

/* Task specific buttons */
.delete-task {
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
}
.delete-task:hover {
    background-color: #3a3a3a !important;
    border-color: #3a3a3a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}


/* ============= SIP Provider Styles ============= */
.provider-card {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

.provider-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.provider-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg,
        rgba(79, 70, 229, 0.1) 0%,
        rgba(79, 70, 229, 0.05) 100%);
}

.provider-card img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 5px;
}

#phoneNumbersList .input-group {
    margin-bottom: 10px;
}

/* ============= WebRTC Softphone Styles ============= */
.softphone-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.softphone-container.minimized {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.softphone-container.minimized .softphone-body {
    display: none;
}

.softphone-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.softphone-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}

.status-indicator.status-green {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.status-indicator.status-red {
    background: #f87171;
}

.status-indicator.status-yellow {
    background: #fbbf24;
}

.softphone-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.call-display {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.call-number {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    min-height: 32px;
}

.call-status {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
}

.call-duration {
    font-size: 18px;
    color: #3b82f6;
    margin-top: 8px;
}

.dialpad {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dialpad input {
    padding: 12px;
    font-size: 18px;
    text-align: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.dialpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 0;
}

.dialpad-btn {
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.dialpad-btn span {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #9ca3af;
    font-weight: normal;
}

.dialpad-btn:hover {
    background: #e5e7eb;
    transform: scale(0.98);
}

.dialpad-btn:active {
    background: #d1d5db;
}

.call-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #e5e7eb;
}

.btn-call {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-call.hangup {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-call:hover {
    transform: scale(1.05);
}

.btn-control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e5e7eb;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-control:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.btn-control.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

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

/* Video-Chat Button Padding */
#startVideoCallBtn {
    margin-bottom: 1.5rem !important;
}

/* Iframe Gradient Background */
iframe {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Specific iframe for video chat */
iframe[title*="Video-Chat"],
iframe[src*="conversation"],
iframe[src*="video"] {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #eeeeee 100%) !important;
}


/* === Breitere Modals global === */
.modal-dialog.modal-xl {
    max-width: 95vw !important;
}
.modal-dialog.modal-lg {
    max-width: 80vw !important;
}
@media (max-width: 768px) {
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg {
        max-width: calc(100vw - 20px) !important;
    }
}

/* === voiceOne 2col Conversion-Auth === */
.auth-hero { display: none; }  /* default versteckt: Reseller/Whitelabel zeigen Einzelkarte */
html.voiceone-auth.auth-register .login-container {
    max-width: 960px;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(18,52,82,.18);
}
html.voiceone-auth.auth-register .login-container > .login-box {
    flex: 1 1 55%;
    box-shadow: none;
    border-radius: 0;
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: none;
}
html.voiceone-auth.auth-register .auth-hero {
    display: flex;
    flex: 0 0 45%;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 56px 44px;
    background: linear-gradient(155deg,#2E6B94 0%,#1b466a 60%,#15395a 100%);
    color: #fff;
    position: relative;
}
html.voiceone-auth .auth-hero-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; color: #fff; }
html.voiceone-auth .auth-hero-brand span { color: #7FD1AE; }
html.voiceone-auth .auth-hero-title { font-size: 1.95rem; line-height: 1.18; font-weight: 800; color: #fff; margin: 0; }
html.voiceone-auth .auth-hero-sub { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0; }
html.voiceone-auth .auth-hero-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
html.voiceone-auth .auth-hero-list li { font-size: .97rem; color: #fff; display: flex; align-items: center; gap: 12px; }
html.voiceone-auth .auth-hero-list li i { color: #7FD1AE; width: 22px; text-align: center; font-size: 1.05rem; flex: none; }
html.voiceone-auth .auth-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
html.voiceone-auth .auth-hero-badges span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 860px) {
    html.voiceone-auth.auth-register .login-container { flex-direction: column; max-width: 440px; }
    html.voiceone-auth.auth-register .auth-hero { flex-basis: auto; padding: 34px 30px; gap: 16px; }
    html.voiceone-auth .auth-hero-title { font-size: 1.55rem; }
    html.voiceone-auth .auth-hero-sub { font-size: .94rem; }
    html.voiceone-auth.auth-register .login-container > .login-box { padding: 34px 30px; }
}

/* voiceOne: redundanten In-Form-Trustblock ausblenden (Hero deckt ab) */
html.voiceone-auth #registerBox .register-trust { display: none; }
html.voiceone-auth .login-box .login-logo { align-self: center; }

/* subscription-current-card-v1: gebuchtes Abo + Kuendigung */
.current-subscription-card{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:20px 22px;margin:0 auto 28px;max-width:760px;box-shadow:0 2px 10px rgba(20,30,60,.05);}
.current-subscription-card .cs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.current-subscription-card .cs-title{font-size:1.05rem;font-weight:700;color:#1a2233;}
.current-subscription-card .cs-sub{margin:8px 0 0;color:#6b7280;font-size:.92rem;}
.current-subscription-card .cs-badge{font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:999px;white-space:nowrap;}
.current-subscription-card .cs-badge.active{background:#e7f7ee;color:#1a8a4d;}
.current-subscription-card .cs-badge.trial{background:#e8f1ff;color:#1d6fd8;}
.current-subscription-card .cs-badge.canceled{background:#fdecec;color:#c0392b;}
.current-subscription-card .cs-badge.inactive{background:#f1f2f4;color:#7b8190;}
.current-subscription-card .cs-plan{display:flex;align-items:baseline;gap:10px;margin-top:14px;}
.current-subscription-card .cs-plan-name{font-size:1.35rem;font-weight:700;color:#111827;}
.current-subscription-card .cs-plan-price{font-size:1.05rem;font-weight:600;color:#374151;}
.current-subscription-card .cs-plan-price .cs-per{font-size:.85rem;font-weight:400;color:#9aa0aa;}
.current-subscription-card .cs-endnote{margin-top:10px;color:#b8860b;font-weight:600;font-size:.9rem;}
.current-subscription-card .cs-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.current-subscription-card .cs-actions .btn{flex:0 0 auto;}


/* =====================================================================
   pricing-redesign-v1 — Tarifseite
   Gekapselt unter .vo-pr, damit die beiden aelteren .plan-card-Bloecke
   in dieser Datei unberuehrt bleiben.
   ===================================================================== */
.vo-pr {
    --pr-ink: #111827;
    --pr-body: #4b5563;
    --pr-muted: #6b7280;
    --pr-line: #e5e7eb;
    --pr-brand: #2e6b94;
    --pr-brand-2: #5b8fb9;
    /* pricing-redesign-v1-fix2: hellstes Ende fuer Flaechen mit weisser Schrift.
       #5b8fb9 traegt weiss nur mit 3,45:1 - zu wenig fuer AA.
       #40749b erreicht 5,07:1 bei gleichem Farbton. */
    --pr-brand-ok: #40749b;
    --pr-brand-soft: #eef4f9;
    --pr-ok: #0f7b4f;
    --pr-ok-soft: #e7f7ee;

    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 20px 72px;
    color: var(--pr-body);
    font-family: Inter, "Segoe UI", -apple-system, sans-serif;
}

/* ---------- Hero ---------- */
.vo-pr-hero { text-align: center; padding: 8px 0 34px; }

.vo-pr-pill {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--pr-ok-soft); color: #065f46;
    border: 1px solid #a7f3d0; border-radius: 999px;
    padding: 7px 18px; font-size: 14px; font-weight: 600;
    margin-bottom: 20px;
}
.vo-pr-pill i { font-size: 14px; }

.vo-pr-hero h1 {
    font-size: 40px; line-height: 1.15; font-weight: 700;
    color: var(--pr-ink); margin: 0 0 14px; letter-spacing: -0.02em;
}

.vo-pr-lead {
    font-size: 17px; line-height: 1.6; color: var(--pr-body);
    max-width: 620px; margin: 0 auto 24px;
}

.vo-pr-assure {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 26px; font-size: 14px; color: var(--pr-muted);
}
.vo-pr-assure span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vo-pr-assure i { color: var(--pr-ok); font-size: 13px; }

/* ---------- Abrechnungsumschalter ---------- */
.vo-pr-billing {
    display: inline-flex; gap: 4px; padding: 4px;
    background: #eef1f5; border-radius: 999px;
    margin: 0 auto 38px; left: 50%; position: relative; transform: translateX(-50%);
}
.vo-pr .vo-pr-cycle {
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--pr-muted);
    display: inline-flex; align-items: center; gap: 9px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    font-family: inherit;
}
.vo-pr .vo-pr-cycle:hover { color: var(--pr-ink); }
.vo-pr .vo-pr-cycle.is-active {
    background: #fff; color: var(--pr-ink);
    box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.vo-pr-cycle-save {
    background: var(--pr-ok-soft); color: var(--pr-ok);
    font-size: 12px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Tarifkarten ---------- */
.vo-pr-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 22px; align-items: start;
}

.vo-pr-card {
    position: relative; background: #fff;
    border: 1px solid var(--pr-line); border-radius: 16px;
    padding: 30px 26px 26px;
    display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.vo-pr-card:hover {
    border-color: #d7dee6;
    box-shadow: 0 10px 28px rgba(16,24,40,.09);
    transform: translateY(-2px);
}

/* Empfehlung: sichtbar dominanter, damit die Wahl leichter faellt */
.vo-pr-card--featured {
    border: 2px solid var(--pr-brand);
    box-shadow: 0 14px 40px rgba(46,107,148,.16);
    padding-top: 38px;
}
.vo-pr-card--featured:hover {
    border-color: var(--pr-brand);
    box-shadow: 0 18px 46px rgba(46,107,148,.22);
}

.vo-pr-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--pr-brand), var(--pr-brand-ok));
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
    padding: 6px 16px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(46,107,148,.35);
}

.vo-pr-card-head { min-height: 74px; }
.vo-pr-name {
    font-size: 21px; font-weight: 700; color: var(--pr-ink);
    margin: 0 0 6px; letter-spacing: -0.01em;
}
.vo-pr-for { font-size: 14px; line-height: 1.45; color: var(--pr-muted); margin: 0; }

.vo-pr-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.vo-pr-amount {
    font-size: 38px; font-weight: 700; color: var(--pr-ink);
    letter-spacing: -0.03em; line-height: 1;
}
.vo-pr-per { font-size: 15px; color: var(--pr-muted); font-weight: 500; }

.vo-pr-meta {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 9px; font-size: 13px; color: var(--pr-muted);
}
.vo-pr-vat::before { content: "·"; margin-right: 10px; color: #cbd2da; }

.vo-pr-yearsave {
    margin-top: 12px; padding: 7px 12px;
    background: var(--pr-ok-soft); color: var(--pr-ok);
    border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center;
}

/* Knopf steht VOR der Merkmalsliste: die Entscheidung soll nicht
   hinter einer Aufzaehlung verschwinden. */
.vo-pr .vo-pr-cta {
    width: 100%; margin-top: 22px;
    border: 0; border-radius: 999px; cursor: pointer;
    padding: 14px 20px; font-size: 15px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, var(--pr-brand), var(--pr-brand-ok));
    box-shadow: 0 6px 16px rgba(46,107,148,.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    text-transform: none; letter-spacing: 0; font-family: inherit;
}
.vo-pr .vo-pr-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46,107,148,.34); filter: brightness(1.04); color: #fff; }
.vo-pr .vo-pr-cta:disabled { opacity: .65; transform: none; cursor: default; }

/* Nebentarife ruhiger, damit die Empfehlung fuehrt */
.vo-pr .vo-pr-cta-quiet {
    background: #fff; color: var(--pr-brand);
    border: 1.5px solid #cddbe6; box-shadow: none;
}
.vo-pr .vo-pr-cta-quiet:hover {
    background: var(--pr-brand-soft); color: var(--pr-brand);
    border-color: var(--pr-brand-2); box-shadow: none;
}

.vo-pr-micro {
    margin-top: 10px; text-align: center;
    font-size: 12.5px; color: var(--pr-muted); line-height: 1.45;
}

.vo-pr-list { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid #f0f2f5; padding-top: 18px; }
.vo-pr-list li {
    position: relative; padding: 7px 0 7px 26px;
    font-size: 14.5px; line-height: 1.5; color: var(--pr-body);
}
.vo-pr-list li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: 8px; font-size: 11px; color: var(--pr-brand);
}
.vo-pr-list strong { color: var(--pr-ink); font-weight: 700; }

/* ---------- Enterprise als Zeile ---------- */
.vo-pr-enterprise {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
    margin-top: 26px; padding: 22px 26px;
    background: #fff; border: 1px solid var(--pr-line); border-radius: 14px;
}
.vo-pr-ent-text { display: flex; flex-direction: column; gap: 3px; }
.vo-pr-ent-text strong { color: var(--pr-ink); font-size: 15.5px; font-weight: 700; }
.vo-pr-ent-text span { font-size: 14px; color: var(--pr-muted); }
.vo-pr .vo-pr-ent-btn {
    flex: 0 0 auto; border: 1.5px solid #cddbe6; background: #fff;
    color: var(--pr-brand); border-radius: 999px; cursor: pointer;
    padding: 11px 24px; font-size: 14px; font-weight: 600;
    text-transform: none; letter-spacing: 0; font-family: inherit;
    transition: background .18s ease, border-color .18s ease;
}
.vo-pr .vo-pr-ent-btn:hover { background: var(--pr-brand-soft); border-color: var(--pr-brand-2); color: var(--pr-brand); }

/* ---------- Vertrauensleiste ---------- */
.vo-pr-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 34px; padding: 22px 0; border-top: 1px solid var(--pr-line);
}
.vo-pr-trust > div { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--pr-muted); line-height: 1.5; }
.vo-pr-trust i { color: var(--pr-brand); font-size: 15px; margin-top: 2px; flex: 0 0 auto; }

/* ---------- Einwand-FAQ ---------- */
.vo-pr-faq { margin-top: 34px; }
.vo-pr-faq h2 {
    font-size: 22px; font-weight: 700; color: var(--pr-ink);
    margin: 0 0 18px; text-align: center; letter-spacing: -0.01em;
}
.vo-pr-faq-list { max-width: 760px; margin: 0 auto; }
.vo-pr-faq details {
    background: #fff; border: 1px solid var(--pr-line); border-radius: 12px;
    padding: 0; margin-bottom: 10px; overflow: hidden;
}
.vo-pr-faq summary {
    cursor: pointer; padding: 16px 20px; list-style: none;
    font-size: 15px; font-weight: 600; color: var(--pr-ink);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.vo-pr-faq summary::-webkit-details-marker { display: none; }
.vo-pr-faq summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
    font-size: 11px; color: var(--pr-muted); transition: transform .2s ease; flex: 0 0 auto;
}
.vo-pr-faq details[open] summary::after { transform: rotate(180deg); }
.vo-pr-faq details[open] summary { border-bottom: 1px solid #f0f2f5; }
.vo-pr-faq details p {
    margin: 0; padding: 15px 20px 18px;
    font-size: 14.5px; line-height: 1.65; color: var(--pr-body);
}
.vo-pr-faq details p strong { color: var(--pr-ink); }

/* Abo-Karte in der neuen Seite mittig fuehren */
.vo-pr .current-subscription-card { margin: 0 auto 26px; }

/* ---------- schmalere Fenster ---------- */
/* pricing-redesign-v1-fix6: Schwelle von 1000 auf 1180 - bei 1024px Fenster
   bleiben nach der Seitenleiste nur ~211px je Karte, der Preis brach um. */
@media (max-width: 1180px) {
    .vo-pr-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .vo-pr-card--featured { order: -1; }          /* Empfehlung zuerst */
    .vo-pr-trust { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
    .vo-pr { padding: 4px 14px 56px; }
    .vo-pr-hero h1 { font-size: 30px; }
    .vo-pr-lead { font-size: 15.5px; }
    .vo-pr-assure { gap: 8px 16px; font-size: 13px; }
    .vo-pr-amount { font-size: 33px; }
    .vo-pr-enterprise { flex-direction: column; align-items: flex-start; }
    .vo-pr .vo-pr-ent-btn { width: 100%; }
}
/* pricing-redesign-v1-fix1: Selektoren mit .vo-pr qualifiziert, damit sie gegen
   die eingebettete .subscribe-button-Regel in index_v2.html ankommen. */

/* pricing-redesign-v1-fix3: Hinweis, wenn ein Tarif keine Jahreszahlung hat */
.vo-pr .vo-pr-yearnote {
    margin-top: 12px; padding: 7px 12px;
    background: #fff8e6; color: #8a6100; border: 1px solid #f5e3b3;
    border-radius: 8px; font-size: 12.5px; font-weight: 600;
    text-align: center; line-height: 1.4;
}

/* pricing-redesign-v1-fix4: kein seitliches Schieben in schmalen Fenstern.
   Die Abo-Karte stammt aus dem Bestand (max-width 760px, Knopfzeile ohne
   Umbruch) und sprengte den Rahmen. */
.vo-pr .current-subscription-card { max-width: 100%; box-sizing: border-box; }
.vo-pr .current-subscription-card .cs-head { flex-wrap: wrap; }
.vo-pr .current-subscription-card .cs-plan { flex-wrap: wrap; }
@media (max-width: 640px) {
    .vo-pr .current-subscription-card .cs-actions { flex-direction: column; align-items: stretch; }
    .vo-pr .current-subscription-card .cs-actions .btn { width: 100%; }
    /* Umschalter mittig ohne Verschiebe-Technik, die ueberstehen kann */
    .vo-pr .vo-pr-billing { left: auto; transform: none; display: flex; width: fit-content; margin-left: auto; margin-right: auto; max-width: 100%; }
    .vo-pr .vo-pr-cycle { padding: 9px 14px; font-size: 13px; }
}

/* pricing-redesign-v1-fix5: Grid-Elemente duerfen unter ihre Inhaltsbreite
   schrumpfen (Standardwert min-width:auto verhindert das und erzeugt sonst
   seitliches Schieben, wenn wenig Platz bleibt). */
.vo-pr .vo-pr-grid > * { min-width: 0; }
.vo-pr .vo-pr-card { overflow-wrap: anywhere; }
.vo-pr .vo-pr-enterprise > * { min-width: 0; }

/* pricing-redesign-v1-fix6: Preis und Zeiteinheit bleiben zusammen. */
.vo-pr .vo-pr-price { white-space: nowrap; flex-wrap: nowrap; }
.vo-pr .vo-pr-amount, .vo-pr .vo-pr-per { white-space: nowrap; }

/* pricing-redesign-v1-fix7: .subscribe-button setzt global width:100%
   (styles.css ~2737). Fuer die Enterprise-Zeile ist ein kompakter Knopf
   richtig - er steht dort neben dem Text, nicht unter einer Tarifkarte. */
.vo-pr .vo-pr-ent-btn { width: auto; }
@media (max-width: 640px) { .vo-pr .vo-pr-ent-btn { width: 100%; } }
/* ===== Ende pricing-redesign-v1 ===== */


/* === register-conversion-v1 === */
#registerBox .auth-reg-sub { color:#5e6d7f; font-size:.95rem; }
#registerBox .auth-reg-micro { font-size:.78rem; color:#8a97a8; }
#registerBox .auth-reg-steps { background:#f5f8fb; border:1px solid rgba(46,107,148,.12); border-radius:12px; padding:14px 16px; margin:18px 0 4px; }
#registerBox .auth-reg-steps-title { font-size:.78rem; font-weight:700; color:#2E6B94; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
#registerBox .auth-reg-steps ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
#registerBox .auth-reg-steps li { display:flex; align-items:center; gap:10px; font-size:.88rem; color:#5e6d7f; }
#registerBox .auth-reg-steps li span { flex:none; width:20px; height:20px; border-radius:50%; background:#2E6B94; color:#fff; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
html.voiceone-auth .auth-hero-proof { font-size:.85rem; color:rgba(255,255,255,.72); margin:0; border-top:1px solid rgba(255,255,255,.18); padding-top:14px; }
@media (max-width:860px) {
  /* regseite-v1: Mobil trug bisher KEIN Vertrauenselement (Liste + Sozialbeleg beide aus).
     Neu: die zwei staerksten Nutzenpunkte und der Sozialbeleg bleiben, der Rest faellt weg.
     Der Untertitel bleibt aus - er ist die laengste Zeile und der schwaechste Traeger. */
  html.voiceone-auth.auth-register .auth-hero-list li:nth-child(n+3) { display:none; }
  html.voiceone-auth.auth-register .auth-hero-list { gap:6px; }
  html.voiceone-auth.auth-register .auth-hero-list li { font-size:.92rem; }
  html.voiceone-auth.auth-register .auth-hero { gap:12px; padding:24px 28px 20px; }
  html.voiceone-auth.auth-register .auth-hero-proof { font-size:.78rem; padding-top:10px; }
  html.voiceone-auth .auth-hero-sub { display:none; }
}


/* ===== google-signin-v1: Social-Auth (Login + Registrierung) ===== */
.social-auth { margin-bottom: 18px; }
.btn-google-auth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.btn-google-auth:hover { background: #f8faff; box-shadow: 0 1px 3px rgba(60,64,67,.2); }
.btn-google-auth:disabled { opacity: .6; cursor: default; }
.btn-google-auth .g-logo { flex: 0 0 18px; }
.social-auth-terms { font-size: 0.78rem; color: #8a97a8; margin: 8px 0 0; text-align: center; }
.social-auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: #8a97a8; font-size: 0.85rem; }
.social-auth-divider::before, .social-auth-divider::after { content: ""; flex: 1; height: 1px; background: #e3e8ef; }


/* therapist-page-v1 (2026-08-05) */
.cal-team-avatar {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary, #0d6efd), #6ea8fe);
    color: #fff; font-weight: 600; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.cal-team-rulenr {
    width: 24px; height: 24px; flex: 0 0 24px;
    border-radius: 50%; background: var(--bs-primary, #0d6efd); color: #fff;
    font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.cal-team-card { transition: box-shadow .15s ease; }
.cal-team-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.cal-team-editor:empty { display: none; }
.cal-team-editor .card { box-shadow: none; }
/* Die gestaffelte Zeilen-Einblendung (styles.css) laesst live neu
   gerenderte Tabellen bei jedem Neuladen flackern. */
.cal-team-page tbody tr { animation: none !important; }


/* nstab-v1 (2026-08-21) — Tabellen der Seite "Nicht erschienen".
   BEFUND (im Browser gemessen, Viewport 1700): Zwei Hausregeln treffen JEDE
   Tabelle im Haus und passen hier nicht.
     1) '.table th:nth-child(2|3)' stammt aus dem Kontakte-Layout (Name/Firma)
        und zwang Spalte 2 auf feste 140px.
     2) '.table-hover ... :last-child { width:50px }' ist fuer eine Aktions-
        spalte mit EINEM Symbolknopf gedacht. Hier steht dort eine Knopfleiste
        (Erschienen/Abgesagt/Nicht erschienen) mit 378px Bedarf.
   Folge: die Spalte war 50px breit, die Knoepfe quollen 334px ueber den
   Kartenrand und wurden abgeschnitten - es gab KEINEN Scrollbalken, weil die
   Tabelle selbst in den Container passte und nur ihr Inhalt herauslief.
   Hier werden beide Vorgaben ausschliesslich fuer diese Seite zurueckgenommen:
   Spaltenbreite nach Inhalt, Aktionsspalte so breit wie noetig, Rest umbruch-
   faehig. Zusaetzlich kompaktere Zeilen und Knoepfe (Wunsch: "kleiner").
   Die Selektoren beginnen mit 'table.', damit sie die Hausregeln sicher
   ueberstimmen und nicht von deren Reihenfolge abhaengen. */
table.ns-tabelle {
    table-layout: auto;
}
/* Die festen Breiten aus dem Kontakte-Layout zuruecknehmen. */
table.ns-tabelle th:nth-child(1), table.ns-tabelle td:nth-child(1),
table.ns-tabelle th:nth-child(2), table.ns-tabelle td:nth-child(2),
table.ns-tabelle th:nth-child(3), table.ns-tabelle td:nth-child(3),
table.ns-tabelle th:nth-child(4), table.ns-tabelle td:nth-child(4) {
    width: auto;
    min-width: 0;
    max-width: none;
}
/* Inhalt darf umbrechen statt abgeschnitten zu werden. */
table.ns-tabelle th, table.ns-tabelle td {
    white-space: normal;
    overflow: visible;
    max-width: none;
    padding: 0.45rem 0.5rem;
}
/* Aktionsspalte: so schmal wie ihr Inhalt, aber nie schmaler. */
table.ns-tabelle thead tr th:last-child,
table.ns-tabelle tbody tr td:last-child {
    width: 1%;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
}
/* Die Knopfleiste kompakter - spart rund ein Fuenftel Breite. */
table.ns-tabelle .btn-group-sm > .btn,
table.ns-tabelle .btn-group > .btn {
    padding: 0.22rem 0.5rem;
    font-size: 0.8125rem;
}
/* Abstand zwischen den Aktionsknoepfen (Wunsch: "noch mehr Abstand").
   Bootstrap klebt die Knoepfe einer .btn-group bauartbedingt zusammen:
   margin-left:-1px laesst die Rahmen verschmelzen, und die inneren Ecken
   werden auf 0 gesetzt. Beides wird hier ausschliesslich fuer diese Tabelle
   zurueckgenommen, damit aus der Leiste drei einzeln erkennbare Knoepfe
   werden. Die Klasse .btn-group BLEIBT im Markup, weil der Klick-Pfad
   (_markiere) ueber closest('.btn-group') alle Knoepfe waehrend des
   Speicherns sperrt - ein Entfernen wuerde Doppelklicks ermoeglichen.
   border-radius uebernimmt den Wert des Knopfes selbst, damit die kleine
   Variante ihre kleinere Rundung behaelt. */
table.ns-tabelle .btn-group {
    gap: 0.5rem;
}
table.ns-tabelle .btn-group > .btn {
    margin-left: 0;
    border-radius: var(--bs-btn-border-radius);
}
/* Das Datum in der ersten Spalte soll nicht mitten im Zeitraum umbrechen. */
table.ns-tabelle td:first-child > div:first-child {
    white-space: nowrap;
}