/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
    height: 100vh;
    overflow: hidden;
}

/* Layout Shell */
.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
/* Sidebar */
:root {
    --sidebar-width: 280px;

    /* Design Tokens - Colors */
    --primary-color: #22c55e;
    --primary-hover: #16a34a;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --bg-hover: #f1f5f9;
    --border-color: #e2e8f0;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    flex-shrink: 0;
    transition: width 0.3s ease;
    position: relative;
    /* For resizer positioning */
}

/* Disable transition during resize to avoid lag */
.sidebar.resizing {
    transition: none;
    user-select: none;
    /* Prevent text selection while dragging */
}

.sidebar.collapsed {
    width: 80px !important;
    /* Force width when collapsed, ignoring variable */
}

.resizer {
    width: 6px;
    height: 100%;
    position: absolute;
    right: -3px;
    /* Center over the border */
    top: 0;
    cursor: col-resize;
    z-index: 100;
    transition: background-color 0.2s;
}

.resizer:hover,
.sidebar.resizing .resizer {
    background-color: rgba(34, 197, 94, 0.5);
    /* Green hint on hover */
}

.sidebar-branding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Space between logo group and toggle */
    padding: 4px 20px 24px;
    overflow: hidden;
    /* Ensure content doesn't spill during resize */
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    /* Hide text when collapsed */
    white-space: nowrap;
}

.sidebar.collapsed .brand-wrapper {
    display: none;
    /* Hide logo + text when collapsed? Or just text? Request says "logos" in list, but "left top branding" logic.
                     Request: "Left sidebar collapsed, org list keeps logo".
                     Request: "Left top branding... click button to collapse... left sidebar keeps button".
                     Usually top branding hides or shrinks. Let's hide brand-text, keep logo?
                     Actually, standard pattern: Hide brand-text, keep logo.
                     User said: "Left top logo brand right side add 3-bar button".
                     Let's verify behavior.
                  */
}

/* Re-reading request: "Left sidebar collapsed, org list retains logo".
   It implies the top logo might also stay or vanish. Let's try to keep the top logo if possible, but space is tight with button.
   Actually, usually the button takes over.
   Let's keep the button visible always.
*/

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-logo {
    /* If we want to hide the main logo when collapsed to make room for the button, or stack them?
        Width 80px is enough for button (centered?).
        User: "Left sidebar keeps 3-bar button".
        Let's hide the branding text and logo to prioritize the toggle button in the header, 
        OR keep the toggle button and maybe the logo if it fits. 
        Let's simple-hide the brand group for now to ensure the button is clean, or iterate.
     */
    display: none;
}

/* Wait, "Left side branding... logo + text... button to right".
   If collapsed (80px), we need the button.
   Let's hide the .brand-wrapper entirely in collapsed state to cleanly show the toggle button centered ?
   Or maybe justify-content center.
*/
.sidebar.collapsed .sidebar-branding {
    justify-content: center;
    padding: 0 10px 24px;
}

.sidebar.collapsed .brand-wrapper {
    display: none;
}


.sidebar-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.sidebar-brand-text {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    font-style: italic;
    /* Update: Italicize brand text */
    letter-spacing: -0.02em;
    padding-right: 4px;
    /* Fix: Prevent italic clipping */
}

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

.sidebar-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

.sidebar-toggle-btn:hover {
    background-color: #f1f5f9;
    color: #334155;
}

.sidebar-header {
    padding: 2px 12px 14px 20px;
    /* Adjusted padding to prevent clipping */
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    /* Increased height */
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0 0 16px 0;
}

.sidebar.collapsed .sidebar-header h2 {
    display: none;
}

.sidebar-header h2 {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    font-weight: 600;
}

.add-org-btn-header {
    background: #ffffff;
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-secondary);
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
    width: auto;
    gap: 4px;
    padding: 0 8px;
    /* Increased padding for button look */
}

.add-org-btn-header:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar.collapsed .add-org-btn-header {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
}

.sidebar.collapsed .add-org-btn-header span {
    display: none;
}

.org-list {
    overflow-y: auto;
    padding: 0 12px;
}

.org-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .org-item {
    justify-content: center;
    padding: 10px 0;
    /* Tighten padding */
}

.org-item:hover {
    background-color: #f1f5f9;
}

.org-item.active {
    background-color: #f0fdf4;
    border: 1px solid #dcfce7;
}

.org-icon-initials {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar.collapsed .org-icon-initials {
    margin-right: 0;
    /* Remove margin when collapsed */
}

/* Initials Styles */
.org-icon-initials.business {
    color: #64748b;
    background-color: #f1f5f9;
}

.org-item.active .org-icon-initials.business {
    color: #16a34a;
    background-color: #dcfce7;
}

.org-icon-initials.enterprise {
    color: #7c3aed;
    /* Purple for enterprise example */
    background-color: #f3e8ff;
}

.org-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Take up remaining space */
    min-width: 0;
    /* Allow text truncation to work in flex child */
}

