:root {
    /* Azure Data Factory IDE Theme - Light Mode (Default) */
    /* Base Colors */
    --adf-primary-bg: #f8f9fa;
    --adf-secondary-bg: #ffffff;
    --adf-tertiary-bg: #e9ecef;
    --adf-accent-bg: #f1f3f4;
    
    /* Navigation & Sidebar */
    --adf-nav-bg: #f8f9fa;
    --adf-nav-hover: #e9ecef;
    --adf-nav-active: #007acc;
    --adf-nav-border: #dee2e6;
    
    /* Text Colors */
    --adf-text-primary: #323130;
    --adf-text-secondary: #605e5c;
    --adf-text-muted: #8a8886;
    --adf-text-accent: #007acc;
    --adf-text-white: #ffffff;
    
    /* Border & Dividers */
    --adf-border-light: #e1e5e9;
    --adf-border-medium: #d1d5db;
    --adf-border-dark: #9ca3af;
    --adf-border-strong: #333333;
    --adf-border-strong: #333333;
    
    /* Interactive Elements */
    --adf-hover-bg: #f3f4f6;
    --adf-hover-accent: #005a9e;
    --adf-active-bg: #e5f3ff;
    --adf-focus-border: #007acc;
    --adf-focus-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
    
    /* Status Colors */
    --adf-success: #107c10;
    --adf-success-light: #e6f4ea;
    --adf-warning: #ff8c00;
    --adf-warning-light: #fff4e5;
    --adf-error: #d13438;
    --adf-error-light: #fef7f7;
    --adf-error-dark: #b71c1c;
    --adf-info: #0078d4;
    --adf-info-light: #f3f9ff;
    
    /* Typography */
    --adf-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --adf-font-size-xs: 0.75rem;
    --adf-font-size-sm: 0.875rem;
    --adf-font-size-base: 1rem;
    --adf-font-size-lg: 1.125rem;
    --adf-font-size-xl: 1.25rem;
    
    /* Spacing */
    --adf-spacing-xs: 0.25rem;
    --adf-spacing-sm: 0.5rem;
    --adf-spacing-md: 0.75rem;
    --adf-spacing-lg: 1rem;
    --adf-spacing-xl: 1.5rem;
    --adf-spacing-2xl: 2rem;
    
    /* Layout */
    --adf-nav-width: 260px;
    --adf-nav-width-collapsed: 48px;
    --adf-header-height: 48px;
    --adf-tab-height: 40px;
    
    /* Z-index Scale */
    --adf-z-dropdown: 1000;
    --adf-z-sticky: 1020;
    --adf-z-modal: 1050;
    --adf-z-loading: 1060;
    --adf-z-tooltip: 1070;
    --adf-z-notification: 10000;
    
    /* Shadows */
    --adf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --adf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --adf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --adf-focus-shadow: rgba(0, 120, 212, 0.25);
    --adf-error-shadow: rgba(209, 52, 56, 0.25);
    
    /* Scrollbar */
    --adf-scrollbar-width: 8px;
    --adf-scrollbar-thumb: #c1c1c1;
    --adf-scrollbar-thumb-hover: #a8a8a8;
    --adf-scrollbar-track: transparent;
    
    /* Legacy variables for backward compatibility */
    --background-dark: var(--adf-tertiary-bg);
    --background-light: var(--adf-secondary-bg);
    --accent-blue: var(--adf-text-accent);
    --accent-grey: var(--adf-border-medium);
    --text-light: var(--adf-text-primary);
    --text-muted: var(--adf-text-muted);
    --border-color: var(--adf-border-light);
    --theme-hover-bg-color: var(--adf-hover-bg);
    --theme-hover-text-color: var(--adf-text-primary);
    --font-stack: var(--adf-font-family);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Base Colors */
    --adf-primary-bg: #1e1e1e;
    --adf-secondary-bg: #252526;
    --adf-tertiary-bg: #2d2d30;
    --adf-accent-bg: #323233;
    
    /* Navigation & Sidebar */
    --adf-nav-bg: #252526;
    --adf-nav-hover: #2d2d30;
    --adf-nav-active: #0e639c;
    --adf-nav-border: #3e3e42;
    
    /* Text Colors — WCAG AA (4.5:1+) on #1e1e1e / #252526 card backgrounds */
    --adf-text-primary: #e6e6e6;   /* ~13:1 on #1e1e1e */
    --adf-text-secondary: #b8b8b8; /* ~8.4:1 on #1e1e1e, 7.6:1 on #252526 */
    --adf-text-muted: #9d9d9d;     /* ~6.4:1 on #1e1e1e, 5.8:1 on #252526 */
    --adf-text-accent: #4fc3f7;
    --adf-text-white: #ffffff;
    
    /* Border & Dividers */
    --adf-border-light: #3e3e42;
    --adf-border-medium: #4e4e52;
    --adf-border-dark: #6e6e72;
    --adf-border-strong: #b0b0b0;
    --adf-border-strong: #b0b0b0;
    
    /* Interactive Elements */
    --adf-hover-bg: #2d2d30;
    --adf-hover-accent: #0e639c;
    --adf-active-bg: #094771;
    --adf-focus-border: #4fc3f7;
    --adf-focus-shadow: 0 0 0 2px rgba(79, 195, 247, 0.3);
    
    /* Status Colors */
    --adf-success: #4ec9b0;
    --adf-success-light: #1e3a32;
    --adf-warning: #ffb86c;
    --adf-warning-light: #3a2f1e;
    --adf-error: #f48771;
    --adf-error-light: #3a1e1e;
    --adf-error-dark: #d13438;
    --adf-info: #4fc3f7;
    --adf-info-light: #1e2f3a;
    
    /* Shadows (more subtle in dark mode) */
    --adf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --adf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --adf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --adf-focus-shadow: rgba(79, 195, 247, 0.4);
    --adf-error-shadow: rgba(244, 135, 113, 0.4);
    
    /* Scrollbar */
    --adf-scrollbar-thumb: #424242;
    --adf-scrollbar-thumb-hover: #4e4e4e;
    --adf-scrollbar-track: transparent;
    
    /* Legacy variables for backward compatibility */
    --background-dark: var(--adf-tertiary-bg);
    --background-light: var(--adf-secondary-bg);
    --accent-blue: var(--adf-text-accent);
    --accent-grey: var(--adf-border-medium);
    --text-light: var(--adf-text-primary);
    --text-muted: var(--adf-text-muted);
    --border-color: var(--adf-border-light);
    --theme-hover-bg-color: var(--adf-hover-bg);
    --theme-hover-text-color: var(--adf-text-primary);
}

