/* =======================================================================================================================
   Global CSS Variables (Custom Properties)
   Used for theming and easier maintainability
   Defines reusable values for consistent styling across the Cojoro: TextFormatter application.
   - Organized into logical groups for layout, typography, and component-specific styling.
   - Enables easy updates by centralizing key design tokens.
   - Supports theming by allowing global overrides.
   ======================================================================================================================= */
:root {
    /* Body Styling - Page Layout and Background */
    /* Defines properties for the body element’s appearance and spacing */
    --body-background: #f4f4f4; /* Sets the default background color for the entire page (light gray) */
    --body-padding: 10px; /* Controls the padding around the body content (default 10px) */

    transition: all 0.3s ease; /* Apply transition to all variables */

    /* Heading Styling - Section Titles (h2) */
    /* Manages typography and spacing for h2 elements used as section headers */
    --heading-font-size: 38px; /* Default font size for h2 headings (large for emphasis) */
    --heading-padding: 10px 20px; /* Padding for h2 elements (10px top/bottom, 20px left/right) */

    /* Footer Styling - Page Footer Appearance */
    /* Controls the layout, typography, and spacing of the footer */
    --footer-margin-top: 20px; /* Space above the footer to separate it from content */
    --footer-font-size: 12px; /* Font size for footer text (small for subtlety) */
    --footer-color: gray; /* Text color for the footer (gray for low contrast) */
    --footer-padding: 10px; /* Padding around the footer content */

    /* Controls Styling - Layout for Buttons & Inputs */
    /* Defines spacing and positioning for the .controls container */
    --controls-gap: 15px; /* Vertical gap between elements in the .controls flex container */
    --controls-margin-top: 20px; /* Margin above the .controls section for separation */

    /* Button Group Styling - Layout for Grouped Buttons */
    /* Styles the .button-group container for visual grouping of buttons */
    --button-group-gap: 5px; /* Space between buttons within a .button-group */
    --button-group-border: 2px solid #007BFF; /* Border style and color (blue) for the group */
    --button-group-padding: 10px 10px; /* Internal padding (10px top/bottom, 10px left/right) */
    --button-group-border-radius: 10px; /* Rounded corners for the group container */
    --button-group-background-color: #eef6ff; /* Light blue background for visual distinction */

    /* Group Title Styling - Section Titles for Groups */
    /* Manages the appearance of .group-title elements (e.g., "Word Count") */
    --group-title-margin-bottom: -12px; /* Negative margin to pull titles closer to content */
    --group-title-font-size: 14px; /* Font size for group titles (consistent across features) */
    --group-title-color: #222; /* Dark gray color for readability */
    --group-title-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */

    /* Button Styling - General Button Properties */
    /* Defines the default look and behavior of all button elements */
    --button-padding: 8px 15px; /* Padding inside buttons (8px top/bottom, 15px left/right) */
    --button-font-size: 14px; /* Font size for button text (readable and consistent) */
    --button-background-color: #007BFF; /* Default blue background for buttons */
    --button-color: white; /* White text color for contrast */
    --button-border-radius: 5px; /* Rounded corners for a softer button appearance */
    --button-transition-duration: 0.2s; /* Duration for hover transitions (smooth 0.2s) */
    --button-hover-color: #0056b3; /* Darker blue on hover for visual feedback */

    /* formatNumbers - Appearance and Layout */
    /* Styles specific to the Number Formatter feature’s output and textarea */
    --formatted-text-color: #222; /* Text color for formatted number output */
    --formatted-text-bg: #e8e8e8; /* Light gray background for formatted text spans */
    --formatted-text-padding: 3px 6px; /* Padding for formatted text spans */
    --formatted-text-border-radius: 4px; /* Rounded corners for formatted text spans */
    --words-text-font-size: 14px; /* Font size for word representation of numbers */
    --words-text-color: #0056b3; /* Blue color for word representation text */

    /* Dropdown Styling - General Dropdown Properties */
    /* Controls the layout and interactivity of dropdown menus */
    --dropdown-z-index: 100; /* Ensures dropdowns appear above other elements */
    --dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow for dropdown depth */
    --dropdown-section-gap: 5px; /* Vertical gap between items in dropdown sections */
    --dropdown-section-padding: 5px 0; /* Padding for dropdown sections (top/bottom) */
    --input-transform: scale(0.9); /* Slightly scales down checkboxes/radios for balance */
    --input-margin-right: 5px; /* Space between input elements and their labels */
    --input-cursor: pointer; /* Cursor style for clickable inputs */
    --input-transition: box-shadow 0.2s ease-in-out; /* Smooth transition for hover effects */
    --input-hover-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Blue glow on input hover */
    --input-hover-radius: 3px; /* Rounded corners for hover effect */
    --label-font-size: 14px; /* Font size for dropdown labels */
    --label-gap: 5px; /* Space between label text and inputs */
    --label-padding: 2px 0; /* Vertical padding for label alignment */

    /* Dropdown Styling - Section Titles */
    /* Styles titles within dropdown menus for hierarchy */
    --dropdown-section-title-font-size: 14px; /* Font size for section titles */
    --dropdown-section-title-margin-bottom: 8px; /* Space below section titles */
    --dropdown-section-title-color: #333; /* Dark gray color for title contrast */
}

/* ==================================================================================================================== */
/*  GLOBAL CSS CODE */
/* ==================================================================================================================== */

/* SECTION: Body - General Page Layout & Styling */
/*
 * Defines the core styling and layout for the body element.
 * - Controls the **page-wide layout** using flexbox for flexibility.
 * - Ensures **full viewport coverage** with a minimum height setting.
 * - Applies **custom properties** for font, background, and padding to maintain consistency.
 */
body {
    /* Purpose: Typography */
    font-family: Arial, sans-serif; /* Sets the font family for all text (sans-serif fallback for broad compatibility) */
    
    /* Purpose: Layout */
    display: flex; /* Uses flexbox to enable flexible alignment of child elements */
    flex-direction: column; /* Stacks child elements vertically for a top-to-bottom flow */
    align-items: center; /* Centers child elements horizontally within the body */
    
    /* Purpose: Sizing */
    min-height: 100vh; /* Ensures body spans full viewport height (100% of viewport height) for consistent layout */
    
    /* Purpose: Spacing and Appearance */
    margin: 0; /* Removes default browser margins to start with a clean slate */
    background-color: var(--body-background); /* Applies light gray background from :root (default #f4f4f4) */
    padding: var(--body-padding); /* Adds padding from :root (default 10px) for internal spacing */
}

/* SECTION: Body Media Query - Mobile Portrait Adjustments */
/*
 * Adjusts body styling for mobile devices in portrait orientation (max-width: 767px).
 * - Reduces **padding** to 5px for a more compact layout on smaller screens.
 * - Maintains **consistency** by reapplying the updated padding variable.
 */
@media (max-width: 767px) and (orientation: portrait) {
    body {
        --body-padding: 5px; /* Overrides default padding to 5px for a tighter mobile layout */
        /* Purpose: Spacing */
        padding: var(--body-padding); /* Applies the updated padding variable (5px) for consistency */
    }    
}

/* SECTION: Heading (h2) - Section Titles */
/*
 * Styles h2 elements for visually distinct section titles.
 * - Applies **large typography** and shadow effects for emphasis.
 * - Uses **custom properties** for consistency and maintainability.
 * - Ensures **block-level display** for full-width presentation.
 */
h2 {
    /* Purpose: Typography */
    font-size: var(--heading-font-size); /* Sets font size from :root (default 38px) for prominent titles */
    text-shadow: 4px 4px 6px gray; /* Adds a gray shadow (4px right, 4px down, 6px blur) for depth */
    
    /* Purpose: Layout */
    display: block; /* Ensures h2 behaves as a block element, taking full width */
    
    /* Purpose: Spacing and Shape */
    padding: var(--heading-padding); /* Applies padding from :root (default 10px 20px) for internal spacing */
    border-radius: 10px; /* Rounds corners with a 10px radius for a softer look */
    
    /* Purpose: Appearance */
    border: 0.2px solid #ccc; /* Adds a subtle light gray border (0.2px thickness) for definition */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.8); /* Creates a neumorphic effect with dark shadow (bottom-right) and light shadow (top-left) */
    background-color: #f8f8f8; /* Sets a light gray background for contrast */
    
    /* Purpose: Positioning */
    margin-bottom: 20px; /* Adds 20px space below to separate from following content */
}

/* SECTION: Heading (h2) Media Query - Mobile Portrait Adjustments */
/*
 * Adjusts h2 styling for mobile devices in portrait mode (max-width: 767px).
 * - Reduces **font size** and **padding** for a compact layout.
 * - Tweaks **margin** to maintain proportional spacing on smaller screens.
 */
@media (max-width: 767px) and (orientation: portrait) {
    h2 {
        --heading-font-size: 28px; /* Reduces font size to 28px for mobile readability */
        --heading-padding: 6px 12px; /* Shrinks padding to 6px top/bottom, 12px left/right for a tighter fit */
        /* Purpose: Typography */
        font-size: var(--heading-font-size); /* Applies the updated font size (28px) from variable */
        /* Purpose: Spacing */
        padding: var(--heading-padding); /* Applies the updated padding (6px 12px) from variable */
        margin-bottom: 10px; /* Reduces bottom margin to 10px for closer spacing on mobile */
    }
}

/* SECTION: Divider - Horizontal Rule for Separation */
/*
 * Styles hr elements for consistent separation across dropdowns and sections.
 * - Uses a **light gray border** for subtle division.
 * - Adds **margins** for spacing between sections or items.
 */
hr {
    /* Purpose: Appearance */
    border: 1px solid #ddd; /* Sets a 1px solid light gray border for a subtle horizontal line */
    /* Purpose: Spacing */
    margin: 5px 0; /* Adds 5px margin above and below for consistent separation */
}

/* SECTION: Footer - Controls Appearance & Spacing */
/*
 * Styles the footer element for consistent appearance and layout.
 * - Uses **custom properties** for margin, font size, and color.
 * - Ensures **centered text** for a balanced presentation.
 * - Applies **padding** to enhance spacing and readability.
 */
footer {
    /* Purpose: Positioning */
    margin-top: var(--footer-margin-top); /* Applies top margin from :root (default 20px) for separation */
    
    /* Purpose: Typography */
    font-size: var(--footer-font-size); /* Sets font size from :root (default 12px) for small text */
    color: var(--footer-color); /* Uses gray color from :root for subtle text */
    
    /* Purpose: Alignment */
    text-align: center; /* Centers text horizontally within the footer */
    
    /* Purpose: Spacing */
    padding: var(--footer-padding); /* Applies padding from :root (default 10px) for internal spacing */
} 

/* SECTION: TextareaStyles - Styles for textarea components */
/*
 * Styles the textarea, its container, and banner.
 * - Defines **layout** and **appearance** for the textarea and its container.
 * - Manages **spacing** to ensure a uniform border around the textarea.
 * - Handles **responsiveness** for mobile devices with adjusted padding.
 * - Ensures **scrollbar visibility** and styling for both vertical and horizontal scrollbars.
 */
.textarea-container {
    /* Purpose: Appearance */
    border: 0.5px solid #ccc; /* Adds a thin light gray border for definition */
    border-radius: 10px; /* Rounds corners for a smooth, modern look */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.07), /* Adds a soft bottom-right shadow for depth */
                -6px -6px 12px rgba(255, 255, 255, 1); /* Adds a top-left highlight for neumorphic effect */
    background-color: #fff; /* Sets a white background for contrast with the page */

    /* Purpose: Sizing */
    width: 100%; /* Takes full width of its parent container */
    max-width: 80%; /* Caps width at 80% for readability and centering */

    /* Purpose: Spacing */
    padding: 5px; /* Adds padding to create a uniform gap for the border on all sides */
    overflow: hidden; /* Clips any content that overflows the rounded corners */
}

.textarea-banner {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox for horizontal layout of banner elements */
    align-items: center; /* Vertically centers banner content */
    justify-content: space-between; /* Spaces banner elements evenly between left and right */

    /* Purpose: Appearance */
    background-color: #fff; /* Matches container background for seamless integration */
    border-top-left-radius: 10px; /* Matches container's top-left corner */
    border-top-right-radius: 10px; /* Matches container's top-right corner */

    /* Purpose: Sizing */
    width: 100%; /* Takes full width of the container */
    height: 3rem; /* Sets a fixed height for consistent banner appearance */

    /* Purpose: Spacing */
    padding: 5px; /* Uniform padding to match container, ensuring consistent border gap */

    /* Purpose: Behavior */
    box-sizing: border-box; /* Includes padding in total width/height calculation */
    overflow: hidden; /* Clips banner content if needed */
}

