:root {
    --sidebar-bg: #2c3e50;
    --header-bg: #ffffff;
    --content-bg: #ecf0f1;
    --card-bg: #ffffff;
    --text-color: #34495e;
    --text-light: #ecf0f1;
    --primary-color: #27ae60;
    --border-color: #bdc3c7;
    --error-color: #c0392b;
    --success-color: #27ae60;
}


:root[data-theme="dark"] {
    --sidebar-bg: rgba(13, 26, 56, 0.72);
    --header-bg: rgba(10, 24, 50, 0.66);
    --content-bg: #060b1b;
    --card-bg: rgba(20, 40, 76, 0.46);
    --text-color: #e6f1ff;
    --text-light: #e6f1ff;
    --primary-color: #31b8ff;
    --border-color: rgba(89, 170, 255, 0.3);
    --error-color: #ff6b81;
    --success-color: #44e6ff;
}

:root[data-theme="dark"] body {
    background: radial-gradient(circle at 18% 22%, rgba(80, 36, 148, 0.45), transparent 48%),
                radial-gradient(circle at 82% 10%, rgba(37, 162, 255, 0.28), transparent 42%),
                linear-gradient(145deg, #040a18 0%, #08142e 45%, #120b2e 100%);
    color: var(--text-color);
}

:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .content-area,
:root[data-theme="dark"] .crm-controls-area {
    background: transparent;
}

:root[data-theme="dark"] .header,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .login-box,
:root[data-theme="dark"] .notification-item,
:root[data-theme="dark"] .notifications-dropdown,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .crm-column,
:root[data-theme="dark"] .feature-locked-screen {
    background: rgba(15, 36, 69, 0.5);
    border: 1px solid rgba(119, 198, 255, 0.24);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(189, 232, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

:root[data-theme="dark"] .sidebar {
    background: rgba(9, 22, 46, 0.78);
    border-right: 1px solid rgba(96, 165, 250, 0.2);
    backdrop-filter: blur(18px);
}

:root[data-theme="dark"] .sidebar-header,
:root[data-theme="dark"] .sidebar-user-info,
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .crm-controls-area {
    border-color: rgba(119, 198, 255, 0.24);
}

:root[data-theme="dark"] .nav-link:hover {
    background: rgba(58, 132, 255, 0.24);
}

:root[data-theme="dark"] .nav-link.active {
    background: linear-gradient(120deg, rgba(45, 123, 255, 0.78), rgba(0, 214, 255, 0.74));
}

:root[data-theme="dark"] .notifications-toggle,
:root[data-theme="dark"] .support-toggle,
:root[data-theme="dark"] .marketing-promo-toggle,
:root[data-theme="dark"] .language-switcher select,
:root[data-theme="dark"] .sidebar-toggle,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: rgba(11, 27, 53, 0.72);
    color: #e8f3ff;
    border-color: rgba(119, 198, 255, 0.26);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: rgba(219, 238, 255, 0.56);
}

:root[data-theme="dark"] .language-switcher label,
:root[data-theme="dark"] .stat-card h4,
:root[data-theme="dark"] .page-subtitle,
:root[data-theme="dark"] .form-help,
:root[data-theme="dark"] .notification-item--read {
    color: rgba(225, 241, 255, 0.74);
}

:root[data-theme="dark"] a,
:root[data-theme="dark"] .link-button {
    color: #79d8ff;
}

:root[data-theme="dark"] .notification-item--unread,
:root[data-theme="dark"] .notifications-dropdown-empty {
    background: rgba(11, 34, 70, 0.7);
    border-color: rgba(89, 170, 255, 0.3);
}

:root[data-theme="dark"] .notification-type,
:root[data-theme="dark"] .notification-type--warning,
:root[data-theme="dark"] .notification-type--success,
:root[data-theme="dark"] .notification-type--system {
    background: rgba(60, 132, 246, 0.18);
    color: #aee8ff;
}

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

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
}

.theme-icon {
    font-size: 14px;
    opacity: 0.45;
    transition: opacity 0.2s ease, color 0.2s ease;
}

:root[data-theme="light"] .theme-icon-sun,
:root:not([data-theme="dark"]) .theme-icon-sun {
    opacity: 1;
    color: #f59e0b;
}

:root[data-theme="dark"] .theme-toggle {
    background: rgba(11, 27, 53, 0.72);
    border-color: rgba(119, 198, 255, 0.3);
    color: #e8f3ff;
}

:root[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
    color: #44e6ff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    color: var(--text-color);
    background-color: var(--content-bg);
}

.update-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 16px;
    background: #111827;
    color: #f59e0b;
    font-weight: 600;
    z-index: 5000;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.update-notification__text {
    text-align: center;
}

.update-notification__action {
    font-size: 18px;
    line-height: 1;
}

.hidden {
    display: none !important;
}

/* --- LOGIN PAGE --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-box {
    width: 100%;
    max-width: 400px;
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-box h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
}

/* --- DASHBOARD LAYOUT --- */
.dashboard-layout {
    display: grid;
    grid-template-columns: clamp(220px, 20vw, 320px) minmax(0, 1fr);
    min-height: 100vh;
}

/* --- SIDEBAR --- */
.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #34495e;
    text-align: center;
}

.sidebar-header h2 {
    margin: 0;
}

.sidebar-user-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #34495e;
}

.client-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.client-plan {
    font-size: 13px;
    color: #bdc3c7;
    text-transform: uppercase;
    margin-top: 5px;
}

.client-plan-expiry-line {
    margin-top: 2px;
    text-transform: none;
}

.client-credits {
    font-size: 13px;
    color: #bdc3c7;
    margin-top: 5px;
}


.nav-links {
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

.nav-link {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    padding: 12px 48px 12px 20px;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    position: relative;
}

.nav-link:hover {
    background-color: #34495e;
}

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

.nav-link.menu-item-locked {
    opacity: 0.7;
}

.nav-lock-icon {
    margin-left: 8px;
    font-size: 13px;
    color: #f0ad4e;
    vertical-align: middle;
}

.nav-icon {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    font-size: 16px;
    vertical-align: middle;
}
.nav-badge {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e74c3c;
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-layout.sidebar-collapsed .nav-badge {
    right: 10px;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    z-index: 1050;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.sidebar-toggle:hover {
    background: #f5f5f5;
}

.sidebar-toggle:active {
    transform: translateY(1px);
}

.sidebar-overlay {
    display: none;
}

.page-content.feature-locked {
    position: relative;
    min-height: 420px;
}

.feature-locked-screen {
    position: absolute;
    inset: 0;
    text-align: center;
    padding: 32px;
    border: 1px dashed var(--border-color);
    background: rgba(255, 253, 248, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.feature-locked-screen.hidden {
    display: none;
}

.page-content.feature-locked > :not(.feature-locked-screen) {
    filter: blur(1px);
    pointer-events: none;
}

.feature-locked-screen .locked-icon {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.feature-locked-screen .locked-subtitle {
    color: var(--text-muted);
    margin: 10px 0 16px;
}

.feature-locked-screen .locked-actions {
    display: flex;
    justify-content: center;
}

.dashboard-layout.sidebar-collapsed {
    grid-template-columns: 72px 1fr;
}

.dashboard-layout.sidebar-collapsed .sidebar {
    width: 72px;
}

.dashboard-layout.sidebar-collapsed .sidebar-header,
.dashboard-layout.sidebar-collapsed .nav-links {
    align-items: center;
}

.dashboard-layout.sidebar-collapsed .sidebar-header h2,
.dashboard-layout.sidebar-collapsed .sidebar-user-info,
.dashboard-layout.sidebar-collapsed .sidebar-logo {
    display: none;
}

.dashboard-layout.sidebar-collapsed .nav-links {
    padding: 12px 0;
}

.dashboard-layout.sidebar-collapsed .nav-link {
    text-align: center;
    padding: 12px 16px;
    gap: 0;
}

.dashboard-layout.sidebar-collapsed .nav-icon {
    margin-right: 0;
}

.dashboard-layout.sidebar-collapsed .nav-link-text {
    display: none;
}

.nav-link-text {
    vertical-align: middle;
}

/* --- MAIN CONTENT AREA --- */
.main-content {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--content-bg);
}

/* 1. Main Container: Occupies remaining screen height */
.crm-flex-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px) !important;
    width: 100%;
    overflow: hidden;
    padding: 0;
    padding-bottom: 0 !important;
    margin: 0;
}

.crm-view-wrapper > .crm-alert {
    margin: 20px;
}

/* 2. Top Block: Auto height, no shrinking */
.crm-controls-area {
    flex: 0 0 auto;
    padding: 20px 20px 10px 20px;
    background-color: var(--content-bg);
    border-bottom: 1px solid #eee;
    z-index: 5;
}

/* 3. Bottom Block: Fills remaining space, Handles X-Scroll */
.crm-board-scroll-area {
    flex: 1;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    transform: rotateX(180deg);
    padding-bottom: 5px;
    box-sizing: border-box;
}

/* 4. The Row of Columns */
.crm-board-row {
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 15px;
    width: max-content;
    transform: rotateX(180deg);
    padding-bottom: 10px;
}

/* 5. Individual Column */
.crm-column {
    width: 320px;
    min-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* 6. Cards inside Column: Vertical Scroll */
.crm-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    min-height: 0;
    padding-bottom: 20px;
}

/* --- 1. COMPACT TOOLBAR FIX --- */

/* Force the wrapper to be a single horizontal line */
.crm-pipeline-selector-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Prevent wrapping */
    width: 100%;
    margin-top: 10px;
    gap: 15px;
}

/* Constrain the Sort Controls container */
.crm-sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto; /* Do not grow */
    margin-left: auto; /* Push to right */
}

/* CRITICAL: Fix the wide dropdown */
#crm-sort-by {
    width: auto !important;      /* Override global styles */
    min-width: 140px;
    max-width: 200px;
    display: inline-block;
    height: 38px;                /* Match button height */
    padding: 0 30px 0 10px;      /* Fix text padding */
    margin: 0;
}

/* --- 2. MAXIMIZE BOARD HEIGHT --- */

/* Ensure the wrapper touches the bottom of the screen */
.crm-flex-wrapper {
    height: calc(100vh - 60px) !important; /* Total viewport minus Top Nav */
    padding-bottom: 0 !important;
}

/* Ensure columns use all that space */
.crm-column {
    height: 100%;       /* Fill container */
    max-height: 100%;   /* Stop overflow */
    display: flex;
    flex-direction: column;
}

/* Ensure the card area stretches and scrolls */
.crm-column-body {
    flex: 1;            /* Grow to fill column */
    overflow-y: auto;   /* Scroll cards internally */
    min-height: 0;      /* Flexbox fix */
    padding-bottom: 40px; /* Extra space at bottom for scrolling */
}

.header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notifications-menu,
.support-menu {
    position: relative;
}

.marketing-promo-menu {
    position: relative;
}

.notifications-toggle,
.support-toggle,
.marketing-promo-toggle {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
}

.notifications-toggle i,
.support-toggle i,
.marketing-promo-toggle i {
    font-size: 16px;
}

.promo-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #ffffff;
}

.marketing-promo-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    background: linear-gradient(135deg, #ff6b6b, #ffb347);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 6px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #ffffff;
}

.marketing-promo-badge.is-attention {
    animation: marketingBadgePulse 1.6s infinite;
}

@keyframes marketingBadgePulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}

.notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 6px;
    min-width: 18px;
    text-align: center;
}

.notifications-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 320px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 12px;
    z-index: 3200;
}

.notifications-dropdown-header,
.notifications-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
}

.notifications-dropdown-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    padding-bottom: 0;
}

.notifications-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notifications-dropdown-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
}

.notifications-dropdown-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.notifications-dropdown-message {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.notifications-dropdown-empty {
    padding: 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #6b7280;
    text-align: center;
    font-size: 13px;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-item {
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #ffffff;
}

.notification-item--unread {
    background: #f0f6ff;
    border-color: #b6d4fe;
}

.notification-item--read {
    color: #6b7280;
}

.notification-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.notification-type {
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: #e5f1ff;
    color: #1d4ed8;
}

.notification-type--warning {
    background: #fff6e6;
    color: #92400e;
}

.notification-type--success {
    background: #e6f9ee;
    color: #1f7a50;
}

.notification-type--system {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-title {
    margin: 0 0 6px;
    font-size: 18px;
}

.notification-message {
    margin: 0 0 10px;
    font-size: 14px;
    color: inherit;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-switcher label {
    font-size: 13px;
    color: #555;
}


.language-switcher select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-color);
}

.header-stats {
    display: flex;
    gap: 20px;
}

.stat-card {
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 6px;
    min-width: 100px;
}

.stat-card h4 {
    margin: 0 0 5px 0;
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
}

.stat-card p {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}
.stat-card__value {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stat-card__value .link-button {
    padding: 0;
    font-size: 12px;
}

.header-user button {
    width: auto;
}

.content-area {
    padding: 5px;
    flex-grow: 1;
}

.content-area h1 {
    margin-top: 0;
}

.card {
    background-color: var(--card-bg);
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.page-subtitle {
    margin: 0;
    color: #7f8c8d;
    font-size: 16px;
    font-weight: 400;
}

.form-help {
    margin-top: 6px;
    font-size: 13px;
    color: #7f8c8d;
}

.form-help.error {
    color: var(--error-color);
}

.rich-text-editor {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fdfdfd;
}

.rich-text-editor .editor-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.rich-text-editor .editor-toolbar button {
    background: #f1f3f5;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rich-text-editor .editor-toolbar button:hover {
    background-color: #e2e6ea;
}

.rich-text-editor .editor-content {
    min-height: 120px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
}

.rich-text-editor .editor-content:empty::before {
    content: attr(data-placeholder);
    color: #999;
}

.generator-mode-tabs {
    display: inline-flex;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    background: #f4f7fb;
    border: 1px solid #e3e8ef;
    margin-bottom: 10px;
}

.generator-mode-tab {
    border: none;
    background: transparent;
    color: #4a5568;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.generator-mode-tab.active {
    background: linear-gradient(120deg, var(--primary-color), #3b82f6);
    color: #fff;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

.generator-mode-description {
    margin-top: 0;
    margin-bottom: 16px;
    color: #5f6b7a;
}

.generator-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.generator-source-column,
.generator-settings-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.generator-mode-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.generator-mode-panel.hidden {
    display: none;
}

.generator-source-card {
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.generator-source-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.1);
}

.generator-source-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.generator-source-title h3 {
    margin: 0;
    font-size: 16px;
}

.generator-source-title .muted-text {
    margin: 4px 0 0;
}

.generator-source-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d5dce6;
    background: #f8fafc;
    color: #1f2937;
}

.generator-source-radio input {
    margin: 0;
    accent-color: var(--primary-color);
}

.generator-source-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 12px 34px rgba(59, 130, 246, 0.18);
}

.generator-settings-panel {
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    padding: 18px;
    background: linear-gradient(180deg, #fdfefe 0%, #f5f7fb 100%);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.generator-language-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.prompt-hint-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.prompt-hint-label {
    font-weight: 600;
}

.prompt-hint-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.prompt-hint-controls select {
    min-width: 240px;
    padding: 10px;
    border: 1px solid #d5dce6;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    color: #1f2937;
}

.prompt-hint-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prompt-hint-examples button {
    background: #eef2ff;
    border: 1px solid #d7ddf5;
    color: #1d4ed8;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.prompt-hint-examples button:hover {
    background: #e0e7ff;
    border-color: #c7d2fe;
}

.generator-inline-link {
    border: none;
    background: transparent;
    color: #1d4ed8;
    padding: 0;
    margin: 2px 0 8px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
}

.generator-inline-preview {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px dashed #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.generator-language-picker select {
    max-width: 320px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
}

.generator-selected-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.generator-selected-languages.empty::before {
    content: 'No languages selected.';
    color: #7f8c8d;
    font-size: 13px;
}

.language-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background-color: #eef2f5;
    color: #2c3e50;
    border: 1px solid var(--border-color);
    font-size: 13px;
}

.language-pill button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 14px;
}

.language-pill button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.generator-instruction-block {
    display: grid;
    gap: 20px;
}

.generator-instruction-block h3 {
    margin: 0;
}

.generator-advanced-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.generator-advanced-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    display: grid;
    gap: 12px;
}

.inline-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.inline-actions button {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.generator-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 10px;
}

#quiz-generator-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 1024px) {
    .generator-config-grid {
        grid-template-columns: 1fr;
    }
}