/* Global Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Single scrolling context: html owns vertical scroll; body grows with content. */
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: var(--adf-font-family);
    font-size: var(--adf-font-size-base);
    line-height: 1.5;
    color: var(--adf-text-primary);
    background-color: var(--adf-primary-bg);
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* Important: do NOT set height:100% + overflow here, that creates a second scrollbar. */
    overflow-x: hidden;
    overflow-y: visible;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: var(--adf-scrollbar-width);
    height: var(--adf-scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--adf-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--adf-scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--adf-scrollbar-thumb-hover);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--adf-scrollbar-thumb) var(--adf-scrollbar-track);
}

/* Links and Buttons */
a, .btn-link {
    color: var(--adf-text-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--adf-text-accent);
    text-decoration: underline;
}

.btn-primary {
    color: var(--adf-text-white);
    background-color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    border-radius: 4px;
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--adf-hover-accent);
    border-color: var(--adf-hover-accent);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-md);
}

/* Focus States */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--adf-focus-shadow);
    border-color: var(--adf-focus-border);
    outline: none;
}

/* Form Elements */
.form-control {
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary) !important;
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    font-size: var(--adf-font-size-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:focus {
    background-color: var(--adf-secondary-bg) !important;
    border-color: var(--adf-focus-border);
    box-shadow: var(--adf-focus-shadow);
}

.form-control:disabled {
    background-color: var(--adf-tertiary-bg) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Textarea specific */
textarea.form-control {
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary) !important;
}

/* Input specific */
input.form-control {
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary) !important;
}

select.form-control {
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary) !important;
}

/* Fix for InputSelect flashing issue - comprehensive solution */
.form-select {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    /* Prevent flashing by ensuring stable background and avoiding browser quirks */
    background-color: var(--adf-secondary-bg) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Ensure dropdown arrow is properly positioned */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Ensure consistent styling when focused */
.form-select:focus {
    background-color: var(--adf-secondary-bg) !important;
    border-color: var(--adf-focus-border);
    box-shadow: var(--adf-focus-shadow);
}

/* Prevent any native styling that might cause flashing */
.form-select:disabled {
    background-color: var(--adf-tertiary-bg) !important;
    opacity: 0.6;
}

/* Content Areas */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--adf-secondary-bg);
}

/* Validation Styles */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--adf-success);
    border-color: var(--adf-success);
}

.invalid {
    outline: 1px solid var(--adf-error) !important;
    border-color: var(--adf-error) !important;
}

/* Blazor validation styling for form controls */
.form-control.invalid,
.form-select.invalid,
input.invalid,
select.invalid,
textarea.invalid {
    border-color: var(--adf-error) !important;
    box-shadow: 0 0 0 0.2rem rgba(209, 52, 56, 0.25);
}

.form-control.invalid:focus,
.form-select.invalid:focus,
input.invalid:focus,
select.invalid:focus,
textarea.invalid:focus {
    border-color: var(--adf-error) !important;
    box-shadow: 0 0 0 0.25rem rgba(209, 52, 56, 0.25);
}