textarea {
    /* Purpose: Appearance */
    background-color: #fff; /* Sets a white background for the input area */
    color: #222; /* Uses dark gray text for contrast and readability */
    border: none; /* Removes border for a clean, integrated look */
    outline: none; /* Removes default focus outline for custom styling */
    border-bottom-left-radius: 10px; /* Matches container's bottom-left corner */
    border-bottom-right-radius: 10px; /* Matches container's bottom-right corner */

    /* Purpose: Typography */
    font-family: 'Source Code Pro', monospace; /* Uses monospaced font for consistent character alignment */
    font-size: .875rem; /* Sets a smaller font size (14px) for compact display */

    /* Purpose: Sizing */
    width: 100%; /* Takes full width of the container within the padding */
    height: 325px; /* Sets initial height for sufficient input space */
    min-height: 180px; /* Ensures a minimum height for usability */

    /* Purpose: Spacing */
    padding: 1rem 1rem; /* Adds padding: 0.5rem top/bottom, 1rem left/right for internal space */
    /* padding-right: 2rem !important; /* Overrides right padding for scrollbar alignment */
    /* padding-left: 2rem !important; /* Overrides left padding for text alignment */

    /* Purpose: Behavior */
    resize: vertical; /* Allows vertical resizing only, preventing horizontal stretch */
    box-sizing: border-box; /* Includes padding in total width/height calculation */
    overflow-y: auto; /* Shows vertical scrollbar when content overflows */
    overflow-x: auto; /* Allows horizontal scrollbar */
    scrollbar-width: thin; /* Makes the scrollbar thinner in Firefox */
    scrollbar-color: #888 #f1f1f1; /* Thumb color: #888, Track color: #f1f1f1 */
    white-space: pre-wrap; /* Default: allows wrapping */
    overflow-wrap: break-word; /* Default: breaks long words */
}

/* Styles the placeholder text within the textarea element. */
textarea::placeholder {
    /* Purpose: Typography */
    font-size: 12px; /* Sets a smaller font size (12px) to distinguish from user input */
    color: lightgray; /* Uses gray for a subtle, non-intrusive appearance */
    font-style: italic; /* Applies italic style for an instructional tone */
}

textarea.unwrapped {
    /* Purpose: Wrapping Behavior */
    white-space: pre; /* Prevents wrapping when unwrapped */
    overflow-wrap: normal; /* Disables word breaking to allow horizontal overflow */
    overflow-x: scroll; /* Forces horizontal scrollbar to remain visible */
    -webkit-overflow-scrolling: auto; /* Disables auto-hiding in WebKit */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Firefox */
}

/* Purpose: Force visibility in WebKit browsers */
textarea.unwrapped::-webkit-scrollbar:horizontal {
    height: 6px; /* Sets height of horizontal scrollbar */
    display: block !important; /* Forces visibility */
    visibility: visible !important; /* Additional property to ensure visibility */
}

textarea:focus {
    /* Purpose: Appearance */
    border: none; /* Ensures no border appears on focus for consistent look */
}

textarea::selection {
    /* Purpose: Appearance */
    background-color: orange; /* Highlights selected text with an orange background */
    color: #222; /* Keeps selected text dark gray for readability */
}

/* Purpose: Style the scrollbar for WebKit browsers (Chrome, Safari, Edge) */
textarea::-webkit-scrollbar {
    width: 6px; /* Thinner vertical scrollbar */
    display: block; /* Forces the scrollbar to be visible when content overflows */
}

/* Purpose: Style the horizontal scrollbar for WebKit browsers */
textarea::-webkit-scrollbar:horizontal {
    height: 6px; /* Thinner horizontal scrollbar */
    display: block !important; /* Forces visibility */
    visibility: visible !important; /* Ensures visibility */
}

/* Purpose: Style the vertical scrollbar track */
textarea::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light gray background to match the textarea's aesthetic */
    border-bottom-right-radius: 10px; /* Matches the textarea-container's bottom-right corner */
    margin-bottom: 1.5rem; /* Aligns with the rounded corner */
}

/* Purpose: Style the horizontal scrollbar track */
textarea::-webkit-scrollbar-track:horizontal {
    background: #f1f1f1; /* Light gray background */
    border-bottom-right-radius: 10px; /* Matches the container's bottom-right corner */
    border-bottom-left-radius: 10px; /* Matches the container's bottom-left corner */
    margin-right: 1.5rem; /* Shortens the scrollbar on the right */
    margin-left: 1.5rem; /* Shortens the scrollbar on the left */
}

/* Purpose: Style the vertical scrollbar thumb */
textarea::-webkit-scrollbar-thumb {
    background: #888; /* Gray thumb for a subtle look */
    border-radius: 3px; /* Rounded thumb for a modern appearance */
}

/* Purpose: Style the horizontal scrollbar thumb */
textarea::-webkit-scrollbar-thumb:horizontal {
    background: #888; /* Gray thumb for a subtle look */
    border-radius: 3px; /* Rounded thumb for a modern appearance */
}

/* Purpose: Hover effect for both scrollbars */
textarea::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:horizontal:hover {
    background: #555; /* Darker gray on hover for better interactivity */
}

/* SECTION: MobileAdjustments - Responsive tweaks for textarea */
/*
 * Adjusts textarea styles for smaller screens (below 640px).
 * - Ensures a **compact layout** while maintaining usability.
 * - Reduces **padding** on the container and banner for mobile.
 * - Adjusts **height** of the textarea to fit smaller screens.
 */
@media (max-width: 639px) {
    .textarea-container {
        /* Purpose: Sizing */
        max-width: 90%; /* Expands to 90% width for better use of mobile screen space */
        padding: 3px; /* Slightly smaller padding on mobile */
    }

    .textarea-banner {
        /* Purpose: Spacing */
        padding: 3px; /* Matches container padding on mobile */
    }

    textarea {
        /* Purpose: Sizing */
        height: 200px; /* Maintains fixed height for consistency on mobile */
        max-height: 300px; /* Caps height at 300px to prevent excessive scrolling */
        border-bottom-left-radius: 10px; /* Ensures consistency on mobile */
        border-bottom-right-radius: 10px; /* Ensures consistency on mobile */
    }
}

/* SECTION: MobileAdjustments - Responsive tweaks for textarea */
/*
 * Adjusts textarea styles for smaller screens (below 640px).
 * - Ensures a **compact layout** while maintaining usability.
 * - Reduces **padding** on the container and banner for mobile.
 * - Adjusts **height** of the textarea to fit smaller screens.
 */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {

    textarea {
        width: 100%; /* Takes full width of the container within the padding */
        height: 200px; /* Sets initial height for sufficient input space */
        min-height: 100px; /* Ensures a minimum height for usability */
    }
}

/* SECTION: PositionActionButton - Styles for action buttons */
/*
 * Styles buttons, position, and datetime displays in the banner.
 * - Groups all **button-related** styles for clarity.
 * - Includes button, display, and SVG icon styling.
 * - Manages **layout**, **appearance**, **interactivity**, and **responsiveness**.
 */
.position-action-button {
    /* Purpose: Layout */
    display: inline-flex; /* Uses inline-flex for horizontal alignment of button content */
    align-items: center; /* Vertically centers button content (text and icons) */
    justify-content: center; /* Horizontally centers button content for balanced spacing */
    gap: .5rem; /* Adds 0.5rem space between button text and icon */

    /* Purpose: Appearance */
    background-color: #f8f8f8; /* Sets a light gray background for a subtle button look */
    color: #666; /* Applies muted gray text color for default state */
    border: none; /* Removes border for a clean, flat design */
    border-radius: .5rem; /* Rounds corners for a modern, soft appearance */

    /* Purpose: Typography */
    font-family: monospace; /* Uses monospaced font for consistent character alignment */
    font-size: .75rem; /* Sets a smaller font size (12px) for compact display */
    font-weight: 500; /* Applies medium font weight for better readability */

    /* Purpose: Sizing */
    height: 2rem; /* Sets a fixed height for consistent button appearance */

    /* Purpose: Spacing */
    padding: 0 .75rem; /* Adds padding: 0 top/bottom, 0.75rem left/right for internal space */

    /* Purpose: Behavior */
    cursor: pointer; /* Indicates the button is clickable with a pointer cursor */
    white-space: nowrap; /* Prevents text wrapping for a single-line appearance */
}

.position-action-button:not(.position-display):not(.datetime-display):hover {
    /* Purpose: Appearance */
    background-color: #ececec; /* Lightens background on hover for visual feedback */
    color: #000; /* Darkens text to black on hover for contrast */
    border: 0px solid #ccc; /* Maintains no border on hover for consistency */
    border-radius: .5rem; /* Ensures rounded corners match default state */
}

.position-action-button:focus-visible {
    /* Purpose: Appearance */
    outline: none; /* Removes default focus outline for custom styling */

    /* Purpose: Interactivity */
    box-shadow: 0 0 0 1px #000; /* Adds a 1px black shadow on focus for accessibility */
}

.position-action-button:disabled {
    /* Purpose: Appearance */
    opacity: .5; /* Reduces opacity to 50% for a disabled, faded look */
    color: #666; /* Maintains muted gray text color for consistency */
    background-color: #f8f8f8; /* Keeps light gray background for disabled state */

    /* Purpose: Behavior */
    cursor: default; /* Changes cursor to default to indicate non-interactivity */
}

.position-action-button svg {
    /* Purpose: Sizing */
    width: 1rem; /* Sets SVG icon width to 1rem for consistent sizing */
    height: 1rem; /* Sets SVG icon height to 1rem for consistent sizing */

    /* Purpose: Appearance */
    stroke-width: 2; /* Sets SVG stroke width to 2 for a bold icon appearance */

    /* Purpose: Behavior */
    pointer-events: none; /* Prevents SVG from capturing mouse events */
    flex-shrink: 0; /* Ensures SVG does not shrink within flex layout */

    /* Purpose: Spacing */
    margin: 0 -.125rem; /* Adds negative horizontal margin to adjust icon positioning */
}

.position-action-button.position-display,
.position-action-button.datetime-display {
    /* Purpose: Behavior */
    cursor: default; /* Sets cursor to default for non-interactive display elements */
}

/* SECTION: ResponsiveText - Hides/shows button text responsively */
/*
 * Controls visibility of button text based on screen size.
 * - Manages **visibility** of text in buttons for responsiveness.
 * - Hides text on **small screens** by default.
 * - Shows text on **medium screens** (640px+) for clarity.
 */
.position-text-hide-on-small {
    /* Purpose: Behavior */
    display: none; /* Hides button text on small screens by default */
}

@media (min-width: 640px) {
    .position-text-show-on-medium {
        /* Purpose: Behavior */
        display: block; /* Shows button text on medium and larger screens (640px+) */
    }
}

.datetime-position-group {
    display: flex; /* Horizontal layout for datetime and position */
    gap: 0.5rem; /* Fixed 0.5rem gap between #dateTimeDisplay and #positionDisplay */
}

/* SECTION: ButtonGroup - Groups action buttons */
/*
 * Styles the container for action buttons.
 * - Manages **layout** and **spacing** of buttons in the banner.
 * - Uses **flex** to align buttons horizontally.
 * - Adds **spacing** between buttons with child selector.
 */
.position-button-group {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox for horizontal alignment of buttons */
}

.position-button-spacing > :not(:last-child) {
    /* Purpose: Spacing */
    margin-right: .5rem; /* Adds 0.5rem right margin to all but the last button for spacing */
}

/* SECTION: MobileAdjustments - Responsive tweaks for position display */
/*
 * Adjusts styles for smaller screens (below 640px).
 * - Reduces **font size** of position display for compactness.
 * - Allows **text wrapping** to fit long selection ranges.
 * - Sets **flexible height** with a max to maintain layout.
 * - Hides **datetime display** on mobile.
 */
@media (max-width: 639px) {
    .position-action-button.position-display {
        /* Purpose: Fit position text on mobile */
        font-size: .65rem;
        white-space: normal;
        height: auto;
        max-height: 3rem;
        padding: .5rem .75rem;
    }
    .position-action-button.datetime-display {
        /* Purpose: Hide datetime on mobile */
        display: none;
    }
}

