/* ============================================
   AMBIENT DESIGN SYSTEM - "Aurora" Theme
   
   A soft gradient, modern SaaS-style design system
   with friendly minimalism and subtle animations.
   ============================================ */

/* Import Outfit font globally */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* =========================================
       COLOR PALETTE
       ========================================= */
    
    /* Primary brand colors - used for CTAs, links, and emphasis */
    --ambient-primary: #7877c6;           /* Main brand purple */
    --ambient-primary-light: #8584d1;     /* Hover state for primary */
    --ambient-primary-dark: #6366f1;      /* Gradient end / active state */
    
    /* Accent colors for the aurora gradient background */
    --ambient-accent-coral: rgba(255, 119, 115, 0.1);   /* Top-right gradient */
    --ambient-accent-teal: rgba(78, 205, 196, 0.08);    /* Center gradient */
    --ambient-accent-purple: rgba(120, 119, 198, 0.15); /* Bottom-left gradient */
    
    /* Text colors - use dark for headings, muted for body text */
    --ambient-text-dark: #2d3748;    /* Headings, important text */
    --ambient-text-muted: #718096;   /* Body text, descriptions */
    --ambient-text-light: #a0aec0;   /* Placeholder text, hints */
    
    /* Surface colors - backgrounds for cards, modals, inputs */
    --ambient-surface: #ffffff;           /* Page background base */
    --ambient-surface-elevated: #ffffff;  /* Cards, modals, dropdowns */
    --ambient-surface-muted: #f7fafc;     /* Secondary backgrounds, hover states */
    --ambient-border: rgba(120, 119, 198, 0.1);  /* Subtle borders */
    
    /* =========================================
       SHADOWS - Elevation levels
       ========================================= */
    --ambient-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Small: inputs, small cards */
    
    --ambient-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 40px -10px rgba(120, 119, 198, 0.2);
    /* Medium: cards, dialogs */
    
    --ambient-shadow-lg: 0 10px 40px -10px rgba(120, 119, 198, 0.3);
    /* Large: modals, popovers */
    
    --ambient-shadow-btn: 0 4px 15px rgba(120, 119, 198, 0.35);
    /* Button resting state */
    
    --ambient-shadow-btn-hover: 0 8px 25px rgba(120, 119, 198, 0.45);
    /* Button hover state - creates "lift" effect */
    
    /* =========================================
       SPACING & RADIUS
       ========================================= */
    --ambient-radius-sm: 8px;    /* Inputs, small buttons, tags */
    --ambient-radius-md: 12px;   /* Buttons, small cards */
    --ambient-radius-lg: 20px;   /* Large cards, modals */
    
    /* =========================================
       TRANSITIONS
       ========================================= */
    --ambient-transition: all 0.3s ease;       /* Standard transitions */
    --ambient-transition-fast: all 0.2s ease;  /* Quick micro-interactions */
}


/* =============================================
   GLOBAL STYLES
   Applied to all pages via base template
   ============================================= */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ambient-text-dark);
    /* Aurora gradient background - subtle color orbs */
    background: 
        radial-gradient(ellipse at 20% 80%, var(--ambient-accent-purple) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--ambient-accent-coral) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, var(--ambient-accent-teal) 0%, transparent 70%),
        var(--ambient-surface);
}


/* =============================================
   TYPOGRAPHY
   
   Use these for consistent text styling:
   - .ambient-heading-xl: Page titles, hero headings
   - .ambient-heading-lg: Section headers
   - .ambient-heading-md: Card titles, subsections
   - .ambient-text: Body paragraphs, descriptions
   - .ambient-text-lg: Lead paragraphs, intros
   ============================================= */

/* Base heading style (add size class for full styling) */
.ambient-heading {
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.02em;
}

/* Extra Large: Main page titles, welcome messages
   Example: "Welcome to Ambient!" */