.validation-message {
    color: var(--adf-error);
    font-size: var(--adf-font-size-sm);
    margin-top: var(--adf-spacing-xs);
    display: block;
}

/* Bootstrap validation message styling */
.validation-message,
.invalid-feedback {
    color: var(--adf-error);
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

/* Error Boundary */
.blazor-error-boundary {
    background: linear-gradient(135deg, var(--adf-error) 0%, var(--adf-error-dark) 100%);
    padding: var(--adf-spacing-lg) var(--adf-spacing-lg) var(--adf-spacing-lg) 3.7rem;
    color: var(--adf-text-white);
    border-radius: 8px;
    margin: var(--adf-spacing-lg);
    box-shadow: var(--adf-shadow-lg);
    position: relative;
}

.blazor-error-boundary::before {
    content: "⚠";
    position: absolute;
    left: var(--adf-spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
}

.blazor-error-boundary::after {
    content: "An error has occurred. Please check the console for details.";
    font-weight: 500;
}

/* Form Elements Enhancement */
.darker-border-checkbox.form-check-input {
    border-color: var(--adf-border-dark);
}

.form-floating > .form-control-plaintext::placeholder, 
.form-floating > .form-control::placeholder {
    color: var(--adf-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, 
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Icon Button Component */
.icon-button {
    display: inline-flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.icon-button:hover {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-sm);
}

.icon-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.icon-button .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Icon Styles */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

/* Navigation Link Styles */
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    color: var(--adf-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--adf-text-accent);
}

/* Button Bar Component */
.button-bar {
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    background-color: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    padding: var(--adf-spacing-sm);
    box-shadow: var(--adf-shadow-sm);
}

/* Editor Panel Layout - ADF IDE Style */
.editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--adf-secondary-bg);
    border-left: 1px solid var(--adf-border-light);
    overflow: hidden;
}

/* Tabs Header - Fixed at top */
.tabs-header {
    flex-shrink: 0;
    background-color: var(--adf-tertiary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    padding: 0;
    z-index: var(--adf-z-sticky);
}

/* Tab Bar - Horizontally scrollable */
.tab-bar {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: var(--adf-tertiary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    height: var(--adf-tab-height);
    min-height: var(--adf-tab-height);
    flex-shrink: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.tab-bar::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Individual Tab Buttons */
.tab-button {
    display: inline-flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-secondary);
    border: none;
    border-right: 1px solid var(--adf-border-light);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    height: 100%;
    position: relative;
}

.tab-button:hover {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-primary);
}

.tab-button.active {
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-accent);
    border-bottom: 2px solid var(--adf-text-accent);
    z-index: 1;
}

.tab-button.active::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--adf-secondary-bg);
}

/* Tab Close Button */
.tab-button .close-btn {
    margin-left: var(--adf-spacing-sm);
    padding: var(--adf-spacing-xs);
    border-radius: 3px;
    background-color: transparent;
    color: var(--adf-text-muted);
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    opacity: 0.7;
}

.tab-button:hover .close-btn {
    opacity: 1;
}

.tab-button .close-btn:hover {
    background-color: var(--adf-error);
    color: var(--adf-text-white);
    transform: scale(1.1);
}

/* Tab Content - Scrollable area */
.tab-content {
    flex: 1;
    overflow-y: visible;
    overflow-x: visible;
    padding: var(--adf-spacing-lg);
    /* padding-bottom: calc(var(--adf-spacing-lg) * 2); */
    min-height: 0;
    background-color: var(--adf-secondary-bg);
    height: 100%;
}

/* Platform Editor Container */
.platform-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.editor-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--adf-spacing-lg);
    min-height: 0;
}

/* Form Elements within Editor */
.tab-content .form-group {
    margin-bottom: var(--adf-spacing-lg);
}

.tab-content .table {
    margin-bottom: var(--adf-spacing-lg);
    background-color: var(--adf-secondary-bg);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--adf-shadow-sm);
}

/* Ensure buttons and action elements are properly spaced */
/*
.tab-content .btn,
.tab-content .button,
.tab-content .form-actions {
    margin-bottom: var(--adf-spacing-lg);
}
*/

/* Add extra spacing for the last element */
/*
.tab-content > *:last-child {
    margin-bottom: var(--adf-spacing-xl);
}
*/

/* Attribute Value Editor */
.attribute-value-editor {
    width: 100%;
}

.attribute-value-editor .table-container {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    background-color: var(--adf-secondary-bg);
    box-shadow: var(--adf-shadow-sm);
}

.attribute-value-editor .table {
    margin-bottom: 0;
}