.inline-actions button:hover {
    background-color: rgba(0, 115, 170, 0.08);
    color: var(--primary-color);
    opacity: 1;
}

.generator-code-block {
    background: #111826;
    color: #ecf0f1;
    padding: 16px;
    border-radius: 6px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-x: auto;
}

.generator-next-step {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.generator-output-controls .generator-actions {
    margin-top: 0;
}

.generator-actions button {
    min-width: 160px;
}

.template-select-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.template-select-row select {
    flex: 1 1 auto;
}

.template-save-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.template-save-controls input {
    flex: 1 1 220px;
}

.template-save-controls button {
    flex: 0 0 auto;
}

.danger-button {
    background-color: #d93025;
    border: none;
    color: #fff;
}

.danger-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.danger-button:not(:disabled):hover {
    background-color: #b1241b;
    opacity: 1;
}

.generator-status {
    margin-top: 10px;
    font-size: 14px;
    min-height: 20px;
}

.generator-status.error {
    color: var(--error-color);
}

.generator-status.success {
    color: var(--primary-color);
}

.generator-status.warning {
    color: #e67e22;
}

.generator-output-toggle {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.generator-output-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.generator-toggle-button {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: #f5f7f9;
    cursor: pointer;
}

.generator-toggle-button:hover {
    background-color: #eef2f6;
}

.generator-output-sections.hidden {
    display: none;
}

.generator-ai-response {
    margin-top: 16px;
    padding: 16px;
    border-left: 4px solid var(--primary-color);
    background-color: #f5f9f6;
    border-radius: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.generator-ai-response.error {
    border-color: var(--error-color);
    background-color: #fceaea;
}

.generator-ai-response.success {
    border-color: var(--primary-color);
}

.generator-ai-response.warning {
    border-color: #e67e22;
    background-color: rgba(230, 126, 34, 0.08);
}

.generator-ai-response-title {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.generator-ai-response-message {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}

.generator-result textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background: #fafafa;
}

.generator-result.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.word-html-converter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.word-html-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.word-html-toolbar button {
    border: 1px solid var(--border-color);
    background-color: #f5f7f9;
    color: var(--text-color);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    min-width: 48px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.word-html-toolbar button:hover,
.word-html-toolbar button:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    outline: none;
}

.word-html-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.word-html-panel {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.word-html-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--text-color);
}

.word-html-panel-subtitle {
    font-weight: 400;
    font-size: 12px;
    color: #7f8c8d;
}

.word-html-editable {
    min-height: 220px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background-color: #fff;
    overflow: auto;
    line-height: 1.5;
}

.word-html-editable:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.word-html-panel textarea {
    min-height: 220px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    width: 100%;
}

.word-html-copy {
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s, color 0.2s;
}

.word-html-copy:hover,
.word-html-copy:focus {
    background-color: var(--primary-color);
    color: #fff;
    outline: none;
}

.word-html-status {
    min-height: 20px;
    font-size: 13px;
    color: var(--primary-color);
}

.word-html-status.error {
    color: var(--error-color);
}

.word-html-counter {
    margin-top: 6px;
    font-size: 13px;
    color: #7f8c8d;
}

.word-html-counter.warning {
    color: var(--error-color);
}

.pdf-html-converter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.pdf-html-inputs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.pdf-html-inputs input[type="file"] {
    flex: 1 1 260px;
}

.pdf-html-inputs button {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pdf-html-inputs button:hover,
.pdf-html-inputs button:focus {
    background: #1d4ed8;
}

.pdf-html-status {
    min-height: 18px;
    font-size: 13px;
    color: #555;
}

.pdf-html-status.error {
    color: #c0392b;
}

.pdf-html-counter {
    font-size: 13px;
    color: #555;
}

.pdf-html-counter.warning {
    color: #c0392b;
}

.pdf-html-converter textarea[data-role="output"] {
    width: 100%;
    min-height: 180px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    padding: 12px;
    font-family: "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    background: #fff;
    resize: vertical;
}

.rating-cell {
    white-space: nowrap;
    font-weight: 600;
    color: #1f2937;
}

.footer {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #888;
}

/* --- REUSABLE --- */
.form-group {
    margin-bottom: 20px;
}

.form-group.toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.form-group.toggle-field.is-disabled {
    opacity: 0.65;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-grid.two-columns {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quiz-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.quiz-style-grid div {
    display: flex;
    flex-direction: column;
}

.quiz-style-grid input[type="color"] {
    padding: 0 6px;
    height: 48px;
    border-radius: 6px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
}

.color-swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.color-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7f8c8d;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch--none .color-swatch__dot {
    background-color: #fff;
    border-color: #bdc3c7;
}

.color-swatch--green .color-swatch__dot {
    background-color: #2ecc71;
}

.color-swatch--red .color-swatch__dot {
    background-color: #e74c3c;
}

.color-swatch--yellow .color-swatch__dot {
    background-color: #f1c40f;
}

.color-swatch--blue .color-swatch__dot {
    background-color: #3498db;
}

.color-swatch--purple .color-swatch__dot {
    background-color: #9b59b6;
}

.color-swatch input:checked + .color-swatch__dot {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.15);
    transform: scale(1.08);
}

.color-swatch input:focus-visible + .color-swatch__dot {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.3);
}

button {
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    opacity: 0.9;
}


.btn-close {
    padding: 0;
    width: 1em;
    height: 1em;
    min-width: 1em;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    opacity: .7;
}

.btn-close:hover {
    opacity: 1;
    background-color: transparent;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#quizQrAnalyticsModal .modal-content,
#qrStatsModal .smart-qr-modal-dialog {
    background: #ffffff;
}

:root[data-theme="dark"] #quizQrAnalyticsModal .modal-content,
:root[data-theme="dark"] #qrStatsModal .smart-qr-modal-dialog {
    background: #0f1d35;
    border: 1px solid rgba(107, 182, 255, 0.35);
}

.secondary-button {
    background-color: #ecf0f1;
    color: var(--text-color);
}

.secondary-button:hover {
    background-color: #dde1e4;
}

.publish-template-button {
    background: linear-gradient(135deg, #6f56ff, #4f8bff);
    color: #fff;
}

.publish-template-button:hover {
    background: linear-gradient(135deg, #5d47e6, #4377db);
}

.button-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.button-with-icon[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
}

.error-message {
    color: var(--error-color);
    margin-top: 15px;
}

.success-message {
    color: var(--success-color);
    margin-top: 15px;
}

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

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

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
    vertical-align: middle; /* Align cell content vertically */
}

thead tr {
    border-bottom: 2px solid var(--border-color);
}

th {
    font-weight: 600;
}

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

/* --- INTEGRATION PAGE --- */
.code-block {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 20px;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    overflow-x: auto;
    position: relative;
}

.code-block pre {
    margin: 0;
}

.widget-settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.widget-settings-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.widget-settings-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.widget-settings-actions button {
    margin-right: 0;
}

.widget-checkbox-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.widget-preview-card {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-preview-canvas {
    position: relative;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: #f8fafc;
    min-height: 220px;
    display: flex;
    padding: 20px;
    transition: all 0.2s ease-in-out;
}

.widget-preview-canvas[data-position="bottom-right"] {
    justify-content: flex-end;
    align-items: flex-end;
}

.widget-preview-canvas[data-position="bottom-left"] {
    justify-content: flex-start;
    align-items: flex-end;
}

.widget-preview-canvas[data-position="top-right"] {
    justify-content: flex-end;
    align-items: flex-start;
}

.widget-preview-canvas[data-position="top-left"] {
    justify-content: flex-start;
    align-items: flex-start;
}

.widget-preview-canvas[data-position="center-right"] {
    justify-content: flex-end;
    align-items: center;
}

.widget-preview-canvas[data-position="center-left"] {
    justify-content: flex-start;
    align-items: center;
}

.widget-preview-stage {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.widget-preview-stage[data-position*="left"] {
    align-items: flex-start;
}

.widget-preview-stage[data-position*="right"] {
    align-items: flex-end;
}

.widget-preview-stage[data-position^="top"] .widget-preview-tooltip {
    top: 100%;
    bottom: auto;
    transform: translateY(-6px);
    padding-top: 10px;
    padding-bottom: 8px;
}

.widget-preview-stage[data-position^="top"] .widget-preview-tooltip.visible {
    transform: translateY(0);
}

.widget-preview-stage[data-position^="top"] .widget-preview-tooltip::after {
    top: -6px;
    bottom: auto;
    border-color: transparent transparent #1f2937 transparent;
}

.widget-preview-stage[data-position*="left"] .widget-preview-tooltip {
    left: 0;
    right: auto;
    transform-origin: left center;
}

.widget-preview-stage[data-position*="left"] .widget-preview-tooltip::after {
    left: 18px;
    transform: none;
}

.widget-preview-stage[data-position*="right"] .widget-preview-tooltip {
    right: 0;
    left: auto;
    transform-origin: right center;
}

.widget-preview-stage[data-position*="right"] .widget-preview-tooltip::after {
    right: 18px;
    left: auto;
    transform: none;
}

.widget-preview-button {
    --lf-widget-color: #ff5a5f;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background-color: var(--lf-widget-color);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget-preview-button.size-small {
    padding: 10px 18px;
    font-size: 14px;
}

.widget-preview-button.size-medium {
    padding: 12px 20px;
    font-size: 16px;
}

.widget-preview-button.size-large {
    padding: 16px 26px;
    font-size: 18px;
}

.widget-preview-button.template-rounded {
    border-radius: 16px;
}

.widget-preview-button.template-square {
    border-radius: 4px;
}

.widget-preview-button.template-outline {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--lf-widget-color);
    border: 2px solid var(--lf-widget-color);
    box-shadow: none;
}

.widget-preview-button.template-outline .widget-preview-icon {
    color: var(--lf-widget-color);
}

.widget-preview-button.animation-pulse {
    animation: lf-widget-pulse 1.8s infinite;
}

.widget-preview-button.animation-bounce {
    animation: lf-widget-bounce 1.2s infinite;
}

.widget-preview-button.animation-float {
    animation: lf-widget-float 2.2s infinite;
}

.widget-preview-icon {
    font-size: 16px;
}

.widget-preview-icon.is-hidden {
    display: none;
}

.widget-preview-tooltip {
    position: absolute;
    bottom: 100%;
    padding: 8px 12px;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    max-width: 240px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
    line-height: 1.4;
    padding-bottom: 10px;
}

.widget-preview-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

.widget-preview-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes lf-widget-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.45);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 12px rgba(255, 90, 95, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 90, 95, 0);
    }
}

@keyframes lf-widget-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(-2px);
    }
}

@keyframes lf-widget-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0);
    }
}

.checkbox-inline input[type="checkbox"] {
    width: auto;
    margin: 0;
}

#widget-plan-hint {
    margin: 0;
}

.widget-settings-form select,
.widget-settings-form input[type="text"] {
    width: 100%;
}

.widget-settings-form input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
}

.widget-quiz-cell {
    text-align: center;
    white-space: nowrap;
}

.widget-quiz-cell .widget-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.widget-quiz-cell input[type="radio"] {
    accent-color: var(--primary-color);
}

.status-message {
    font-size: 14px;
    margin: 10px 0;
}

.status-message.success {
    color: var(--success-color);
}

.status-message.error {
    color: var(--error-color);
}

.settings-list {
    margin: 20px 0;
    display: grid;
    gap: 12px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-row {
    align-items: center;
}

.setting-title {
    margin: 0;
    font-weight: 600;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.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: 0.3s;
    border-radius: 24px;
}

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

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

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

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

.settings-row dt {
    font-weight: 600;
}

.settings-row dd {
    margin: 0;
}

.settings-block {
    margin-top: 24px;
}

.settings-block h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
}

.prompt-preview {
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #5d6d7e;
    white-space: pre-wrap;
}

.muted-text {
    color: #7f8c8d;
    font-size: 13px;
}

#copy-code-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #34495e;
    color: white;
    border: 1px solid #7f8c8d;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    width: auto;
}

#copy-code-button:hover {
    background-color: #4a627a;
}

/* --- QUIZ BUILDER --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
}

.page-header button {
    width: auto;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header-actions .primary-button,
.page-header-actions .secondary-button {
    white-space: nowrap;
}


.smart-booking-time-format--header {
    min-width: 110px;
}

.page-title-with-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.info-scroll-button {
    border: none;
    background: #eef2f7;
    color: #4a627a;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.info-scroll-button:hover:not(:disabled) {
    background: #dbe7ff;
    color: #1f4b99;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.info-scroll-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.info-block {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #dde3ed;
    background: linear-gradient(135deg, #f7f9fc 0%, #ffffff 100%);
    color: #1f2f3d;
    line-height: 1.5;
}

.info-block h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.info-block p:last-child {
    margin-bottom: 0;
}

.info-block-highlight {
    box-shadow: 0 0 0 3px rgba(79, 152, 255, 0.3);
}

#quizzes-table .link-cell {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    word-break: break-all; /* Prevent long links from overflowing */
}

#quizzes-table .actions-cell button {
    font-size: 13px;
    padding: 4px 8px;
    margin-right: 0;
    margin-bottom: 0;
    min-width: 60px; /* Ensure buttons have some width */
}

#quizzes-table .actions-cell .quiz-actions-groups {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#quizzes-table .actions-cell .quiz-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#quizzes-table .actions-cell .quiz-actions-separator {
    width: 1px;
    align-self: stretch;
    min-height: 28px;
    background: rgba(148, 163, 184, 0.45);
}

:root[data-theme="dark"] #quizzes-table .actions-cell .quiz-actions-separator {
    background: rgba(148, 163, 184, 0.6);
}

.payment-mode-cell {
    min-width: 240px;
}

.quiz-payment-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-payment-options {
    display: flex;
    width: 100%;
}

.quiz-payment-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 999px;
    background-color: #e8eef6;
    padding: 3px;
    gap: 0;
}

.quiz-payment-switch .quiz-payment-mode-input,
.quiz-payment-switch .quiz-payment-timing-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.quiz-payment-switch-option {
    position: relative;
    z-index: 2;
    border-radius: 999px;
    padding: 6px 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    color: #4d5f75;
    cursor: pointer;
    transition: color 0.2s ease;
}

.quiz-payment-switch-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc((100% - 6px) / 2);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(36, 62, 92, 0.2);
    transition: transform 0.2s ease;
}