.ambient-heading-xl {
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Large: Section headers, feature titles
   Example: "Your Integrations" */
.ambient-heading-lg {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.01em;
}

/* Medium: Card titles, dialog headers
   Example: "Connect Your Messages" */
.ambient-heading-md {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
}

/* Standard body text: Descriptions, explanations
   Example: Card body content, form help text */
.ambient-text {
    color: var(--ambient-text-muted);
    line-height: 1.6;
}

/* Large body text: Lead paragraphs, important descriptions
   Example: Subheading below page title */
.ambient-text-lg {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ambient-text-muted);
    line-height: 1.6;
}


/* =============================================
   CARDS
   
   Elevated containers for grouping content:
   - .ambient-card: Standard content card (settings, features)
   - .ambient-card-sm: Compact card (list items, small widgets)
   ============================================= */

/* Standard Card: Settings panels, feature sections, forms
   Example: "Connect Your Messages" setup card */
.ambient-card {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-lg);
    padding: 2rem;
    box-shadow: var(--ambient-shadow-md);
    border: 1px solid var(--ambient-border);
}

/* Small Card: List items, compact widgets, inline content
   Example: Integration status card in a grid */
.ambient-card-sm {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-md);
    padding: 1.5rem;
    box-shadow: var(--ambient-shadow-sm);
    border: 1px solid var(--ambient-border);
}


/* =============================================
   BUTTONS
   
   Interactive elements with gradient and lift effect:
   - .ambient-btn: Primary CTA (Submit, Confirm, Continue)
   - .ambient-btn + .ambient-btn-sm: Smaller primary button
   - .ambient-btn + .ambient-btn-secondary: Secondary action (Cancel, Back)
   ============================================= */

/* Primary Button: Main call-to-action
   Use for: Submit, Save, Confirm, Continue, Connect
   Example: "Go to Integrations" button */
.ambient-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--ambient-primary) 0%, var(--ambient-primary-dark) 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--ambient-radius-md);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--ambient-transition);
    box-shadow: var(--ambient-shadow-btn);
}

.ambient-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--ambient-shadow-btn-hover);
    color: white;
    background: linear-gradient(135deg, var(--ambient-primary-light) 0%, #7578f5 100%);
}

/* Small Button Modifier: Compact version for inline actions
   Use with .ambient-btn: <button class="ambient-btn ambient-btn-sm">
   Example: "Add" button in a table row */
.ambient-btn-sm {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: var(--ambient-radius-sm);
}

/* Secondary Button Modifier: Less prominent actions
   Use with .ambient-btn: <button class="ambient-btn ambient-btn-secondary">
   Use for: Cancel, Back, Skip, Dismiss
   Example: "Cancel" button next to a "Save" button */
.ambient-btn-secondary {
    background: var(--ambient-surface);
    color: var(--ambient-primary);
    border: 1px solid var(--ambient-border);
    box-shadow: var(--ambient-shadow-sm);
}

.ambient-btn-secondary:hover {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary-dark);
    box-shadow: var(--ambient-shadow-md);
}


/* =============================================
   ICONS
   
   Container for icon elements with hover effect:
   - .ambient-icon-box: Square container for icons
   ============================================= */

/* Icon Box: Container for platform/feature icons
   Use for: Integration icons, feature badges
   Example: WhatsApp, iMessage icons in a row */
.ambient-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ambient-surface-muted);
    color: var(--ambient-text-muted);
    font-size: 1.25rem;
    transition: var(--ambient-transition-fast);
}