/* Utility Classes */
.text-primary { color: var(--adf-text-primary) !important; }
.text-secondary { color: var(--adf-text-secondary) !important; }
.text-muted { color: var(--adf-text-muted) !important; }
.text-accent { color: var(--adf-text-accent) !important; }
.text-success { color: var(--adf-success) !important; }
.text-warning { color: var(--adf-warning) !important; }
.text-error { color: var(--adf-error) !important; }
.text-info { color: var(--adf-info) !important; }

.bg-primary { background-color: var(--adf-primary-bg) !important; }
.bg-secondary { background-color: var(--adf-secondary-bg) !important; }
.bg-tertiary { background-color: var(--adf-tertiary-bg) !important; }
.bg-accent { background-color: var(--adf-accent-bg) !important; }

.border-light { border-color: var(--adf-border-light) !important; }
.border-medium { border-color: var(--adf-border-medium) !important; }
.border-dark { border-color: var(--adf-border-dark) !important; }

.shadow-sm { box-shadow: var(--adf-shadow-sm) !important; }
.shadow-md { box-shadow: var(--adf-shadow-md) !important; }
.shadow-lg { box-shadow: var(--adf-shadow-lg) !important; }

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--adf-border-light);
    border-radius: 50%;
    border-top-color: var(--adf-text-accent);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tables */
.table {
    --bs-table-bg: var(--adf-secondary-bg);
    --bs-table-border-color: var(--adf-border-light);
    --bs-table-hover-bg: var(--adf-hover-bg);
    color: var(--adf-text-primary);
}

.table thead th {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--adf-border-medium);
}

.table tbody td {
    color: var(--adf-text-primary);
}

.table tbody td div {
    color: var(--adf-text-primary);
}

/* Pipeline Selection Modal Table Styles */
.pipeline-modal-table-container {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--adf-border-light);
    border-radius: 4px;
}

.pipeline-modal-table {
    margin-bottom: 0;
    table-layout: auto;
    width: 100%;
    min-width: 600px;
}

.pipeline-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 1030 !important;
    background-color: var(--adf-tertiary-bg) !important;
    color: var(--adf-text-primary) !important;
    border-color: var(--adf-border-dark) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pipeline-modal-table th:nth-child(1) {
    width: 60px;
    min-width: 60px;
}

.pipeline-modal-table th:nth-child(2) {
    width: auto;
    min-width: 200px;
}

.pipeline-modal-table th:nth-child(3) {
    width: 120px;
    min-width: 120px;
}

.pipeline-modal-table th:nth-child(4) {
    width: 110px;
    min-width: 110px;
}

.pipeline-modal-table th:nth-child(5) {
    width: auto;
    min-width: 200px;
}

.pipeline-modal-table th:nth-child(6) {
    width: 140px;
    min-width: 140px;
}

.pipeline-modal-table td {
    word-wrap: break-word;
    overflow: hidden;
    vertical-align: middle;
}

.pipeline-modal-table td:nth-child(1) {
    width: 60px;
    text-align: center;
}

.pipeline-modal-table td:nth-child(2) {
    width: auto;
    max-width: 300px;
}

.pipeline-modal-table td:nth-child(3) {
    width: 120px;
}

.pipeline-modal-table td:nth-child(4) {
    width: 110px;
    text-align: center;
}

.pipeline-modal-table td:nth-child(5) {
    width: auto;
    max-width: 400px;
}

.pipeline-modal-table td:nth-child(6) {
    width: 140px;
    text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .pipeline-modal-table-container {
        max-height: 300px;
    }
    
    .pipeline-modal-table {
        min-width: 400px;
    }
    
    .pipeline-modal-table td:nth-child(2) {
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    .pipeline-modal-table-container {
        max-height: 250px;
    }
    
    .pipeline-modal-table {
        min-width: 350px;
    }
    
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-header h5 {
        font-size: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem;
    }
}

/* Modal Dark Mode Support */
.modal-content {
    background-color: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-primary);
}

.modal-header {
    background-color: var(--adf-tertiary-bg);
    border-bottom-color: var(--adf-border-light);
    color: var(--adf-text-primary);
}

.modal-title {
    color: var(--adf-text-primary);
}

.modal-body {
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
}

.modal-footer {
    background-color: var(--adf-tertiary-bg);
    border-top-color: var(--adf-border-light);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Fix btn-close for dark mode */
.modal-header .btn-close {
    filter: var(--adf-text-primary) brightness(0) invert(0);
}

[data-theme="dark"] .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

[data-theme="dark"] .modal-header .btn-close:hover {
    opacity: 1;
}

/* Table striped and hover effects for dark mode */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--adf-tertiary-bg);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--adf-hover-bg);
}

.table-active {
    background-color: var(--adf-active-bg) !important;
}

[data-theme="dark"] .table-active {
    color: var(--adf-text-primary);
}

/* Input group dark mode support */
.input-group-text {
    background-color: var(--adf-tertiary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-primary);
}

/* Badge dark mode improvements */
.badge {
    font-weight: 500;
}