.sidebar.collapsed .org-details {
    display: none;
    /* Hide details when collapsed */
}

.sidebar-search {
    padding: 8px 16px 16px 16px;
    position: relative;
    transition: all 0.2s;
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.sidebar.collapsed .sidebar-search {
    justify-content: center;
    padding: 8px 0 16px 0;
    flex-direction: column;
    /* Stack icons when collapsed if we want both, or just hide sort? */
    /* Let's hide sort when collapsed for simplicity, or show it? */
    /* User request: collapsed search is magnifying glass only.  */
    /* If we keep sort, it might clutter. Let's hide sort-container when collapsed for now.*/
}

.sidebar.collapsed .search-input-wrapper {
    display: flex;
    justify-content: center;
}

.sidebar.collapsed .search-input-wrapper input {
    display: none;
}

.sidebar.collapsed .search-input-wrapper i {
    position: static;
    font-size: 16px;
    color: #64748b;
    pointer-events: auto;
    cursor: pointer;
}

.sidebar.collapsed .sort-container {
    display: none;
    /* Hide sort when collapsed */
}

/* Original Search Icon (inside wrapper) */
/* Specificity Boost & !important to guarantee fix */
.search-input-wrapper input {
    width: 100%;
    padding: 0 12px 0 36px !important;
    /* Reduced from 44px */
    height: 32px !important;
    /* Enforce 32px */
    line-height: 30px;
    /* text height (32 - 2px border) */
    /* Reset line-height to avoid scroll issues */
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    outline: none;
    transition: all 0.2s;
}

.search-input-wrapper input:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Adjust Icon Position if needed */
.search-input-wrapper i {
    position: absolute;
    left: 14px;
    /* Push icon slightly right */
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
    z-index: 10;
}



/* Sort UI */
.sort-container {
    position: relative;
}

.sort-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sort-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 140px;
    z-index: 50;
    display: none;
    overflow: hidden;
}

.sort-menu.active {
    display: block;
    animation: fadeIn 0.1s ease-out;
}

.sort-option {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}

.sort-option:hover {
    background-color: var(--bg-hover);
}

.sort-option.active {
    background-color: #f0fdf4;
    /* Light green */
    color: #166534;
    font-weight: 500;
}





.org-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.org-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.status-tag.completed {
    background-color: #dcfce7;
    color: #166534;
}

.status-tag.in-progress {
    background-color: #fef3c7;
    color: #92400e;
}

.status-tag.obsolete {
    background-color: #f1f5f9;
    color: #475569;
}

.status-tag.new {
    background-color: #dbeafe;
    color: #1e40af;
}

.org-item.active .org-name {
    color: #16a34a;
}