.ambient-icon-box:hover {
    transform: scale(1.1);
    background: var(--ambient-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* =============================================
   ANIMATIONS
   
   Reusable animation classes:
   - .ambient-float: Gentle floating motion (icons, images)
   - .ambient-fade-in: Fade in from below (page load)
   ============================================= */

/* Float Animation: Gentle up-down bobbing
   Use for: Logo icons, decorative elements
   Example: Welcome page Ambient logo */
@keyframes ambient-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.ambient-float {
    animation: ambient-float 3s ease-in-out infinite;
}

/* Fade In Animation: Smooth entrance from below
   Use for: Page content on load, new elements
   Example: Cards appearing on page load */
@keyframes ambient-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ambient-fade-in {
    animation: ambient-fade-in 0.5s ease-out;
}


/* =============================================
   LAYOUT UTILITIES
   
   Helper classes for common layouts:
   - .ambient-center: Flexbox centering (horizontal + vertical)
   - .ambient-container: Centered max-width container
   ============================================= */

/* Center: Flex container for centered content
   Use for: Hero sections, empty states, welcome pages
   Example: Get Started page layout */
.ambient-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Container: Centered content with max-width
   Use for: Form containers, narrow content sections
   Example: Settings form, article content */
.ambient-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}


/* =============================================
   BADGES
   
   Pill-shaped status indicators with icons:
   - .ambient-badge: Base badge style
   - .ambient-badge-success: Connected, Active, Live (green check)
   - .ambient-badge-warning: Stale, Pending (yellow warning)
   - .ambient-badge-danger: Error, Trial (red X)
   - .ambient-badge-muted: Inactive, Not Connected (grey minus)
   ============================================= */

/* Base Badge: Pill-shaped inline status label */
.ambient-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.32rem 0.72rem;
    border-radius: 9999px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

/* Badge icon base style */
.ambient-badge::before {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

/* Success Badge: Positive states
   Use for: Connected, Active, Live */
.ambient-badge-success {
    background: rgba(34, 197, 94, 0.22);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.42);
}

.ambient-badge-success::before {
    content: "✓";
    color: #16a34a;
}

/* Warning Badge: Attention needed
   Use for: Stale, Pending, Needs Action */
.ambient-badge-warning {
    background: rgba(251, 191, 36, 0.26);
    color: #92400e;
    border-color: rgba(251, 191, 36, 0.54);
}

.ambient-badge-warning::before {
    content: "⚠";
    color: #d97706;
}

/* Danger Badge: Critical or error states
   Use for: Error, Trial In Progress, Expired */
.ambient-badge-danger {
    background: rgba(239, 68, 68, 0.22);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.42);
}

.ambient-badge-danger::before {
    content: "✕";
    color: #dc2626;
}

/* Muted Badge: Neutral/inactive states
   Use for: Not Connected, Inactive, Disabled */
.ambient-badge-muted {
    background: rgba(107, 114, 128, 0.14);
    color: #374151;
    border-color: rgba(107, 114, 128, 0.30);
}

.ambient-badge-muted::before {
    content: "−";
    color: #4b5563;
    font-size: 0.72rem;
}

/* Info Badge: Informational/trial states
   Use for: Trial, Preview, Beta */
.ambient-badge-info {
    background: rgba(6, 182, 212, 0.22);
    color: #155e75;
    border-color: rgba(6, 182, 212, 0.42);
}

.ambient-badge-info::before {
    content: "ℹ";
    color: #0891b2;
}


/* =============================================
   TABLES
   
   Data display with clean styling:
   - .ambient-table: Base table with hover states
   ============================================= */

/* Table: Clean data grid with hover
   Use for: Integration lists, data displays
   Example: Message Integrations table */
.ambient-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ambient-table th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 500;
    color: var(--ambient-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ambient-border);
    background: var(--ambient-surface-muted);
}

.ambient-table th:first-child {
    border-radius: var(--ambient-radius-sm) 0 0 0;
}

.ambient-table th:last-child {
    border-radius: 0 var(--ambient-radius-sm) 0 0;
}

.ambient-table td {
    padding: 1rem 1.25rem;
    color: var(--ambient-text-dark);
    border-bottom: 1px solid var(--ambient-border);
    vertical-align: middle;
}

.ambient-table tbody tr {
    transition: var(--ambient-transition-fast);
}

.ambient-table tbody tr:hover {
    background: var(--ambient-surface-muted);
}

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

/* Make the second column (Messages) expand to fill available width */
.ambient-table th:nth-child(2),
.ambient-table td:nth-child(2) {
    width: 100%;
}

/* Keep Actions column compact and center header */
.ambient-table th:last-child {
    text-align: center;
    white-space: nowrap;
}