/* Purpose: Adjustments for iPad portrait mode */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { 
    .position-action-button.position-display {
        /* Purpose: Fit position text on mobile */
        font-size: .65rem;
        white-space: normal;
        height: auto;
        max-height: 3rem;
        padding: .5rem .75rem;
    }
    .position-action-button.datetime-display {
        /* Purpose: Hide datetime on mobile */
        display: none;
    }
}

/* Purpose: Hide datetime display in mobile landscape mode */
/*
 * Targets mobile devices in landscape orientation (e.g., iPhone 14 Pro Max at 932x430, iPhone 16 Pro Max at 956x430).
 * - Applies to viewport widths between 640px and 991px to cover typical mobile devices in landscape.
 * - Hides the datetime display to maintain a compact layout, consistent with mobile portrait behavior.
 */
@media only screen and (min-width: 640px) and (max-width: 991px) and (orientation: landscape) {
    .position-action-button.datetime-display {
        /* Purpose: Hide datetime on mobile landscape */
        display: none;
    }
}

/* SECTION: Group Titles - Styles for Section Container Titles */
/*
 * Defines the appearance of .group-title elements (e.g., "Word Count", "Character Count").
 * - Applies **consistent styling** with proper spacing and contrast.
 * - Ensures **font size consistency** across mobile orientations with adjustments.
 * - Uses a **subtle text shadow** for visual depth.
 */
.group-title {
    /* Purpose: Alignment */
    text-align: center; /* Centers the title text horizontally */
    
    /* Purpose: Typography */
    font-size: var(--group-title-font-size); /* Uses :root variable (default 14px) for consistent sizing */
    color: var(--group-title-color); /* Applies dark gray from :root (default #222) for readability */
    text-shadow: var(--group-title-text-shadow); /* Adds shadow from :root (default 2px 2px 4px) for depth */
    
    /* Purpose: Spacing */
    margin-bottom: var(--group-title-margin-bottom); /* Uses :root variable (default -12px) to pull title closer */
    
    /* Purpose: Sizing */
    width: 100%; /* Ensures title spans full width of its container */
}

/* Purpose: Group Container Titles in Mobile Landscape - Adjusts for landscape mode */
@media (max-width: 991px) and (orientation: landscape) {
    .group-title {
        font-size: 10px; /* Reduces font size to 10px for compact landscape layout */
    }
}

/* Purpose: Group Container Titles in Mobile Portrait - Adjusts for portrait mode */
@media (max-width: 767px) and (orientation: portrait) {
    .group-title {
        font-size: 14px; /* Maintains 14px font size for readability in portrait mode */
        margin-bottom: -6px; /* Adjusts margin to -6px for tighter spacing on mobile */
    }
}

/* SECTION: Global CSS Dropdown Components - Styles for Dropdown Sections and Elements */
/*
 * Defines the appearance of sections, titles, and interactive elements within dropdowns.
 * - Organizes **checkboxes, radio buttons, and settings** into structured sections.
 * - Ensures **uniform styling** for labels, inputs, and buttons across all dropdowns (Sortation, Clean Text, Lists, etc.).
 * - Provides **hover effects** for better interactivity.
 * - Uses **custom properties** for maintainability across features.
 * - Updated in v0.52.1 to include .dropdown and .dropdown-menu from Sortation for global consistency.
 */
.dropdown {
    /* Purpose: Layout */
    position: relative; /* Positions dropdown relative to its normal flow position */
    display: inline-block; /* Fits within surrounding content */
}

.dropdown-menu {
    /* Purpose: Visibility */
    display: none; /* Hidden by default, toggled via JS */
    
    /* Purpose: Positioning */
    position: absolute; /* Positions below .dropdown parent */
    z-index: var(--dropdown-z-index, 100); /* Sets stacking order from :root (default 100) to appear above content */
    
    /* Purpose: Sizing */
    min-width: 250px; /* 230px; /* Minimum width for content space */
    max-width: 250px; /* 250px; /* Caps width to prevent stretching */
    
    /* Purpose: Appearance */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Internal spacing */
    box-shadow: var(--dropdown-box-shadow, 0 8px 16px rgba(0, 0, 0, 0.2)); /* Shadow from :root for depth */
    background-color: white; /* White background */
    box-sizing: border-box; /* Includes padding/border in width */
}

.dropdown-menu.active {
    /* Purpose: Visibility */
    display: block; /* Shows when active */
}

.dropdown-section {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox for organizing dropdown items */
    flex-direction: column; /* Stacks items vertically within the section */
    gap: var(--dropdown-section-gap); /* Sets gap between items from :root (default 5px) */
    
    /* Purpose: Spacing */
    padding: var(--dropdown-section-padding); /* Applies padding from :root (default 5px 0) */
}

.dropdown-sectionTitle {
    /* Purpose: Typography */
    font-size: var(--dropdown-section-title-font-size); /* Uses :root variable (default 14px) for title size */
    color: var(--dropdown-section-title-color); /* Applies color from :root (default #333) for contrast */
    font-weight: bold; /* Makes title bold for hierarchy */
    
    /* Purpose: Spacing */
    margin-bottom: var(--dropdown-section-title-margin-bottom); /* Sets bottom margin from :root (default 8px) */
    
    /* Purpose: Layout */
    display: block; /* Ensures title takes full width as a block element */
}

.dropdown-section input[type="checkbox"],
.dropdown-section input[type="radio"] {
    /* Purpose: Appearance */
    transform: var(--input-transform); /* Scales inputs from :root (default scale(0.9)) for balance */
    
    /* Purpose: Spacing */
    margin-right: var(--input-margin-right); /* Adds space from :root (default 5px) between input and label */
    
    /* Purpose: Interactivity */
    cursor: var(--input-cursor); /* Sets cursor to pointer from :root for clickability */
    transition: var(--input-transition); /* Applies transition from :root (default box-shadow 0.2s) for hover */
}

.dropdown-section input[type="checkbox"]:hover,
.dropdown-section input[type="radio"]:hover {
    /* Purpose: Interactivity */
    box-shadow: var(--input-hover-shadow); /* Adds blue glow from :root (default 0 0 5px) on hover */
    border-radius: var(--input-hover-radius); /* Rounds corners from :root (default 3px) on hover */
}

.dropdown-label {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox to align label and input horizontally */
    align-items: center; /* Vertically centers label text with input */
    gap: var(--label-gap); /* Sets gap from :root (default 5px) between label and input */
    
    /* Purpose: Spacing */
    padding: var(--label-padding); /* Applies padding from :root (default 2px 0) for vertical spacing */
    
    /* Purpose: Typography */
    font-size: var(--label-font-size); /* Uses :root variable (default 14px) for label text */
    
    /* Purpose: Interactivity */
    cursor: var(--input-cursor); /* Sets pointer cursor from :root for clickable labels */
}

/* Dropdown Buttons - Styles for buttons inside dropdowns (e.g., Apply Changes) */
.dropdown-menu button {
    /* Purpose: Layout */
    padding: var(--button-padding, 8px 15px); /* Consistent with global buttons */
    width: 100%; /* Fills dropdown width */
    box-sizing: border-box; /* Includes padding/border in width */
    
    /* Purpose: Typography */
    font-size: var(--button-font-size, 14px); /* 14px text */
    text-align: center; /* Centered text */
    
    /* Purpose: Appearance */
    background: var(--button-background-color, #007BFF); /* Blue */
    color: var(--button-color, white); /* White text */
    border: none; /* No border */
    border-radius: var(--button-border-radius, 5px); /* Rounded */
    
    /* Purpose: Interactivity */
    cursor: pointer; /* Clickable */
    transition: background-color var(--button-transition-duration, 0.2s) ease-in-out; /* Smooth hover */
}

.dropdown-menu button:hover {
    /* Purpose: Appearance */
    background: var(--button-hover-color, #0056b3); /* Darker blue */
}

/* SECTION: Action Buttons - Styles for action buttons in all dropdowns */
/*
 * Distributes action buttons evenly in dropdowns.
 * - **Purpose**: Ensures buttons are sized and spaced consistently across dropdowns.
 * - **Targets**: .action-buttons wrapper in any dropdown.
 */
.action-buttons {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.action-buttons button {
    flex: 1;
    margin: 0 2px;
    padding: 5px 10px;
    min-width: 60px;
    text-align: center;
}

/* Solo button tweak */
.action-buttons button:only-child {
    margin: 0 auto;
    flex: 0 1 auto;
    max-width: 100px;
    justify-content: center;
}

/* Mobile Adjustments - Responsive tweaks for all dropdowns */
/*
 * Adjusts dropdown styling for screens narrower than 768px (mobile devices).
 * - **Purpose**: Ensures compact, scrollable dropdowns on smaller screens.
 * - **Scope**: Applies to all dropdowns via .dropdown-menu, with ID-specific height overrides.
 * - **Version**: Refined in v0.56.0 for width standardization across Clean Text, Lists, Change Case, and Sortation.
 */
@media screen and (max-width: 767px) {
    .dropdown-menu {
        /* Purpose: Sizing */
        min-width: 150px; /* Sets a compact minimum width for dropdowns on mobile */
        max-width: 200px; /* Limits maximum width to fit smaller screens, preventing overflow */
    }
    #listsDropdownMenu {
        /* Purpose: Sizing */
        max-height: 24vh; /* Caps height at 24% of viewport height for mobile, ensuring scroll visibility */
    }
    #cleanTextDropdownMenu {
        /* Purpose: Sizing */
        max-height: 24vh !important; /* Caps height at 24vh, overriding desktop 350px for mobile */
        height: 24vh !important; /* Forces fixed height to 24vh, consistent with max-height */
    }
    #changeCaseDropdownMenu {
        /* Purpose: Sizing */
        max-height: 24vh !important; /* Caps height at 24vh, overriding desktop 350px for mobile */
    }
    #sortationDropdownMenu {
        /* Purpose: Sizing */
        max-height: 24vh; /* Caps height at 24vh, overriding desktop 350px for mobile */
    }     

    /* Ensure section titles are left-aligned on mobile */
    .dropdown-sectionTitle {
        text-align: left !important; /* Override any inherited centering */
    }

}

/* Mobile Portrait Adjustments - Specific tweaks for portrait orientation */
/*
 * Fine-tunes dropdowns and button groups for mobile devices in portrait mode (max-width 767px).
 * - **Purpose**: Standardizes width and font size for a uniform mobile experience across features.
 * - **Scope**: Targets all dropdowns via .dropdown-menu, plus labels, section titles, and button groups (e.g., Transformations, Text Tools, Search Tools).
 * - **Version**: 
 *   - Updated in v0.56.0: Enforced 175px width across all dropdowns (Clean Text, Lists, etc.).
 *   - Updated in v0.56.2: Adjusted .button-group to shrink-fit buttons, countering full-width stretch from parent layout.
 *   - Updated in v0.56.3: 
 *     - Added max-width (270px) to .button-group.transformations-group for "Transformations" (3 buttons), letting "Text Tools" (4 buttons) and "Basic Actions" (4 buttons) size naturally with fit-content.
 *     - Tried display: grid for .button-group to split row-gap and column-gap, but reverted to inline-block due to layout issues; used margin-bottom (5px) for Transformations’ vertical gap.
 *     - Removed align-items: flex-start from body to keep description, counter, and footer centered; relied on .button-group and .controls (width: fit-content, margin: 0 auto) to avoid stretching.
 *     - Dropped .button-group.text-tools-group rule, letting "Text Tools" size naturally (~250-280px for 4 buttons).
 *     - Set .button-group.transformations-group button to margin: 0px 0px 5px 0px for 5px vertical gap, losing horizontal gap—horizontal margin can be added if needed.
 *   - Updated in v0.57.0 (Mar 18, 2025):
 *     - Added .button-group.search-tools-group for "Search Tools" (4 buttons: Find, Replace, Count, Highlight), matching "Text Tools" natural sizing (~250-280px).
 *     - Overrode .dropdown-menu width to 200px for Search Tools dropdowns (Find, Replace, Count, Highlight), exceeding global 175px for larger inputs (250px desktop).
 */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .dropdown-menu {
        /* Purpose: Sizing */
        width: 175px; /* Locks width to 175px for consistency across most dropdowns in portrait */
        max-width: 175px; /* Caps max width at 175px, overriding desktop 250px and mobile 200px */
        
        /* Purpose: Scrolling */
        overflow-x: hidden; /* Prevents horizontal overflow if content exceeds 175px */
    }
    .dropdown-label {
        /* Purpose: Typography */
        font-size: 12px; /* Reduces font size to 12px for compact mobile display, matching buttons */
        text-align: left !important; /* Override any inherited centering */
    }
    .dropdown-label span {
        /* Purpose: Typography */
        font-size: 12px; /* Reduces font size to 12px for compact mobile display, matching buttons */
        text-align: left !important; /* Override any inherited centering */
    }
    .dropdown-sectionTitle {
        /* Purpose: Typography */
        font-size: 12px; /* Reduces section title font size to 12px for consistency with labels */
        text-align: left !important; /* Override any inherited centering */
    }
    .button-group {
        display: flex !important; /* Ensure flex layout on mobile */
        flex-wrap: wrap;
        gap: 5px 5px; /* Horizontal gap: 5px, Vertical gap: 5px */
        row-gap: 10px; /* Increase vertical gap between rows to 10px */
        justify-content: center;
        width: fit-content !important;
        max-width: 320px; /* Constrain width to fit ~3 buttons per row */
        text-align: center;
        margin: 0 auto;
        padding: var(--button-group-padding, 10px 10px);
        box-sizing: border-box !important;
    }
    .button-group button {
        /* Purpose: Spacing - Horizontal Gap */
        margin: 0 2.5px; /* 2.5px left/right for 5px total gap, matches --button-group-gap (v0.56.3) */
    }

    .controls {
        /* Purpose: Layout - Parent Container */
        width: fit-content !important; /* Constrains to children, no stretch (v0.56.3) */
        max-width: 100% !important; /* Limits to viewport width */
        min-width: 0 !important; /* Removes min width stretch (v0.56.3) */
        margin: 0 auto; /* Centers in body (v0.56.3) */
    }
}