.quiz-payment-switch .quiz-payment-mode-input:checked + .quiz-payment-switch-option,
.quiz-payment-switch .quiz-payment-timing-input:checked + .quiz-payment-switch-option {
    color: #1d4f91;
    font-weight: 700;
}

.quiz-payment-switch .quiz-payment-mode-input[value="lead"]:checked ~ .quiz-payment-switch-pill {
    transform: translateX(100%);
}

.quiz-payment-switch .quiz-payment-timing-input[value="after_quiz"]:checked ~ .quiz-payment-switch-pill {
    transform: translateX(100%);
}

.quiz-payment-switch .quiz-payment-mode-input:disabled + .quiz-payment-switch-option,
.quiz-payment-switch .quiz-payment-timing-input:disabled + .quiz-payment-switch-option {
    color: #9aa6b5;
    cursor: not-allowed;
}

.quiz-payment-amount {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-payment-amount label {
    font-size: 12px;
    text-transform: uppercase;
    color: #7f8c8d;
}

.quiz-payment-amount-input-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
}

.quiz-payment-amount-input-row .currency-prefix {
    padding: 6px 10px;
    background-color: #f6f8fa;
    border-right: 1px solid var(--border-color);
    font-weight: 600;
    color: #5d6d7e;
}

.quiz-payment-amount-input {
    border: none;
    padding: 8px 10px;
    width: 100%;
    font-size: 14px;
    outline: none;
}

.quiz-payment-hint {
    font-size: 12px;
    color: #a94442;
    margin: 0;
}

.quiz-payment-status {
    font-size: 12px;
    color: #7f8c8d;
    min-height: 16px;
}

.quiz-payment-status.success {
    color: var(--success-color);
}

.quiz-payment-status.error {
    color: var(--error-color);
}

.quiz-payment-control.is-saving {
    opacity: 0.6;
}

.edit-button {
    background-color: #ecf0f1;
    color: var(--text-color);
}
.edit-button:hover {
    background-color: #dde1e4;
    opacity: 1;
}


.delete-button {
    background-color: var(--error-color);
}
.delete-button:hover {
    background-color: #a52d24;
    opacity: 1;
}

/* My Leads Table Actions */
#leads-table .table-sort,
#contacts-table .table-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.lead-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: #eef2f7;
    color: #2c3e50;
}

.lead-status-badge.lead-status-incomplete {
    background-color: #fff4e5;
    color: #d35400;
}

.lead-status-badge.lead-status-new {
    background-color: #e8f7ed;
    color: #1e874b;
}

.lead-status-badge.lead-status-processed,
.lead-status-badge.lead-status-archived {
    background-color: #f0f1f2;
    color: #6c7a89;
}

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

.crm-file-actions .crm-icon-button {
    border: 1px solid #dcdfe6;
    background: #ffffff;
    color: #2c3e50;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.crm-file-actions .crm-icon-button.danger {
    border-color: #e74c3c;
    color: #e74c3c;
}

.crm-file-actions .crm-icon-button:hover {
    background: #f5f7fa;
}

#leads-table .table-sort:hover .sort-indicator,
#leads-table .table-sort:focus .sort-indicator,
#contacts-table .table-sort:hover .sort-indicator,
#contacts-table .table-sort:focus .sort-indicator {
    color: var(--primary-color);
}

#leads-table th,
#contacts-table th {
    white-space: nowrap;
}

.sort-indicator {
    font-size: 12px;
    color: #7f8c8d;
}

.sort-indicator.active {
    color: var(--primary-color);
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.lead-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
    width: 100%;
}

.lead-filters input,
.lead-filters select {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 0;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.lead-filters input[type="date"] {
    min-width: 0;
}

.lead-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#leads-table .actions-cell a {
    font-size: 13px;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
}
.lead-delete-button {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.2;
}
.view-lead-button {
    background-color: #3498db;
    color: white;
}
.view-lead-button:hover {
     background-color: #2980b9;
}


#questions-container .question-row {
    background-color: #f9f9f9;
    border: 2px solid rgba(0, 115, 170, 0.35);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

@keyframes flashBg {
    0% { background-color: #fffae6; }
    100% { background-color: white; }
}

.highlight-flash {
    animation: flashBg 1.5s ease-out;
}

.question-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.question-row-header .question-type-dropdown {
    position: relative;
    width: 220px;
    flex-shrink: 0;
}

.question-row-header .question-type-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.question-row-header .question-type-icon {
    color: var(--primary-color);
    width: 18px;
    display: inline-flex;
    justify-content: center;
}

.question-row-header .question-type-label {
    flex: 1;
}

.question-row-header .question-type-chevron {
    color: #7f8c8d;
}

.question-row-header .question-type-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 6px;
    display: none;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
}

.question-row-header .question-type-dropdown.is-open .question-type-menu {
    display: block;
}

.question-row-header .question-type-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
}

.question-row-header .question-type-option:hover,
.question-row-header .question-type-option[aria-selected="true"] {
    background-color: rgba(0, 115, 170, 0.08);
}

.question-row-header .question-type-select.hidden {
    display: none;
}

.question-row-header .question-tab-name {
    flex-grow: 1;
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    min-width: 150px; /* Give it some minimum space */
}

.question-row-header .question-sort-order {
    width: 90px;
    flex: 0 0 90px;
    text-align: center;
}

.question-required-toggle-label.is-disabled {
    opacity: 0.6;
}

.question-visibility-container {
    margin-top: 10px;
}


.question-row-header button {
    background: none;
    border: none;
    color: var(--error-color);
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
}

.builder-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.quiz-preview-color {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: var(--primary-color);
}

.quiz-preview-option-list {
    margin-bottom: 0;
    padding-left: 18px;
    color: #555;
    font-size: 14px;
}

.quiz-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.quiz-builder-main,
.quiz-builder-visualizer-col {
    width: 100%;
}

@media (min-width: 992px) {
    .quiz-builder-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
        align-items: flex-start;
    }
    .quiz-builder-main {
        position: relative;
    }
    .quiz-builder-visualizer-col {
        position: relative;
    }
}

.quiz-builder-main-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
}

.settings-scroll-wrapper {
    height: auto;
    max-height: none;
    min-height: 80vh;
    overflow-y: auto;
    padding-bottom: 50px;
    padding-right: 8px;
    background-color: transparent;
    scrollbar-width: thin;
}

.settings-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}

.settings-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .settings-scroll-wrapper {
        height: auto;
        max-height: none;
        min-height: 80vh;
        overflow-y: auto;
        padding-right: 0;
    }
    .quiz-builder-main-scroll {
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-right: 0;
    }
}

.quiz-preview-shell {
    position: sticky;
    top: 20px;
}

.quiz-preview-card {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

.quiz-preview-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.quiz-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quiz-preview-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quiz-preview-language-switcher {
    margin-bottom: 0;
}

.quiz-preview-language-switcher label {
    margin-bottom: 0;
    font-size: 12px;
}

.quiz-preview-language-switcher select {
    min-width: 130px;
}

.quiz-viewer-preview {
    background: #f0f2f5;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.quiz-viewer-stage {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quiz-viewer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #475569;
}

.quiz-preview-theme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.quiz-preview-color {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: var(--primary-color);
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.quiz-preview-theme-label {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.quiz-viewer-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quiz-viewer-heading h4 {
    color: #1f2937;
}

.quiz-preview-description {
    line-height: 1.6;
    margin: 4px 0 0;
}

.quiz-preview-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-preview-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quiz-preview-count {
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 12px;
}

.quiz-preview-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: quiz-preview-counter;
}

.quiz-preview-question-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px 14px 12px 40px;
    counter-increment: quiz-preview-counter;
    position: relative;
}

.quiz-preview-question-item.visualizer-item:hover {
    cursor: pointer;
    outline: 1px dashed #ccc;
    outline-offset: 2px;
}

.quiz-preview-question-item::before {
    content: counter(quiz-preview-counter) ".";
    position: absolute;
    left: 14px;
    top: 12px;
    font-weight: 700;
    color: #475569;
}

.quiz-preview-question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.quiz-preview-question-title {
    font-weight: 700;
    color: #111827;
}

.quiz-preview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-preview-pill {
    background: #e5e7eb;
    color: #1f2937;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 12px;
}

.quiz-preview-pill-accent {
    background: #ecfdf3;
    color: #166534;
}

.quiz-preview-option-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #4b5563;
    font-size: 14px;
    list-style: disc;
}

.quiz-preview-empty {
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    padding: 12px;
    background: #f8fafc;
    text-align: center;
}

.quiz-preview-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-viewer-button {
    width: 100%;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.quiz-viewer-button:hover {
    background-color: #0f7b40;
    transform: translateY(-1px);
}

.quiz-viewer-button:active {
    transform: translateY(0);
}

#add-question-button,
#add-standard-fields-button {
    background-color: #ecf0f1;
    color: var(--text-color);
}
#add-question-button:hover,
#add-standard-fields-button:hover {
    background-color: #dde1e4;
    opacity: 1;
}


#add-standard-fields-button {
    background-color: #e0f0e6;
}
#add-standard-fields-button:hover {
     background-color: #c8e6d2;
     opacity: 1;
}

.options-container {
    margin-top: 15px;
    padding-left: 20px;
    border-left: 3px solid #eee;
}

.option-row {
    display: flex;
    align-items: flex-start; /* Align items to top */
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}
.option-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}


.option-translations-container {
    flex-grow: 1;
}

.option-trigger-container {
    width: 150px;
    flex-shrink: 0;
}
.option-trigger-container label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.option-trigger-container input {
    padding: 8px;
    font-size: 14px;
}

.option-rate-container {
    width: 110px;
    flex-shrink: 0;
}
.option-rate-container label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 3px;
    display: block;
}
.option-rate-container input {
    padding: 8px;
    font-size: 14px;
}


.option-row .remove-option-btn {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-size: 20px;
    padding: 8px 5px 0 5px; /* Adjust padding slightly */
    line-height: 1; /* Prevent extra space */
}

.add-option-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    padding: 5px;
    text-align: left; /* Align text left */
    width: auto; /* Override default button width */
}
.add-option-btn:hover {
    text-decoration: underline;
    opacity: 1;
}

.rating-levels {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rating-level-row {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background-color: #fafafa;
}

.form-header.rating-levels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.rating-level-header {
    font-weight: 600;
    margin-bottom: 8px;
}

.rating-level-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rating-level-inputs label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #555;
    flex: 1 1 140px;
}

.rating-level-inputs input {
    margin-top: 4px;
    padding: 8px;
    font-size: 14px;
}

.rating-level-description {
    flex: 1 1 100%;
}

.rating-level-description textarea {
    margin-top: 4px;
    padding: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 48px;
}

.language-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f9f9f9;
    padding: 12px 16px;
    border-radius: 8px;
}

.language-selector .form-help {
    margin: 0;
}

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

.translation-input-group:last-child {
    margin-bottom: 0;
}

.translation-input-group label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.translation-input-group input,
.translation-input-group textarea {
    padding: 8px;
    font-size: 15px;
}

.payment-settings {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.payment-settings > label {
    margin-bottom: 10px;
}
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.radio-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
}
.radio-group input[type="radio"] {
    width: auto;
    margin-right: 8px;
}
#payment-amount-group {
    margin-top: 15px;
    padding-left: 25px;
}
#quiz-payment-amount {
    max-width: 150px;
}

/* --- MODALS --- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 3300;
    display: flex;
    align-items: center;
    justify-content: center;
}


#crm-contact-profile-modal {
    z-index: 3300;
}

#crm-contact-profile-modal .crm-contact-profile-modal-content {
    width: min(1680px, 98vw);
    height: 92vh;
    max-height: 92vh;
}

.crm-contact-profile-modal-body {
    min-height: 0;
    overflow-y: auto;
}

.crm-contact-modal-summary {
    margin-top: 0;
}

.crm-contact-modal-layout {
    align-items: start;
}

.crm-contact-modal-layout-grid-fix {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
    margin-right: 0;
    margin-left: 0;
}

.crm-contact-modal-layout-grid-fix > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#import-contacts-modal .modal-dialog {
    position: relative;
    z-index: 1;
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: min(640px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    justify-content: flex-end;
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Keep Bootstrap .modal.fade behavior intact (used by quiz QR analytics modal). */
.modal.fade {
    display: none;
    align-items: initial;
    justify-content: initial;
    z-index: 1055;
}

.modal.fade.show {
    display: block;
}

.modal.fade .modal-content {
    width: auto;
    max-height: none;
    overflow: visible;
}


/* Bootstrap modal fix for quiz QR analytics popup in My Quizzes */
#quizQrAnalyticsModal {
    z-index: 3200;
}

#quizQrAnalyticsModal .modal-dialog {
    max-width: 860px;
    margin: 1.75rem auto;
}

#quizQrAnalyticsModal .modal-content {
    width: 100%;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

#quizQrAnalyticsModal .modal-body {
    display: block;
    overflow: auto;
}

#quizQrAnalyticsModal .btn-close {
    opacity: 1;
}


#quizQrAnalyticsModal #quiz-qr-analytics-close {
    font-size: 28px;
    line-height: 1;
    padding: 0 4px;
    color: #ffffff;
    background: transparent;
    opacity: 1;
}

#quizQrAnalyticsModal #quiz-qr-analytics-close:hover {
    background: rgba(80, 149, 226, 0.28);
    border-radius: 6px;
}

.modal-backdrop.show {
    z-index: 3150;
}

.modal-body textarea {
    min-height: 220px;
    resize: vertical;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 14px;
    line-height: 1.45;
}

.marketing-promo-content {
    width: min(520px, 92vw);
}

.marketing-promo-body {
    gap: 16px;
    text-align: center;
}

.marketing-promo-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.marketing-promo-text {
    font-size: 1rem;
    color: var(--text-color);
}

.marketing-promo-cta {
    width: 100%;
    text-align: center;
}

.marketing-promo-footer {
    font-size: 0.9rem;
    color: var(--muted-text);
    margin-bottom: 0;
}

.modal-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.95rem;
}

#publish-template-modal .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

/* --- SUPPORT --- */
.support-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-status,
.support-urgency {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.support-status-open {
    background: #e8f4ff;
    color: #1e3a8a;
}

.support-status-admin {
    background: #fff7ed;
    color: #c2410c;
}

.support-status-client {
    background: #ecfdf3;
    color: #065f46;
}

.support-status-closed {
    background: #f3f4f6;
    color: #4b5563;
}

.support-status-default {
    background: #f1f5f9;
    color: #475569;
}

.support-urgency-low {
    background: #f1f5f9;
    color: #475569;
}

.support-urgency-medium {
    background: #e0f2fe;
    color: #0369a1;
}

.support-urgency-high {
    background: #fee2e2;
    color: #b91c1c;
}

.support-urgency-critical {
    background: #7f1d1d;
    color: #fef2f2;
}

.support-thread {
    margin-top: 20px;
}

.support-thread-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 4px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.support-message {
    display: flex;
}

.support-message-admin {
    justify-content: flex-start;
}

.support-message-client {
    justify-content: flex-end;
}

.support-message-bubble {
    max-width: 70%;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.support-message-client .support-message-bubble {
    background: #dcfce7;
}

.support-message-text {
    white-space: pre-wrap;
}

.support-message-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
}

.support-message-attachment a {
    font-size: 12px;
    color: #2563eb;
}

.support-reply-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.support-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.support-urgency-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

#publish-template-modal .modal-body textarea {
    min-height: 90px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px;
}