.ambient-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Override ambient-row-actions constraints inside table cells */
.ambient-table .ambient-row-actions {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* =============================================
   RESPONSIVE TABLE VIEWS
   
   Desktop/Mobile toggle for tables:
   - .ambient-table-desktop: Shown on desktop, hidden on mobile
   - .ambient-table-mobile: Hidden on desktop, shown on mobile
   ============================================= */

.ambient-table-desktop {
    display: block;
    overflow-x: auto;
}

.ambient-table-mobile {
    display: none;
}

/* Integration Card for mobile view */
.ambient-integration-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ambient-border);
}

.ambient-integration-card:first-child {
    padding-top: 0;
}

.ambient-integration-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ambient-integration-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.ambient-integration-platform {
    font-size: 1rem;
    color: var(--ambient-text-dark);
}

.ambient-integration-latest {
    color: var(--ambient-text-muted);
}

.ambient-integration-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.ambient-integration-card-actions .ambient-btn {
    width: auto;
}


/* =============================================
   BUTTON VARIANTS
   
   Additional button styles:
   - .ambient-btn-danger: Destructive actions
   - .ambient-btn-outline: Subtle secondary action
   - .ambient-btn-outline-danger: Subtle destructive action
   - .ambient-btn-info: Informational/trial action
   ============================================= */

/* Danger Button: Destructive primary actions
   Use for: Delete (when prominent), Remove permanently
   Example: "Delete Account" button */
.ambient-btn-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.35);
}

.ambient-btn-danger:hover {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
    box-shadow: 0 8px 25px rgba(229, 62, 62, 0.45);
    color: white;
}

/* Outline Button: Subtle secondary actions
   Use for: Less important actions, Cancel alternatives
   Example: "Disconnect" button */
.ambient-btn-outline {
    background: transparent;
    border: 1px solid var(--ambient-border);
    color: var(--ambient-text-muted);
    box-shadow: none;
}

.ambient-btn-outline:hover {
    background: var(--ambient-surface-muted);
    border-color: var(--ambient-primary);
    color: var(--ambient-primary);
    transform: translateY(-1px);
}

/* Outline Danger Button: Subtle destructive actions
   Use for: Delete in table rows, Disconnect
   Example: "Delete" button next to integration */
.ambient-btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(229, 62, 62, 0.3);
    color: #e53e3e;
    box-shadow: none;
}

.ambient-btn-outline-danger:hover {
    background: rgba(229, 62, 62, 0.1);
    border-color: #e53e3e;
    color: #c53030;
    transform: translateY(-1px);
}

/* Info Button: Trial/informational actions
   Use for: Trial Run, Learn More, Preview
   Example: "Trial Run" button */
.ambient-btn-info {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a8a0 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.35);
}

.ambient-btn-info:hover {
    background: linear-gradient(135deg, #5fd9d0 0%, #4ecdc4 100%);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.45);
    color: white;
}


/* =============================================
   ALERTS
   
   Informational callout boxes:
   - .ambient-alert: Base alert container
   - .ambient-alert-info: Tips, notes
   - .ambient-alert-warning: Cautions, attention
   - .ambient-alert-danger: Errors, critical warnings
   ============================================= */

/* Base Alert: Callout container */
.ambient-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ambient-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ambient-alert i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Info Alert: Tips, helpful notes
   Use for: Background process info, tips */
.ambient-alert-info {
    background: rgba(120, 119, 198, 0.1);
    border: 1px solid rgba(120, 119, 198, 0.2);
    color: var(--ambient-text-dark);
}

/* Success Alert: Positive confirmations
   Use for: Completed actions, success messages */
.ambient-alert-success {
    background: rgba(72, 187, 120, 0.1);
    border: 1px solid rgba(72, 187, 120, 0.2);
    color: #276749;
}

/* Warning Alert: Caution, attention needed
   Use for: Important notices, potential issues */
.ambient-alert-warning {
    background: rgba(237, 137, 54, 0.1);
    border: 1px solid rgba(237, 137, 54, 0.2);
    color: var(--ambient-text-dark);
}

/* Danger Alert: Errors, critical warnings
   Use for: Destructive action warnings, errors */
.ambient-alert-danger {
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid rgba(245, 101, 101, 0.2);
    color: #c53030;
}


/* =============================================
   MODALS
   
   Dialog overlays for confirmations:
   - .ambient-modal-overlay: Background overlay
   - .ambient-modal: Modal container
   - .ambient-modal-header/body/footer: Sections
   ============================================= */

/* Modal Overlay: Semi-transparent backdrop
   Applied to body or wrapper when modal is open */
.ambient-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45, 55, 72, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: ambient-fade-in 0.2s ease-out;
}