/* SECTION: Buttons - Styles for All Button Elements */
/*
 * Defines the default appearance and behavior of buttons across the application.
 * - Applies **consistent padding, font size, color, and hover effects**.
 * - Uses **custom properties** from :root for theming and maintainability.
 * - Adjusts **sizing and spacing** for mobile portrait mode.
 */
button {
    /* Purpose: Spacing */
    padding: var(--button-padding); /* Applies padding from :root (default 8px 15px) for button size */
    
    /* Purpose: Typography */
    font-size: var(--button-font-size); /* Sets font size from :root (default 14px) for readability */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds subtle shadow to text */
    
    /* Purpose: Interactivity */
    cursor: pointer; /* Indicates button is clickable with a pointer cursor */
    
    /* Purpose: Appearance */
    border: none; /* Removes default border for a clean look */
    background-color: var(--button-background-color); /* Uses blue from :root (default #007BFF) */
    color: var(--button-color); /* Sets white text from :root for contrast */
    border-radius: var(--button-border-radius); /* Rounds corners from :root (default 5px) */
    transition: background-color var(--button-transition-duration); /* Smooth background change from :root (default 0.2s) */
}

/* Purpose: Button Hover Effect - Darkens button on hover */
button:hover {
    background-color: var(--button-hover-color); /* Darkens to :root value (default #0056b3) for feedback */
}

/* Purpose: Buttons on Mobile Portrait - Adjusts styles for smaller screens */
@media (max-width: 767px) and (orientation: portrait) {
    button {
        font-size: 12px; /* Reduces font size to 12px for mobile compactness */
        padding: 5px 12px; /* Adjusts padding to 5px top/bottom, 12px left/right for smaller buttons */
    }
}

#clearTextButton, #copyButton, #wrapButton, #pasteButton {
    text-shadow:none;
}

/* SECTION: Button Groups - Styles for Grouped Button Containers */
/*
 * Defines the appearance and layout of .button-group containers.
 * - Groups **buttons** with a border and background for visual distinction.
 * - Ensures **consistent button sizing** within the group.
 * - Uses **flexbox** for wrapping and centering, with custom properties for styling.
 */
.button-group {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox to arrange buttons horizontally */
    flex-wrap: wrap; /* Allows buttons to wrap to the next line if needed */
    justify-content: center; /* Centers buttons horizontally within the group */
    
    /* Purpose: Spacing */
    gap: var(--button-group-gap); /* Sets gap between buttons from :root (default 5px) */
    padding: var(--button-group-padding); /* Applies padding from :root (default 10px 10px) */
    
    /* Purpose: Appearance */
    border: var(--button-group-border); /* Adds border from :root (default 2px solid #007BFF) */
    border-radius: var(--button-group-border-radius); /* Rounds corners from :root (default 8px) */
    background-color: var(--button-group-background-color); /* Uses light blue from :root (default #eef6ff) */
    
    /* Purpose: Sizing */
    width: fit-content; /* Shrinks container to fit its content */
    margin: 0 auto; /* Centers the group horizontally */
}

/* Purpose: Button Sizing in Group - Ensures consistent button sizes */
.button-group button {
    /* min-width: 110px; /* Sets minimum width to 110px for uniform button size */
    max-width: 230px; /* Caps maximum width at 230px to prevent overgrowth */
    text-align: center; /* Centers text within each button */
}

/* Purpose: Button Groups on Mobile Portrait - Adjusts spacing for smaller screens */
@media (max-width: 767px) and (orientation: portrait) {
    .button-group {
        gap: 6px; /* Slightly increases gap to 6px for better mobile spacing */
        padding: 10px; /* Simplifies padding to 10px all around for consistency */
    }
}

/* Purpose: Style the Search Tools button group container */
/* Matches .button-group.text-tools-group by reusing .button-group defaults */
.button-group.search-tools-group {
    /* Inherits from .button-group */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--button-group-gap); /* 5px from :root */
    padding: var(--button-group-padding); /* 10px 10px from :root */
    border: var(--button-group-border); /* 2px solid #007BFF from :root */
    border-radius: var(--button-group-border-radius); /* 8px from :root */
    background-color: var(--button-group-background-color); /* #eef6ff from :root */
    width: fit-content;
    margin: 0 auto;
}

/* SECTION: Controls - Layout for Interactive Elements */
/*
 * Styles the .controls container for organizing buttons and other interactive elements.
 * - Uses **flexbox** for a vertical stack with consistent spacing.
 * - Adjusts **gap and margin** for mobile portrait mode.
 * - Relies on **custom properties** for flexibility.
 */
.controls {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox to stack elements vertically */
    flex-direction: column; /* Arranges children in a column layout */
    
    /* Purpose: Spacing */
    gap: var(--controls-gap); /* Sets vertical gap from :root (default 15px) */
    margin-top: var(--controls-margin-top); /* Adds top margin from :root (default 20px) */
    
    /* Purpose: Sizing */
    width: 100%; /* Ensures controls span full width of their container */
}

/* Purpose: Controls on Mobile Portrait - Tightens layout for smaller screens */
@media (max-width: 767px) and (orientation: portrait) {
    .controls {
        gap: 8px; /* Reduces gap to 8px for a more compact mobile layout */
        margin-top: 10px; /* Shrinks top margin to 10px for tighter spacing */
    }
}

/* SECTION: Descriptions - Styles for Text Blocks and Tool Descriptions */
/*
 * Styles .description and .tool-description classes for readable text content.
 * - Manages **width, padding, and typography** for general descriptions.
 * - Toggles **desktop/mobile tool descriptions** based on screen size.
 * - Uses **minimal custom properties** for simplicity, with mobile adjustments.
 */

/* Purpose: General Description - Styles for readable text blocks */
.description {
    /* Purpose: Sizing */
    max-width: 80%; /* Limits width to 80% for readability on wider screens */
    
    /* Purpose: Spacing */
    padding: 10px; /* Adds 10px padding all around for internal spacing */
    
    /* Purpose: Appearance */
    background: transparent; /* Keeps background transparent for a clean look */
    font-size: 16px; /* Sets font size to 16px for readability */
    color: gray; /* Uses gray for a subtle, non-intrusive text color */
    line-height: 1.5; /* Increases line spacing to 1.5 for better legibility */
}

/* Purpose: Description on Mobile Portrait - Adjusts for smaller screens */
@media (max-width: 767px) and (orientation: portrait) {
    .description {
        max-width: 90%; /* Expands to 90% width for better use of mobile screen space */
        padding: 6px; /* Reduces padding to 6px for a compact layout */
    }
}

/* Purpose: Tool Description Base - Core styles for Cojoro description text */
.tool-description {
    /* Purpose: Spacing */
    margin: 0 0 10px 0; /* Adds 10px bottom margin for separation (no top/left/right margin) */
    
    /* Purpose: Typography */
    font-size: 16px; /* Sets font size to 16px for desktop readability */
    color: gray; /* Uses gray for a subtle appearance */
    line-height: 1.4; /* Sets line height to 1.4 for comfortable spacing */
}

/* Purpose: Desktop Description Visibility - Shows full description on desktop/tablet */
.tool-description-desktop {
    display: block; /* Displays the desktop version by default */
}

/* Purpose: Mobile Description Visibility - Hides mobile description on desktop/tablet */
.tool-description-mobile {
    display: none; /* Hides the mobile version by default */
}

/* Purpose: Tool Description on Mobile Portrait - Switches to mobile version */
@media (max-width: 767px) and (orientation: portrait) {
    .tool-description-desktop {
        display: none; /* Hides desktop version on mobile */
    }

    .tool-description-mobile {
        display: block; /* Shows mobile version on mobile */
    }

    .tool-description {
        font-size: 14px; /* Reduces font size to 14px for mobile compactness */
        line-height: 1.4; /* Maintains 1.4 line height for readability */
    }
}




/* ==================================================================================================================== */
/*  Dark mode                                                                                                           */
/* ==================================================================================================================== */

/* Dark mode overrides */
body.dark-mode {
  --body-background: #1a1a1a;
  --body-padding: 10px; /* Unchanged */

  --heading-font-size: 38px; /* Unchanged */
  --heading-padding: 10px 20px; /* Unchanged */

  --footer-margin-top: 20px; /* Unchanged */
  --footer-font-size: 12px; /* Unchanged */
  --footer-color: #d3d3d3; /* Light gray text */
  --footer-padding: 10px; /* Unchanged */

  --controls-gap: 15px; /* Unchanged */
  --controls-margin-top: 20px; /* Unchanged */

  --button-group-gap: 5px; /* Unchanged */
  --button-group-border: 2px solid #444; /* Darker gray border */
  --button-group-padding: 10px 10px; /* Unchanged */
  --button-group-border-radius: 10px; /* Unchanged */
  --button-group-background-color: #333; /* Dark gray background */

  --group-title-margin-bottom: -12px; /* Unchanged */
  --group-title-font-size: 14px; /* Unchanged */
  --group-title-color: #d3d3d3; /* Light gray text */
  --group-title-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow */

  --button-padding: 8px 15px; /* Unchanged */
  --button-font-size: 14px; /* Unchanged */
  --button-background-color: #007BFF; /* Unchanged */
  --button-color: #d3d3d3; /* Light gray text */
  --button-border-radius: 5px; /* Unchanged */
  --button-transition-duration: 0.2s; /* Unchanged */
  --button-hover-color: #3399FF; /* Lighter blue hover */

  --formatted-text-color: #d3d3d3; /* Light gray text */
  --formatted-text-bg: #444; /* Mid-gray background */
  --formatted-text-padding: 3px 6px; /* Unchanged */
  --formatted-text-border-radius: 4px; /* Unchanged */
  --words-text-font-size: 14px; /* Unchanged */
  --words-text-color: #3399FF; /* Lighter blue */

  --dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Darker shadow */
  --dropdown-section-title-color: #d3d3d3; /* Light gray text */
}

/* Purpose: Dark Mode Horizontal Rule - Updates for dark mode */
body.dark-mode hr {
    /* Purpose: Appearance */
    border: 1px solid #666; /* Sets a 1px solid mid-gray border for better contrast in dark mode */
}

/* Specific dark mode adjustments */
body.dark-mode h2 {
  color: #d3d3d3; /* Light gray text */
  background-color: #2b2b2b; /* Darker gray background */
  border: 0.2px solid #444; /* Mid-gray border */
  box-shadow: none; /* Disables shadow for a flat appearance */
}

body.dark-mode .textarea-container {
  background-color: #2b2b2b; /* Darker gray */
  border: 0.5px solid #444; /* Mid-gray border */
  box-shadow: none; /* Disables shadow for a flat appearance */
}

body.dark-mode .textarea-banner {
  background-color: #2b2b2b; /* Match container */
}

body.dark-mode textarea {
  background-color: #2b2b2b; /* Darker gray */
  color: #d3d3d3; /* Light gray text */
  scrollbar-color: #666 #333; /* Adjusted scrollbar colors */
}