.modal-close:hover {
    opacity: 0.7;
}

.modal-description {
    margin: 0;
    font-size: 15px;
    color: #555;
}

.template-library-modal {
    width: min(960px, 94vw);
}

.template-library-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.template-library-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--text-color);
}

.template-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.template-library-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.template-library-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: #f4f6f8;
}

.template-library-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.template-library-card-title {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

.template-library-card-meta {
    font-size: 13px;
    color: #6b7280;
}

.template-library-card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-library-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.template-library-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.template-library-author-label {
    font-weight: 600;
    color: #374151;
}

.template-library-author img {
    max-height: 25px;
    max-width: 40px;
    object-fit: contain;
}

.template-library-price {
    font-weight: 600;
    font-size: 14px;
}

.template-library-empty {
    font-size: 15px;
    color: #6b7280;
}

.modal-error {
    font-size: 14px;
    color: var(--error-color);
}

.modal-footer button {
    min-width: 140px;
}

/* --- BILLING & ANALYTICS --- */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: start;
}

.plan-list {
    display: grid;
    gap: 16px;
}

.plan-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.plan-card .plan-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.plan-card .plan-price .unit-price {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.plan-card .plan-description {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.plan-card .plan-credits {
    margin: 0;
    font-weight: 600;
}

.plan-card .plan-features,
.feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-badge,
.plan-card .plan-features span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #f0f4f8;
    font-size: 12px;
    text-transform: capitalize;
}

.plan-card button {
    align-self: flex-start;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.plan-card button:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

.plan-card button:not(:disabled):hover {
    opacity: 0.85;
}

.plan-card--inactive {
    opacity: 0.65;
}
.billing-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.analytics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.analytics-summary div {
    background-color: #f9f9f9;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.analytics-summary h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #555;
}

.analytics-summary p {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.inline-filter-group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.inline-filter-group label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #555;
    gap: 4px;
}

.input-with-button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.input-with-button input[type="text"] {
    width: 100%;
}

.referral-summary-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.1fr);
    gap: 20px;
    align-items: stretch;
}

.referral-link-block label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.referral-stats-grid .stat-card {
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    background: #f9f9f9;
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.button-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.text-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

.text-link-button:hover {
    color: #1e8a4d;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    margin-top: 8px;
}

.link-button:hover {
    color: #1e8a4d;
}

.referral-invited-card h4 {
    margin-bottom: 0;
}

.referral-tier-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.referral-rate-display {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(32, 167, 89, 0.12), rgba(32, 167, 89, 0.03));
}

.referral-rate-value {
    margin: 4px 0 0;
    font-size: 40px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}

.tier-stepper-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tier-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 92px;
    flex-shrink: 0;
}

.tier-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid transparent;
    background: #e5e7eb;
    color: #9ca3af;
}

.tier-step.completed .tier-step-circle {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.tier-step.active .tier-step-circle {
    background: #ffffff;
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(32, 167, 89, 0.12);
}

.tier-step.active.completed .tier-step-circle {
    background: var(--primary-color);
    color: #ffffff;
}

.tier-step-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.tier-step-percent {
    font-weight: 700;
    color: #111827;
}

.tier-step-label small {
    font-size: 12px;
    color: var(--muted-color);
}

.tier-step-line {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.tier-step-line-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--primary-color);
    transition: width 0.35s ease;
}

.referral-tier-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.referral-tier-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--primary-color);
    transition: width 0.35s ease;
}

.referral-tier-progress .small {
    font-size: 12px;
}

.referral-stats-grid--tiers {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.referral-stripe-notice {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 159, 67, 0.35);
    background: rgba(255, 237, 213, 0.6);
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.referral-stripe-notice i {
    font-size: 16px;
}

.referral-link-generator {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.referral-link-generator h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.referral-link-generator .muted-text {
    margin-bottom: 10px;
}

.referral-link-generator .input-with-button {
    margin-bottom: 10px;
}

.referral-generator-qr {
    margin-top: 10px;
    width: 220px;
    min-height: 220px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
}

.referral-marketing-card .card-header {
    margin-bottom: 8px;
}

.referral-marketing-placeholder {
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: var(--muted-color);
    background: #fafafa;
}

.card-header.spaced-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.smart-booking-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.smart-booking-calendar-card {
    margin-bottom: 20px;
}

.smart-booking-calendar-toggle {
    border: 1px solid transparent;
}

.smart-booking-calendar-toggle--active {
    background-color: #e9f1ff;
    border-color: #b7d0ff;
    color: #1b4fe0;
}

.smart-booking-calendar-toggle--active i {
    color: inherit;
}

.smart-booking-calendar {
    min-height: 620px;
}

.smart-booking-calendar .fc {
    font-family: inherit;
}

.smart-booking-calendar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.smart-booking-calendar-timezone {
    font-size: 13px;
    font-weight: 600;
    color: #1b4fe0;
    background: #e9f1ff;
    border: 1px solid #b7d0ff;
    border-radius: 999px;
    padding: 5px 10px;
}

.smart-booking-time-format {
    min-width: 110px;
}

.smart-booking-slot-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.smart-booking-price-included-inline {
    margin-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 680px) {
    .smart-booking-slot-picker {
        grid-template-columns: minmax(0, 1fr);
    }
}

.smart-booking-builder-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.smart-booking-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.smart-booking-template-main,
.smart-booking-template-preview-col {
    width: 100%;
}

@media (min-width: 992px) {
    .smart-booking-template-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
        align-items: flex-start;
    }

    .smart-booking-template-preview-shell {
        position: sticky;
        top: 20px;
    }
}

.smart-booking-section {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    background: #fff;
}

.smart-booking-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.smart-booking-section .two-columns {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.smart-booking-questions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-booking-preview {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: #f9fafb;
}

.smart-booking-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.smart-booking-preview-row {
    border-top: 1px solid var(--border-color);
    padding: 10px 0;
}

.smart-booking-preview-row:first-child {
    border-top: none;
    padding-top: 0;
}

.smart-booking-preview-label {
    margin: 0 0 4px 0;
    font-weight: 600;
}

.smart-booking-preview-meta {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.smart-booking-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smart-booking-toggle .toggle-label {
    font-size: 13px;
    color: #374151;
}


.smart-booking-time-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.smart-booking-time-toggle-option {
    font-size: 13px;
    color: #4b5563;
}

#smart-booking-builder-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

#smart-booking-builder-accordion summary::-webkit-details-marker {
    display: none;
}

#smart-booking-builder-accordion .summary-title {
    font-weight: 600;
    font-size: 16px;
}

#smart-booking-builder-accordion .summary-helper {
    color: #6b7280;
    font-size: 13px;
}

#smart-booking-builder-accordion .smart-booking-builder-panel {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-booking-kpi .kpi-label {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.smart-booking-kpi .kpi-value {
    margin: 6px 0 0 0;
    font-size: 26px;
    font-weight: 600;
}

.smart-booking-table-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-left: auto;
}

.smart-booking-page-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.smart-booking-page-size-label {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.smart-booking-page-size-select {
    min-width: 88px;
    width: 88px;
    flex: 0 0 88px;
}

.smart-booking-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

@media (max-width: 1200px) {
    .smart-booking-table-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.smart-booking-result-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.smart-booking-result-row input[type="text"] {
    flex: 1;
}

.smart-booking-result-row button.success {
    background-color: #2ecc71;
    color: #fff;
}

.smart-booking-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.smart-booking-fields-header h3 {
    margin: 0;
}

.smart-booking-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-booking-field-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: #fdfdfd;
}

.smart-booking-field-header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.smart-booking-field-title {
    font-weight: 600;
    color: #111827;
}

.smart-booking-field-header input {
    flex: 1;
}

.smart-booking-field-meta {
    font-size: 12px;
    color: #555;
    margin: 6px 0;
}

.smart-booking-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.smart-booking-option-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.smart-booking-translation-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.smart-booking-template-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 12px;
}

.smart-booking-option-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.smart-booking-option-delete {
    padding: 8px 12px;
}

.smart-booking-field-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

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

.icon-button {
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-color);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.icon-button:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.icon-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.icon-button.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.smart-booking-actions .icon-button.has-alert {
    position: relative;
    border-color: #ef4444;
}

.smart-booking-actions .icon-button.has-alert::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef4444;
}

.secondary-button.disabled,
.primary-button.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.smart-booking-answer-row {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.smart-booking-answer-question {
    margin: 0 0 4px 0;
    font-weight: 600;
}

.smart-booking-answer-text {
    margin: 0;
    color: #374151;
}

.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1100;
}

.toast {
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    background: #111827;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: opacity 0.3s ease;
}

.toast-success {
    background: #16a34a;
}

.toast-error {
    background: #dc2626;
}

.toast.fade-out {
    opacity: 0;
}

.badge {
    display: inline-block;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #e6f7ec;
    color: #117a39;
}

.badge-warning {
    background: #fff4e5;
    color: #b35b00;
}

.badge-muted {
    background: #f1f1f1;
    color: #555;
}

.text-success {
    color: #2e7d32;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-card {
    overflow: hidden;
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.settings-card-header h2 {
    margin: 0 0 4px 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-grid .full-width {
    grid-column: 1 / -1;
}

.switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.telegram-connect-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 8px;
}

.logo-upload {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    padding: 8px;
}

.logo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icon-button.danger {
    color: #b91c1c;
    border-color: #fecdd3;
    background: #fff1f2;
}

.icon-button.danger:hover {
    background: #ffe4e6;
    border-color: #fca5a5;
}

.working-hours-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.working-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.sb-working-day-display {
    width: 100%;
    margin: 0;
}

.working-hours-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-form .form-actions {
    margin-top: 16px;
}

.contacts-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.contact-name-link {
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.contact-name-link:hover,
.contact-name-link:focus {
    text-decoration: underline;
}

.contact-name-link i {
    color: #64748b;
}

.contact-name-text {
    font-weight: 600;
}

.contact-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 12px 0 20px;
}

#contact-detail-card > .page-header {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #ffffff;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.contact-save-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

#contact-save-status {
    margin: 0;
    min-height: 20px;
    font-size: 0.875rem;
}

.contact-detail-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-detail-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.contact-detail-summary-value {
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
}

.contact-detail-summary-value:hover,
.contact-detail-summary-value:focus {
    text-decoration: underline;
}

.contact-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.contact-detail-layout > [class*='col-'] {
    width: 100%;
}

.contact-profile-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.contact-profile-grid .form-group {
    margin: 0;
}

.contact-profile-grid input,
.contact-profile-grid textarea {
    width: 100%;
}

#crm-contact-profile-modal #crm-contact-profile-address {
    height: 40px;
    min-height: 40px;
    resize: none;
}

#crm-contact-profile-modal #crm-contact-profile-notes {
    min-height: 60px;
    height: 60px;
    resize: none;
    overflow-y: hidden;
}

.contact-span-12 {
    grid-column: span 12;
}

.contact-span-6 {
    grid-column: span 6;
}

.contact-span-4 {
    grid-column: span 4;
}

.contact-span-2 {
    grid-column: span 2;
}

.contact-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-detail-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.contact-files-section,
.contact-activity,
.contact-transactions,
.contact-filled-quizzes,
.contact-custom-fields-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
}

.contact-custom-fields-section .contact-profile-grid {
    margin-top: 0;
}

.contact-custom-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.contact-custom-field-row .form-group {
    margin: 0;
}

.contact-custom-field-remove {
    margin-bottom: 2px;
}

.contact-transactions-list .table {
    margin-bottom: 0;
}

.contact-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-color);
}

.contact-file-info i {
    color: #64748b;
}

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

.contact-activity-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
}

.contact-activity-item:last-child {
    border-bottom: none;
}

.contact-activity-title {
    font-weight: 600;
}

.contact-activity-meta {
    color: #6b7280;
    font-size: 0.9rem;
    margin-top: 4px;
}

.contact-activity-date {
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 4px;
}

.contact-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.contact-inline-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-inline-actions .icon-button {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.contact-detail-footer {
    display: none;
}

.contacts-import-dropzone {
    border: 2px dashed #cbd5f5;
    border-radius: 12px;
    padding: 20px;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-bottom: 16px;
}

.contacts-import-dropzone input[type='file'] {
    display: none;
}

.contacts-import-dropzone.is-dragover {
    border-color: #6366f1;
    background: #eef2ff;
}

.contacts-import-dropzone-content {
    text-align: center;
}

.contacts-import-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.contacts-import-hint {
    margin: 0 0 8px;
}

.contacts-import-helper ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: #64748b;
}

@media (max-width: 900px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .contact-detail-layout {
        grid-template-columns: 1fr;
    }

    .contact-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-span-12,
    .contact-span-6,
    .contact-span-4,
    .contact-span-2 {
        grid-column: span 2;
    }

    .working-hours-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .working-hours-time {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #import-contacts-modal .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    #import-contacts-modal .modal-content {
        height: 100%;
        border-radius: 0;
    }

    #import-contacts-modal .modal-footer {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        z-index: 10;
    }

    #contacts-list-card .table-actions {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #ffffff;
        padding-top: 12px;
        padding-bottom: 12px;
        box-shadow: 0 6px 12px -12px rgba(15, 23, 42, 0.45);
    }

    .contact-row td {
        min-height: 60px;
        vertical-align: middle;
    }

    .contact-actions-cell {
        flex-wrap: wrap;
    }

    .contact-detail-summary {
        gap: 16px;
        margin-bottom: 12px;
    }

    #contact-detail-card {
        padding-bottom: 92px;
    }

    .contact-detail-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 8px;
        justify-content: space-between;
        padding: 12px 16px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        z-index: 20;
    }

    .contact-detail-footer .primary-button,
    .contact-detail-footer .secondary-button {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .referral-summary-card {
        grid-template-columns: 1fr;
    }
    .referral-rate-value {
        font-size: 34px;
    }
}

body.crm-contact-embed-view .sidebar,
body.crm-contact-embed-view .header,
body.crm-contact-embed-view #sidebar-overlay {
    display: none !important;
}

body.crm-contact-embed-view .main-content {
    margin-left: 0;
    width: 100%;
}

body.crm-contact-embed-view .content-area {
    padding: 0;
}

body.crm-contact-embed-view #page-content-contacts {
    padding: 0;
}

body.crm-contact-embed-view #contacts-list-card,
body.crm-contact-embed-view #contacts-back-button {
    display: none !important;
}

body.crm-contact-embed-view #contact-detail-card {
    border-radius: 0;
    border: none;
    margin: 0;
    box-shadow: none;
}

body.crm-contact-embed-view .contact-detail-layout {
    grid-template-columns: 1fr;
}

body.crm-contact-embed-view .contact-detail-layout > .col-lg-8,
body.crm-contact-embed-view .contact-detail-layout > .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- DASHBOARD WORKSPACE --- */
.dashboard-workspace {
    padding: 8px 0 24px;
}

.workspace-edit-hint {
    margin-top: -6px;
    margin-bottom: 12px;
}

.workspace-page-header {
    margin-bottom: 12px;
}

.workspace-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workspace-title {
    margin: 0;
}

.workspace-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.workspace-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.workspace-info-button:hover,
.workspace-info-button:focus {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.32);
}

.workspace-info-content {
    margin-bottom: 12px;
}

.workspace-add-widget {
    position: relative;
}

.workspace-add-widget-menu {
    min-width: 220px;
}