/* Modal Container: The dialog box itself */
.ambient-modal {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-lg);
    box-shadow: var(--ambient-shadow-lg);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: ambient-modal-enter 0.3s ease-out;
}

@keyframes ambient-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ambient-modal-header {
    padding: 1.5rem 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ambient-modal-header .ambient-heading-md {
    margin: 0;
}

/* Modal close button */
.ambient-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--ambient-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: var(--ambient-transition-fast);
}

.ambient-modal-close:hover {
    color: var(--ambient-text-dark);
}

.ambient-modal-body {
    padding: 1.5rem 2rem;
}

.ambient-modal-body p {
    margin-bottom: 0.75rem;
    color: var(--ambient-text-muted);
}

.ambient-modal-body p:last-child {
    margin-bottom: 0;
}

.ambient-modal-footer {
    padding: 0 2rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}


/* =============================================
   INTEGRATION ROW
   
   Horizontal layout for status items:
   - .ambient-row: Flex container with spacing
   - .ambient-row-info: Left side info group
   - .ambient-row-actions: Right side buttons
   ============================================= */

/* Row: Horizontal layout with space-between
   Use for: Integration status rows, list items */
.ambient-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ambient-row-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.ambient-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 33.33%;
    justify-content: flex-end;
}

/* When row-actions content exceeds its max-width, allow full width on next line */
@media (min-width: 501px) {
    .ambient-row-actions {
        flex-shrink: 1;
    }
    
    /* Button text wrapping within row-actions */
    .ambient-row-actions .ambient-btn {
        white-space: normal;
        text-align: center;
        word-wrap: break-word;
    }
}

/* Disconnect Google button: constrained width with text wrap */
#disconnectGoogleBtn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
    line-height: 1.3;
}


/* =============================================
   CARD HEADER VARIANT
   
   Card with highlighted header section:
   - .ambient-card-warning: Card with warning state
   ============================================= */

/* Warning Card: Attention-grabbing card variant
   Use for: Not connected states, action required */
.ambient-card-warning {
    border-color: rgba(237, 137, 54, 0.3);
}

.ambient-card-header-warning {
    background: rgba(237, 137, 54, 0.1);
    margin: -2rem -2rem 1.5rem -2rem;
    padding: 1.25rem 2rem;
    border-radius: var(--ambient-radius-lg) var(--ambient-radius-lg) 0 0;
}


/* =============================================
   SPACING UTILITIES
   
   Common margin/padding helpers:
   ============================================= */

.ambient-mb-0 { margin-bottom: 0; }
.ambient-mb-1 { margin-bottom: 0.5rem; }
.ambient-mb-2 { margin-bottom: 1rem; }
.ambient-mb-3 { margin-bottom: 1.5rem; }
.ambient-mb-4 { margin-bottom: 2rem; }

.ambient-mt-0 { margin-top: 0; }
.ambient-mt-1 { margin-top: 0.5rem; }
.ambient-mt-2 { margin-top: 1rem; }
.ambient-mt-3 { margin-top: 1.5rem; }

.ambient-text-sm {
    font-size: 0.875rem;
}

.ambient-text-danger {
    color: #c53030;
}


/* =============================================
   BOOTSTRAP MODAL OVERRIDES
   
   When using Bootstrap modals with Aurora styling,
   apply .ambient-modal to .modal-content
   ============================================= */