body.dark-mode textarea::selection {
  background-color: #66b3ff; /* Light blue */
  color: #1a1a1a; /* Dark gray text for contrast */
}

/* Purpose: Placeholder Color - Darken placeholder in dark mode */
body.dark-mode textarea::placeholder {
    color: #888; /* Mid-gray for a subtle, darker appearance */
}

body.dark-mode textarea::-webkit-scrollbar-track {
  background: #333; /* Dark gray track */
}

body.dark-mode textarea::-webkit-scrollbar-thumb {
  background: #666; /* Mid-gray thumb */
}

body.dark-mode textarea::-webkit-scrollbar-thumb:hover {
  background: #888; /* Lighter gray hover */
}

body.dark-mode .position-action-button {
  background-color: #333; /* Dark gray */
  color: #d3d3d3; /* Light gray text */
}

body.dark-mode .position-action-button:hover:not(.position-display):not(.datetime-display) {
  background-color: #444; /* Mid-gray hover */
  color: #ffffff; /* White text */
}

body.dark-mode .dropdown-menu {
  background-color: #333 !important; /* Dark gray */
  border: 1px solid #444 !important; /* Mid-gray border */
  color: #d3d3d3 !important; /* Light gray text */
}

/* Ensure dropdown section titles and labels also update in dark mode */
body.dark-mode .dropdown-sectionTitle {
    color: #d3d3d3 !important; /* Override default #333 */
}

body.dark-mode .dropdown-label {
    color: #d3d3d3 !important; /* Ensure label text updates */
}

/* Ensure buttons inside dropdowns maintain dark mode styling */
body.dark-mode .dropdown-menu button {
    background: var(--button-background-color, #007BFF); /* Keep blue */
    color: var(--button-color, #d3d3d3); /* Light gray text */
}

body.dark-mode .dropdown-menu button:hover {
    background: var(--button-hover-color, #3399FF); /* Lighter blue hover */
}

/* Scrollbar adjustments for dark mode consistency */
body.dark-mode #cleanTextDropdownMenu::-webkit-scrollbar-track,
body.dark-mode #changeCaseDropdownMenu::-webkit-scrollbar-track,
body.dark-mode #sortationDropdownMenu::-webkit-scrollbar-track,
body.dark-mode #listsDropdownMenu::-webkit-scrollbar-track,
body.dark-mode .dropdown-menu[data-dropdown="find"]::-webkit-scrollbar-track {
    background: #333 !important; /* Dark gray track */
}

body.dark-mode #cleanTextDropdownMenu::-webkit-scrollbar-thumb,
body.dark-mode #changeCaseDropdownMenu::-webkit-scrollbar-thumb,
body.dark-mode #sortationDropdownMenu::-webkit-scrollbar-thumb,
body.dark-mode #listsDropdownMenu::-webkit-scrollbar-thumb,
body.dark-mode .dropdown-menu[data-dropdown="find"]::-webkit-scrollbar-thumb {
    background: #666 !important; /* Mid-gray thumb */
}

body.dark-mode #cleanTextDropdownMenu::-webkit-scrollbar-thumb:hover,
body.dark-mode #changeCaseDropdownMenu::-webkit-scrollbar-thumb:hover,
body.dark-mode #sortationDropdownMenu::-webkit-scrollbar-thumb:hover,
body.dark-mode #listsDropdownMenu::-webkit-scrollbar-thumb:hover,
body.dark-mode .dropdown-menu[data-dropdown="find"]::-webkit-scrollbar-thumb:hover {
    background: #888 !important; /* Lighter gray hover */
}

/* Ensure Find dropdown inputs match dark mode */
body.dark-mode #findInput,
body.dark-mode #replaceInput {
    background-color: #2b2b2b !important; /* Match textarea */
    color: #d3d3d3 !important; /* Light gray text */
    border: 1px solid #444 !important; /* Mid-gray border */
}

body.dark-mode #findInput::placeholder,
body.dark-mode #replaceInput::placeholder {
    color: #888 !important; /* Mid-gray placeholder */
}

/* Dark mode overrides */
body.dark-mode .match-count-badge.no-matches {
    background-color: #444; /* Mid-gray, matches other dark mode backgrounds */
    color: #d3d3d3; /* Light gray text, consistent with dark mode */
}

body.dark-mode .match-count-badge.has-matches {
    background-color: #66b3ff; /* Light blue, matches textarea selection and other accents */
    color: #1a1a1a; /* Dark gray text for contrast */
}

body.dark-mode .description,
body.dark-mode .tool-description {
  color: #d3d3d3 !important; /* Light gray text */
}

/* Dark mode styles for the counter section */
body.dark-mode .counter {
  background-color: #2b2b2b; /* Match textarea and other containers */
  color: #d3d3d3 !important; /* Light gray text for general text */
  border: 0.5px solid #444; /* Mid-gray border */
  box-shadow: none; /* Disables shadow for a flat appearance */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Darker shadow for text */
}

/* Counter row in dark mode */
body.dark-mode .counter-row {
  color: #d3d3d3 !important; /* Ensure row text is light gray */
}

/* Counter labels in dark mode (override inline and default styles) */
body.dark-mode .counter-row span[id$="Label"] {
  color: #d3d3d3 !important; /* Light gray text, override inline style */
}

/* Counter values in dark mode */
body.dark-mode .counter-row span:not([id$="Label"]) {
  color: #66b3ff; /* Light blue to match ::selection and button hover */
}

/* Pipe separator in dark mode */
body.dark-mode .counter-row span:not([id$="Label"]):not(:last-child)::after {
  color: #888; /* Lighter gray for the pipe to stand out subtly */
}


/* SECTION: Footer Dark Mode - Styles for Footer in Dark Mode */
/*
 * Styles the footer in **dark mode**.
 * - **Adjusts** the text color to a darker shade for better contrast.
 * - **Maintains** readability against the dark body background.
 * - **Ensures** a subtle appearance consistent with the dark mode theme.
 */

/* Purpose: Footer Text Color - Darken footer text in dark mode */
body.dark-mode footer {
    color: #888; /* Mid-gray for a subtle, darker appearance */
}

/* Purpose: Footer Paragraphs - Ensure paragraph text is darkened */
body.dark-mode footer p {
    color: #888; /* Mid-gray to match footer */
}

/* Purpose: Footer Small Text - Ensure small text (e.g., version info) is darkened */
body.dark-mode footer p small {
    color: #888; /* Mid-gray to match footer */
}

/* SECTION: Position Action Buttons - Styles for textarea banner buttons */
/*
 * Styles buttons in the textarea banner, including the Wrap/Unwrap button, in both light and dark modes.
 * - **Purpose**: Defines the appearance and behavior of buttons like Wrap/Unwrap, Clear, Copy, and Paste.
 * - **Features**: Includes SVG icons with stroke colors that adapt to dark mode.
 * - **Behavior**: Ensures consistent styling and hover effects across modes.
 */

/* Purpose: Style the SVG icons in light mode */
.position-action-button svg {
    /* Purpose: Appearance */
    stroke: #666; /* Gray stroke for icons in light mode */
}

/* Purpose: Dark Mode SVG Icons - Updates for dark mode */
body.dark-mode .position-action-button svg {
    /* Purpose: Appearance */
    stroke: #d3d3d3; /* Light gray stroke for better contrast in dark mode */
}


/* ==================================================================================================================== */
/*  Confirmation Messages */
/* ==================================================================================================================== */

/* SECTION: Confirmation Message - Styles for action feedback messages */
/*
 * Styles the confirmation message displayed after user actions.
 * - **Positions** the message centered over the textarea.
 * - **Applies** a dark background with gold text for visibility.
 * - **Animates** with smooth fade-in and fade-out transitions.
 * - **Ensures** non-intrusive behavior by auto-disappearing.
 */

/* Purpose: Confirmation Message Base - Core styles for the message */
.confirmationMessage {
    position: absolute; /* Allows centering over the textarea */
    transform: translate(-50%, -50%); /* Centers horizontally and vertically */
    background: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
    color: #FFD700; /* Gold text for readability and contrast */
    padding: 10px 16px; /* Comfortable padding around the text */
    border-radius: 6px; /* Soft rounded edges */
    font-size: 14px; /* Readable font size */
    font-weight: normal; /* Normal weight for a clean look */
    text-align: center; /* Centers the message text */
    z-index: 1000; /* Ensures the message stays above other elements */
    opacity: 0; /* Starts hidden for fade-in animation */
    pointer-events: none; /* Prevents user interaction with the message */
    transition: opacity 0.4s ease-in-out; /* Smooth fade-in/fade-out effect */
}

/* Purpose: Visible Confirmation Message - Shows the message when activated */
.confirmationMessage.visible {
    opacity: 1; /* Makes the message fully visible */
}




/* ==================================================================================================================== */
/*  Counter Component - Container Styles */
/* ==================================================================================================================== */        
/* SECTION: Counter Display - Styles for text analysis counters */
/*
 * Defines the layout and appearance of counters for word, character, and number counts.
 * - **Organizes** counters into a centered, flexible layout with responsive adjustments.
 * - **Styles** counter values with consistent spacing and colors.
 * - **Ensures** consistent mobile view in both portrait and landscape orientations.
 */

/* Purpose: Counter Container - Main container for all counters */
.counter {
    width: fit-content; /* Adjusts to content size */
    max-width: 100%; /* Prevents exceeding parent container */
    margin-top: 20px; /* Adds spacing above the counter */
    margin-bottom: 20px; /* Adds spacing below the counter */
    padding: 10px 20px; /* Provides internal spacing (top/bottom, left/right) */
    box-sizing: border-box; /* Includes padding in width/height */
    font-size: 16px; /* Sets readable font size for desktop */
    color: #222; /* Dark text for labels */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds subtle shadow to text */
    border: 0.5px solid #ccc; /* Subtle border for definition */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.8); /* Depth with shadow effect */
    background-color: #f8f8f8; /* Light background */
    display: flex; /* Enables flexbox layout */
    flex-direction: column; /* Stacks counters vertically */
    justify-content: center; /* Centers content vertically */
    gap: 10px; /* Spacing between child elements */
    align-items: center; /* Centers content horizontally */
}

/* Purpose: Counter Row - Arranges counter items in a horizontal row */
.counter-row {
    display: flex; /* Enables flexbox for horizontal layout */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 4px; /* Reduced gap for tighter fit on small devices */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    width: fit-content; /* Shrinks to content size */
    max-width: 100%; /* Prevents exceeding parent width */
}

/* Purpose: Counter Label - Styles individual counter labels */
.counter-row span[id$="Label"] {
    color: black; /* Matches inline style for labels */
    white-space: nowrap; /* Prevents text wrapping */
    flex-shrink: 0; /* Prevents label compression */
}

/* Purpose: Add Pipe Separator - Inserts a pipe after each value (except the last in each row) */
.counter-row span:not([id$="Label"]):not(:last-child) {
    position: relative; /* For positioning the pipe */
}
.counter-row span:not([id$="Label"]):not(:last-child)::after {
    content: "|"; /* Adds the pipe separator */
    color: #666; /* Gray for subtle contrast */
    margin-left: 4px; /* Adjusted spacing before pipe */
    margin-right: 4px; /* Adjusted spacing after pipe */
}

/* Purpose: Counter Value - Styles individual counter values */
.counter-row span:not([id$="Label"]) {
    color: blue; /* Blue text for counter values */
    white-space: nowrap; /* Prevents text wrapping */
}

/* Purpose: Counter in Mobile - Applies mobile view in both portrait and landscape */
@media (max-width: 991px) {
    /* Purpose: Counter Container - Adjusts layout for mobile devices */
    .counter {
        width: 100%; /* Ensures the counter section takes up full available width */
        max-width: 320px; /* Reduced to fit smaller mobile screens */
        padding: 6px; /* Reduced padding for smaller screens */
        box-sizing: border-box; /* Ensures padding is included in the total width calculation */
    }

    /* Purpose: Counter Row - Adjusts counter items layout for mobile devices */
    .counter-row {
        display: flex; /* Uses flexbox for flexible alignment */
        flex-wrap: wrap; /* Allows wrapping for better fit in portrait mode */
        align-items: center; /* Vertically centers elements in the row */
        gap: 4px; /* Reduced gap for tighter fit */
        width: 100%; /* Ensures the row takes full width of its container */
        overflow: hidden; /* Prevents overflow issues and keeps layout compact */
    }

    /* Purpose: Counter Label - Adjusts individual counter labels for mobile devices */
    .counter-row span[id$="Label"] {
        font-size: 12px; /* Smaller font size for compactness */
        min-width: 30px; /* Reduced to fit tighter */
    }

    /* Purpose: Remove Pipe in Mobile Portrait - Disables pipe separator */
    .counter-row span:not([id$="Label"]):not(:last-child)::after {
        content: none; /* Removes pipe in mobile by default (portrait) */
    }

    /* Purpose: Counter Value - Adjusts individual counter values for mobile devices */
    .counter-row span:not([id$="Label"]) {
        display: inline-flex; /* Uses flexbox for alignment within span */
        justify-content: space-between; /* Ensures even spacing within each span */
        min-width: 18px; /* Reduced to fit tighter */
        max-width: 45px; /* Reduced for better fit */
        text-align: left; /* Aligns text to the left for readability */
        font-size: 12px; /* Smaller font size for mobile */
        white-space: nowrap; /* Prevents text from wrapping onto multiple lines */
        overflow: hidden; /* Ensures that overflowing text is hidden */
        text-overflow: ellipsis; /* Displays an ellipsis (...) if text overflows */
        flex-shrink: 1; /* Allows values to shrink dynamically to fit available space */
        transition: font-size 0.2s ease-in-out; /* Smooth transition for font size changes */
    }

    /* Purpose: Counter Value on Smaller Screens - Shrinks text for very small screens */
    @media (max-width: 400px) {
        .counter {
            max-width: 90%; /* Dynamic width for very small screens */
            padding: 4px; /* Further reduced padding */
        }
        .counter-row span:not([id$="Label"]) {
            font-size: clamp(8px, 2.5vw, 12px); /* Adjusted for smaller screens */
        }
        .counter-row span[id$="Label"] {
            font-size: clamp(8px, 2.5vw, 12px); /* Matches label font size to values */
        }
    }

    /* Purpose: Counter in Mobile Landscape - Increases container size and centers content */
    @media (orientation: landscape) {
        .counter {
            max-width: 80%; /* Reduced to fit narrower landscapes */
            min-width: 350px; /* Reduced to fit smaller landscapes */
            padding: 6px;
        }
        .counter-row {
            justify-content: center; /* Centers label-value pairs in landscape */
        }
        /* Purpose: Restore Pipe in Mobile Landscape - Re-enables pipe separator */
        .counter-row span:not([id$="Label"]):not(:last-child)::after {
            content: "|"; /* Restores pipe in landscape */
            color: #666; /* Consistent with desktop */
            margin-left: 4px; /* Matching spacing */
            margin-right: 4px; /* Matching spacing */
        }
    }

    /* Additional overrides for specific max-width adjustments */
    /* For mobile devices (≤ 767px), use a narrower max-width to force wrapping */
    @media (max-width: 767px) {
        .counter {
            width: 100%;
            max-width: 380px; /* Restore original max-width to force wrapping in mobile portrait */
            padding: 6px;
            box-sizing: border-box;
        }
    }

    /* For iPad-sized devices (768px–991px), use a wider max-width */
    @media (min-width: 768px) and (max-width: 991px) {
        .counter {
            width: 100%;
            max-width: 600px; /* Use wider max-width for iPad Air portrait */
            padding: 6px;
            box-sizing: border-box;
        }
    }

    @media (max-width: 991px) {
        @media (orientation: landscape) {
            .counter {
                max-width: 65%;
                min-width: 350px;
                padding: 6px;
            }
        }
    }

    /* Purpose: Override mobile styles for iPad portrait mode to match landscape with adjustments */
    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        .counter {
            width: 100%; /* Take full available width up to max */
            max-width: 600px; /* Match the updated general max-width for consistency */
            min-width: 350px; /* Maintain minimum width */
            padding: 10px 20px; /* Keep padding consistent */
            font-size: 14px; /* Reduce font size for counters */
        }
        .counter-row {
            width: fit-content; /* Match desktop style */
            max-width: 100%; /* Match desktop style */
            overflow: visible; /* Match desktop style */
        }
        .counter-row span[id$="Label"] {
            font-size: 14px; /* Reduce font size for labels */
            min-width: unset; /* Remove mobile constraint */
        }
        .counter-row span:not([id$="Label"]) {
            display: inline; /* Match desktop style */
            justify-content: unset; /* Remove mobile flexbox */
            min-width: unset; /* Remove mobile constraint */
            max-width: unset; /* Remove mobile constraint */
            text-align: unset; /* Remove mobile alignment */
            font-size: 14px; /* Reduce font size for values */
            overflow: visible; /* Match desktop style */
            text-overflow: unset; /* Remove mobile ellipsis */
            flex-shrink: 0; /* Match desktop style */
            transition: none; /* Remove mobile transition */
        }
        /* Restore pipe separator in iPad portrait mode */
        .counter-row span:not([id$="Label"]):not(:last-child)::after {
            content: "|"; /* Match desktop and landscape */
            color: #666;
            margin-left: 4px;
            margin-right: 4px;
        }
    }
}