.badge.bg-secondary {
    background-color: var(--adf-border-dark) !important;
    color: var(--adf-text-primary);
}

.badge.bg-primary {
    background-color: var(--adf-text-accent) !important;
}

.badge.bg-info {
    background-color: var(--adf-info) !important;
}

.badge.bg-dark {
    background-color: var(--adf-tertiary-bg) !important;
    color: var(--adf-text-primary);
    border: 1px solid var(--adf-border-medium);
}

[data-theme="dark"] .badge.bg-dark {
    background-color: var(--adf-accent-bg) !important;
}

/* Bootstrap Text Utilities - Dark Mode Override */
.text-muted {
    color: var(--adf-text-muted) !important;
}

.text-primary {
    color: var(--adf-text-primary) !important;
}

.text-secondary {
    color: var(--adf-text-secondary) !important;
}

.fw-bold {
    color: var(--adf-text-primary);
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--adf-secondary-bg);
    border-color: var(--adf-focus-border);
    color: var(--adf-text-primary);
    box-shadow: var(--adf-focus-shadow);
}

.form-control::placeholder {
    color: var(--adf-text-muted);
    opacity: 0.7;
}

.form-check-input {
    background-color: var(--adf-secondary-bg);
    border-color: var(--adf-border-medium);
}

.form-check-input:checked {
    background-color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
}

.form-check-input:focus {
    border-color: var(--adf-focus-border);
    box-shadow: var(--adf-focus-shadow);
}

/* Cards */
.card {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    box-shadow: var(--adf-shadow-sm);
}

.card-header {
    background-color: var(--adf-tertiary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    color: var(--adf-text-primary);
    font-weight: 600;
}

/* Alerts */
.alert {
    border: none;
    border-radius: 6px;
    padding: var(--adf-spacing-lg);
    margin-bottom: var(--adf-spacing-lg);
}

.alert-info {
    background-color: rgba(0, 120, 212, 0.1);
    color: var(--adf-info);
    border-left: 4px solid var(--adf-info);
}

.alert-success {
    background-color: rgba(16, 124, 16, 0.1);
    color: var(--adf-success);
    border-left: 4px solid var(--adf-success);
}

.alert-warning {
    background-color: rgba(255, 140, 0, 0.1);
    color: var(--adf-warning);
    border-left: 4px solid var(--adf-warning);
}

.alert-danger {
    background-color: rgba(209, 52, 56, 0.1);
    color: var(--adf-error);
    border-left: 4px solid var(--adf-error);
}

/* Responsive Typography */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .tab-content {
        padding: var(--adf-spacing-md);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .editor-pane {
        border-left: none;
    }
}

/* Floating Notification Styles - ADF Style */
.floating-notification {
    position: fixed;
    top: calc(var(--adf-header-height) + 20px); /* Position below header */
    right: 20px;
    z-index: 10000; /* High z-index to ensure visibility above modals */
    min-width: 320px;
    max-width: 400px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: var(--adf-font-family);
    font-size: var(--adf-font-size-sm);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.2s ease;
    transform: translateX(calc(100% + 40px)) scale(0.95);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-notification.notification-show {
    transform: translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Paused state for hover and page visibility */
.floating-notification.paused .notification-progress {
    animation-play-state: paused !important;
}

.floating-notification.notification-hide {
    transform: translateX(calc(100% + 40px)) scale(0.95);
    opacity: 0;
}

.floating-notification.notification-success {
    background-color: var(--adf-info-light);
    border-left: 4px solid var(--adf-success);
    color: var(--adf-text-primary);
}

.floating-notification.notification-error {
    background-color: var(--adf-error-light);
    border-left: 4px solid var(--adf-error);
    color: var(--adf-text-primary);
}

.notification-content {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.notification-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-success .notification-icon {
    color: var(--adf-success);
}

.notification-error .notification-icon {
    color: var(--adf-error);
}

.notification-text {
    flex: 1;
    line-height: 1.5;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.notification-expand-btn {
    display: inline-block;
    margin-left: 8px;
    background: none;
    border: none;
    color: var(--adf-primary);
    cursor: pointer;
    padding: 2px 0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}

.notification-expand-btn:hover {
    color: var(--adf-primary-hover);
    border-bottom-color: var(--adf-primary-hover);
}

.notification-expand-btn:active {
    transform: scale(0.98);
}

.notification-expand-btn:focus {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: 2px;
    border-radius: 2px;
}

.notification-expand-btn:focus:not(:focus-visible) {
    outline: none;
}

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--adf-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.notification-close:hover {
    color: var(--adf-text-primary);
    background-color: rgba(0, 0, 0, 0.08);
}

.notification-close:active {
    transform: scale(0.95);
}

.notification-close:focus {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: 2px;
}

.notification-close:focus:not(:focus-visible) {
    outline: none;
}

/* Progress indicator */
.notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    transform-origin: left;
    animation: progress-countdown 7s linear forwards;
    animation-play-state: running;
    will-change: transform;
}

/* Dynamic animation duration is set via inline style when notification shows */
.floating-notification.notification-show .notification-progress {
    animation-play-state: running;
}

.notification-progress.progress-success {
    background: linear-gradient(90deg, var(--adf-success), rgba(16, 124, 16, 0.5));
}

.notification-progress.progress-error {
    background: linear-gradient(90deg, var(--adf-error), rgba(209, 52, 56, 0.5));
}

@keyframes progress-countdown {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Hover effects */
.floating-notification.notification-show:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-notification {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        top: calc(var(--adf-header-height) + 10px);
        /* Slide from top on mobile */
        transform: translateY(-150%) scale(0.98);
    }
    
    .floating-notification.notification-show {
        transform: translateY(0) scale(1);
    }
    
    .floating-notification.notification-hide {
        transform: translateY(-150%) scale(0.98);
    }
    
    .notification-content {
        padding: 14px;
    }
}

/* ============================================
   InfoHint Component Styles
   ============================================ */

.info-hint-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
}

.info-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--adf-text-muted);
    cursor: help;
    transition: color 0.2s ease, transform 0.2s ease;
    outline: none;
    border-radius: 50%;
}

/* ========================================
   DARK MODE — BTN-OUTLINE-SECONDARY ACTIVE/FOCUS FIX
   Bootstrap hard-codes light active-state colours via --bs-btn-* variables.
   Override them in dark mode so clicking a btn-outline-secondary button
   stays on the dark palette instead of flashing white.
   ======================================== */
[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--adf-text-secondary);
    --bs-btn-border-color: var(--adf-border-medium);
    --bs-btn-hover-color: var(--adf-text-primary);
    --bs-btn-hover-bg: var(--adf-hover-bg);
    --bs-btn-hover-border-color: var(--adf-border-dark);
    --bs-btn-active-color: var(--adf-text-primary);
    --bs-btn-active-bg: var(--adf-active-bg);
    --bs-btn-active-border-color: var(--adf-text-accent);
    --bs-btn-focus-shadow-rgb: 79, 195, 247;
}