/* Override Bootstrap modal-content when using Aurora */
.modal-content.ambient-modal {
    border: none;
    border-radius: var(--ambient-radius-lg);
    box-shadow: var(--ambient-shadow-lg);
    overflow: hidden;
}

/* Improve Bootstrap modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Modal-specific: Keep row-actions buttons on the same row */
.ambient-modal .ambient-row-actions {
    flex-wrap: nowrap;
    max-width: none;
    width: 100%;
    justify-content: center;
}

/* Modal-specific: Fix table text visibility */
.ambient-modal .ambient-table {
    table-layout: fixed;
    width: 100%;
}

.ambient-modal .ambient-table td:first-child {
    width: 40px;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
}

.ambient-modal .ambient-table td:nth-child(2) {
    width: auto;
    text-align: left;
}

.ambient-modal .ambient-table label {
    display: block;
    color: var(--ambient-text-dark);
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
}


/* =============================================
   DROPDOWNS
   
   Dropdown menus and toggles:
   - .ambient-dropdown-toggle: Button that opens dropdown
   - .ambient-dropdown-menu: The dropdown panel
   - .ambient-dropdown-item: Menu items
   ============================================= */

/* Dropdown Toggle Button */
.ambient-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--ambient-surface);
    color: var(--ambient-primary);
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--ambient-transition-fast);
}

.ambient-dropdown-toggle:hover {
    background: var(--ambient-surface-muted);
    border-color: var(--ambient-primary);
}

.ambient-dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    content: "";
}

/* Dropdown Menu - Override Bootstrap */
.dropdown-menu.ambient-dropdown-menu {
    background: var(--ambient-surface-elevated);
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-md);
    box-shadow: var(--ambient-shadow-lg);
    padding: 0.5rem;
    min-width: 180px;
    animation: ambient-fade-in 0.15s ease-out;
}

/* Dropdown Items */
.dropdown-menu.ambient-dropdown-menu .dropdown-item {
    padding: 0.6rem 1rem;
    color: var(--ambient-text-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    border-radius: var(--ambient-radius-sm);
    transition: var(--ambient-transition-fast);
}

.dropdown-menu.ambient-dropdown-menu .dropdown-item:hover {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary);
}

.dropdown-menu.ambient-dropdown-menu .dropdown-item:active {
    background: rgba(120, 119, 198, 0.15);
    color: var(--ambient-primary-dark);
}

/* Dropdown Divider */
.dropdown-menu.ambient-dropdown-menu .dropdown-divider {
    border-color: var(--ambient-border);
    margin: 0.35rem 0;
}


/* =============================================
   FORM INPUTS
   
   Styled form elements:
   - .ambient-input: Text inputs, selects
   - .ambient-label: Form labels
   ============================================= */

/* Form Label */
.ambient-label {
    display: block;
    font-weight: 500;
    color: var(--ambient-text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Text Input & Select */
.ambient-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--ambient-text-dark);
    background: var(--ambient-surface);
    transition: var(--ambient-transition-fast);
}

.ambient-input:focus {
    outline: none;
    border-color: var(--ambient-primary);
    box-shadow: 0 0 0 3px rgba(120, 119, 198, 0.15);
}

.ambient-input::placeholder {
    color: var(--ambient-text-light);
}

/* Select dropdown styling */
select.ambient-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23718096' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Form Group spacing */
.ambient-form-group {
    margin-bottom: 1.25rem;
}

/* Divider line */
.ambient-divider {
    border: none;
    border-top: 1px solid var(--ambient-border);
    margin: 1.5rem 0;
}

/* Icon button (small square button with just an icon) */
.ambient-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ambient-radius-sm);
}

.ambient-btn-icon i {
    font-size: 1rem;
}


/* =============================================
   LOADING OVERLAY
   
   Full-area loading state with spinner:
   - .ambient-loading-overlay: Centered loading display
   ============================================= */

.ambient-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: var(--ambient-radius-md);
}


/* =============================================
   EVENT CARDS
   
   Cards for calendar events with status borders:
   - .ambient-event-card: Base event card
   - Border color variants for status
   ============================================= */