/* =================================================================================================================== */
/*  Clear section      */
/* =================================================================================================================== */

/* Clear CSS - Styling for Clear dropdown */
/*
 * Defines unique styles for the Clear dropdown menu identified by [data-dropdown="clear"].
 * Purpose: Standardizes Clear to match Clean Text and Sortation with data-dropdown system.
 * Scope: Applies only to Clear—shared styles in Dropdown Components or Dropdown System.
 * Version: Introduced in v0.50.4.0.
 */

/* Core Dropdown Styling - Controls size and visibility */
#clearDropdownMenu {
    max-height: 500px !important; /* Caps height, consistent with Clean Text */
    overflow-y: auto !important; /* Scroll if content overflows */
    overflow-x: hidden !important; /* No horizontal scroll */
    background-color: white !important; /* Matches theme */
    display: none; /* Hidden by default, toggled by JS */
    position: absolute; /* Positioned below button */
    min-width: 200px; /* Matches prior width */
    padding: 10px; /* Internal spacing */
    border: 1px solid #ccc; /* Border for clarity */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Depth */
    z-index: var(--dropdown-z-index, 100); /* Stays above other elements */
}

/* Action Button Styling - Styles the Clear Apply button */
[data-dropdown="clear"] #clearclearApplyChanges {
    display: block; /* Full-width block */
    width: 100%; /* Fills dropdown width */
    padding: var(--button-padding, 8px 15px); /* Consistent padding */
    border: none; /* Clean look */
    border-radius: var(--button-border-radius, 5px); /* Rounded */
    background: var(--button-background-color, #007BFF); /* Blue theme */
    color: var(--button-color, #fff); /* White text */
    font-size: var(--button-font-size, 14px); /* 14px text */
    cursor: pointer; /* Clickable */
    transition: background-color var(--button-transition-duration, 0.2s) ease-in-out; /* Smooth hover */
}
[data-dropdown="clear"] #clearApplyChanges:hover {
    background: var(--button-hover-color, #0056b3); /* Darker blue on hover */
}

/* Mobile Adjustment - Responsive height */
@media (max-width: 767px) {
    #clearDropdownMenu {
        max-height: 24vh !important; /* Caps at 24% viewport height */
    }
}




/* ==================================================================================================================== */
/*  Clean Text section      */
/* ==================================================================================================================== */

/* SECTION: CleanTextDropdown - Styles for Clean Text dropdown */
/*
 * Defines unique styles for the Clean Text dropdown menu.
 * - Customizes **scrollbar appearance** for a compact design.
 * - Manages **height and scrolling** dynamically with JavaScript.
 * - Ensures **responsive behavior** across screen sizes.
 * - Version: Updated in v0.63 to support dynamic height calculation.
 */

/* Purpose: Scrollbar Styling - Customizes the scrollbar’s look for Clean Text dropdown */
#cleanTextDropdownMenu::-webkit-scrollbar {
    width: 4px !important; /* Slim scrollbar for a compact, clean design */
}

#cleanTextDropdownMenu::-webkit-scrollbar-track {
    background: #f1f1f1 !important; /* Light gray track for subtle contrast */
}

#cleanTextDropdownMenu::-webkit-scrollbar-thumb {
    background: gray !important; /* Gray thumb matches button theme */
    border-radius: 4px !important; /* Rounded edges for a polished look */
}

#cleanTextDropdownMenu::-webkit-scrollbar-thumb:hover {
    background: var(--button-hover-color, #0056b3) !important; /* Darker blue on hover for feedback */
}

/* Purpose: Disabled Checkbox State - Visual cue for inactive options */
[data-dropdown="cleanText"] .dropdown-option:disabled {
    opacity: 0.5; /* Fades disabled checkboxes to 50% opacity */
}

/* Purpose: Action Button Styling - Styles the Apply Changes button inside the dropdown */
[data-dropdown="cleanText"] button {
    display: block; /* Full-width block for consistent layout */
    width: 100%; /* Stretches to fill dropdown width */
    padding: var(--button-padding, 8px 15px); /* Padding: 8px top/bottom, 15px sides */
    border: none; /* No border for a sleek look */
    border-radius: var(--button-border-radius, 5px); /* Rounded corners from global vars */
    background: var(--button-background-color, #007BFF); /* Blue background matches theme */
    color: var(--button-color, #fff); /* White text for contrast */
    font-size: var(--button-font-size, 14px); /* 14px text size from global vars */
    cursor: pointer; /* Hand cursor for clickability */
    transition: background-color var(--button-transition-duration, 0.2s) ease-in-out; /* Smooth hover effect */
}

[data-dropdown="cleanText"] button:hover {
    background: var(--button-hover-color, #0056b3); /* Darker blue on hover */
}

/* Purpose: Core Dropdown Styling - Controls size and scrolling of Clean Text dropdown */
#cleanTextDropdownMenu {
    overflow-y: auto !important; /* Enables vertical scrollbar only when content overflows */
    overflow-x: hidden !important; /* Prevents horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile Webkit browsers */
    background-color: white; /* White background for visibility */
}

/* Purpose: Mobile Adjustment - Fallback height for smaller screens */
@media (max-width: 767px) {
    #cleanTextDropdownMenu {
        max-height: 24vh !important; /* Fallback max-height at 24% of viewport height */
    }
}




/* =================================================================================================================== */
/*  Change Case section     */
/* =================================================================================================================== */

/* Change Case CSS - Styling for Change Case dropdown */
/*
 * Defines unique styles for the Change Case dropdown menu identified by [data-dropdown="changeCase"].
 * Purpose: Standardizes Change Case to match Clean Text, Sortation, and Clear with data-dropdown system.
 * Scope: Applies only to Change Case—shared styles in Dropdown Components or Dropdown System.
 * Version: Introduced in v0.50.5.0.
 * Updated v0.56.0: Removed min-width to standardize with .dropdown-menu rules (width now 230-250px desktop, 175px mobile portrait).
 */

/* Core Dropdown Styling - Controls size and visibility */
#changeCaseDropdownMenu {
    max-height: 500px !important; /* Caps height, consistent with Clean Text */
    overflow-y: auto !important; /* Scroll if content overflows */
    overflow-x: hidden !important; /* No horizontal scroll */
    background-color: white; /* Matches theme */
    display: none; /* Hidden by default, toggled by JS */
    position: absolute; /* Positioned below button */
    padding: 10px; /* Internal spacing */
    border: 1px solid #ccc; /* Border for clarity */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Depth */
    z-index: var(--dropdown-z-index, 100); /* Stays above other elements */
}

/* Action Button Styling - Styles the Change Case Apply button */
[data-dropdown="changeCase"] #changeCaseApplyCasing {
    display: block; /* Full-width block */
    width: 100%; /* Fills dropdown width */
    padding: var(--button-padding, 8px 15px); /* Consistent padding */
    border: none; /* Clean look */
    border-radius: var(--button-border-radius, 5px); /* Rounded */
    background: var(--button-background-color, #007BFF); /* Blue theme */
    color: var(--button-color, #fff); /* White text */
    font-size: var(--button-font-size, 14px); /* 14px text */
    cursor: pointer; /* Clickable */
    transition: background-color var(--button-transition-duration, 0.2s) ease-in-out; /* Smooth hover */
}
[data-dropdown="changeCase"] #changeCaseApplyCasing:hover {
    background: var(--button-hover-color, #0056b3); /* Darker blue on hover */
}

/* Mobile Adjustment - Responsive height */
@media (max-width: 767px) {
    #changeCaseDropdownMenu {
        max-height: 24vh !important; /* Caps at 24% viewport height */
    }
}




/* =================================================================================================================== */
/*  Sortation section                                                                                         */
/* =================================================================================================================== */

