/* SECTION: Number Formatter Output - Styles for Formatted Number Output */
/*
 * Styles the output container for the Number Formatter feature.
 * - **Displays** formatted numbers, original text, and word representations.
 * - **Matches** textarea styling for a unified look with consistent fonts, colors, and borders.
 * - **Applies** spacing and highlighting to enhance readability.
 * - **Ensures** responsiveness with proper width constraints.
 */

/* Purpose: Number Formatter Output Container - Main container for formatted output */
#numberFormatterOutput {
    /* Purpose: Layout */
    /* Removed display: block - div is block by default */
    overflow-y: auto; /* Keeps vertical scrolling enabled */
    
    /* Purpose: Spacing */
    padding: 12px; /* Adds 12px padding all around for internal spacing */
    margin: 0 auto; /* Centers container horizontally with auto left/right margins */
    
    /* Purpose: Typography */
    font-family: 'Source Code Pro', monospace; /* Uses monospaced font for consistent number alignment */
    font-size: 14px; /* Sets font size to 14px for desktop readability */
    color: #222; /* Uses dark gray text for contrast */
    
    /* Purpose: Sizing */
    max-height: 325px; /* Matches textarea’s initial height for consistency */
    max-width: 100%; /* Added default max-width for consistency */
    box-sizing: border-box; /* Ensures padding is included in height/width */
}

/* Purpose: Center the digit stats line */
#numberFormatterOutput .digit-stats {
    text-align: center; /* Centers text horizontally */
    color: #0056b3 !important; /* Sets a distinct blue color with priority */
    display: block; /* Ensures it takes full width */
    font-weight: normal; /* Removes bold for a lighter appearance */
    font-size: 12.5px !important; /* Sets smaller font size with priority */
}

/* Purpose: Mobile adjustment */
@media (max-width: 767px) {
    #numberFormatterOutput {
        /* Purpose: Sizing */
        max-width: 90%; /* Increases max width to 90% to match textarea on mobile */
    }
}

/* Purpose: Paragraph Spacing - Use flex for consistent gaps */
#numberFormatterOutput p {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox to align paragraph content horizontally */
    /* Removed align-items: center - irrelevant for column flex in child */
    
    /* Purpose: Spacing */
    gap: 8px; /* Adds 8px gap between flex items for consistent spacing */
    margin-bottom: 15px; /* Adds 15px bottom margin to separate paragraphs */
}

/* Purpose: Output Labels - Keep label sizing consistent */
#numberFormatterOutput strong {
    /* Purpose: Typography */
    font-size: 14px; /* Sets font size to 14px for consistency with container */
    font-weight: normal; /* Removes bold styling for a cleaner look */
    color: #333; /* Uses slightly lighter gray than text for distinction */
    
    /* Purpose: Layout */
    flex-shrink: 0; /* Prevents label from shrinking in flex layout */
}

/* Purpose: Formatted Numeric Output - Ensure formatted text wraps cleanly */
#numberFormatterOutput .formatted-text {
    font-family: 'Source Code Pro', monospace; /* Matches container’s monospaced font */
    color: #2b5577; /* Uses a muted blue for formatted text */
    background: #ebf5ff; /* Adds light blue background for highlighting */
    padding: 3px 6px; /* Adds padding for a boxed effect */
    border-radius: 4px; /* Rounds corners for a softer look */
    display: inline; /* Keeps text inline with surrounding content */
    overflow-wrap: break-word; /* Changed from word-break: break-all for better readability */
}

/* Purpose: Converted Words Output - Adjust spacing for currency */
#numberFormatterOutput .words-text {
    font-size: 14px; /* Matches container font size for consistency */
    color: #0056b3; /* Uses a distinct blue for word output */
    font-family: 'Source Code Pro', monospace; /* Matches monospaced font */
    font-weight: normal; /* Keeps weight light for readability */
    display: inline; /* Ensures inline flow with other elements */
}

/* Purpose: Words Text Base - Additional styles for word representation container */
.words-text {
    /* Purpose: Appearance */
    color: #0066cc; /* Sets a slightly different blue for base word text */
    
    /* Purpose: Spacing */
    line-height: 1.6; /* Increases line height to 1.6 for readability */
}

/* Purpose: Words Paragraph Layout - Stack word text vertically */
#numberFormatterOutput p.words-text {
    flex-direction: column; /* Stacks children vertically */
    gap: 12px; /* Adds a consistent 12px gap between flex items */
}

/* Purpose: Currency Name Styling - Style for currency name in words */
.words-text .currency-name {
    color: black; /* Uses black for clear distinction */
    font-weight: normal; /* Keeps weight light for balance */
    font-size: 14px; /* Converted 1.1em to px assuming 14px parent */
}

/* Purpose: Currency Value Styling - Style for currency value in words */
.words-text .currency-value {
    color: #0066cc; /* Matches base word text color */
}

/* SECTION: Number Formatter Dark Mode - Styles for Formatted Number Output in Dark Mode */
/*
 * Styles the Number Formatter output container in **dark mode**.
 * - **Adjusts** background, text, and accent colors to match the dark theme.
 * - **Maintains** readability with high-contrast colors and consistent typography.
 * - **Ensures** visual consistency with other dark mode elements like the textarea.
 */

/* Purpose: Number Formatter Output Container - Adjust main container for dark mode */
body.dark-mode #numberFormatterOutput {
    /* Purpose: Appearance */
    background-color: #2b2b2b; /* Matches textarea background in dark mode */
    color: #d3d3d3; /* Light gray text for readability */
}

/* Purpose: Digit Stats - Update color for dark mode */
body.dark-mode #numberFormatterOutput .digit-stats {
    color: #66b3ff !important; /* Light blue to match other accents */
}

/* Purpose: Output Labels - Adjust label color for dark mode */
body.dark-mode #numberFormatterOutput strong {
    color: #d3d3d3; /* Light gray to match text */
}

/* Purpose: Formatted Numeric Output - Update colors for dark mode */
body.dark-mode #numberFormatterOutput .formatted-text {
    color: #66b3ff; /* Light blue for formatted text */
    background: #444; /* Mid-gray background for highlighting */
}

/* Purpose: Converted Words Output - Adjust color for dark mode */
body.dark-mode #numberFormatterOutput .words-text {
    color: #66b3ff; /* Light blue to match other accents */
}

/* Purpose: Words Text Base - Update base word text color for dark mode */
body.dark-mode .words-text {
    color: #66b3ff; /* Light blue for consistency */
}

/* Purpose: Currency Name Styling - Adjust currency name color for dark mode */
body.dark-mode .words-text .currency-name {
    color: #d3d3d3; /* Light gray to match text */
}

/* Purpose: Currency Value Styling - Adjust currency value color for dark mode */
body.dark-mode .words-text .currency-value {
    color: #66b3ff; /* Light blue to match other accents */
}