.dashboard-workspace .grid-stack {
    min-height: 480px;
}

.workspace-widget-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.workspace-widget-card--recommended {
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(255, 255, 255, 0.9));
}

.workspace-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.workspace-widget-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 600;
}

.workspace-widget-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-close-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.widget-close-btn:hover,
.widget-close-btn:focus {
    background: rgba(148, 163, 184, 0.2);
    color: #0f172a;
}

.page-content.is-editing .widget-close-btn {
    display: inline-flex;
}

.workspace-system-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-system-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(226, 232, 240, 0.6);
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.workspace-system-link img,
.workspace-system-link i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #f59e0b;
    font-size: 1rem;
}

.workspace-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.workspace-shortcut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
}

.workspace-shortcut-actions {
    position: absolute;
    top: -9px;
    right: -9px;
    display: flex;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.workspace-shortcut:hover .workspace-shortcut-actions,
.workspace-shortcut:focus-within .workspace-shortcut-actions {
    opacity: 1;
    pointer-events: auto;
}

.workspace-shortcut-action {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}

.workspace-shortcut-action-edit {
    background: #0ea5e9;
}

.workspace-shortcut-action-delete {
    background: #ef4444;
    font-size: 1rem;
}

.workspace-shortcut-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
}

.workspace-shortcut-icon img {
    width: 32px;
    height: 32px;
}

.workspace-shortcut-title {
    text-align: center;
    font-size: 0.85rem;
}

.shortcut-desc-limit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em;
}

.workspace-shortcut-add {
    border: 2px dashed rgba(148, 163, 184, 0.6);
    background: transparent;
    cursor: pointer;
}

.workspace-shortcut-add span {
    font-size: 0.8rem;
    color: #64748b;
}

#sb-widget-calendar {
    min-height: 300px;
}

#sb-widget-calendar .fc-toolbar-title {
    font-size: 1rem !important;
}

#sb-widget-calendar .fc-toolbar {
    margin-bottom: 0.5rem !important;
}

#sb-widget-calendar .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 5px;
}

#sb-widget-calendar .fc-button {
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    height: auto !important;
}

#sb-widget-calendar .fc-list-event-title {
    font-size: 0.85rem;
}

#sb-widget-calendar .fc-list-day-cushion {
    background-color: #f8f9fa !important;
    padding: 4px 10px !important;
}

#sb-widget-calendar .fc-footer-toolbar {
    display: none;
}

.workspace-analytics-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workspace-crm-metrics {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.workspace-crm-pipeline-select {
    max-width: 200px;
}

.workspace-crm-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workspace-crm-metric-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workspace-crm-metric-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
}

.workspace-crm-pipeline-name {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.workspace-crm-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.workspace-chart-shell {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.workspace-sales-number {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0f172a;
}

.workspace-sales-subtitle {
    color: #64748b;
    font-size: 0.9rem;
}

.grid-stack-item-content {
    overflow: hidden;
}

.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
    opacity: 0.7;
}

.workspace-empty-state {
    color: #94a3b8;
    font-size: 0.9rem;
}


/* --- DARK THEME EXTENSIONS (MODULES / WIDGETS / TABS) --- */
:root[data-theme="dark"] .page-header h1,
:root[data-theme="dark"] .workspace-title,
:root[data-theme="dark"] .workspace-widget-title,
:root[data-theme="dark"] .notification-title,
:root[data-theme="dark"] .client-name,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .workspace-shortcut,
:root[data-theme="dark"] .workspace-system-link,
:root[data-theme="dark"] .workspace-crm-metric-value,
:root[data-theme="dark"] .workspace-sales-number,
:root[data-theme="dark"] table,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-content h1,
:root[data-theme="dark"] .modal-content h2,
:root[data-theme="dark"] .modal-content h3,
:root[data-theme="dark"] .modal-content label {
    color: #e9f4ff;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .workspace-widget-card,
:root[data-theme="dark"] .workspace-widget-card--recommended,
:root[data-theme="dark"] .workspace-shortcut-icon,
:root[data-theme="dark"] .workspace-system-link,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-overlay,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .generator-advanced-panel,
:root[data-theme="dark"] .quiz-preview-shell,
:root[data-theme="dark"] .table-actions,
:root[data-theme="dark"] .table-container,
:root[data-theme="dark"] .workspace-info-content,
:root[data-theme="dark"] .workspace-chart-shell {
    background: rgba(14, 31, 62, 0.62);
    border-color: rgba(115, 194, 255, 0.28);
    box-shadow: 0 16px 36px rgba(4, 9, 25, 0.44), inset 0 1px 0 rgba(183, 224, 255, 0.14);
}

:root[data-theme="dark"] .workspace-widget-card--recommended {
    background: linear-gradient(180deg, rgba(0, 206, 255, 0.18), rgba(16, 36, 70, 0.72));
}

:root[data-theme="dark"] .workspace-widget-badge {
    background: rgba(34, 211, 238, 0.2);
    color: #85f8ff;
}

:root[data-theme="dark"] .workspace-system-link,
:root[data-theme="dark"] .workspace-shortcut,
:root[data-theme="dark"] .workspace-shortcut-title,
:root[data-theme="dark"] .workspace-crm-pipeline-name,
:root[data-theme="dark"] .workspace-sales-subtitle,
:root[data-theme="dark"] .workspace-empty-state,
:root[data-theme="dark"] .workspace-edit-hint,
:root[data-theme="dark"] .muted-text,
:root[data-theme="dark"] .notification-message,
:root[data-theme="dark"] .notifications-dropdown-message,
:root[data-theme="dark"] .form-help,
:root[data-theme="dark"] .table-actions label,
:root[data-theme="dark"] .copy-hint,
:root[data-theme="dark"] .placeholder-note {
    color: rgba(222, 239, 255, 0.78);
}

:root[data-theme="dark"] .workspace-system-link img,
:root[data-theme="dark"] .workspace-system-link i,
:root[data-theme="dark"] .workspace-shortcut-icon {
    background: rgba(9, 25, 50, 0.78);
    box-shadow: inset 0 0 0 1px rgba(114, 193, 255, 0.24);
}

:root[data-theme="dark"] .workspace-shortcut-add {
    border-color: rgba(109, 186, 255, 0.5);
    background: rgba(10, 24, 47, 0.4);
}

:root[data-theme="dark"] .workspace-shortcut-add span {
    color: #9adfff;
}

:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] button.dropdown-toggle,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .fc .fc-button {
    border-color: rgba(93, 177, 255, 0.35);
}

:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .workspace-info-button,
:root[data-theme="dark"] .table-sort {
    background: rgba(10, 29, 58, 0.72);
    color: #dff2ff;
}

:root[data-theme="dark"] .secondary-button:hover,
:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] .workspace-info-button:hover,
:root[data-theme="dark"] .workspace-info-button:focus {
    background: rgba(31, 73, 128, 0.68);
    color: #ffffff;
}

:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .fc .fc-button-primary {
    background: linear-gradient(125deg, rgba(35, 135, 255, 0.95), rgba(35, 212, 255, 0.9));
    color: #ffffff;
}

:root[data-theme="dark"] .primary-button:hover,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .fc .fc-button-primary:hover {
    filter: brightness(1.08);
}

:root[data-theme="dark"] .widget-close-btn {
    color: #9ecfff;
}

:root[data-theme="dark"] .widget-close-btn:hover,
:root[data-theme="dark"] .widget-close-btn:focus {
    background: rgba(70, 132, 206, 0.34);
    color: #ffffff;
}

:root[data-theme="dark"] table,
:root[data-theme="dark"] #leads-table,
:root[data-theme="dark"] #quizzes-table,
:root[data-theme="dark"] .table {
    background: transparent;
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] td,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
    border-color: rgba(108, 177, 244, 0.28);
}

:root[data-theme="dark"] #leads-table tbody tr:hover,
:root[data-theme="dark"] #quizzes-table tbody tr:hover,
:root[data-theme="dark"] .table tbody tr:hover {
    background: rgba(35, 91, 164, 0.22);
}

:root[data-theme="dark"] .lead-status-badge,
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .badge-muted,
:root[data-theme="dark"] .badge.bg-light,
:root[data-theme="dark"] .badge.text-dark {
    background: rgba(62, 126, 207, 0.3) !important;
    color: #dff1ff !important;
    border-color: rgba(90, 167, 247, 0.36);
}

:root[data-theme="dark"] .modal-overlay {
    background: rgba(1, 5, 16, 0.72);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: rgba(105, 182, 250, 0.26);
}

:root[data-theme="dark"] .modal-close {
    color: #c8e8ff;
}

:root[data-theme="dark"] .modal-close:hover {
    color: #ffffff;
    background: rgba(39, 107, 183, 0.4);
}

:root[data-theme="dark"] #crm-contact-profile-modal .modal-content {
    background: #0e1f3e;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .word-html-editable,
:root[data-theme="dark"] .rich-text-editor {
    background: rgba(8, 24, 49, 0.75);
    border-color: rgba(96, 173, 243, 0.28);
    color: #e9f3ff;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .word-html-editable:focus {
    border-color: rgba(97, 198, 255, 0.9);
    box-shadow: 0 0 0 0.2rem rgba(41, 184, 255, 0.22);
}

:root[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: #daf0ff;
}

:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background: rgba(66, 137, 216, 0.34);
    color: #ffffff;
}

:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .swal2-popup {
    background: rgba(14, 35, 68, 0.92);
    color: #e6f2ff;
}

:root[data-theme="dark"] #sb-widget-calendar .fc,
:root[data-theme="dark"] #sb-widget-calendar .fc-theme-standard td,
:root[data-theme="dark"] #sb-widget-calendar .fc-theme-standard th,
:root[data-theme="dark"] #sb-widget-calendar .fc-list,
:root[data-theme="dark"] #sb-widget-calendar .fc-scrollgrid {
    border-color: rgba(99, 177, 247, 0.3) !important;
    color: #def0ff;
}

:root[data-theme="dark"] #sb-widget-calendar .fc-list-day-cushion,
:root[data-theme="dark"] #sb-widget-calendar .fc-toolbar,
:root[data-theme="dark"] #sb-widget-calendar .fc-col-header-cell {
    background: rgba(10, 29, 58, 0.72) !important;
}

:root[data-theme="dark"] .fc .fc-daygrid-day-number,
:root[data-theme="dark"] .fc .fc-col-header-cell-cushion,
:root[data-theme="dark"] .fc .fc-list-event-title,
:root[data-theme="dark"] .fc .fc-list-event-time,
:root[data-theme="dark"] .fc .fc-toolbar-title {
    color: #dcefff !important;
}

:root[data-theme="dark"] .grid-stack-item-content {
    background: transparent;
}


/* --- DARK THEME TARGETED FIXES (SMART BOOKING / QUIZZES / GENERATOR / BILLING / ANALYTICS) --- */
:root[data-theme="dark"] #smart-booking-table .badge-success {
    background: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

:root[data-theme="dark"] #smart-booking-table .badge-warning {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

:root[data-theme="dark"] #smart-booking-table td,
:root[data-theme="dark"] #smart-booking-table th {
    color: #e6f2ff;
}

:root[data-theme="dark"] .smart-booking-actions .icon-button {
    background: rgba(14, 35, 66, 0.86);
    border-color: rgba(106, 182, 247, 0.35);
    color: #d9eeff;
    box-shadow: 0 2px 10px rgba(2, 9, 24, 0.24);
}

:root[data-theme="dark"] .smart-booking-actions .icon-button:hover {
    background: rgba(36, 97, 165, 0.62);
    border-color: rgba(119, 198, 255, 0.55);
    color: #ffffff;
}

:root[data-theme="dark"] .smart-booking-actions .icon-button:disabled {
    background: rgba(38, 52, 79, 0.7);
    color: rgba(193, 211, 232, 0.58);
    border-color: rgba(115, 136, 168, 0.38);
}

:root[data-theme="dark"] .quiz-payment-switch {
    background: rgba(42, 63, 96, 0.88);
}

:root[data-theme="dark"] .quiz-payment-switch-pill {
    background: rgba(14, 35, 66, 0.92);
    box-shadow: 0 4px 10px rgba(3, 10, 23, 0.4);
}

:root[data-theme="dark"] .quiz-payment-switch-option {
    color: rgba(203, 225, 246, 0.86);
}

:root[data-theme="dark"] .quiz-payment-switch .quiz-payment-mode-input:checked + .quiz-payment-switch-option,
:root[data-theme="dark"] .quiz-payment-switch .quiz-payment-timing-input:checked + .quiz-payment-switch-option {
    color: #b8edff;
    font-weight: 700;
}

:root[data-theme="dark"] .quiz-payment-amount label,
:root[data-theme="dark"] .quiz-payment-status,
:root[data-theme="dark"] .quiz-payment-hint {
    color: rgba(205, 227, 246, 0.86);
}

:root[data-theme="dark"] .quiz-payment-timing label {
    color: rgba(205, 227, 246, 0.72);
}

:root[data-theme="dark"] .quiz-payment-amount-input-row {
    background: rgba(9, 27, 53, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
}

:root[data-theme="dark"] .quiz-payment-amount-input-row .currency-prefix {
    background: rgba(21, 48, 86, 0.78);
    border-right-color: rgba(106, 182, 247, 0.34);
    color: #cbe7ff;
}

:root[data-theme="dark"] .quiz-payment-amount-input {
    background: transparent;
    color: #e9f4ff;
}

:root[data-theme="dark"] .widget-quiz-cell .widget-radio,
:root[data-theme="dark"] .widget-quiz-cell .widget-radio span,
:root[data-theme="dark"] .widget-quiz-cell {
    color: #d8ecff;
}

:root[data-theme="dark"] .edit-button {
    background: rgba(22, 60, 108, 0.75);
    border: 1px solid rgba(106, 182, 247, 0.34);
    color: #def0ff;
}

:root[data-theme="dark"] .edit-button:hover {
    background: rgba(36, 96, 164, 0.75);
    color: #ffffff;
}

:root[data-theme="dark"] .quiz-link-actions .btn-outline-primary {
    border-color: rgba(90, 174, 245, 0.45);
    color: #9fe1ff;
    background: rgba(14, 35, 66, 0.6);
}

:root[data-theme="dark"] .quiz-link-actions .btn-outline-primary:hover {
    background: rgba(37, 104, 177, 0.65);
    color: #ffffff;
}

:root[data-theme="dark"] .generator-mode-tabs,
:root[data-theme="dark"] .generator-settings-panel,
:root[data-theme="dark"] .generator-source-card,
:root[data-theme="dark"] .prompt-hint-row,
:root[data-theme="dark"] .generator-inline-preview,
:root[data-theme="dark"] .generator-advanced-panel,
:root[data-theme="dark"] .generator-result,
:root[data-theme="dark"] .generator-ai-response,
:root[data-theme="dark"] .word-html-converter,
:root[data-theme="dark"] .pdf-html-converter {
    background: rgba(13, 32, 62, 0.84);
    border-color: rgba(104, 181, 247, 0.3);
    color: #e8f3ff;
}

:root[data-theme="dark"] .generator-source-card:hover {
    box-shadow: 0 14px 32px rgba(3, 11, 26, 0.45);
}

:root[data-theme="dark"] .generator-source-radio {
    background: rgba(12, 30, 58, 0.84);
    border-color: rgba(104, 181, 247, 0.32);
    color: #dcefff;
}

:root[data-theme="dark"] .generator-source-title .muted-text,
:root[data-theme="dark"] .generator-mode-description,
:root[data-theme="dark"] .generator-selected-languages.empty::before,
:root[data-theme="dark"] .generator-language-help,
:root[data-theme="dark"] .generator-status {
    color: rgba(210, 230, 250, 0.82);
}

:root[data-theme="dark"] .generator-language-picker select,
:root[data-theme="dark"] .prompt-hint-controls select,
:root[data-theme="dark"] #generator-document-file,
:root[data-theme="dark"] #generator-ai-request,
:root[data-theme="dark"] #generator-custom-prompt,
:root[data-theme="dark"] #generator-instruction-override,
:root[data-theme="dark"] #generator-template-name,
:root[data-theme="dark"] #generator-template-select {
    background: rgba(8, 24, 49, 0.82);
    border-color: rgba(102, 179, 245, 0.34);
    color: #e9f4ff;
}