/* SECTION: SortationDropdown - Styles for Sortation dropdown */
/*
 * Defines unique styles for the Sortation dropdown menu.
 * - Customizes **scrollbar appearance** for a compact design.
 * - Manages **height and scrolling** dynamically with JavaScript.
 * - Ensures **responsive behavior** across screen sizes.
 * - Version: Updated in v0.63 to support dynamic height calculation.
 */

/* Purpose: Core Dropdown Styling - Controls size and scrolling */
#sortationDropdownMenu {
    overflow-y: auto; /* Enables vertical scrollbar only when content overflows */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile Webkit browsers */
}

/* Purpose: Custom Scrollbar Styling - Matches Lists and Clean Text */
#sortationDropdownMenu::-webkit-scrollbar {
    width: 4px; /* Slim scrollbar */
}

#sortationDropdownMenu::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light gray track */
}

#sortationDropdownMenu::-webkit-scrollbar-thumb {
    background: gray; /* Gray thumb */
    border-radius: 4px; /* Rounded */
}

#sortationDropdownMenu::-webkit-scrollbar-thumb:hover {
    background: var(--button-hover-color, #0056b3); /* Darker blue on hover */
}

/* Purpose: Mobile Adjustment - Fallback height for smaller screens */
@media screen and (max-width: 767px) {
    #sortationDropdownMenu {
        max-height: 24vh; /* Fallback max-height at 24% of viewport height */
    }
}
 



/* =================================================================================================================== */
/*  List section      */
/* =================================================================================================================== */

/* SECTION: ListsDropdown - Styles for Lists dropdown menu */
/*
 * Defines unique styles for the Lists dropdown menu.
 * - Manages **visibility** and **positioning** for dropdown display.
 * - Customizes **scrollbar appearance** for a compact design.
 * - Handles **height and scrolling** dynamically with JavaScript.
 * - Ensures **responsive behavior** across screen sizes.
 * - Version: Updated in v0.63 to support dynamic height calculation.
 */
#listsDropdownMenu {
    /* Purpose: Visibility */
    display: none; /* Hides the dropdown by default, toggled via JavaScript */
    
    /* Purpose: Positioning */
    position: absolute; /* Positions absolutely relative to nearest positioned ancestor */
    
    /* Purpose: Appearance */
    background: white; /* Sets white background for contrast and readability */
    border: 1px solid #ccc; /* Adds a 1px light gray border for definition */
    border-radius: 5px; /* Rounds corners to 5px for a soft look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Applies shadow for visual depth (0px x, 4px y, 8px blur) */
    
    /* Purpose: Layering */
    z-index: 100; /* Sets high stacking order to ensure dropdown appears above other elements */
    
    /* Purpose: Spacing */
    padding: 10px; /* Adds 10px padding all around for internal spacing */
    
    /* Purpose: Typography */
    font-family: Arial, sans-serif; /* Uses Arial with sans-serif fallback for broad compatibility */
    font-size: 14px; /* Sets font size to 14px for readability */
    color: #222; /* Uses dark gray text for contrast against white background */
    
    /* Purpose: Scrolling */
    overflow-y: auto; /* Enables vertical scrolling only when content overflows */
    -webkit-overflow-scrolling: touch; /* Enables smooth, momentum-based scrolling on WebKit mobile browsers */
}

/* Purpose: Custom Scrollbar Styling - Theme-consistent scrollbar design */
#listsDropdownMenu::-webkit-scrollbar {
    width: 4px; /* Sets scrollbar width to 4px for a slim, unobtrusive design */
}

/* Purpose: Scrollbar Track - Background for scrollbar area */
#listsDropdownMenu::-webkit-scrollbar-track {
    background: #f1f1f1; /* Sets light gray background for the scrollbar track */
}

/* Purpose: Scrollbar Thumb - Movable part of the scrollbar */
#listsDropdownMenu::-webkit-scrollbar-thumb {
    background: gray; /* Sets gray thumb color to match theme */
    border-radius: 4px; /* Rounds thumb corners to 4px for a polished look */
}

/* Purpose: Scrollbar Thumb Hover - Hover effect for scrollbar */
#listsDropdownMenu::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* Darkens thumb to a blue shade on hover for visual feedback */
}

/* Purpose: Mobile Portrait Adjustment - Fallback height for smaller screens */
@media (max-width: 767px) {
    #listsDropdownMenu {
        max-height: 24vh; /* Fallback max-height at 24% of viewport height */
    }
}




/* =================================================================================================================== */
/*  Find Section (Updated from Search Tools) */
/* =================================================================================================================== */

/* SECTION: FindDropdown - Styles for Find & Replace dropdown */
/*
 * Defines styles for the Find & Replace dropdown menu.
 * - Manages **visibility** and **positioning** for dropdown display.
 * - Customizes **inputs, labels, and buttons** for Find-specific functionality.
 * - Handles **height and scrolling** dynamically with JavaScript.
 * - Ensures **responsive behavior** across screen sizes.
 * - Added in v0.57.0 (Mar 18, 2025) to support Find feature.
 */
.dropdown-menu[data-dropdown="find"] {
    /* Purpose: Visibility */
    display: none; /* Hides the dropdown by default, toggled via JavaScript */
    
    /* Purpose: Positioning */
    position: absolute; /* Positions absolutely relative to nearest positioned ancestor */
    
    /* Purpose: Layering */
    z-index: var(--dropdown-z-index); /* 100 from :root */
    
    /* Purpose: Appearance */
    border: 1px solid #ccc; /* Adds a 1px light gray border for definition */
    border-radius: 5px; /* Rounds corners to 5px for a soft look */
    padding: 10px; /* Adds 10px padding all around for internal spacing */
    box-shadow: var(--dropdown-box-shadow); /* 0 8px 16px rgba(0, 0, 0, 0.2) from :root */
    background-color: white; /* Sets white background for contrast and readability */
    
    /* Purpose: Sizing */
    min-width: 250px; /* Desktop width, Mar 18, 2025 */
    max-width: 250px; /* Caps at 250px */
    box-sizing: border-box; /* Includes padding/border in width */
    
    /* Purpose: Scrolling */
    overflow-y: auto; /* Enables vertical scrolling only when content overflows */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/* Purpose: Style inputs and labels within Find dropdown */
.dropdown-menu[data-dropdown="find"] input[type="text"] {
    width: 100%; /* Fits 250px dropdown */
    padding: 4px; /* Tighter than --button-padding (8px 15px) */
    margin: 4px 0; /* Spacing above and below */
    border: 1px solid #ccc; /* Subtle border */
    box-sizing: border-box; /* Includes padding/border in width */
}

.dropdown-menu[data-dropdown="find"] label {
    display: flex; /* Tweaked to flex for alignment */
    align-items: center; /* Vertically centers label content */
    gap: var(--label-gap); /* 5px from :root */
    padding: var(--label-padding); /* 2px 0 from :root */
    font-size: var(--label-font-size); /* 14px from :root */
    cursor: var(--input-cursor); /* pointer from :root */
}

/* Purpose: Style action buttons inside Find dropdown */
.dropdown-menu[data-dropdown="find"] button {
    padding: 4px 8px; /* Smaller than --button-padding for three-button rows */
    width: auto; /* Overrides full-width from global */
    font-size: var(--button-font-size); /* 14px from :root */
    background: var(--button-background-color); /* #007BFF from :root */
    color: var(--button-color); /* white from :root */
    border: none; /* No border for a sleek look */
    border-radius: var(--button-border-radius); /* 5px from :root */
    cursor: pointer; /* Hand cursor for clickability */
    transition: background-color var(--button-transition-duration) ease-in-out; /* 0.2s from :root */
    margin-right: 4px; /* Space between buttons */
}

.dropdown-menu[data-dropdown="find"] button:last-child {
    margin-right: 0; /* No extra space on last button */
}

.dropdown-menu[data-dropdown="find"] button:hover {
    background: var(--button-hover-color); /* #0056b3 from :root */
}

/* Purpose: Ensure disabled buttons in Find dropdown look disabled */
.dropdown-menu[data-dropdown="find"] button:disabled {
    opacity: 0.5 !important; /* Fades the button */
    cursor: not-allowed !important; /* Overrides cursor: pointer */
    display: inline-block !important; /* Ensures button layout */
}

/* Purpose: Style match counter for Find */
#findMatchCount {
    margin-top: 5px; /* Spacing from options title */
    font-size: 14px; /* Slightly larger for readability */
}

/* SECTION: FindFeature - Button styles for Find Reset button */
/*
 * Targets #findResetButton specifically.
 * - Sets **smaller font size** for reset button to fit layout.
 */
#findResetButton {
    /* Purpose: Typography */
    font-size: 10px; /* Smaller font size for reset button */
}

/* SECTION: FindFeedback - Styles for match counters */
/*
 * Styles dynamic badges for match counts in Find dropdown.
 * - Highlights **X matches found** with a badge that changes based on count.
 * - **States**: Grey for 0 matches, orange for 1+ matches.
 * - Updated in v0.57.2 for layout enhancement.
 */
.match-count-badge {
    /* Purpose: Layout */
    display: inline-block; /* Keeps it inline with flow */
    
    /* Purpose: Spacing */
    padding: 2px 6px; /* Small padding for badge effect */
    margin-top: 5px; /* Spacing from title */
    
    /* Purpose: Appearance */
    border-radius: 4px; /* Rounded corners for modern look */
    font-size: 13px; /* Slightly smaller but readable */
    font-weight: 500; /* Medium bold - noticeable but not heavy */
}

/* Purpose: State: No matches (0) */
.match-count-badge.no-matches {
    background-color: lightgray; /* Grey background for zero */
    color: white; /* White text for contrast */
    text-align: center; /* Centers text */
}

/* Purpose: State: Has matches (1 or more) */
.match-count-badge.has-matches {
    background-color: orange; /* Orange background for matches */
    color: black; /* Black text for contrast */
    text-align: center; /* Centers text */
}

/* Purpose: Styles for the find input to match textarea appearance */
#findInput,
#replaceInput {
    background-color: #fff !important; /* White background */
    border-radius: 8px; /* Curved corners */
    padding: 8px; /* Comfortable text spacing */
    border: 1px solid #ccc; /* Subtle border */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Includes padding/border in width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Purpose: Styles for the placeholder text in the find input */
#findInput::placeholder,
#replaceInput::placeholder {
    font-size: 12px; /* Smaller font size to distinguish from user input */
    color: gray; /* Subtle grey for non-intrusive appearance */
    font-style: italic; /* Italic for instructional tone */
}

/* SECTION: FindLayout - Styles for action buttons and mobile adjustments */
/*
 * Distributes action buttons evenly in Find dropdown and adjusts for mobile.
 * - Ensures **Find buttons** are sized and spaced consistently.
 * - Targets **.find-action-buttons** wrapper in Find dropdown.
 */
.find-action-buttons {
    /* Purpose: Layout */
    display: flex; /* Flexbox for even distribution */
    flex-wrap: nowrap; /* Prevents wrapping to ensure all buttons stay on one row */
    
    /* Purpose: Spacing */
    gap: 3px; /* Space between buttons */
    padding: 4px 0; /* Vertical padding for alignment */
}

.find-action-button {
    /* Purpose: Sizing */
    padding: 4px 8px; /* Consistent padding */
    font-size: 12px; /* Smaller font for compact buttons */
    flex: 1 1 40px; /* Allows First/Last/Replace/Replace All to grow and shrink */
    max-width: 48px; /* Caps the width to prevent overflow */
    
    /* Purpose: Alignment */
    text-align: center; /* Centers text */
    box-sizing: border-box; /* Includes padding/border in width */
}

.find-nav-button {
    /* Purpose: Sizing */
    padding: 4px 4px; /* Tighter padding for navigation buttons */
    font-size: 12px; /* Smaller font for compact buttons */
    width: 30px; /* Fixed width */
    min-width: 30px !important; /* Ensures fixed width */
    max-width: 30px; /* Caps width */
    flex: 0 0 30px; /* Fixed width, no growing or shrinking */
    
    /* Purpose: Alignment */
    text-align: center; /* Centers text */
    box-sizing: border-box; /* Includes padding/border in width */
    
    /* Purpose: Behavior */
    overflow: hidden; /* Prevents content overflow */
}

.find-search-section input {
    /* Purpose: Sizing */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Includes padding/border in width */
}

.find-search-header {
    /* Purpose: Layout */
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Spaces elements evenly */
    align-items: center; /* Vertically centers content */
    
    /* Purpose: Sizing */
    width: 100%; /* Full width */
    
    /* Purpose: Spacing */
    margin-bottom: 5px; /* Space below header */
}