/* ============================================
   Public / Marketplace Landing — shared globals
   Used by LandingLayout pages: MarketplaceLanding,
   NoSubscription, SubscriptionSuspended.
   These classes are NOT scoped (used across multiple
   components) so they live here rather than in a
   component CSS isolation file.
   ============================================ */

/* ─── Page wrapper ──────────────────────────── */
.mp-landing-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--adf-text-primary);
    min-height: 100vh;
    background: var(--adf-primary-bg);
}

/* ─── Sticky glass navbar ───────────────────── */
.mp-landing-page .landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--adf-border-light);
    padding: 0.75rem 0;
}

[data-theme="dark"] .mp-landing-page .landing-nav {
    background: rgba(18,18,18,0.9);
    border-bottom-color: var(--adf-border-medium);
}

.mp-landing-page .landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-landing-page .landing-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.mp-landing-page .landing-logo-img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.mp-landing-page .landing-logo-icon {
    font-size: 1.4rem;
    color: var(--adf-text-accent);
}

.mp-landing-page .landing-logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    letter-spacing: -0.01em;
}

.mp-landing-page .landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.mp-landing-page .landing-nav-link {
    color: var(--adf-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.mp-landing-page .landing-nav-link:hover {
    color: var(--adf-text-accent);
}

/* ─── Content wrapper ───────────────────────── */
.mp-content-wrapper {
    max-width: 680px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

/* ─── Main card ─────────────────────────────── */
.mp-card {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}

.mp-card--center {
    text-align: center;
    padding: 3rem 2rem;
}

/* ─── Status icons ──────────────────────────── */
.mp-status-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.mp-status-icon--success { color: var(--adf-success); }
.mp-status-icon--error   { color: var(--adf-error); }
.mp-status-icon--warning { color: var(--adf-warning, #f59e0b); }
.mp-status-icon--info    { color: var(--adf-info); }

/* ─── Titles ────────────────────────────────── */
.mp-title {
    font-size: var(--adf-font-size-xl);
    font-weight: 700;
    color: var(--adf-text-primary);
    margin: 0 0 0.5rem;
}

.mp-subtitle {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.mp-error-detail {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-muted);
    margin-top: 0.75rem;
    word-break: break-word;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 600px) {
    .mp-landing-page .landing-nav-inner {
        padding: 0 1rem;
    }

    .mp-content-wrapper {
        margin: 1.5rem auto;
    }

    .mp-card {
        padding: 1.5rem;
    }
}

/* ============================================
   Shared Landing Page Classes — global scope
   Landing.razor has these in scoped CSS (Landing.razor.css).
   These globals make the same classes available to
   Privacy.razor, Support.razor, and any other page
   using @layout LandingLayout with class="landing-page".
   ============================================ */

/* ─── Page wrapper ──────────────────────────── */
.landing-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--adf-text-primary);
}

/* ─── Sticky glass navbar ───────────────────── */
.landing-page .landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--adf-border-light);
    padding: 0.75rem 0;
}

[data-theme="dark"] .landing-page .landing-nav {
    background: rgba(18,18,18,0.92);
    border-bottom-color: rgba(255,255,255,0.08);
}

.landing-page .landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-page .landing-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--adf-text-primary);
}