.editable-input.invalid,
.editable-input.invalid:focus {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

.validation-hint {
    font-size: 11px;
    color: #ef4444;
    margin-top: 4px;
    display: none;
}

.invalid+.validation-hint {
    display: block;
}

.org-type {
    font-size: 11px;
    color: #94a3b8;
}



.sidebar-settings-btn {
    border: none;
    background: none;
    padding: 16px 24px;
    text-align: left;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Slightly more gap for icon */
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    margin-top: auto;
    /* Pins to bottom */
}

.sidebar-settings-btn i {
    font-size: 16px;
    /* Slightly larger icon */
    width: 20px;
    /* Fixed width for alignment */
    text-align: center;
}

.sidebar-settings-btn:hover {
    color: #334155;
    background-color: #f8fafc;
}

.sidebar.collapsed .sidebar-settings-btn {
    padding: 16px 0;
    justify-content: center;
}

.sidebar.collapsed .settings-text {
    display: none;
}


/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.top-bar {
    background-color: #ffffff;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Changed from space-between to keep badge on right */
    padding: 0 32px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.company-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    /* Orange gradient */
    border-radius: 8px;
}

.top-bar h1 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.fast-statement-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fs-icon {
    background-color: #22c55e;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}


/* Wizard Progress */
.wizard-container {
    background-color: #ffffff;
    padding: 24px 0;
    border-bottom: 1px solid #f1f5f9;
}

.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.step.active .step-circle {
    background-color: #22c55e;
    color: white;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.step-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.step.active .step-label {
    color: #22c55e;
}

.step-line {
    height: 2px;
    background-color: #cbd5e1;
    /* Darker for better visibility */
    flex: 1;
    margin: 0 8px;
    /* Reduce horizontal margin */
    align-self: flex-start;
    /* Align to top */
    margin-top: 15px;
    /* Center with 32px circle: 16px - 1px border */
    min-width: 20px;
    /* Ensure line has length */
}


/* Scrollable Area */
.content-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    background-color: #f8fafc;
}

.workspace-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    padding-bottom: 80px;
    /* Space for footer */
    justify-content: center;
}

/* Step Info Sidebar */
.step-info-sidebar {
    width: 250px;
    flex-shrink: 0;
    padding-top: 24px;
    /* Align visually with card content better */
}

/* Layout Balancer (Invisible right column for centering) */
.layout-balancer {
    width: 250px;
    flex-shrink: 0;
    visibility: hidden;
    /* Or display: block but empty */
}

.step-info-card {
    display: none;
    /* Hidden by default */
    animation: fadeIn 0.3s ease-in-out;
}

.step-info-card.active {
    display: block;
}

.step-description {
    font-size: 16px;
    /* 12pt approx 16px */
    line-height: 1.5;
    color: #64748b;
    /* Lighter text since not bold */
    font-weight: 400;
    /* Normal weight */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.form-container {
    flex: 1;
    max-width: 800px;
    /* Reduced specific width for the form col */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card Styling */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Very subtle shadow */
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.card-header {
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.card-icon {
    font-size: 18px;
}

.card-icon.warning {
    color: #f59e0b;
}

.card-icon.success {
    color: #22c55e;
}

.card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.card-body {
    padding: 0 24px 32px;
}

/* Form Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-grid.three-cols {
    grid-template-columns: 1fr 1fr 1.5fr;
    /* Custom for bottom card */
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.form-group label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
select {
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #334155;
    background-color: white;
    width: 100%;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

input:focus,
select:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Custom Input Styles */
input:disabled,
select:disabled {
    background-color: transparent;
    border: 1px solid transparent;
    color: #0f172a;
    /* Darker for readability */
    cursor: default;
    padding-left: 0;
    /* Align with label if desired, or keep padding */
}

/* Specific adjustment to keep layout consistent but look like text */
input:disabled:hover,
select:disabled:hover {
    box-shadow: none;
    border-color: transparent;
}

.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.card-header {
    padding: 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push action to right */
    gap: 12px;
    margin-bottom: 24px;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-edit {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    /* Push to the right */
}

.btn-edit:hover {
    border-color: #cbd5e1;
    color: #334155;
    background-color: #f8fafc;
}

.btn-cancel {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-cancel:hover {
    border-color: #ef4444;
    color: #ef4444;
    background-color: #fef2f2;
}

.select-wrapper {
    position: relative;
}

/* Could add custom arrow here if needed to perfect match */

.date-range-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-input {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    height: 40px;
    padding: 0 12px;
    color: #64748b;
    font-size: 14px;
    background: white;
}

.separator {
    color: #94a3b8;
}


/* Footer */
/* Form Actions */
.form-actions {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-bottom: 40px;
}

.btn {
    height: 40px;
    padding: 0 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-secondary {
    background-color: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.btn-primary {
    background-color: #22c55e;
    border: 1px solid #22c55e;
    color: white;
}

.btn-primary:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}



/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(10px);
    transition: width 0.3s ease, max-width 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.close-modal-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #334155;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: 80vh;
}

.modal-footer {
    padding: 16px 24px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Welcome View */
.welcome-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    height: 100%;
    padding: 20px;
    animation: fadeIn 0.3s ease-in-out;
}

.welcome-content {
    text-align: center;
    max-width: 400px;
    color: #64748b;
}

.welcome-icon {
    /* font-size: 48px; */
    /* Not needed for image */
    /* color: #cbd5e1; */
    margin-bottom: 24px;
    /* background-color: #ffffff; */
    /* Remove or keep depending on logo transparency, let's keep transparent/clean */
    background-color: transparent;
    width: 120px;
    /* Make it slightly larger for a logo image */
    height: 120px;
    /* border-radius: 50%; */
    /* Remove circular border for logo */
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
    /* Remove shadow for flat logo */
    box-shadow: none;
}

.welcome-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.welcome-content h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.welcome-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

/* --- Custom Alert Modal --- */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* Highest z-index */
    backdrop-filter: blur(2px);
    /* Subtle blur for modern feel */
}

.custom-alert-box {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 400px;
    /* Slightly wider */
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    animation: fadeIn 0.15s ease-out;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-alert-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-alert-icon {
    font-size: 18px;
    /* Smaller icon inline */
    display: flex;
    align-items: center;
}

.custom-alert-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.custom-alert-body {
    padding: 24px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.custom-alert-footer {
    padding: 16px 24px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}