.ambient-event-card {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-md);
    padding: 1.25rem;
    border: 1px solid var(--ambient-border);
    border-left-width: 4px;
    height: 100%;
    transition: var(--ambient-transition-fast);
}

.ambient-event-card:hover {
    box-shadow: var(--ambient-shadow-sm);
}

/* Event card border colors based on status */
.ambient-event-card-success {
    border-left-color: #48bb78;
}

.ambient-event-card-secondary {
    border-left-color: var(--ambient-text-light);
}

.ambient-event-card-primary {
    border-left-color: var(--ambient-primary);
}

.ambient-event-card-danger {
    border-left-color: #e53e3e;
}

.ambient-event-card-warning {
    border-left-color: #ed8936;
}

/* Event card title */
.ambient-event-title {
    font-weight: 600;
    color: var(--ambient-text-dark);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Event card meta info */
.ambient-event-meta {
    font-size: 0.875rem;
    color: var(--ambient-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Collapsible section toggle */
.ambient-collapse-toggle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ambient-text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ambient-collapse-toggle:hover {
    color: var(--ambient-primary);
}

.ambient-collapse-chevron {
    transition: transform 0.2s ease;
}

.ambient-collapse-chevron.rotated {
    transform: rotate(90deg);
}


/* =============================================
   CODE & LOGS
   
   Styled code snippets and log containers:
   - .ambient-code: Inline code snippets
   - .ambient-log-container: Scrollable log output
   - .ambient-list: Styled ordered/unordered lists
   ============================================= */

/* Inline Code: Terminal commands, file names */
.ambient-code {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary-dark);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}

/* Log Container: Scrollable output area */
.ambient-log-container {
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--ambient-text-muted);
    max-height: 160px;
    overflow-y: auto;
    line-height: 1.5;
}

.ambient-log-container:empty {
    display: none;
}

/* Styled List: Better spacing for ol/ul */
.ambient-list {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.ambient-list li {
    margin-bottom: 0.5rem;
}

.ambient-list li:last-child {
    margin-bottom: 0;
}


/* =============================================
   CHECKBOXES
   
   Custom styled checkboxes:
   - .ambient-checkbox: The checkbox input
   - .ambient-checkbox-label: Label wrapper
   ============================================= */

.ambient-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    accent-color: var(--ambient-primary);
    cursor: pointer;
}


/* =============================================
   PROFILE FIELDS
   
   Display fields for profile/settings pages:
   - .ambient-profile-section: Container for fields
   - .ambient-profile-field: Individual field
   ============================================= */

.ambient-profile-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ambient-profile-field {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ambient-border);
}

.ambient-profile-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* =============================================
   MOBILE RESPONSIVE STYLES
   
   Adjustments for screens under 500px:
   - Reduced padding on cards and containers
   - Smaller font sizes for headings
   - Full-width buttons and modals
   - Tighter table cells
   ============================================= */