:root[data-theme="dark"] .language-pill {
    background: rgba(21, 48, 84, 0.8);
    color: #d8ecff;
    border-color: rgba(106, 182, 247, 0.34);
}

:root[data-theme="dark"] #page-content-billing .card,
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] #billing-plan-list > p,
:root[data-theme="dark"] #billing-credit-packages > p {
    background: rgba(12, 30, 58, 0.84);
    border-color: rgba(104, 181, 247, 0.3);
    color: #e8f3ff;
}

:root[data-theme="dark"] #billing-current-plan,
:root[data-theme="dark"] #billing-current-credits,
:root[data-theme="dark"] .plan-card h3,
:root[data-theme="dark"] .plan-card .plan-price {
    color: #8edfff;
}

:root[data-theme="dark"] #billing-current-plan-description,
:root[data-theme="dark"] .plan-card .plan-description,
:root[data-theme="dark"] .plan-card .plan-price .unit-price,
:root[data-theme="dark"] .plan-card .plan-meta,
:root[data-theme="dark"] .plan-card .plan-meta li {
    color: rgba(214, 235, 255, 0.8);
}

:root[data-theme="dark"] .feature-badge,
:root[data-theme="dark"] .plan-card .plan-features span {
    background: rgba(39, 97, 165, 0.38);
    color: #cae9ff;
    border: 1px solid rgba(110, 186, 250, 0.28);
}

:root[data-theme="dark"] .plan-card button,
:root[data-theme="dark"] .select-plan-button,
:root[data-theme="dark"] .buy-package-button {
    background: linear-gradient(125deg, rgba(35, 135, 255, 0.95), rgba(35, 212, 255, 0.9));
    color: #ffffff;
}

:root[data-theme="dark"] .plan-card button:disabled {
    background: rgba(88, 109, 136, 0.75);
    color: rgba(220, 233, 247, 0.78);
}

:root[data-theme="dark"] #page-content-quiz-analytics .analytics-summary > div {
    background: rgba(12, 30, 58, 0.84);
    border-color: rgba(104, 181, 247, 0.3);
}

:root[data-theme="dark"] #page-content-quiz-analytics .analytics-summary h3 {
    color: rgba(214, 235, 255, 0.82);
}

:root[data-theme="dark"] #analytics-total-count,
:root[data-theme="dark"] #analytics-total-amount {
    color: #89dcff;
    text-shadow: 0 0 18px rgba(78, 198, 255, 0.22);
}

/* --- DARK THEME FIXES: SMART BOOKING MODALS / CONTACTS / SETTINGS SCHEDULING --- */
:root[data-theme="dark"] #smart-booking-create-modal .modal-content,
:root[data-theme="dark"] #edit-template-modal .modal-content,
:root[data-theme="dark"] #smart-booking-answers-modal .modal-content,
:root[data-theme="dark"] #smart-booking-scheduling-modal .modal-content,
:root[data-theme="dark"] #smart-booking-reschedule-modal .modal-content,
:root[data-theme="dark"] #import-contacts-modal .modal-content,
:root[data-theme="dark"] #contact-file-modal .modal-content {
    background: #0a1c38;
    border: 1px solid rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] #smart-booking-scheduling-modal .modal-overlay {
    background: rgba(2, 8, 20, 0.85);
}

#smart-booking-reschedule-modal .slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

#smart-booking-slot-list,
#smart-booking-reschedule-modal .slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#smart-booking-slot-list .slot-btn,
#smart-booking-reschedule-modal .slot-btn {
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #1d4ed8;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

#smart-booking-slot-list .slot-btn.selected,
#smart-booking-reschedule-modal .slot-btn.selected {
    background: #1d4ed8;
    color: #ffffff;
}

#smart-booking-slot-list .slot-btn.slot-btn-free,
#smart-booking-reschedule-modal .slot-btn.slot-btn-free {
    border-color: #93c5fd;
    color: #1d4ed8;
}

#smart-booking-slot-list .slot-btn.slot-btn-artificial,
#smart-booking-reschedule-modal .slot-btn.slot-btn-artificial {
    border-color: #f59e0b;
    background: #fff7ed;
    color: #9a3412;
}

#smart-booking-slot-list .slot-btn.slot-btn-booked,
#smart-booking-reschedule-modal .slot-btn.slot-btn-booked {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #166534;
    cursor: not-allowed;
    opacity: 0.8;
}

#smart-booking-slot-list .slot-btn:disabled,
#smart-booking-reschedule-modal .slot-btn:disabled {
    text-decoration: line-through;
}

:root[data-theme="dark"] #smart-booking-slot-list .slot-btn,
:root[data-theme="dark"] #smart-booking-reschedule-modal .slot-btn {
    background: #112947;
    border-color: #3d6b99;
    color: #d9edff;
}

:root[data-theme="dark"] #smart-booking-slot-list .slot-btn.selected,
:root[data-theme="dark"] #smart-booking-reschedule-modal .slot-btn.selected {
    background: #2b78f2;
    border-color: #2b78f2;
    color: #ffffff;
}

:root[data-theme="dark"] #smart-booking-slot-list .slot-btn.slot-btn-artificial,
:root[data-theme="dark"] #smart-booking-reschedule-modal .slot-btn.slot-btn-artificial {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fcd34d;
}

:root[data-theme="dark"] #smart-booking-slot-list .slot-btn.slot-btn-booked,
:root[data-theme="dark"] #smart-booking-reschedule-modal .slot-btn.slot-btn-booked {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.65);
    color: #86efac;
}

:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-section,
:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-preview,
:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-template-preview,
:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-option-group,
:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-field-card,
:root[data-theme="dark"] #edit-template-modal .smart-booking-section,
:root[data-theme="dark"] #edit-template-modal .smart-booking-preview,
:root[data-theme="dark"] #edit-template-modal .smart-booking-template-preview,
:root[data-theme="dark"] #edit-template-modal .smart-booking-option-group,
:root[data-theme="dark"] #edit-template-modal .smart-booking-field-card {
    background: rgba(13, 34, 66, 0.82);
    border-color: rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] #smart-booking-answers-modal #smart-booking-answers-lead,
:root[data-theme="dark"] #smart-booking-answers-modal #smart-booking-answers-empty,
:root[data-theme="dark"] #smart-booking-answers-modal .smart-booking-answer-question {
    color: rgba(230, 242, 255, 0.9);
}

:root[data-theme="dark"] #smart-booking-answers-modal .smart-booking-answer-row {
    background: rgba(13, 34, 66, 0.82);
    border-color: rgba(106, 182, 247, 0.3);
}

:root[data-theme="dark"] #smart-booking-answers-modal .smart-booking-answer-text {
    color: #ffffff;
}

:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-section-header,
:root[data-theme="dark"] #smart-booking-create-modal label,
:root[data-theme="dark"] #smart-booking-create-modal .smart-booking-time-toggle-option,
:root[data-theme="dark"] #smart-booking-create-modal .form-help,
:root[data-theme="dark"] #smart-booking-create-modal .muted-text,
:root[data-theme="dark"] #edit-template-modal .smart-booking-section-header,
:root[data-theme="dark"] #edit-template-modal label,
:root[data-theme="dark"] #edit-template-modal .form-help,
:root[data-theme="dark"] #edit-template-modal .muted-text {
    color: rgba(219, 238, 255, 0.84);
}

:root[data-theme="dark"] #smart-booking-create-modal input,
:root[data-theme="dark"] #smart-booking-create-modal select,
:root[data-theme="dark"] #smart-booking-create-modal textarea,
:root[data-theme="dark"] #edit-template-modal input,
:root[data-theme="dark"] #edit-template-modal select,
:root[data-theme="dark"] #edit-template-modal textarea {
    background: rgba(8, 24, 49, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
    color: #e8f3ff;
}

:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-section,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-preview,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-option-group,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-field-card,
:root[data-theme="dark"] #page-content-smart-booking-template .generator-selected-languages,
:root[data-theme="dark"] #page-content-smart-booking-template .language-pill {
    background: rgba(13, 34, 66, 0.82);
    border-color: rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-preview {
    background: rgba(8, 24, 49, 0.76);
}

:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-preview-row {
    border-top-color: rgba(106, 182, 247, 0.24);
}

:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-field-title,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-preview-label,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-section h3,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-section h4,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-section-header,
:root[data-theme="dark"] #page-content-smart-booking-template label,
:root[data-theme="dark"] #page-content-smart-booking-template .form-help,
:root[data-theme="dark"] #page-content-smart-booking-template .muted-text,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-field-meta,
:root[data-theme="dark"] #page-content-smart-booking-template .smart-booking-preview-meta {
    color: rgba(219, 238, 255, 0.84);
}

:root[data-theme="dark"] #page-content-smart-booking-template input,
:root[data-theme="dark"] #page-content-smart-booking-template select,
:root[data-theme="dark"] #page-content-smart-booking-template textarea {
    background: rgba(8, 24, 49, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
    color: #e8f3ff;
}

:root[data-theme="dark"] #page-content-smart-booking-template input::placeholder,
:root[data-theme="dark"] #page-content-smart-booking-template textarea::placeholder {
    color: rgba(190, 216, 240, 0.56);
}

:root[data-theme="dark"] #page-content-smart-booking-template .language-pill button {
    color: #d6ecff;
}

:root[data-theme="dark"] .contact-files-section,
:root[data-theme="dark"] .contact-activity,
:root[data-theme="dark"] .contact-transactions,
:root[data-theme="dark"] .contact-filled-quizzes,
:root[data-theme="dark"] .contact-custom-fields-section,
:root[data-theme="dark"] .contact-file-row,
:root[data-theme="dark"] .contact-activity-item,
:root[data-theme="dark"] #contact-transactions-list .table,
:root[data-theme="dark"] #crm-contact-profile-transactions-list .table,
:root[data-theme="dark"] #contact-transactions-list .table th,
:root[data-theme="dark"] #crm-contact-profile-transactions-list .table th,
:root[data-theme="dark"] #contact-transactions-list .table td,
:root[data-theme="dark"] #crm-contact-profile-transactions-list .table td {
    background: rgba(13, 34, 66, 0.82);
    border-color: rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] .contact-file-info,
:root[data-theme="dark"] .contact-activity-title,
:root[data-theme="dark"] .contact-activity-meta,
:root[data-theme="dark"] .contact-activity-date,
:root[data-theme="dark"] .contact-section-header h3,
:root[data-theme="dark"] #contact-detail-status,
:root[data-theme="dark"] #contact-files-empty,
:root[data-theme="dark"] #contact-transactions-empty,
:root[data-theme="dark"] #crm-contact-profile-transactions-empty,
:root[data-theme="dark"] #contact-filled-quizzes-empty,
:root[data-theme="dark"] #contact-custom-fields-empty,
:root[data-theme="dark"] #crm-contact-profile-filled-quizzes-empty,
:root[data-theme="dark"] #crm-contact-profile-additional-info-empty,
:root[data-theme="dark"] #contact-activity-empty {
    color: rgba(219, 238, 255, 0.84);
}

:root[data-theme="dark"] #contact-detail-card > .page-header {
    background: rgba(8, 24, 49, 0.95);
    border-bottom-color: rgba(106, 182, 247, 0.3);
}

:root[data-theme="dark"] .contacts-import-dropzone {
    border-color: rgba(106, 182, 247, 0.42);
    background: rgba(13, 34, 66, 0.74);
}

:root[data-theme="dark"] .contacts-import-dropzone.is-dragover {
    border-color: rgba(56, 189, 248, 0.9);
    background: rgba(23, 66, 114, 0.62);
}

:root[data-theme="dark"] .contacts-import-helper ul,
:root[data-theme="dark"] .contacts-import-title,
:root[data-theme="dark"] .contacts-import-hint,
:root[data-theme="dark"] #contacts-import-file-name,
:root[data-theme="dark"] #contacts-import-status,
:root[data-theme="dark"] #contacts-import-error {
    color: rgba(219, 238, 255, 0.84);
}

:root[data-theme="dark"] .working-hours-row {
    background: rgba(13, 34, 66, 0.84);
    border-color: rgba(106, 182, 247, 0.3);
}

:root[data-theme="dark"] .working-hours-row label,
:root[data-theme="dark"] .working-hours-row span,
:root[data-theme="dark"] .working-hours-grid .form-help,
:root[data-theme="dark"] #scheduling-defaults-card h2,
:root[data-theme="dark"] #scheduling-defaults-card .page-subtitle,
:root[data-theme="dark"] #scheduling-defaults-card .muted-text {
    color: rgba(219, 238, 255, 0.84);
}

:root[data-theme="dark"] .working-hours-time input[type="time"],
:root[data-theme="dark"] #slot-duration,
:root[data-theme="dark"] #buffer-before,
:root[data-theme="dark"] #buffer-after {
    background: rgba(8, 24, 49, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
    color: #e8f3ff;
}

:root[data-theme="dark"] #contact-detail-footer {
    background: rgba(10, 28, 56, 0.96);
    border-top-color: rgba(106, 182, 247, 0.3);
}

@media (max-width: 768px) {
    :root[data-theme="dark"] #import-contacts-modal .modal-footer,
    :root[data-theme="dark"] #contacts-list-card .table-actions,
    :root[data-theme="dark"] .contact-detail-footer {
        background: rgba(10, 28, 56, 0.96);
        border-color: rgba(106, 182, 247, 0.3);
    }
}

:root[data-theme="dark"] #crm-lead-files-modal .modal-content {
    background: rgba(10, 28, 56, 0.96);
    border: 1px solid rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] #page-content-settings .settings-card h2,
:root[data-theme="dark"] #page-content-settings .settings-card .muted-text,
:root[data-theme="dark"] #page-content-settings .working-hours-grid .form-help,
:root[data-theme="dark"] #page-content-settings .working-hours-row .checkbox-inline,
:root[data-theme="dark"] #page-content-settings .working-hours-row .checkbox-inline span,
:root[data-theme="dark"] #page-content-settings .working-hours-row .working-hours-time span {
    color: rgba(219, 238, 255, 0.84);
}

/* --- DARK THEME FIXES: TEMPLATE LIBRARY + QUIZ BUILDER --- */
:root[data-theme="dark"] #template-library-modal .modal-content,
:root[data-theme="dark"] #publish-template-modal .modal-content,
:root[data-theme="dark"] #edit-template-modal .modal-content {
    background: rgba(10, 28, 56, 0.96);
    border: 1px solid rgba(106, 182, 247, 0.3);
    color: #e6f2ff;
}