.landing-page .landing-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.landing-page .landing-logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.landing-page .landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.landing-page .landing-nav-link {
    color: var(--adf-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.landing-page .landing-nav-link:hover {
    color: var(--adf-text-accent);
}

/* ─── Nav sign-in button ────────────────────── */
.landing-page .btn-signin {
    display: inline-flex;
    align-items: center;
    background: var(--adf-text-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.landing-page .btn-signin:hover {
    background: var(--adf-hover-accent);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* ─── Hero helpers ──────────────────────────── */
.landing-page .landing-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
    pointer-events: none;
}

.landing-page .landing-hero-glow--left {
    background: #0078d4;
    top: -100px;
    left: -150px;
}

.landing-page .landing-hero-glow--right {
    background: #8660d6;
    bottom: -100px;
    right: -150px;
}

.landing-page .landing-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.landing-page .landing-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 1.75rem;
    color: rgba(255,255,255,0.9);
}

.landing-page .landing-hero-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.5px;
    color: #fff;
}

.landing-page .landing-hero-accent {
    color: #60b8ff;
}

.landing-page .landing-hero-subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.85;
    max-width: 660px;
    margin: 0 auto 1.5rem;
    color: #fff;
}

/* ─── Section structure ─────────────────────── */
.landing-page .landing-section {
    padding: 5rem 2rem;
}

.landing-page .landing-section--alt {
    background: var(--adf-tertiary-bg);
}

[data-theme="dark"] .landing-page .landing-section--alt {
    background: #161616;
}

.landing-page .landing-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.landing-page .landing-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #005a9e; /* Darker accent for WCAG AA contrast (4.5:1) on both #fff and #e9ecef backgrounds */
    margin-bottom: 0.5rem;
}

.landing-page .landing-section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--adf-text-primary);
}

.landing-page .landing-section-title-left {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--adf-text-primary);
}