@media (max-width: 500px) {
    /* Container adjustments */
    .ambient-container {
        padding: 1rem;
    }
    
    /* Bootstrap container-fluid override */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Card padding reduction */
    .ambient-card {
        padding: 1.25rem;
        border-radius: var(--ambient-radius-md);
    }
    
    .ambient-card-sm {
        padding: 1rem;
    }
    
    /* Typography scaling */
    .ambient-heading-xl {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .ambient-heading-lg {
        font-size: 1.35rem;
    }
    
    .ambient-heading-md {
        font-size: 1.15rem;
    }
    
    .ambient-text-lg {
        font-size: 1rem;
    }
    
    /* Button adjustments */
    .ambient-btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }
    
    .ambient-btn-sm {
        padding: 0.65rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Inline buttons should not be full-width */
    .ambient-row-actions .ambient-btn,
    .ambient-btn-icon {
        width: auto;
    }
    
    /* Table adjustments */
    .ambient-table th,
    .ambient-table td {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .ambient-table th {
        font-size: 0.75rem;
    }
    
    /* Desktop/Mobile table toggle */
    .ambient-table-desktop {
        display: none;
    }
    
    .ambient-table-mobile {
        display: block;
    }
    
    /* Integration card mobile adjustments - keep side by side layout */
    .ambient-integration-card {
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .ambient-integration-card-actions {
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }
    
    .ambient-integration-card-actions .ambient-btn {
        white-space: nowrap;
    }
    
    /* Smaller badges on mobile with right margin */
    .ambient-integration-card .ambient-badge {
        font-size: 0.51rem;
        padding: 0.2rem 0.48rem;
        gap: 0.2rem;
        margin-right: 0.5rem;
        align-self: flex-start;
    }
    
    .ambient-integration-card .ambient-badge::before {
        font-size: 0.45rem;
    }
    
    /* Modal adjustments */
    .ambient-modal {
        width: 95%;
        max-width: none;
        margin: 0.5rem;
    }
    
    .ambient-modal-header {
        padding: 1.25rem 1.25rem 0;
    }
    
    .ambient-modal-body {
        padding: 1rem 1.25rem;
    }
    
    .ambient-modal-footer {
        padding: 0 1.25rem 1.25rem;
        flex-direction: column;
    }
    
    .ambient-modal-footer .ambient-btn {
        width: 100%;
    }
    
    /* Row layout adjustments */
    .ambient-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .ambient-row-info {
        justify-content: center;
    }
    
    .ambient-row-actions {
        justify-content: center;
        max-width: 100%;
    }
    
    /* Card header warning adjustments */
    .ambient-card-header-warning {
        margin: -1.25rem -1.25rem 1rem -1.25rem;
        padding: 1rem 1.25rem;
        border-radius: var(--ambient-radius-md) var(--ambient-radius-md) 0 0;
    }
    
    /* Alert adjustments */
    .ambient-alert {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Event card adjustments */
    .ambient-event-card {
        padding: 1rem;
    }
    
    /* Badge adjustments */
    .ambient-badge {
        padding: 0.24rem 0.56rem;
        font-size: 0.6rem;
        gap: 0.24rem;
    }
    
    .ambient-badge::before {
        font-size: 0.56rem;
    }
    
    /* Form input adjustments */
    .ambient-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }
    
    /* Dropdown adjustments */
    .ambient-dropdown-toggle {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .dropdown-menu.ambient-dropdown-menu {
        min-width: 160px;
    }
    
    .dropdown-menu.ambient-dropdown-menu .dropdown-item {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    
    /* Spacing utilities mobile overrides */
    .ambient-mb-4 { margin-bottom: 1.5rem; }
    .ambient-mb-3 { margin-bottom: 1rem; }
}


/* =============================================
   MESSAGE LIST
   
   Display list of messages with sender and date:
   - .ambient-message-list: Container for messages
   - .ambient-message-item: Individual message card
   ============================================= */

.ambient-message-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ambient-message-item {
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    padding: 1rem;
}

.ambient-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ambient-message-sender {
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-message-date {
    font-size: 0.8rem;
    color: var(--ambient-text-muted);
}

.ambient-message-text {
    color: var(--ambient-text-dark);
    margin: 0;
}


/* =============================================
   CONVERSATION LIST
   
   Display list of conversations with toggle/action:
   - .ambient-conversation-item: Row with info and action
   - .ambient-conversation-info: Left side details
   - .ambient-conversation-name: Primary text
   - .ambient-conversation-meta: Secondary text
   ============================================= */

.ambient-conversation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    margin-bottom: 0.75rem;
}

.ambient-conversation-item:last-child {
    margin-bottom: 0;
}

.ambient-conversation-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.ambient-conversation-name {
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-conversation-meta {
    font-size: 0.85rem;
    color: var(--ambient-text-muted);
}

.ambient-conversation-action {
    flex-shrink: 0;
}


/* =============================================
   EMPTY STATE
   
   Centered placeholder for empty content:
   - .ambient-empty-state: Container with centered text
   ============================================= */

.ambient-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--ambient-text-muted);
}