:root[data-theme="dark"] #template-library-modal .template-library-filter,
:root[data-theme="dark"] #template-library-modal .modal-description,
:root[data-theme="dark"] #template-library-modal .template-library-empty,
:root[data-theme="dark"] #template-library-modal .template-library-card-meta,
:root[data-theme="dark"] #template-library-modal .template-library-author,
:root[data-theme="dark"] #template-library-modal .template-library-author-label,
:root[data-theme="dark"] #template-library-modal .template-library-price {
    color: rgba(219, 238, 255, 0.86);
}

:root[data-theme="dark"] #template-library-modal .template-library-card {
    background: rgba(13, 34, 66, 0.9);
    border-color: rgba(106, 182, 247, 0.3);
    box-shadow: 0 10px 24px rgba(2, 9, 23, 0.35);
}

:root[data-theme="dark"] #template-library-modal .template-library-card img {
    background: rgba(16, 39, 72, 0.88);
}

:root[data-theme="dark"] #template-library-modal .template-library-card-title,
:root[data-theme="dark"] #template-library-modal .template-library-card-body,
:root[data-theme="dark"] #template-library-modal .template-library-card-footer {
    color: #e8f3ff;
}

:root[data-theme="dark"] #template-library-modal #template-library-niche,
:root[data-theme="dark"] #publish-template-modal input,
:root[data-theme="dark"] #publish-template-modal select,
:root[data-theme="dark"] #publish-template-modal textarea,
:root[data-theme="dark"] #edit-template-modal input,
:root[data-theme="dark"] #edit-template-modal select,
:root[data-theme="dark"] #edit-template-modal textarea {
    background: rgba(8, 24, 49, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
    color: #e8f3ff;
}

:root[data-theme="dark"] #page-content-quiz-builder .card,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-card,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-viewer-preview,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-viewer-stage,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-question-item,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-empty,
:root[data-theme="dark"] #page-content-quiz-builder .language-selector,
:root[data-theme="dark"] #page-content-quiz-builder .translation-input-collection,
:root[data-theme="dark"] #page-content-quiz-builder .rich-text-editor,
:root[data-theme="dark"] #page-content-quiz-builder .question-row,
:root[data-theme="dark"] #page-content-quiz-builder .question-options-editor,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-style-grid,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-card-grid,
:root[data-theme="dark"] #page-content-quiz-builder .rating-level-row,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-section,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-language-switcher select,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-header .badge {
    background: rgba(13, 34, 66, 0.86);
    border-color: rgba(106, 182, 247, 0.3);
    color: #e8f3ff;
}

:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-theme-label,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-question-title,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-viewer-heading h4,
:root[data-theme="dark"] #page-content-quiz-builder #builder-title,
:root[data-theme="dark"] #page-content-quiz-builder label,
:root[data-theme="dark"] #page-content-quiz-builder .form-help,
:root[data-theme="dark"] #page-content-quiz-builder .muted-text,
:root[data-theme="dark"] #page-content-quiz-builder .question-row-header,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-option-list,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-description,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-pill,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-count,
:root[data-theme="dark"] #page-content-quiz-builder .rating-level-header,
:root[data-theme="dark"] #page-content-quiz-builder .rating-level-inputs label,
:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-language-switcher label {
    color: rgba(219, 238, 255, 0.86);
}

:root[data-theme="dark"] #page-content-quiz-builder input,
:root[data-theme="dark"] #page-content-quiz-builder select,
:root[data-theme="dark"] #page-content-quiz-builder textarea,
:root[data-theme="dark"] #page-content-quiz-builder .editor-content,
:root[data-theme="dark"] #page-content-quiz-builder .editor-toolbar button,
:root[data-theme="dark"] #page-content-quiz-builder .language-selector select {
    background: rgba(8, 24, 49, 0.86);
    border-color: rgba(106, 182, 247, 0.34);
    color: #e8f3ff;
}

:root[data-theme="dark"] #page-content-quiz-builder .editor-toolbar button:hover,
:root[data-theme="dark"] #page-content-quiz-builder .question-row-header button:hover,
:root[data-theme="dark"] #page-content-quiz-builder .secondary-button:hover {
    background: rgba(36, 97, 165, 0.62);
    color: #ffffff;
}


:root[data-theme="dark"] #page-content-quiz-builder .payment-settings {
    background: rgba(8, 24, 49, 0.86);
    border: 1px solid rgba(106, 182, 247, 0.3);
}

:root[data-theme="dark"] #page-content-quiz-builder .payment-settings > label,
:root[data-theme="dark"] #page-content-quiz-builder .radio-group label,
:root[data-theme="dark"] #page-content-quiz-builder .radio-group span,
:root[data-theme="dark"] #page-content-quiz-builder #credit-payment-locked {
    color: rgba(219, 238, 255, 0.86);
}

:root[data-theme="dark"] #page-content-quiz-builder .radio-group input[type="radio"] {
    accent-color: #5ec7ff;
}

:root[data-theme="dark"] #page-content-quiz-builder #payment-amount-group {
    border-left: 2px solid rgba(106, 182, 247, 0.22);
    padding-left: 16px;
}

:root[data-theme="dark"] #page-content-quiz-builder .settings-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(106, 182, 247, 0.5);
}

:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-question-item::before {
    color: rgba(219, 238, 255, 0.86);
}

:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-pill {
    background: rgba(106, 182, 247, 0.16);
    border: 1px solid rgba(106, 182, 247, 0.28);
}

:root[data-theme="dark"] #page-content-quiz-builder .quiz-preview-pill-accent {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.32);
    color: #b4ffe2;
}

/* Compliance modal */
#clientComplianceModal.modal.fade {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 14, 30, 0.62);
    z-index: 3000;
}

#clientComplianceModal.modal.fade.show {
    display: flex;
}

#clientComplianceModal .modal-dialog {
    width: min(760px, 94vw);
    margin: 0;
}

#clientComplianceModal .client-compliance-modal-content {
    position: relative;
    width: 100%;
    max-height: min(80vh, 760px);
    background: #ffffff;
    border: 1px solid var(--border-color);
}

#clientComplianceModal #client-compliance-text {
    line-height: 1.55;
    white-space: normal;
}

#clientComplianceModal #client-compliance-text a {
    color: var(--accent-color, #2563eb);
    text-decoration: underline;
}


#clientComplianceModal .modal-header {
    position: relative;
    justify-content: center;
}

#clientComplianceModal .modal-title {
    width: 100%;
    text-align: center;
}

#clientComplianceModal .close-button {
    position: absolute;
    right: 20px;
    top: 20px;
    transform: none;
    z-index: 3;
}

#clientComplianceModal .form-check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.06);
}

#clientComplianceModal .form-check-input {
    float: none;
    margin: 0;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(37, 99, 235, 0.7);
    border-radius: 6px;
    accent-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    flex: 0 0 auto;
}

#clientComplianceModal .form-check-label {
    margin: 0;
    line-height: 1.35;
    font-weight: 600;
}

:root[data-theme="dark"] #clientComplianceModal .form-check {
    border-color: rgba(115, 194, 255, 0.35);
    background: rgba(14, 50, 92, 0.55);
}

:root[data-theme="dark"] #clientComplianceModal .form-check-input {
    border-color: rgba(115, 194, 255, 0.78);
    accent-color: #5ec7ff;
    box-shadow: 0 0 0 4px rgba(94, 199, 255, 0.2);
}

#clientComplianceModal .close-button {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

:root[data-theme="dark"] #clientComplianceModal .client-compliance-modal-content {
    background: #102646;
    border-color: rgba(115, 194, 255, 0.28);
    box-shadow: 0 16px 36px rgba(4, 9, 25, 0.65);
}

:root[data-theme="dark"] #clientComplianceModal .modal-header,
:root[data-theme="dark"] #clientComplianceModal .modal-footer {
    background: transparent;
}

/* Notifications dropdown layering + dark readability fixes */
:root[data-theme="dark"] .notifications-dropdown {
    background: rgba(10, 25, 48, 0.98);
    border-color: rgba(115, 194, 255, 0.28);
    box-shadow: 0 18px 36px rgba(3, 10, 22, 0.8);
}

:root[data-theme="dark"] .notifications-dropdown-header,
:root[data-theme="dark"] .notifications-dropdown-footer,
:root[data-theme="dark"] .notifications-dropdown-title {
    color: #e8f3ff;
}

:root[data-theme="dark"] .notifications-dropdown-item {
    background: rgba(12, 35, 70, 0.92);
    border: 1px solid rgba(115, 194, 255, 0.2);
}


.quiz-payment-timing {
    margin-top: 8px;
}

.quiz-payment-timing label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}