.landing-page .landing-section-subtitle {
    font-size: 1.05rem;
    color: var(--adf-text-secondary);
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.landing-page .landing-section-desc {
    font-size: 1.05rem;
    color: var(--adf-text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 760px;
}

/* ─── Feature cards grid ────────────────────── */
.landing-page .landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.landing-page .landing-feature-card {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 2rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.landing-page .landing-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.landing-page .landing-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--adf-text-primary);
}

.landing-page .landing-feature-card p {
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    line-height: 1.6;
    margin: 0;
}

[data-theme="dark"] .landing-page .landing-feature-card {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

.landing-page .landing-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.landing-page .landing-feature-icon--blue   { background: #e5f3ff; color: #0078d4; }
.landing-page .landing-feature-icon--purple { background: #f0e6ff; color: #7b2fbe; }
.landing-page .landing-feature-icon--teal   { background: #e0f8f5; color: #00847e; }
.landing-page .landing-feature-icon--green  { background: #e3f5e1; color: #107c10; }
.landing-page .landing-feature-icon--orange { background: #fff0e5; color: #d06a00; }
.landing-page .landing-feature-icon--red    { background: #fce8e8; color: #c22a1b; }

[data-theme="dark"] .landing-page .landing-feature-icon--blue   { background: rgba(79,195,247,0.15);  color: #4fc3f7; }
[data-theme="dark"] .landing-page .landing-feature-icon--purple { background: rgba(197,134,192,0.15); color: #c586c0; }
[data-theme="dark"] .landing-page .landing-feature-icon--teal   { background: rgba(78,201,176,0.15);  color: #4ec9b0; }
[data-theme="dark"] .landing-page .landing-feature-icon--green  { background: rgba(106,153,85,0.15);  color: #6a9955; }
[data-theme="dark"] .landing-page .landing-feature-icon--orange { background: rgba(255,184,108,0.15); color: #ffb86c; }
[data-theme="dark"] .landing-page .landing-feature-icon--red    { background: rgba(244,135,113,0.15); color: #f48771; }

/* ─── CTA banner ────────────────────────────── */
.landing-page .landing-cta-banner {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    padding: 5rem 2rem;
    text-align: center;
}

.landing-page .landing-cta-banner-inner h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
}

.landing-page .landing-cta-banner-inner p {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    color: #fff;
}

.landing-page .landing-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* ─── CTA buttons ───────────────────────────── */
.landing-page .btn-cta-primary {
    display: inline-flex;
    align-items: center;
    background: #0078d4;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.85rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(0,120,212,0.4);
}

.landing-page .btn-cta-primary:hover {
    background: #005fa3;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,120,212,0.5);
    color: #fff;
    text-decoration: none;
}

.landing-page .btn-cta-primary--large {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
}

.landing-page .btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    transition: background 0.2s, color 0.2s;
}

.landing-page .btn-cta-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
}

/* ─── Footer ────────────────────────────────── */
.landing-page .landing-footer {
    background: #0d1117;
    color: rgba(255,255,255,0.5);
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 0.85rem;
}

.landing-page .landing-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.landing-page .landing-footer-logo {
    height: 20px;
    width: auto;
    object-fit: contain;
    margin-right: 0.5rem;
    opacity: 0.6;
    filter: brightness(0) invert(1);
}

.landing-page .landing-footer-sep {
    margin: 0 0.75rem;
}

.landing-page .landing-footer-link {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.landing-page .landing-footer-link:hover {
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
}

.landing-page .landing-footer-link--active {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .landing-page .landing-nav-inner {
        padding: 0 1rem;
    }

    .landing-page .landing-section {
        padding: 3rem 1.5rem;
    }

    .landing-page .landing-cta-banner {
        padding: 3.5rem 1.5rem;
    }

    .landing-page .landing-cta-banner-inner h2 {
        font-size: 1.5rem;
    }

    .landing-page .landing-features-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .landing-hero-title {
        font-size: 1.75rem;
    }
}

.info-hint-icon:hover,
.info-hint-icon:focus {
    color: var(--adf-text-accent);
    transform: scale(1.1);
}

.info-hint-icon:focus {
    box-shadow: 0 0 0 2px var(--adf-focus-border);
}

.info-hint-icon i {
    font-size: 0.875rem;
    pointer-events: none;
}

/* Tooltip Container */
.info-hint-tooltip {
    position: absolute;
    z-index: var(--adf-z-tooltip, 1070);
    min-width: 200px;
    max-width: 350px;
    width: max-content;
    padding: 0.5rem 0.75rem;
    background-color: var(--adf-tooltip-bg, #323130);
    color: var(--adf-tooltip-text, #ffffff);
    font-size: var(--adf-font-size-sm, 0.875rem);
    line-height: 1.4;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: normal;
    word-wrap: break-word;
    animation: tooltipFadeIn 0.15s ease-out;
    pointer-events: none;
}

/* Render newlines in hint text as line breaks while preserving wrapping */
.info-hint-content {
    white-space: pre-wrap;
}

/* Tooltip Positions */
.info-hint-tooltip.top {
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
}

.info-hint-tooltip.bottom {
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
}

.info-hint-tooltip.left {
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
}

.info-hint-tooltip.right {
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
}

/* Tooltip Arrow */
.info-hint-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.info-hint-tooltip.top .info-hint-arrow {
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.375rem 0.375rem 0 0.375rem;
    border-color: var(--adf-tooltip-bg, #323130) transparent transparent transparent;
}

.info-hint-tooltip.bottom .info-hint-arrow {
    top: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 0.375rem 0.375rem 0.375rem;
    border-color: transparent transparent var(--adf-tooltip-bg, #323130) transparent;
}

.info-hint-tooltip.left .info-hint-arrow {
    right: -0.375rem;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0.375rem 0 0.375rem 0.375rem;
    border-color: transparent transparent transparent var(--adf-tooltip-bg, #323130);
}

.info-hint-tooltip.right .info-hint-arrow {
    left: -0.375rem;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0.375rem 0.375rem 0.375rem 0;
    border-color: transparent var(--adf-tooltip-bg, #323130) transparent transparent;
}

/* Dark Mode Support */
[data-bs-theme="dark"] .info-hint-tooltip {
    --adf-tooltip-bg: #2d2d30;
    --adf-tooltip-text: #e0e0e0;
}

/* Animation */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.info-hint-tooltip.bottom {
    animation-name: tooltipFadeInBottom;
}

@keyframes tooltipFadeInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(0.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .info-hint-tooltip {
        max-width: 250px;
        font-size: 0.8125rem;
    }
}

/* ═══════════════════════════════════════════
   Auth – Access Denied & Authorizing states
   ═══════════════════════════════════════════ */
.access-denied-container,
.auth-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.access-denied-box {
    text-align: center;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 3rem 4rem;
    max-width: 420px;
}

.access-denied-icon {
    font-size: 3rem;
    color: var(--adf-text-accent);
    display: block;
    margin-bottom: 1rem;
}

.access-denied-box h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--adf-text-primary);
}

.access-denied-box p {
    color: var(--adf-text-secondary);
    margin-bottom: 0;
}

.auth-loading-text {
    color: var(--adf-text-secondary);
    font-size: 0.95rem;
}