.find-search-header .dropdown-sectionTitle {
    /* Purpose: Sizing */
    flex: 1 1 auto; /* Grows and shrinks as needed */
    
    /* Purpose: Behavior */
    white-space: nowrap; /* Prevents wrapping */
    overflow: hidden; /* Hides overflow */
    text-overflow: ellipsis; /* Adds ellipsis for overflow */
}

.find-reset-button {
    /* Purpose: Sizing */
    padding: 2px 6px; /* Smaller padding for reset button */
    font-size: 12px; /* Smaller font for compact button */
    min-width: 0; /* Allows button to shrink */
    flex: 0 0 auto; /* Fixed size, no growing */
    
    /* Purpose: Spacing */
    margin-right: 0; /* No extra space on right */
}

/* Purpose: Mobile Adjustment - Responsive width and height */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .dropdown-menu[data-dropdown="find"] {
        min-width: 230px !important; /* Adjusted width for mobile */
        max-width: 230px !important; /* Caps width for mobile */
        max-height: 24vh !important; /* Fallback max-height at 24% of viewport height */
    }
    
    .dropdown-menu[data-dropdown="find"] label {
        flex-wrap: wrap; /* Allows wrapping on mobile */
        max-width: 100%; /* Full width */
    }
    
    .dropdown-menu[data-dropdown="find"] label span {
        flex: 1; /* Grows to fill space */
        white-space: normal; /* Allows wrapping */
    }
    
    .dropdown-menu[data-dropdown="find"] input[type="text"],
    #findInput,
    #replaceInput {
        width: 100%; /* Full width */
        max-width: 100%; /* Caps width */
    }
    
    /* Purpose: Reduce gap between buttons in Find dropdown */
    .find-action-buttons {
        gap: 2px; /* Reduces from 3px to 2px for mobile */
    }
}




/* ================================================================================================================== */
/*  Stack Tooltip    */
/* ================================================================================================================== */

/* SECTION: Undo/Redo Tooltips - Styles for undo/redo action tooltips */
.stack-tooltip {
  /* Purpose: High-contrast base with orange accent matching #helpButton glow */
  background-color: #fff; /* White base for readability */
  border-left: 4px solid #FF9800; /* Orange accent ties to glow theme */
  border-bottom: 2px solid #FF9800; /* Orange accent ties to glow theme */
  color: #333; /* Dark text stands out */
  font-weight: 500; /* Slight bold for clarity */
  
  /* Purpose: Elevated look and polish */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
  border-radius: 5px; /* Rounded corners for softness */
  
  /* Purpose: Positioning and animation */
  position: absolute;
  padding: 8px 12px; /* Roomier padding */
  font-size: 13px; /* Default for desktop */
  z-index: 1000; /* Above buttons, below dropdowns */
  opacity: 0; /* Hidden for fade-in */
  transition: opacity 0.3s ease-in-out; /* Smooth fade */
  pointer-events: none; /* Non-interactive */
}

/* Purpose: Shrink font on mobile like counter labels */
@media (max-width: 991px) {
  .stack-tooltip {
    font-size: 12px; /* Smaller for mobile fit */
    line-height: 1.2; /* Keeps text readable */
  }
}




/* ================================================================================================================== */
/*  Reset Confirmation Message    */
/* ================================================================================================================== */        
/* SECTION: Reset Confirmation Message - Styles for reset confirmation popup */
/*
 * Styles the reset confirmation popup for confirming reset actions in both light and dark modes.
 * - **Displays** a popup with a title, message, and action buttons (`Yes`/`No`) for user confirmation.
 * - **Positions** the popup below the reset button using absolute positioning.
 * - **Enhances** visibility with a distinct border and shadow for emphasis.
 * - **Adapts** colors, borders, and shadows for dark mode compatibility.
 * - **Supports** responsive design with consistent sizing across devices.
 */

/* Purpose: Button Wrapper - Positions the reset button and its confirmation popup */
.button-wrapper {
    /* Purpose: Positioning */
    position: relative; /* Allows absolute positioning of the confirmation popup */
    display: inline-block; /* Fits within the button group */
}

/* Purpose: Confirmation Message - Styles the reset confirmation popup in light mode */
.confirmation-message {
    /* Purpose: Positioning */
    position: absolute; /* Positions below the reset button */
    top: calc(100% + 5px); /* 5px below the button */
    left: 0; /* Aligns with the left edge of the button */
    z-index: 200; /* Ensures popup appears above other elements */
    
    /* Purpose: Appearance */
    background-color: white; /* White background in light mode */
    border: 2px solid red; /* Red border for emphasis */
    border-radius: var(--button-group-border-radius); /* Rounded corners from :root (default 10px) */
    box-shadow: var(--dropdown-box-shadow); /* Shadow from :root (default 0 8px 16px rgba(0, 0, 0, 0.2)) */
    
    /* Purpose: Sizing */
    width: 250px; /* Fixed width for consistency */
    box-sizing: border-box; /* Includes padding/border in width */
    
    /* Purpose: Spacing */
    padding: 10px; /* Internal padding */
    
    /* Purpose: Typography */
    font-family: Arial, sans-serif; /* Consistent font */
    font-size: 14px; /* Readable font size */
    color: #222; /* Dark gray text in light mode */
}

/* Purpose: Dark Mode Confirmation Message - Updates for dark mode */
body.dark-mode .confirmation-message {
    /* Purpose: Appearance */
    background-color: #333; /* Dark gray background */
    border: 2px solid #FF4444; /* Softer red border for emphasis */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Darker shadow */
    color: #d3d3d3; /* Light gray text for contrast */
}

/* Purpose: Confirmation Title - Styles the popup title in light mode */
.confirmation-title {
    /* Purpose: Typography */
    font-weight: bold; /* Bold text for emphasis */
    font-size: 14px; /* Slightly larger for emphasis */
    color: var(--group-title-color); /* Matches group titles (#222) in light mode */
    
    /* Purpose: Spacing */
    margin-bottom: 8px; /* Space below title */
    
    /* Purpose: Alignment */
    text-align: left; /* Align with message text */
}

/* Purpose: Dark Mode Confirmation Title - Updates for dark mode */
body.dark-mode .confirmation-title {
    /* Purpose: Appearance */
    color: #d3d3d3; /* Light gray text to match dark mode */
}

/* Purpose: Confirmation Message Paragraph - Styles the message text in light mode */
.confirmation-message p {
    /* Purpose: Spacing */
    margin: 0 0 10px 0; /* Space below message, no top margin */
    
    /* Purpose: Typography */
    line-height: 1.4; /* Improves readability */
    font-weight: normal; /* Ensure normal weight */
}

/* Purpose: Dark Mode Confirmation Message Paragraph - Updates for dark mode */
body.dark-mode .confirmation-message p {
    /* Purpose: Appearance */
    color: #d3d3d3; /* Light gray text for contrast */
}

/* Purpose: Action Buttons Container - Arranges Yes/No buttons */
.confirmation-message .action-buttons {
    /* Purpose: Layout */
    display: flex; /* Flexbox for horizontal arrangement */
    justify-content: space-between; /* Spaces buttons evenly */
    
    /* Purpose: Spacing */
    padding: 5px 0; /* Vertical padding */
}

/* Purpose: Action Buttons - Styles Yes/No buttons in light mode */
.confirmation-message .action-buttons button {
    /* Purpose: Layout */
    flex: 1; /* Buttons grow equally */
    
    /* Purpose: Spacing */
    margin: 0 5px; /* Horizontal spacing between buttons */
    padding: var(--button-padding); /* Padding from :root (default 8px 15px) */
    
    /* Purpose: Typography */
    font-size: var(--button-font-size); /* Font size from :root (default 14px) */
    
    /* Purpose: Appearance */
    background-color: var(--button-background-color); /* Blue background from :root (#007BFF) */
    color: var(--button-color); /* White text from :root */
    border: none; /* No border */
    border-radius: var(--button-border-radius); /* Rounded corners from :root (default 5px) */
    
    /* Purpose: Behavior */
    cursor: pointer; /* Indicates clickability */
    transition: background-color var(--button-transition-duration); /* Smooth hover transition from :root (default 0.2s) */
}

/* Purpose: Dark Mode Action Buttons - Updates for dark mode */
body.dark-mode .confirmation-message .action-buttons button {
    /* Purpose: Appearance */
    background-color: #007BFF; /* Keep blue background */
    color: #d3d3d3; /* Light gray text */
}

/* Purpose: Action Buttons Hover - Darkens buttons on hover in light mode */
.confirmation-message .action-buttons button:hover {
    /* Purpose: Appearance */
    background-color: var(--button-hover-color); /* Darker blue from :root (#0056b3) */
}

/* Purpose: Dark Mode Action Buttons Hover - Updates for dark mode */
body.dark-mode .confirmation-message .action-buttons button:hover {
    /* Purpose: Appearance */
    background-color: #3399FF; /* Lighter blue on hover */
}

/* Purpose: Reset Confirm Yes Button Hover - Specific hover style for Yes button in light mode */
.confirmation-message .action-buttons #resetConfirmYes:hover {
    /* Purpose: Appearance */
    background-color: red; /* Red on hover to indicate danger */
}

/* Purpose: Dark Mode Reset Confirm Yes Button Hover - Updates for dark mode */
body.dark-mode .confirmation-message .action-buttons #resetConfirmYes:hover {
    /* Purpose: Appearance */
    background-color: #FF4444; /* Softer red for dark mode */
}


/* ================================================================================================================== */
/*  More Actions Menu CSS    */
/* ================================================================================================================== */

/* SECTION: More Actions Menu - Ensure auto height and no clipping */
/*
 * Updated styles for the More menu to allow natural height expansion.
 * - Removes any fixed or max-height restrictions.
 * - Adds overflow-y: auto for scroll if content ever exceeds viewport.
 * - High z-index and fixed positioning remain for reliability.
 * - Temporary red border removed — clean final version.
 */

.more-actions-menu {
    position: fixed;
    background: var(--section-bg, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 220px;
    width: auto;
    max-height: 70vh;               /* Max 70% screen height */
    height: auto;                   /* Expands to content */
    overflow-y: auto;               /* Scroll if too tall */
    padding: 12px 0;
    z-index: 99999;
    display: none;
}

body.dark-mode .more-actions-menu {
    background: #2b2b2b;
    border-color: #444;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Ensure buttons inside menu have consistent padding */
.more-menu-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
}

.more-menu-button:hover {
    background: rgba(0, 123, 255, 0.1);
}

body.dark-mode .more-menu-button:hover {
    background: rgba(100, 150, 255, 0.25);
}

/* SECTION: Mobile Toolbar Optimization - Hide secondary buttons on small screens */
/*
 * Hides Wrap and Dark Mode buttons on mobile, allowing JS to move them to More menu.
 * - Improves thumb reachability and reduces crowding.
 * - Buttons are re-parented dynamically by JavaScript.
 */
@media (max-width: 1366px) {
    /* Only hide buttons when they're in the main toolbar, not when in menu */
    .position-button-group > #wrapButton,
    .position-button-group > #darkModeToggle {
        display: none; /* Hidden in main bar on mobile */
    }
}

/* SECTION: More Actions Menu - Divider for moved buttons */
/*
 * Adds visual separation before Wrap/Dark Mode in mobile menu.
 */

.more-menu-divider {
    margin: 8px 16px;
    border: none;
    border-top: 1px solid var(--border-color, #ccc);
}

body.dark-mode .more-menu-divider {
    border-color: #444;
}


/* ================================================================================================================== */
/*  Auto-save message CSS    */
/* ================================================================================================================== */

/* SECTION: Status Bar - Auto-save message styling */
/*
 * Styles the new status bar below the banner.
 * - Dedicated line for feedback messages.
 * - Centered text with subtle appearance.
 * - Smooth fade transition on show/hide.
 */

.status-bar {
    /* Purpose: Layout */
    text-align: center;           /* Center the message */
    padding: 10px 0 8px;          /* Vertical breathing room */
    min-height: 10px;             /* Consistent space even when hidden */

    /* Purpose: Appearance */
    font-size: 12px;
    color: #666;
    opacity: 0;                   /* Hidden by default */
    transition: opacity 0.4s ease;
}

.status-bar.show {
    opacity: 1;                   /* Visible when message active */
}

body.dark-mode .status-bar {
    color: #aaa;
}

/* Optional: Only show when there's text */
#autoSaveStatus:empty {
    display: none;
}