.smart-qr-module {
    display: grid;
    gap: 16px;
}
.smart-qr-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.smart-qr-tab { border:1px solid var(--border-color,#d1d5db); background:transparent; color:inherit; border-radius:10px; padding:10px 14px; cursor:pointer; }
.smart-qr-tab.is-active { background:var(--accent-color,#2563eb); color:#fff; border-color:var(--accent-color,#2563eb); }
.smart-qr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:12px; }
.smart-qr-actions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.smart-qr-color-input-wrap { display:flex; align-items:center; gap:10px; }
.smart-qr-color-indicator { width:18px; height:18px; border-radius:999px; border:1px solid rgba(148,163,184,0.8); background:#111827; flex:0 0 auto; }
.smart-qr-preview { min-height:280px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border-color,#d1d5db); border-radius:12px; }
.smart-qr-checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.smart-qr-checkbox-item { display:flex; gap:8px; align-items:center; }
.smart-qr-link-row { display:grid; grid-template-columns:1fr 1.5fr auto; gap:8px; margin-bottom:8px; }
.smart-qr-table { width:100%; border-collapse:collapse; }
.smart-qr-table th, .smart-qr-table td { border-bottom:1px solid var(--border-color,#e5e7eb); padding:10px; text-align:left; }
.smart-qr-modal { position:fixed; inset:0; background:rgba(17,24,39,0.65); display:flex; align-items:center; justify-content:center; z-index:1200; }
.smart-qr-modal.hidden { display:none; }
.smart-qr-modal-dialog { background:var(--card-bg,#fff); border-radius:14px; width:min(860px,94vw); max-height:90vh; overflow:auto; padding:16px; }
.smart-qr-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.icon-button { background:transparent; border:none; font-size:24px; cursor:pointer; color:inherit; }
@media (max-width: 640px) {
    .smart-qr-link-row { grid-template-columns:1fr; }
}

.profile-social-links { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.profile-social-link-row { display:grid; grid-template-columns: 180px 1fr 1.5fr auto; gap:8px; }
.social-link-actions { margin-top:8px; }
.quiz-qr-analytics-btn { margin-left:0; }
@media (max-width: 900px) {
  .profile-social-link-row { grid-template-columns:1fr; }
}

.qr-popup { position: fixed; inset: 0; z-index: 2200; display:flex; align-items:center; justify-content:center; }
.qr-popup.hidden { display:none; }
.qr-popup-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.6); }
.qr-popup-dialog { position:relative; z-index:1; width:min(420px,92vw); background:#ffffff; color:#111827; border-radius:12px; overflow:hidden; box-shadow:0 20px 48px rgba(0,0,0,0.35); }
.qr-popup-header,.qr-popup-footer { padding:14px 16px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
.qr-popup-footer { border-bottom:none; border-top:1px solid #e5e7eb; justify-content:flex-end; }
.qr-popup-body { padding:16px; background:#ffffff; }
:root[data-theme="dark"] .qr-popup-dialog,:root[data-theme="dark"] .qr-popup-body { background:#ffffff; color:#111827; }
.smart-qr-public-data { border:1px solid var(--border-color,#3b82f6); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:rgba(37,99,235,0.08); }
.smart-qr-public-data p { margin:0 0 6px; }
.smart-qr-public-data p:last-child { margin-bottom:0; }

.nav-branch > .nav-sub-links{display:none;list-style:none;padding-left:18px;margin:4px 0 8px;}
.nav-branch.open > .nav-sub-links{display:block;}
.nav-sub-links .nav-link{font-size:0.94em;opacity:.95;}
.nav-branch-toggle{margin-left:auto;font-size:12px;}
.nav-branch.open .nav-branch-toggle{transform:rotate(180deg);}


.business-passport-module { display:flex; flex-direction:column; gap:14px; }
.business-passport-module.is-loading { cursor:progress; }
.business-passport-module.is-loading .business-passport-content { opacity:.68; pointer-events:none; }
.business-passport-module.has-load-error #business-passport-status { color:#fca5a5; }
.business-passport-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.business-passport-readiness-badge { background:rgba(37,99,235,.16); color:#93c5fd; border:1px solid rgba(59,130,246,.35); padding:6px 10px; border-radius:999px; font-weight:600; font-size:.88rem; }
.business-passport-stepper { position:relative; padding:10px 0 0; }
.business-passport-stepper-track { position:relative; height:8px; border-radius:999px; background:rgba(148,163,184,.2); overflow:hidden; }
.business-passport-stepper-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#2563eb,#38bdf8); transition:width .6s ease; }
.business-passport-milestones { position:relative; margin-top:-34px; padding-bottom:12px; min-height:154px; }
.business-passport-milestone { position:absolute; top:0; transform:translateX(-50%); width:200px; text-align:center; }
.business-passport-milestone.is-last { transform:translateX(-100%); }
.business-passport-milestone-node { position:relative; width:60px; height:60px; border-radius:50%; margin:0 auto 10px; background:#64748b; border:2px solid #64748b; color:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:700; transition:all .4s ease; }
.business-passport-milestone.is-unlocked .business-passport-milestone-node { background:#2563eb; border-color:#1d4ed8; color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.business-passport-milestone-icon { font-size:1.4rem; }
.business-passport-milestone-check { position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:999px; background:#1d4ed8; border:2px solid #0f172a; color:#fff; display:none; align-items:center; justify-content:center; font-size:.8rem; line-height:1; }
.business-passport-milestone.is-unlocked .business-passport-milestone-check { display:flex; }
.business-passport-milestone-title { margin:0; font-size:.86rem; font-weight:700; color:var(--text-color,#e2e8f0); }
.business-passport-milestone-subtitle,
.business-passport-milestone-description { margin:2px 0 0; font-size:.76rem; line-height:1.35; color:var(--muted-color,#94a3b8); }
.business-passport-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:start; }
.business-passport-tabs { display:flex; flex-direction:column; gap:8px; }
.business-passport-tab { border:1px solid var(--border-color,#334155); background:transparent; color:var(--text-color,#e2e8f0); border-radius:8px; padding:10px 12px; text-align:left; cursor:pointer; }
.business-passport-tab.is-active { background:var(--primary-color,#2563eb); border-color:var(--primary-color,#2563eb); color:#fff; }
.business-passport-content { min-width:0; }
.business-passport-panel { display:block; }
.business-passport-panel h3 { margin:0 0 12px; font-size:1rem; }
.business-passport-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.business-passport-section-head h3 { margin:0; }
.business-passport-inline-actions { display:flex; align-items:center; gap:10px; }
.business-passport-inline-actions > input[type="file"],
.business-passport-inline-actions > input[type="text"],
.business-passport-inline-actions > input[type="email"] { flex:1; }
.business-passport-panel .form-group.is-disabled input { opacity:.7; }
.business-passport-panel [data-passport-skip-field].is-active { border-color:var(--primary-color,#2563eb); color:#93c5fd; }
.business-passport-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

@media (max-width: 980px) {
  .business-passport-layout { grid-template-columns:1fr; }
  .business-passport-tabs { flex-direction:row; flex-wrap:wrap; }
  .business-passport-milestones { min-height:180px; }
  .business-passport-milestone { width:140px; }
  .business-passport-milestone-title { font-size:.8rem; }
  .business-passport-milestone-subtitle,
  .business-passport-milestone-description { font-size:.7rem; }
}

.smart-booking-payment-type-row {
    margin-bottom: 0.75rem;
}

.smart-booking-payment-panel {
    display: grid;
    gap: 0.75rem;
}

.smart-booking-payment-panel--details {
    min-height: 100%;
}

.smart-booking-payment-type-toggle {
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
}

.smart-booking-payment-type-toggle .smart-booking-time-toggle-option {
    opacity: 0.7;
    transition: opacity .2s ease, color .2s ease;
}

.smart-booking-payment-type-toggle .smart-booking-time-toggle-option.is-active {
    opacity: 1;
    color: var(--text-color, #e2e8f0);
    font-weight: 600;
}

.smart-booking-credit-summary {
    padding: 0.85rem 1rem;
    border: 1px solid #d8e2f1;
    border-radius: 12px;
    background: #f8fbff;
}

.smart-booking-language-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.smart-booking-language-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #d8e2f1;
    border-radius: 999px;
    background: #fff;
}

.smart-booking-default-language-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e8f1ff;
    color: #0d6efd;
    font-size: 0.75rem;
    font-weight: 600;
}

:root[data-theme="dark"] .smart-booking-credit-summary,
:root[data-theme="dark"] .smart-booking-language-checkbox {
    background: #152033;
    border-color: #33435f;
}

:root[data-theme="dark"] .smart-booking-default-language-badge {
    background: #1d3b6d;
    color: #dbe7ff;
}

/* Smart Invoicing */
.smart-invoicing-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.smart-invoicing-summary-card .kpi-value {
    margin: 0;
}


.smart-invoicing-table-container {
    min-height: 590px;
    overflow-x: auto;
    overflow-y: auto;
}

#smart-invoicing-table th:last-child,
#smart-invoicing-table td:last-child {
    min-width: 150px;
}

#smart-invoicing-table .status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}


:root[data-theme="dark"] .smart-invoicing-action-toggle,
:root[data-theme="dark"] .smart-invoicing-page-button {
    background: rgba(9, 25, 50, 0.78);
    border-color: rgba(115, 194, 255, 0.28);
    color: #e9f4ff;
}

:root[data-theme="dark"] .smart-invoicing-action-menu {
    background: #10213d;
    border-color: rgba(115, 194, 255, 0.28);
}

:root[data-theme="dark"] .smart-invoicing-action-menu button {
    color: #e9f4ff;
}

:root[data-theme="dark"] .smart-invoicing-action-menu button:hover {
    background: rgba(115, 194, 255, 0.14);
}

:root[data-theme="dark"] .smart-invoicing-pagination-summary {
    color: rgba(222, 239, 255, 0.78);
}

#smart-invoicing-table .status-draft { background: #e5e7eb; color: #374151; }
#smart-invoicing-table .status-sent { background: #dbeafe; color: #1d4ed8; }
#smart-invoicing-table .status-viewed { background: #cffafe; color: #0e7490; }
#smart-invoicing-table .status-paid { background: #dcfce7; color: #15803d; }
#smart-invoicing-table .status-overdue { background: #fee2e2; color: #b91c1c; }
#smart-invoicing-table .status-cancelled { background: #f3f4f6; color: #6b7280; }
#smart-invoicing-table .status-payment-unpaid { margin-left: 6px; background: #ffedd5; color: #c2410c; }
#smart-invoicing-table .status-payment-paid { margin-left: 6px; background: #dcfce7; color: #15803d; }
#smart-invoicing-table .status-payment-expired,
#smart-invoicing-table .status-payment-failed { margin-left: 6px; background: #fee2e2; color: #b91c1c; }

.smart-invoicing-row-actions {
    position: relative;
}

.smart-invoicing-action-toggle {
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--panel-bg, #fff);
    border-radius: 8px;
    color: var(--text-color, #0f172a);
    width: 34px;
    height: 34px;
}

.smart-invoicing-action-toggle i {
    color: inherit;
}

.smart-invoicing-action-menu {
    position: absolute;
    right: 0;
    top: 38px;
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    z-index: 12;
    padding: 6px;
}

.smart-invoicing-action-menu.is-dropup {
    top: auto;
    bottom: 38px;
}

.smart-invoicing-action-menu.hidden { display: none; }
.smart-invoicing-action-menu button {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 8px;
}
.smart-invoicing-action-menu button:hover { background: #f3f4f6; }
.smart-invoicing-action-menu button:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}
.smart-invoicing-action-menu button:disabled:hover { background: transparent; }


.smart-invoicing-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.smart-invoicing-pagination.hidden {
    display: none;
}

.smart-invoicing-pagination-summary {
    color: #64748b;
    font-size: 14px;
}

.smart-invoicing-pagination-controls,
.smart-invoicing-page-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smart-invoicing-page-button {
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--panel-bg, #fff);
    color: var(--text-color, #0f172a);
    border-radius: 8px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
}

.smart-invoicing-page-button.is-active {
    background: var(--accent-color, #2563eb);
    border-color: var(--accent-color, #2563eb);
    color: #fff;
}

.smart-invoicing-empty {
    text-align: center;
    padding: 48px 16px;
    color: #6b7280;
}
.smart-invoicing-empty i {
    font-size: 42px;
    margin-bottom: 10px;
    color: #9ca3af;
}

.smart-invoicing-wizard-dialog {
    width: 100%;
    max-width: min(1240px, calc(100vw - 32px));
    margin: 16px auto;
}

.smart-invoicing-wizard-content {
    width: 100%;
}

.smart-invoicing-wizard-body {
    overflow-x: hidden;
}

.smart-invoicing-stepper {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.smart-invoicing-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-weight: 600;
    font-size: 13px;
}

.smart-invoicing-step span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1d5db;
}

.smart-invoicing-step.is-active {
    background: #dbeafe;
    color: #1d4ed8;
}

.smart-invoicing-step.is-active span {
    background: #2563eb;
    color: #fff;
}

.smart-invoicing-step.is-disabled {
    opacity: 0.6;
}

.smart-invoicing-contact-options {
    max-height: 220px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 6px;
    background: #fff;
    color: #1f2937;
}

.smart-invoicing-contact-option {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
    font-weight: 500;
}

.smart-invoicing-contact-option:hover {
    background: #f9fafb;
}

.smart-invoicing-contact-option:last-child {
    border-bottom: 0;
}

.smart-invoicing-contact-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
}

.smart-invoicing-contact-empty p {
    margin: 4px 0 0;
}

.smart-invoicing-payment-settings {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

.smart-invoicing-payment-settings-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.smart-invoicing-payment-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #e5e7eb;
}

.smart-invoicing-payment-toggle:first-of-type {
    border-top: 0;
}

.smart-invoicing-payment-toggle-help {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.smart-invoicing-payment-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 46px;
    height: 26px;
}

.smart-invoicing-payment-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.smart-invoicing-payment-switch span {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.smart-invoicing-payment-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
}

.smart-invoicing-payment-switch input:checked + span {
    background: #2563eb;
}

.smart-invoicing-payment-switch input:checked + span::after {
    transform: translateX(20px);
}

.smart-invoicing-payment-switch input:focus-visible + span {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.smart-invoicing-payment-switch input:disabled + span {
    cursor: not-allowed;
    opacity: 0.55;
}

.smart-invoicing-payment-toggle:has(input:disabled) {
    opacity: 0.78;
}

.smart-invoicing-selected-contact,
.smart-invoicing-billing-card,
.smart-invoicing-smart-quiz-placeholder {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f9fafb;
    color: #334155;
    margin-top: 12px;
}

.smart-invoicing-billing-card h4,
.smart-invoicing-smart-quiz-placeholder h4 {
    margin: 0 0 6px;
    color: #1e293b;
}

.smart-invoicing-billing-missing {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-invoicing-quiz-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smart-invoicing-selected-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-invoicing-selected-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 600;
}

.smart-invoicing-selected-field-lock {
    font-size: 11px;
    color: #1d4ed8;
}

.smart-invoicing-selected-field-remove {
    border: 0;
    background: transparent;
    color: #1d4ed8;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.smart-invoicing-quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.smart-invoicing-manual-form {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

.smart-invoicing-manual-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#smart-invoicing-items-table input {
    width: 100%;
}

.smart-invoicing-items-table-wrap {
    margin-bottom: 10px;
    overflow-x: auto;
}

.smart-invoicing-items-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 12px;
}

.smart-invoicing-items-footer div {
    display: flex;
    justify-content: space-between;
}

.smart-invoicing-preview-shell {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #eef2f7;
    padding: 12px;
}

.smart-invoicing-preview-scroll {
    max-height: min(72vh, 760px);
    overflow: auto;
}

.smart-invoicing-preview-canvas {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #dbe2ea;
    padding: 24px;
    color: #0f172a;
}

.smart-invoicing-preview-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.smart-invoicing-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.smart-invoicing-preview-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.smart-invoicing-preview-table th,
.smart-invoicing-preview-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 6px;
    text-align: left;
    font-size: 13px;
}

.smart-invoicing-preview-table th:nth-child(n+2),
.smart-invoicing-preview-table td:nth-child(n+2) {
    text-align: right;
}

.smart-invoicing-preview-summary {
    margin-left: auto;
    width: min(320px, 100%);
}

.smart-invoicing-preview-summary div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

.smart-invoicing-preview-total {
    margin-top: 8px;
    border-radius: 10px;
    padding: 10px 12px;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
}


.smart-invoicing-preview-payment {
    margin-top: 24px;
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}

.smart-invoicing-preview-payment h4 {
    margin: 0 0 12px;
    color: #0f172a;
}

.smart-invoicing-preview-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.smart-invoicing-preview-payment-card {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fafc;
    padding: 14px;
}

.smart-invoicing-preview-payment-card--accent {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.smart-invoicing-preview-payment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.smart-invoicing-preview-payment-card-header span {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.smart-invoicing-preview-payment-details {
    display: grid;
    gap: 8px;
}

.smart-invoicing-preview-payment-details div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed #dbe2ea;
    padding-bottom: 6px;
}

.smart-invoicing-preview-payment-details span {
    color: #64748b;
}

.smart-invoicing-preview-payment-details strong {
    text-align: right;
    word-break: break-word;
}

.smart-invoicing-preview-pay-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.smart-invoicing-preview-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 112px;
    margin-top: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.smart-invoicing-preview-qr-fallback {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.smart-invoicing-preview-qr-unavailable {
    padding: 10px;
}

@media (max-width: 980px) {
    .smart-invoicing-wizard-dialog {
        max-width: calc(100vw - 20px);
        margin: 10px auto;
    }

    .smart-invoicing-preview-scroll {
        overflow-x: auto;
    }

    .smart-invoicing-preview-canvas {
        min-width: 720px;
        transform: scale(0.9);
        transform-origin: top left;
        margin-right: -72px;
    }
}

@media (max-width: 720px) {
    .smart-invoicing-contact-empty,
    .smart-invoicing-payment-toggle {
        align-items: stretch;
        flex-direction: column;
    }

    .smart-invoicing-preview-canvas {
        min-width: 640px;
        transform: scale(0.78);
        margin-right: -141px;
    }
}


:root[data-theme="dark"] .smart-invoicing-contact-empty,
:root[data-theme="dark"] .smart-invoicing-payment-settings {
    background: #142640;
    border-color: #2d4568;
    color: #d6e3f5;
}

:root[data-theme="dark"] .smart-invoicing-payment-toggle {
    border-top-color: #2d4568;
}

:root[data-theme="dark"] .smart-invoicing-payment-toggle-help {
    color: #9fb2cc;
}

:root[data-theme="dark"] .smart-invoicing-contact-options {
    background: #13233b;
    border-color: #2d4568;
    color: #e5edf9;
}

:root[data-theme="dark"] .smart-invoicing-contact-option {
    color: #e5edf9;
    border-bottom-color: #233a5a;
}

:root[data-theme="dark"] .smart-invoicing-contact-option:hover {
    background: #1a2f4b;
}

:root[data-theme="dark"] .smart-invoicing-wizard-content {
    background: #0f1f35 !important;
    border: 1px solid #2d4568;
    opacity: 1;
}

:root[data-theme="dark"] .smart-invoicing-selected-contact,
:root[data-theme="dark"] .smart-invoicing-billing-card,
:root[data-theme="dark"] .smart-invoicing-smart-quiz-placeholder {
    background: #142640;
    border-color: #2d4568;
    color: #d6e3f5;
}

:root[data-theme="dark"] .smart-invoicing-billing-card h4,
:root[data-theme="dark"] .smart-invoicing-smart-quiz-placeholder h4 {
    color: #f3f7ff;
}

:root[data-theme="dark"] .smart-invoicing-smart-quiz-placeholder .muted-text {
    color: #a9bfdc;
}

:root[data-theme="dark"] .smart-invoicing-selected-field {
    background: #173354;
    border-color: #32608f;
    color: #d6e7ff;
}

:root[data-theme="dark"] .smart-invoicing-selected-field-lock,
:root[data-theme="dark"] .smart-invoicing-selected-field-remove {
    color: #8ec5ff;
}

:root[data-theme="dark"] .smart-invoicing-items-footer {
    background: #0f1f35;
    border-top-color: #2d4568;
}

.smart-invoicing-payment-activity-dialog {
    width: min(980px, calc(100vw - 32px));
    max-width: 980px;
}

.smart-invoicing-payment-activity-body {
    max-height: min(72vh, 760px);
    overflow: auto;
}

.smart-invoicing-activity-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.smart-invoicing-activity-summary > div {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}

.smart-invoicing-activity-summary span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 4px;
}

.smart-invoicing-activity-section {
    margin-top: 18px;
}

.smart-invoicing-activity-section h3 {
    margin: 0 0 10px;
}

.smart-invoicing-activity-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
}

.smart-invoicing-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.smart-invoicing-activity-table th,
.smart-invoicing-activity-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.smart-invoicing-activity-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
}

.smart-invoicing-activity-table tr:last-child td {
    border-bottom: 0;
}

.smart-invoicing-activity-table code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.smart-invoicing-activity-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.smart-invoicing-activity-badge.status-paid,
.smart-invoicing-activity-badge.status-complete,
.smart-invoicing-activity-badge.status-linked {
    background: #dcfce7;
    color: #166534;
}

.smart-invoicing-activity-badge.status-expired,
.smart-invoicing-activity-badge.status-failed,
.smart-invoicing-activity-badge.status-session_failed,
.smart-invoicing-activity-badge.status-issue_failed,
.smart-invoicing-activity-badge.status-orphaned {
    background: #fee2e2;
    color: #991b1b;
}

.smart-invoicing-activity-badge.status-open,
.smart-invoicing-activity-badge.status-unpaid,
.smart-invoicing-activity-badge.status-creating,
.smart-invoicing-activity-badge.status-session_created {
    background: #ffedd5;
    color: #9a3412;
}

:root[data-theme="dark"] .smart-invoicing-activity-summary > div,
:root[data-theme="dark"] .smart-invoicing-activity-table th {
    background: rgba(9, 25, 50, 0.78);
}