/* ==========================================================================
   AKS CREATE FORM STYLESHEET
   --------------------------------------------------------------------------
   Purpose: Styles for the 'AKS Create' form and its components.
   Organization: Styles are grouped into logical sections (variables, layout,
                 form elements, specific components, responsiveness).
   Maintainability: Uses CSS variables (--aks-*) for easy theme adjustments.
                   Class names follow a consistent BEM-like pattern (aks-block-element--modifier).
   ========================================================================== */

/* ==========================================================================
   1. Variables & Base Styles
   --------------------------------------------------------------------------
   Defines global theme settings (colors, fonts, spacing) and basic
   element styling (body, headings, links, images).
   ========================================================================== */

:root {
    /* --- Palette & Core Colors --- */
    --aks-primary-color: #007bff;
    --aks-secondary-color: #6c757d;
    --aks-success-color: #28a745;
    --aks-danger-color: #dc3545;
    --aks-warning-color: #ffc107;
    --aks-info-color: #17a2b8;
    --aks-light-color-bg: #f8f9fa; /* Light background, often for panels or disabled states */
    --aks-dark-color: #343a40; /* Dark text or elements */
    --aks-background-color: #ffffff; /* Main content background */
    /* --- Derived Colors (for hover states, etc.) --- */
    /* Calculated dark versions for hover effects (replaces non-standard darken()) */
    --aks-primary-color-dark: #0056b3; /* Darker primary for hover */
    --aks-secondary-color-dark: #545b62; /* Darker secondary for hover */
    /* --- Text & Typography --- */
    --aks-text-color: #212529; /* Default text color */
    --aks-text-muted: #6c757d; /* Muted/secondary text color (often for labels, help text) */
    --aks-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aks-font-size-base: 1rem; /* Base font size (usually 16px) */
    --aks-font-size-sm: 0.875rem; /* Smaller font size */
    --aks-font-size-lg: 1.25rem; /* Larger font size */
    --aks-font-weight-label: 500; /* Font weight for labels */
    /* --- Form Specific Colors --- */
    --aks-border-color: #dee2e6; /* Default border color */
    --aks-input-bg: #ffffff; /* Input background color */
    --aks-input-border: #ced4da; /* Input border color */
    --aks-input-focus-border: #86b7fe; /* Input border color on focus */
    --aks-input-focus-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* Input shadow on focus */
    --aks-required-color: var(--aks-danger-color); /* Color for required field indicators */
    /* --- Spacing Units --- */
    --aks-spacing-xs: 0.25rem; /* Extra small spacing (4px if 1rem=16px) */
    --aks-spacing-sm: 0.5rem; /* Small spacing (8px) */
    --aks-spacing-md: 1rem; /* Medium spacing (16px) */
    --aks-spacing-lg: 1.5rem; /* Large spacing (24px) */
    --aks-spacing-xl: 2.5rem; /* Extra large spacing (40px) */
    /* --- Borders & Shadows --- */
    --aks-border-radius: 0.25rem; /* Standard border radius */
    --aks-border-radius-sm: 0.2rem; /* Smaller border radius */
    --aks-box-shadow: none; /* Default no shadow */
    --aks-box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Larger shadow for containers */
    /* --- Layout --- */
    --aks-max-width: 1920px; /* *** CHANGED: Maximum width for the main container *** */
}

/* Apply box-sizing to all elements for consistent layout */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--aks-font-family-base);
    font-size: var(--aks-font-size-base);
    line-height: 1.6;
    color: var(--aks-text-color);
    background-color: var(--aks-light-color-bg); /* Page background */
    margin: 0 auto; /* Sets top/bottom to 0, left/right to auto - works with container centering */
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

/* Basic heading styles */
h1, h3, h4 {
    margin-top: 0;
    margin-bottom: var(--aks-spacing-md);
    font-weight: 500; /* Slightly bolder than normal */
    line-height: 1.3;
}

/* Responsive H1 font size */
h1 {
    font-size: calc(1.375rem + 1.5vw); /* Scales with viewport width */
}

h3 {
    font-size: 1.4rem; /* Used for section titles */
}

h4 {
    font-size: 1.15rem; /* Used for subsection titles */
}

/* Basic link styling */
a {
    color: var(--aks-primary-color);
    text-decoration: none; /* No underline by default */
    transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
}

    a:hover {
        color: var(--aks-primary-color-dark); /* Use the pre-calculated darker color */
        text-decoration: underline;
    }

/* Basic image styling */
img {
    vertical-align: middle; /* Align images nicely with text */
    max-width: 100%; /* Prevent images from overflowing containers */
    height: auto; /* Maintain aspect ratio */
}

/* Shared style for inline icons (often used with buttons or titles) */
.icon-buttons {
    width: 1em; /* Size relative to parent font size */
    height: 1em; /* Size relative to parent font size */
    margin-right: var(--aks-spacing-sm);
    vertical-align: -0.125em; /* Fine-tune vertical alignment */
}

/* ==========================================================================
   2. Layout & Container
   --------------------------------------------------------------------------
   Styles for the main page container and header structure.
   ========================================================================== */

/* Main content wrapper */
.aks-create-container {
    max-width: var(--aks-max-width); /* Uses the updated variable */
    margin: var(--aks-spacing-lg) auto; /* Center the container with top/bottom margin */
    padding: var(--aks-spacing-lg) var(--aks-spacing-xl); /* Inner spacing */
    background-color: var(--aks-background-color);
    border-radius: var(--aks-border-radius);
    box-shadow: var(--aks-box-shadow-lg); /* Add subtle depth */
    /* Note: Centering is achieved by 'margin: ... auto;' */
}

/* Header section within the container */
.aks-create-header {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Space out title and actions */
    align-items: center; /* Vertically align items */
    padding-bottom: var(--aks-spacing-md);
    margin-bottom: var(--aks-spacing-lg);
    border-bottom: 1px solid var(--aks-border-color); /* Visual separator */
    gap: var(--aks-spacing-md); /* Space between flex items if they wrap */
}

    /* Ensure the header's h1 takes available space */
    .aks-create-header h1 {
        margin-bottom: 0; /* Reset margin */
        flex-grow: 1; /* Allow h1 to grow */
    }

/* ==========================================================================
   3. Form Structure (Form, Sections, Titles)
   --------------------------------------------------------------------------
   Overall structure of the form, including sections, subsections,
   and their titles.
   ========================================================================== */

/* The main form element */
.aks-create-form {
    display: flex;
    flex-direction: column; /* Stack form content vertically */
    gap: var(--aks-spacing-xl); /* Space between direct children (usually sections) */
}

/* Container for multiple form sections */
.aks-form-sections {
    display: flex;
    flex-direction: column;
    gap: var(--aks-spacing-xl); /* Space between sections */
}

/* Individual form section (groups related fields) */
.aks-form-section {
    padding: 20px; /* Removed padding/border for streamline */
    border: none;
    background-color: transparent;
}

/* Subsection within a form section (for further grouping) */
.aks-form-section-subsection {
    margin-top: var(--aks-spacing-lg);
    padding-top: var(--aks-spacing-lg);
    border-top: 1px solid var(--aks-border-color); /* Separator line for subsections */
}

/* Styling for section and subsection titles */
.aks-section-title,
.aks-subsection-title {
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: var(--aks-spacing-sm); /* Space between icon and text */
    margin-bottom: var(--aks-spacing-lg); /* Space below title */
    padding-bottom: var(--aks-spacing-sm);
    border-bottom: none; /* No line directly under title text */
}

    /* Reset heading margins within titles */
    .aks-section-title h3,
    .aks-subsection-title h4 {
        margin-bottom: 0;
    }

    /* Adjust icon size within titles */
    .aks-section-title .icon-buttons,
    .aks-subsection-title .icon-buttons {
        flex-shrink: 0; /* Prevent icon from shrinking */
        width: 1.2em;
        height: 1.2em;
    }

/* Shared style for help buttons often placed in title areas */
.aks-help-button {
    margin-left: auto; /* Push button to the far right */
    padding: var(--aks-spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6; /* Slightly faded until hover */
    transition: opacity 0.15s ease-in-out;
}

    .aks-help-button:hover {
        opacity: 1; /* Fully visible on hover */
    }

    /* Reset icon margin if it's inside a help button */
    .aks-help-button img {
        margin-right: 0;
    }

/* ==========================================================================
   4. Form Rows & Groups
   --------------------------------------------------------------------------
   Defines the layout of form elements within rows and groups,
   controlling how fields are arranged horizontally and vertically.
   Uses Flexbox for responsive column layouts.
   ========================================================================== */

/* Container for holding form groups, arranges them horizontally */
.aks-form-row {
    display: flex;
    flex-wrap: wrap; /* Allow groups to wrap to the next line */
    gap: var(--aks-spacing-lg); /* Space between form groups in the row */
    margin-bottom: 0; /* Rely on group margin or overall section gap */
}

/* Wrapper for a single form element (label + input/select/etc.) */
.aks-form-group {
    flex: 1 1 100%; /* Mobile First: Each group takes full width initially */
    min-width: 200px; /* Prevent groups from becoming too narrow */
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    margin-bottom: var(--aks-spacing-lg); /* Space below each group (relevant when stacked) */
}

/* Special group for related inputs like Unit Size and Unit Type */
.aks-unit-group {
    display: flex;
    gap: var(--aks-spacing-sm); /* Space between the inputs within this group */
    /* Responsive sizing (`flex-basis`) is handled in media queries (Section 14) */
}

    /* Styling for form groups nested within a unit group */
    .aks-unit-group .aks-form-group {
        flex: 1; /* Allow nested groups to share space */
        margin-bottom: 0; /* Remove bottom margin as spacing is handled by parent gap */
    }

        /* Give the first input (usually size) more space within the unit group */
        .aks-unit-group .aks-form-group:first-child {
            flex: 2; /* Takes twice the space of the other item(s) */
        }

/* ==========================================================================
   5. Form Elements (Labels, Inputs, Selects, Textareas)
   --------------------------------------------------------------------------
   Styles for standard form controls.
   ========================================================================== */

/* Style for form labels */
.aks-label {
    display: block; /* Ensure label is on its own line */
    margin-bottom: var(--aks-spacing-sm); /* Space between label and input */
    font-weight: var(--aks-font-weight-label);
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted); /* Use muted color for labels */
}

/* Add asterisk to labels within required form groups */
.aks-form-group.aks-required > .aks-label::after {
    content: " *"; /* The asterisk */
    color: var(--aks-required-color); /* Use danger color */
    font-weight: normal; /* Keep asterisk normal weight */
}

/* Shared base styles for text inputs, selects, and textareas */
.aks-input,
.aks-select,
.aks-textarea {
    display: block; /* Take full width of parent */
    width: 100%;
    padding: 0.6rem 0.8rem; /* Internal padding */
    font-size: var(--aks-font-size-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--aks-text-color);
    background-color: var(--aks-input-bg);
    background-clip: padding-box; /* Important for border-radius and backgrounds */
    border: 1px solid var(--aks-input-border);
    appearance: none; /* Remove default browser styling (especially for selects) */
    border-radius: var(--aks-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth focus transition */
}

    /* Placeholder text styling */
    .aks-input::placeholder,
    .aks-textarea::placeholder {
        color: #aab0b6; /* Lighter color for placeholder */
        opacity: 1; /* Ensure visibility */
    }

    /* Focus state for inputs/selects/textareas */
    .aks-input:focus,
    .aks-select:focus,
    .aks-textarea:focus {
        color: var(--aks-text-color);
        background-color: var(--aks-input-bg);
        border-color: var(--aks-input-focus-border); /* Highlight border on focus */
        outline: 0; /* Remove default browser outline */
        box-shadow: var(--aks-input-focus-shadow); /* Add focus shadow */
    }

    /* Readonly input styling */
    .aks-input[readonly] {
        background-color: transparent; /* Less prominent background */
        border-color: var(--aks-border-color);
        color: var(--aks-text-muted);
        cursor: not-allowed; /* Indicate it's not interactive */
    }

        /* Remove focus effects from readonly inputs */
        .aks-input[readonly]:focus {
            box-shadow: none;
            border-color: var(--aks-border-color);
        }

/* Textarea specific styles */
.aks-textarea {
    min-height: calc(1.5em + (0.6rem * 2) + 2px); /* Calculate min height based on line-height, padding, border */
    resize: vertical; /* Allow vertical resizing only */
}

/* Select dropdown specific styles */
.aks-select {
    /* Custom dropdown arrow using SVG background */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.8rem center; /* Position arrow on the right */
    background-size: 16px 12px; /* Size of the arrow */
    padding-right: calc(0.8rem * 2.5 + 16px); /* Add padding to prevent text overlapping arrow */
}

    /* Disabled select styling */
    .aks-select:disabled {
        background-color: var(--aks-light-color-bg);
        color: var(--aks-text-muted);
        border-color: var(--aks-border-color);
    }

/* Container for input with a static prefix (e.g., '$' or 'http://') */
/* Container for input with a static prefix (e.g., '$' or 'http://') */
.aks-input-with-prefix {
    display: flex;
    align-items: stretch; /* Make prefix and input same height */
    width: 100%;
    position: relative; /* Add relative positioning to the container */
}

/* The static prefix element */
.aks-input-prefix {
    position: absolute; /* Position absolutely within the container */
    display: flex;
    align-items: center; /* Vertically center prefix text */
    height: 100%; /* Make prefix full height of container */
    padding: 0 0.8rem; /* Keep horizontal padding, remove vertical */
    font-size: var(--aks-font-size-base);
    font-weight: 400;
    line-height: 1.15;
    color: var(--aks-text-muted);
    white-space: nowrap; /* Prevent prefix text wrapping */
    z-index: 2; /* Above the input but below when focused */
    left: 0; /* Align to the left edge */
}

/* Adjust input when used with a prefix */
.aks-input-with-prefix .aks-input {
    width: 100%; /* Take full width of container */
    padding-left: 2rem; /* Add enough left padding to accommodate the $ sign */
    position: relative; /* Needed for z-index on focus */
    z-index: 1; /* Default z-index */
}

    /* Ensure focused input appears above prefix visually */
    .aks-input-with-prefix .aks-input:focus {
        z-index: 3; /* Higher than the prefix when focused */
        outline: none; /* Remove default outline */
        box-shadow: var(--aks-input-focus-shadow); /* Use your existing box shadow variable */
        border-color: var(--aks-input-focus-border); /* Use your existing border color variable */
    }

/* ==========================================================================
   6. Checkboxes & Item Flag Badges
   --------------------------------------------------------------------------
   Styles for two types of checkbox controls:
   A. Standard checkboxes with labels.
   B. Checkboxes visually represented as selectable "Flag Badges".
   ========================================================================== */

/* --- A. Standard Checkbox Styling --- */
/* Targets standard checkboxes, EXCLUDING those used within the badge row */


.aks-form-check:not(.aks-checkbox-row .aks-form-check) {
    display: flex;
    align-items: flex-start; /* Align checkbox and label text nicely */
    gap: var(--aks-spacing-sm); /* Space between checkbox and label */
    min-height: calc(1.5em + var(--aks-spacing-xs)); /* Ensure enough height */
    padding-left: 0; /* Remove default padding if any */
    margin-bottom: var(--aks-spacing-md); /* Space below checkbox group */
}


    /* The actual checkbox input (standard style) */
    .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-form-check-input {
        flex-shrink: 0; /* Prevent checkbox from shrinking */
        width: 1.15em;
        height: 1.15em;
        margin-top: 0.175em; /* Align checkbox with the first line of text */
        vertical-align: top;
        background-color: var(--aks-input-bg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid var(--aks-input-border);
        appearance: none; /* Remove default browser checkbox style */
        color-adjust: exact; /* Ensure colors are rendered accurately */
        border-radius: var(--aks-border-radius-sm);
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        cursor: pointer;
    }

        /* Checked state for standard checkbox */
        .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-form-check-input:checked {
            background-color: var(--aks-primary-color);
            border-color: var(--aks-primary-color);
            /* Checkmark icon using SVG */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
        }

        /* Focus state for standard checkbox */
        .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-form-check-input:focus {
            border-color: var(--aks-input-focus-border);
            outline: 0;
            box-shadow: var(--aks-input-focus-shadow);
        }

    /* Label for standard checkbox */
    .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-form-check-label {
        margin-bottom: 0;
        cursor: pointer; /* Indicate label is clickable */
        color: var(--aks-text-color);
        font-size: var(--aks-font-size-base);
    }



    /* Help text associated with a standard checkbox */
    .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-help-text {
        margin-top: var(--aks-spacing-xs); /* Space above help text */
        flex-basis: 100%; /* Make help text take full width below */
        margin-left: calc(1.15em + var(--aks-spacing-sm)); /* Indent help text to align with label */
        font-size: var(--aks-font-size-sm);
    }

/* Special alignment for standard checkboxes directly within a form section (not in a group) */
.aks-form-section > .aks-form-check:not(.aks-checkbox-row .aks-form-check) {
    align-items: center; /* Vertically center checkbox and label if label is short */
}
    /* Adjust help text alignment when checkbox is directly in section */
    .aks-form-section > .aks-form-check:not(.aks-checkbox-row .aks-form-check) .aks-help-text {
        margin-left: 0;
        flex-basis: auto; /* Allow it to sit alongside label if space permits */
        margin-top: 0;
    }


/* --- B. Item Flag Badge Styling --- */
/* Styles the container subsection when it directly contains the checkbox flag row */
/* Uses :has() to apply styles ONLY if the specified child exists. Browser support for :has() is now good, but check if targeting older browsers. */
.aks-form-section-subsection:has(> .aks-form-row.aks-checkbox-row) {
    margin-top: var(--aks-spacing-lg);
    background-color: var(--aks-light-color-bg); /* Give the badge area a distinct background */
    border: 1px solid var(--aks-border-color);
    padding: var(--aks-spacing-lg);
    border-radius: var(--aks-border-radius);
    border-top: 1px solid var(--aks-border-color); /* Keep top border separator */
}

    /* Adjust title styling within the badge container subsection */
    .aks-form-section-subsection:has(> .aks-form-row.aks-checkbox-row) .aks-subsection-title {
        margin-bottom: var(--aks-spacing-md);
        padding-bottom: 0;
        border-bottom: none;
    }

        .aks-form-section-subsection:has(> .aks-form-row.aks-checkbox-row) .aks-subsection-title h4 {
            margin-bottom: 0;
        }

/* The row containing the checkbox badges */
.aks-form-section-subsection .aks-form-row.aks-checkbox-row {
    display: flex;
    /* Force badges onto a single row, overriding default wrapping. Important! */
    flex-wrap: nowrap !important;
    /* Distribute badges evenly. Use `flex-start` or `center` for different alignment. */
    justify-content: space-evenly !important;
    align-items: flex-start; /* Align items to the top */
    gap: var(--aks-spacing-md); /* Space between badges */
    overflow-x: auto; /* Allow horizontal scrolling if badges overflow */
    padding-bottom: var(--aks-spacing-sm); /* Space for scrollbar */
    /* Custom scrollbar styling (optional) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--aks-border-color) transparent; /* Firefox */
}
    /* Custom scrollbar styling for WebKit browsers (Chrome, Safari) */
    .aks-form-section-subsection .aks-form-row.aks-checkbox-row::-webkit-scrollbar {
        height: 6px;
    }

    .aks-form-section-subsection .aks-form-row.aks-checkbox-row::-webkit-scrollbar-track {
        background: transparent;
    }

    .aks-form-section-subsection .aks-form-row.aks-checkbox-row::-webkit-scrollbar-thumb {
        background-color: var(--aks-border-color);
        border-radius: 3px;
    }

        .aks-form-section-subsection .aks-form-row.aks-checkbox-row::-webkit-scrollbar-thumb:hover {
            background-color: var(--aks-text-muted);
        }


/* Container for each individual badge (which includes hidden input, label, help text) */
.aks-checkbox-row .aks-form-check {
    display: block; /* Override flex settings from standard checkbox */
    /* Ensure badges don't grow or shrink excessively, size based on content */
    flex: 0 1 auto;
    margin-bottom: 0 !important; /* Remove margin from standard checkbox */
    text-align: center; /* Center the badge label and help text */
    position: relative; /* Needed for absolute positioning of hidden input */
}

    /* TECHNIQUE: Visually hide the actual checkbox input but keep it accessible */
    /* This allows us to style the label as the interactive element */
    .aks-checkbox-row .aks-form-check input[type="checkbox"].aks-form-check-input {
        position: absolute; /* Remove from layout flow */
        opacity: 0; /* Make invisible */
        /* Ensure it takes up no space */
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        /* Position off-screen (alternative technique) */
        margin: -1px;
        padding: 0;
        border: 0;
    }

    /* Style the label to look like a clickable badge */
    .aks-checkbox-row .aks-form-check label.aks-form-check-label {
        display: inline-block; /* Allow padding and centering */
        padding: var(--aks-spacing-xs) var(--aks-spacing-md); /* Badge padding */
        border-radius: var(--aks-border-radius);
        border: 1px solid var(--aks-border-color);
        background-color: var(--aks-background-color); /* Default background */
        color: var(--aks-text-muted); /* Default text color */
        font-size: var(--aks-font-size-sm);
        font-weight: 500;
        cursor: pointer; /* Indicate interactivity */
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        user-select: none; /* Prevent text selection on click */
        margin-bottom: var(--aks-spacing-xs); /* Space between badge and help text */
        text-align: center;
        line-height: 1.5;
        white-space: nowrap; /* Prevent badge text wrapping */
    }

    /* Hover state for INACTIVE badge */
    .aks-checkbox-row .aks-form-check input[type="checkbox"].aks-form-check-input:not(:checked) + label.aks-form-check-label:hover {
        border-color: var(--aks-text-muted);
        background-color: var(--aks-light-color-bg); /* Subtle hover background */
    }

    /* Active (checked) state for the badge */
    /* Uses the adjacent sibling selector (+) to style the label based on the hidden input's checked state */
    .aks-checkbox-row .aks-form-check input[type="checkbox"].aks-form-check-input:checked + label.aks-form-check-label {
        background-color: var(--aks-primary-color);
        border-color: var(--aks-primary-color);
        color: #fff; /* White text on primary background */
    }

        /* Hover state for ACTIVE badge */
        .aks-checkbox-row .aks-form-check input[type="checkbox"].aks-form-check-input:checked + label.aks-form-check-label:hover {
            background-color: var(--aks-primary-color-dark); /* Use darker primary color */
            border-color: var(--aks-primary-color-dark);
        }

    /* Focus state for the badge (via focus on the hidden input) */
    /* :focus-visible ensures outline only appears for keyboard navigation, not mouse clicks */
    .aks-checkbox-row .aks-form-check input[type="checkbox"].aks-form-check-input:focus-visible + label.aks-form-check-label {
        outline: 2px solid var(--aks-primary-color); /* Clear focus indicator */
        outline-offset: 2px; /* Space between badge and outline */
    }

    /* Help text displayed below each badge */
    .aks-checkbox-row .aks-form-check small.aks-help-text {
        display: block !important; /* Ensure it displays as a block */
        width: 100% !important; /* Take full width under the badge */
        margin-top: var(--aks-spacing-xs) !important; /* Consistent top margin */
        margin-left: 0 !important; /* Reset any inherited margin */
        padding-left: 0;
        flex-basis: auto; /* Reset flex basis */
        font-size: 0.8em; /* Smaller text */
        line-height: 1.3;
        color: var(--aks-text-muted);
        white-space: normal; /* Allow help text to wrap */
        text-align: center;
    }

/* ==========================================================================
   7. Validation & Help Text (General)
   --------------------------------------------------------------------------
   Styles for displaying validation errors and general help text
   associated with form fields.
   ========================================================================== */

/* Container for displaying a summary of validation errors */
.aks-validation-summary {
    color: var(--aks-danger-color); /* Error text color */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c2c7; /* Red border */
    border-left-width: 4px; /* Thicker left border for emphasis */
    border-radius: var(--aks-border-radius);
    padding: var(--aks-spacing-md);
    margin-bottom: var(--aks-spacing-lg); /* Space below summary */
}

    /* List styling within validation summary */
    .aks-validation-summary ul {
        margin-bottom: 0; /* Remove default list margin */
        padding-left: var(--aks-spacing-lg); /* Indent list items */
    }

/* Style for individual validation messages displayed below fields */
.aks-validation-message {
    display: block; /* Ensure message is on its own line */
    width: 100%;
    margin-top: var(--aks-spacing-xs); /* Space between input and message */
    font-size: var(--aks-font-size-sm);
    color: var(--aks-danger-color); /* Error text color */
}

/* General help text styling (NOT specific to checkbox badges) */
/* Targets .aks-help-text unless it's the small element within a checkbox badge row */
.aks-help-text:not(.aks-checkbox-row .aks-form-check small) {
    display: block;
    margin-top: var(--aks-spacing-xs);
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted);
    line-height: 1.4;
}

/* Apply error styling to inputs/selects/textareas with validation errors */
.aks-input.input-validation-error,
.aks-select.input-validation-error,
.aks-textarea.input-validation-error {
    border-color: var(--aks-danger-color); /* Red border for invalid fields */
}

    /* Focus state for invalid inputs */
    .aks-input.input-validation-error:focus,
    .aks-select.input-validation-error:focus,
    .aks-textarea.input-validation-error:focus {
        border-color: var(--aks-danger-color);
        /* Red focus shadow */
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

/* ==========================================================================
   8. Buttons
   --------------------------------------------------------------------------
   Styles for various button types and actions.
   ========================================================================== */

/* Base button style */
.aks-btn {
    display: inline-flex; /* Use flex to align text and potential icons */
    align-items: center;
    justify-content: center;
    gap: var(--aks-spacing-sm); /* Space between icon and text if present */
    padding: 0.6rem 1.2rem; /* Button padding */
    font-size: var(--aks-font-size-base);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none; /* Remove underline */
    vertical-align: middle;
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    border: 1px solid transparent; /* Start with transparent border */
    border-radius: var(--aks-border-radius);
    /* Smooth transitions for hover/focus states */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    /* Accessible focus state for buttons (keyboard navigation) */
    .aks-btn:focus-visible {
        outline: 2px solid var(--aks-primary-color);
        outline-offset: 2px;
        box-shadow: none; /* Don't use focus shadow if outline is present */
    }

    /* Disabled button state */
    .aks-btn:disabled,
    .aks-btn.disabled { /* Allow adding .disabled class as alternative */
        pointer-events: none; /* Prevent clicks */
        opacity: 0.65; /* Visually indicate disabled state */
    }

/* Primary action button */
.aks-btn-primary {
    color: #fff; /* White text */
    background-color: var(--aks-primary-color);
    border-color: var(--aks-primary-color);
}

    .aks-btn-primary:hover {
        color: #fff;
        background-color: var(--aks-primary-color-dark); /* Darker on hover */
        border-color: var(--aks-primary-color-dark);
    }

/* Secondary action button */
.aks-btn-secondary {
    color: #fff;
    background-color: var(--aks-secondary-color);
    border-color: var(--aks-secondary-color);
}

    .aks-btn-secondary:hover {
        color: #fff;
        background-color: var(--aks-secondary-color-dark); /* Darker on hover */
        border-color: var(--aks-secondary-color-dark);
    }

/* Cancel or Secondary Outline button style */
.aks-btn-cancel,
.aks-btn-secondary-outline {
    color: var(--aks-secondary-color);
    border-color: var(--aks-border-color); /* Use standard border color */
    background-color: transparent; /* No background fill */
    font-weight: 400; /* Lighter weight for less emphasis */
}

    .aks-btn-cancel:hover,
    .aks-btn-secondary-outline:hover {
        color: var(--aks-dark-color);
        background-color: var(--aks-light-color-bg); /* Light background on hover */
        border-color: var(--aks-light-color-bg);
    }

/* Danger Outline button style (e.g., for delete actions) */
.aks-btn-danger-outline {
    color: var(--aks-danger-color);
    border-color: var(--aks-danger-color);
    background-color: transparent;
}

    .aks-btn-danger-outline:hover {
        color: #fff; /* White text on hover */
        background-color: var(--aks-danger-color); /* Fill with danger color on hover */
        border-color: var(--aks-danger-color);
    }

/* Small button size modifier */
.aks-btn-sm {
    padding: var(--aks-spacing-xs) var(--aks-spacing-sm); /* Smaller padding */
    font-size: var(--aks-font-size-sm);
    border-radius: var(--aks-border-radius-sm);
}

/* Container for form action buttons (e.g., Submit, Cancel) */
.aks-form-actions {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: var(--aks-spacing-md); /* Space between buttons */
    justify-content: flex-end; /* Align buttons to the right by default */
    margin-top: var(--aks-spacing-lg); /* Space above action area */
    padding-top: var(--aks-spacing-lg); /* Space below separator line */
    border-top: 1px solid var(--aks-border-color); /* Separator line */
}

/* ==========================================================================
   9. Badges (General - Non-Checkbox)
   --------------------------------------------------------------------------
   Styles for general purpose small status indicator badges.
   Note: Some colors are based on `title` attributes, which might be
         less robust than using dedicated classes. Consider adding classes
         like `.aks-badge-warning`, `.aks-badge-auto` if possible.
   ========================================================================== */

/* Base badge style */
.aks-badge {
    display: inline-block; /* Treat as inline element but allow padding */
    padding: 0.3em 0.6em; /* Padding relative to font size */
    font-size: 0.75em; /* Smaller font size */
    font-weight: 600; /* Bolder text */
    line-height: 1; /* Keep height tight */
    color: #fff; /* Default white text */
    text-align: center;
    white-space: nowrap; /* Prevent wrapping */
    vertical-align: baseline; /* Align nicely with surrounding text */
    border-radius: var(--aks-border-radius-sm);
}

    /* Warning badges (yellow) - targeting based on title attribute */
    .aks-badge[title*="Normalized prices"],
    .aks-badge[title*="significant"],
    .aks-badge[title*="?"] { /* Capture help/question mark badge */
        background-color: var(--aks-warning-color);
        color: var(--aks-dark-color); /* Dark text on yellow background */
    }

    /* Info badges (blue) - targeting class and title attribute */
    .aks-badge-info, /* Prefer using a class */
    .aks-badge[title*="Auto"], /* Capture Auto badge */
    .aks-badge[title*="Optional"], /* Capture Optional badge */
    .aks-badge[title*="auto"] { /* Capture lowercase auto badge */
        background-color: var(--aks-info-color);
        color: #fff;
    }

    /* Active status badge (green) */
    .aks-badge.active {
        background-color: var(--aks-success-color);
        color: #fff;
    }

    /* Inactive status badge (gray) */
    .aks-badge.inactive {
        background-color: var(--aks-secondary-color);
        color: #fff;
    }

/* ==========================================================================
   10. Specific Panels (Disposable Analysis, Price Impact)
   --------------------------------------------------------------------------
   Styles for custom panels displaying specific information.
   ========================================================================== */

/* Panel for Disposable Analysis */
.aks-disposable-analysis {
    background-color: var(--aks-light-color-bg); /* Light background */
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius);
    padding: var(--aks-spacing-md);
    margin-bottom: var(--aks-spacing-md); /* Space below panel */
}

/* Summary grid within the disposable analysis panel */
.aks-disposable-summary {
    display: grid;
    /* Create responsive columns: fit as many columns as possible with a min width of 160px */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--aks-spacing-md) var(--aks-spacing-lg); /* Row and column gaps */
    margin-bottom: var(--aks-spacing-sm);
}

/* Elements within the disposable summary grid */
.aks-disposable-type,
.aks-disposable-count,
.aks-disposable-total,
.aks-disposable-price {
    display: flex;
    flex-direction: column; /* Stack label/value vertically */
}

/* Highlighted price value */
.aks-value-price {
    font-weight: 600;
    color: var(--aks-success-color); /* Green color for prices */
}

/* Detail items often shown below the summary */
.aks-detail-item {
    margin-top: var(--aks-spacing-sm);
    font-size: var(--aks-font-size-sm);
}

/* Style for empty state messages (e.g., "No items to display") */
.aks-empty-state {
    padding: var(--aks-spacing-md);
    text-align: center;
    color: var(--aks-text-muted);
    background-color: var(--aks-light-color-bg);
    border: 1px dashed var(--aks-border-color); /* Dashed border for distinction */
    border-radius: var(--aks-border-radius);
}

/* Smaller version of the empty state */
.aks-empty-state-small {
    padding: var(--aks-spacing-sm);
    font-size: var(--aks-font-size-sm);
}

/* Display area for price impact information */
.aks-price-impact-display {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: var(--aks-spacing-md); /* Space between elements */
    background-color: transparent; /* No background */
    padding: var(--aks-spacing-sm) 0;
    border-radius: 0;
    margin-top: var(--aks-spacing-sm);
    font-size: var(--aks-font-size-sm);
    border: none; /* No border */
}

/* Arrow icon used in price impact display */
.aks-price-impact-arrow {
    font-size: 1.5em; /* Larger arrow */
    color: var(--aks-text-muted);
}

/* Shared label style within price impact display */
.aks-price-impact-label {
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted);
    margin-bottom: var(--aks-spacing-xs);
}

/* Shared value style within price impact display */
.aks-price-impact-value {
    font-weight: 500;
    color: var(--aks-text-color);
}

/* Special styling for significant normalized price impact */
.aks-price-impact-normalized.aks-price-impact-significant .aks-price-impact-value {
    color: var(--aks-danger-color); /* Red color for significant impact */
    font-weight: bold;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border-bottom: 2px solid var(--aks-danger-color); /* Underline for emphasis */
}

/* ==========================================================================
   11. Override Section Specifics
   --------------------------------------------------------------------------
   Styles dedicated to the 'Override Options' panel and its contents.
   Uses the ID selector #overrideOptionsPanel.
   ========================================================================== */

/* Main container for the override options panel */
#overrideOptionsPanel {
    margin-top: var(--aks-spacing-lg);
    padding: var(--aks-spacing-lg);
    border: 1px solid var(--aks-border-color);
    background-color: var(--aks-light-color-bg); /* Light background for the panel */
    border-radius: var(--aks-border-radius);
}

    /* Ensure subsection separators are visible within the override panel */
    #overrideOptionsPanel .aks-form-section-subsection {
        border-top: 1px solid var(--aks-border-color);
    }

/* Info panel usually shown at the top of the override section */
.aks-override-info-panel {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: space-between; /* Space out status and actions */
    align-items: center;
    gap: var(--aks-spacing-md); /* Space between items */
    padding: var(--aks-spacing-md);
    margin-bottom: var(--aks-spacing-md);
    background-color: #d1e7dd; /* Light green background (success-like) */
    border: 1px solid #badbcc;
    border-left-width: 4px; /* Thicker left border */
    border-radius: var(--aks-border-radius);
    margin-top: 20px;
    
}

/* Status indicator within the override info panel */
.aks-override-status {
    display: flex;
    align-items: center;
    gap: var(--aks-spacing-sm);
    font-weight: 500;
}
    /* Active override status styling */
    .aks-override-status.aks-override-active {
        color: var(--aks-success-color); /* Green text for active status */
    }

/* Meta information within the override info panel (e.g., user, date) */
.aks-override-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aks-spacing-md);
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted);
}

/* Container for actions within the override info panel */
.aks-override-actions {
    margin-left: auto; /* Push actions to the right */
}

/* Grid container for individual override items */
.aks-override-items {
    display: flex;
    gap: 7px;
}

/* Styling for a single override item card */
.aks-override-item {
    background-color: var(--aks-background-color); /* White background for card */
    padding: var(--aks-spacing-md);
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius-sm);
    flex: 1;
    justify-content: center !important;
    flex-direction: column; /* Stack header and value */
    gap: var(--aks-spacing-xs); /* Space between elements in the card */
    position: relative; /* Needed for absolute positioning of checkbox */
}

/* Header section of an override item card */
.aks-override-header {
    display: flex;
    flex-direction: column;
    gap: var(--aks-spacing-sm);
    font-size: var(--aks-font-size-sm);
    margin-bottom: var(--aks-spacing-xs);
}
    /* Push badge to the right in the header */
    .aks-override-header .aks-badge {
        background: salmon!important;
    }

/* Icon within override item header */
.aks-override-icon {
    color: var(--aks-text-muted);
    display: flex;
    align-items: center;
    
}

/* Name/label of the override item */
.aks-override-name {
    font-weight: 500;
}

/* Value display for the override item */
.aks-override-value {
    font-weight: 500;
    font-size: var(--aks-font-size-base);
    word-break: break-word; /* Prevent long values overflowing */
    color: var(--aks-text-color);
}
    /* Style for when the value is not set */
    .aks-override-value.not-set {
        color: var(--aks-text-muted);
        font-style: italic;
    }
    /* Style for pending changes */
    .aks-override-value.will-save {
        color: var(--aks-success-color);
        font-weight: 500;
    }

/* Checkbox specifically for toggling an override */
.aks-override-checkbox {
    position: absolute; /* Position relative to .aks-override-item */
    top: var(--aks-spacing-sm); /* Position in top-right corner */
    right: var(--aks-spacing-sm);
    /* Inherits .aks-form-check-input styles. */
    /* Add specific override checkbox styles here if needed, e.g., different size/color. */
    /* Example: */
    /* width: 1.3em; */
    /* height: 1.3em; */
}


/* ==========================================================================
   12. Help Modals
   --------------------------------------------------------------------------
   Styles for modal dialogs used to display help content.
   Visibility is typically controlled by JavaScript adding/removing
   the `.aks-modal-show` class.
   ========================================================================== */

/* Modal backdrop and container */
.aks-help-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Position relative to viewport */
    z-index: 1050; /* Appear above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Changed from hidden to auto to allow scrolling if needed */
    outline: 0;
    background-color: rgba(40, 40, 40, 0.6); /* Semi-transparent backdrop */
}


    /* Class added by JS to show the modal */
    .aks-help-modal.aks-modal-show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* The actual modal dialog box */
.aks-help-modal-content {
    position: relative;
    display: flex;
    flex-direction: column; /* Stack header, body */
    width: 90%; /* Responsive width */
    max-width: 700px; /* Max width for larger screens */
    max-height: 90vh; /* Max height to prevent overflow */
    margin: auto; /* Added to ensure centering */
    pointer-events: auto; /* Allow clicks inside modal */
    background-color: var(--aks-background-color);
    background-clip: padding-box;
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius);
    outline: 0;
    box-shadow: var(--aks-box-shadow-lg); /* Add shadow */
    transform: translate(0, 0); /* Reset any transforms that might affect centering */
}

/* Modal header section */
.aks-help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out title and close button */
    padding: var(--aks-spacing-md);
    border-bottom: 1px solid var(--aks-border-color); /* Separator line */
}
    /* Modal title styling */
    .aks-help-modal-header h3 {
        margin-bottom: 0;
        color: var(--aks-dark-color);
    }

/* Modal close button (typically 'X') */
.aks-help-modal-close {
    padding: var(--aks-spacing-sm);
    /* Negative margin pulls button into padding area for larger click target */
    margin: calc(-1 * var(--aks-spacing-md));
    background-color: transparent;
    border: 0;
    font-size: 1.5rem; /* Larger close icon */
    font-weight: 700;
    line-height: 1;
    color: var(--aks-secondary-color);
    text-shadow: none;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}

    .aks-help-modal-close:hover {
        opacity: 1;
        color: var(--aks-dark-color);
    }

/* Modal body content area */
.aks-help-modal-body {
    position: relative;
    flex: 1 1 auto; /* Allow body to grow and shrink */
    padding: var(--aks-spacing-lg);
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
    color: var(--aks-text-color);
}
    /* List styling within modal body */
    .aks-help-modal-body ul {
        padding-left: var(--aks-spacing-lg);
        margin-bottom: var(--aks-spacing-md);
    }

    .aks-help-modal-body li {
        margin-bottom: var(--aks-spacing-sm);
    }
    /* Paragraph styling within modal body */
    .aks-help-modal-body p {
        margin-bottom: var(--aks-spacing-md);
        line-height: 1.7; /* Slightly increased line height for readability */
    }
    /* Heading styling within modal body */
    .aks-help-modal-body h4 {
        margin-top: var(--aks-spacing-lg);
        margin-bottom: var(--aks-spacing-sm);
        color: var(--aks-dark-color);
        border-bottom: none;
        padding-bottom: 0;
    }

/* Style for code examples or highlighted sections in help */
.aks-help-example {
    background-color: var(--aks-light-color-bg);
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius-sm);
    padding: var(--aks-spacing-md);
    margin: var(--aks-spacing-md) 0;
    font-size: var(--aks-font-size-sm);
}

    .aks-help-example p:last-child {
        margin-bottom: 0; /* Remove margin from last paragraph in example */
    }

/* Style for inline highlighted text within help */
.aks-help-highlight {
    font-weight: 500;
    background-color: #fff3cd; /* Light yellow highlight */
    color: #664d03; /* Dark text on yellow */
    padding: var(--aks-spacing-xs) var(--aks-spacing-sm);
    display: inline-block;
    border-radius: 3px;
}

/* Style for tips or notes within help */
.aks-help-tip {
    font-style: normal; /* Override italic if needed */
    font-weight: 400;
    color: var(--aks-text-muted);
    border-left: 3px solid var(--aks-info-color); /* Blue left border */
    padding: var(--aks-spacing-xs) var(--aks-spacing-sm);
    margin: var(--aks-spacing-md) 0;
    display: block;
    background-color: transparent;
}

/* ==========================================================================
   13. Debug Panel
   --------------------------------------------------------------------------
   Optional panel for displaying debugging information.
   ========================================================================== */

.aks-debug-panel {
    background-color: var(--aks-light-color-bg);
    border: 1px dashed var(--aks-border-color); /* Dashed border indicates non-production element */
    padding: var(--aks-spacing-md);
    margin-top: var(--aks-spacing-xl); /* Extra space above debug panel */
    border-radius: var(--aks-border-radius);
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted);
}
    /* Debug panel title */
    .aks-debug-panel h4 {
        margin-bottom: var(--aks-spacing-md);
        color: var(--aks-secondary-color);
        border-bottom: none;
        padding-bottom: 0;
        font-size: 1rem;
        font-weight: 500;
    }
    /* List styling within debug panel */
    .aks-debug-panel ul {
        padding-left: var(--aks-spacing-lg);
        list-style: disc; /* Use standard disc bullets */
    }


/* ==========================================================================
   14. Responsiveness
   --------------------------------------------------------------------------
   Media queries to adjust layout for different screen sizes.
   Uses a mobile-first approach (base styles apply to small screens,
   overrides are added for larger screens).
   ========================================================================== */

/* --- Medium Screens and Up (Tablets, >= 768px) --- */
@media (min-width: 768px) {

    /* --- General Multi-Column Form Group Layout --- */
    /* Make form groups take up half the width (2 columns) */
    /* Calculation: 50% width minus half the gap space */
    .aks-form-group {
        flex-basis: calc(50% - var(--aks-spacing-lg) / 2);
    }

        /* Rules to make specific form groups span the full width (1 column) */
        /* - A group that is the *only* child in its row */
        /* - A group containing a textarea (textareas usually need full width) */
        /* - A group directly within a section/subsection (unless it's a unit group or checkbox badge) */
        /* - Explicitly target groups containing textareas using :has() for robustness */
        .aks-form-group:only-child:not(.aks-checkbox-row .aks-form-check), /* Only item in row (excluding checkbox badges) */
        .aks-form-group:has(> .aks-textarea), /* Group contains a textarea */
        .aks-form-section > .aks-form-group:not(.aks-unit-group):not(.aks-checkbox-row .aks-form-check), /* Direct child, not unit/badge */
        .aks-form-section-subsection > .aks-form-group:not(.aks-unit-group):not(.aks-checkbox-row .aks-form-check) /* Direct child, not unit/badge */ {
            flex-basis: 100%; /* Span full width */
        }

    .aks-form-section {
        padding: 20px;
    }

    .aks-form-sections {
        padding: 0;
        margin: 0;
    }

    .aks-create-header {
        padding: 20px;
    }

    .aks-create-container {
        /* Keep container specific settings as they are, centering/max-width handles overall layout */
        /* Padding adjustments might be needed based on visual design preference at this width */
    }

    .aks-create-form {
    }
    /* Remove the direct child textarea rule as :has covers it more reliably */
    /* .aks-form-group > .aks-textarea, */


    /* --- Unit Group Sizing (Special Case) --- */
    /* Make the combined unit group take up half the width */
    .aks-unit-group {
        flex-basis: calc(50% - var(--aks-spacing-lg) / 2);
    }
}

/* --- Large Screens and Up (Desktops, >= 1200px) --- */
@media (min-width: 1200px) {

    /* --- General Multi-Column Form Group Layout --- */
    /* Make form groups take up one-third the width (3 columns) */
    /* Calculation: 33.333% width minus two-thirds of the gap space */
    .aks-form-group {
        flex-basis: calc(33.333% - var(--aks-spacing-lg) * 2 / 3);
    }

        /* Rules to make specific form groups span the full width (1 column) - Repeated for this breakpoint */
        .aks-form-group:only-child:not(.aks-checkbox-row .aks-form-check),
        .aks-form-group:has(> .aks-textarea),
        .aks-form-section > .aks-form-group:not(.aks-unit-group):not(.aks-checkbox-row .aks-form-check),
        .aks-form-section-subsection > .aks-form-group:not(.aks-unit-group):not(.aks-checkbox-row .aks-form-check) {
            flex-basis: 100%; /* Span full width */
        }
    /* Remove the direct child textarea rule as :has covers it more reliably */
    /* .aks-form-group > .aks-textarea, */

    /* --- Unit Group Sizing (Special Case) --- */
    /* Make the combined unit group take up one-third the width */
    .aks-unit-group {
        flex-basis: calc(33.333% - var(--aks-spacing-lg) * 2 / 3);
    }
}


/* --- Small Screen Adjustments (Mobile, < 768px) --- */
@media (max-width: 767.98px) {

    /* Adjust container padding and remove shadow */
    .aks-create-container {
        margin: var(--aks-spacing-md) auto; /* Reduce top/bottom margin */
        padding: var(--aks-spacing-md); /* Reduce padding */
        box-shadow: none; /* Remove shadow on small screens */
        /* Max-width is still controlled by the variable, centering by 'auto' margin */
    }

    /* Stack header items vertically */
    .aks-create-header {
        flex-direction: column;
        align-items: flex-start; /* Align items to the left */
    }
        /* Align button to the start in stacked header */
        .aks-create-header .aks-btn {
            align-self: flex-start;
        }

    /* Remove gap between groups in a row when they stack */
    .aks-form-row {
        gap: 0; /* Rely on group margin-bottom for spacing */
    }

    /* Force all form groups (including unit groups) to stack */
    .aks-form-group,
    .aks-unit-group {
        flex-basis: 100% !important; /* Override larger screen basis, force full width */
        margin-bottom: var(--aks-spacing-lg); /* Ensure space below each stacked group */
    }

    /* Stack items within the unit group */
    .aks-unit-group {
        flex-direction: column;
        gap: var(--aks-spacing-md); /* Space between stacked unit inputs */
        /* margin-bottom is already set by the rule above */
    }
        /* Remove bottom margin from items inside the now-stacked unit group */
        .aks-unit-group .aks-form-group {
            margin-bottom: 0;
        }

    /* Checkbox flag badges are handled by `nowrap` and `overflow-x: auto` in their base styles */

    /* Center form action buttons */
    .aks-form-actions {
        justify-content: center;
    }
        /* Make action buttons grow but limit max width */
        .aks-form-actions .aks-btn {
            flex-grow: 1;
            max-width: 200px;
        }

    /* Stack items in the override info panel */
    .aks-override-info-panel {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Make override actions take full width */
    .aks-override-actions {
        margin-left: 0;
        width: 100%;
    }
        /* Make button inside override actions take full width */
        .aks-override-actions .aks-btn {
            width: 100%;
        }

    /* Stack override item cards vertically */
    .aks-override-items {
        grid-template-columns: 1fr; /* Force single column grid */
    }
}

/* --- Extra Small Screen Adjustments (Narrow Mobile, < 576px) --- */
@media (max-width: 575.98px) {
    /* Slightly smaller H1 on very narrow screens */
    h1 {
        font-size: 1.75rem;
    }

    /* Adjust container padding for edge-to-edge feel if desired, keep centered */
    .aks-create-container {
        margin: 0 auto; /* Center, remove top/bottom margin */
        padding: var(--aks-spacing-md); /* Adjust padding as needed */
        border-radius: 0; /* Optional: remove radius for full edge-to-edge */
    }

    /* Allow help modal to take up more screen space */
    .aks-help-modal-content {
        width: 95%;
        max-height: 95vh;
    }
}




/* ADD THESE STYLES TO YOUR EXISTING CSS OR IN A <style> SECTION */

/* Vendor Display Styles */
.aks-vendor-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aks-input-readonly {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.aks-vendor-link {
    padding: 4px 12px;
    background: #eee;
    color: #222!important;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .aks-vendor-link:hover {
        opacity: 0.8;
        transform: translateY(-1px);
    }

    .aks-vendor-link .icon-buttons {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }

/* Vendor Status Styles */
.aks-vendor-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aks-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aks-badge-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.aks-badge-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.aks-vendor-contact {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6c757d;
    font-size: 13px;
}

    .aks-vendor-contact .icon-buttons {
        width: 14px;
        height: 14px;
        opacity: 0.7;
    }

/* Warning Message Styles */
.aks-warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
    margin-top: 12px;
}

    .aks-warning-message .icon-buttons {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        filter: sepia(1) saturate(3) hue-rotate(15deg);
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .aks-vendor-display {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .aks-vendor-link {
        align-self: flex-start;
    }

    .aks-vendor-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Add visual indication when override saving is enabled */
.override-save-enabled {
    border: 2px solid var(--aks-success-color);
    background-color: rgba(40, 167, 69, 0.05);
}

    .override-save-enabled .aks-subsection-title::after {
        content: " (Will be saved)";
        color: var(--aks-success-color);
        font-weight: normal;
        font-size: 0.9em;
    }

/* Add this CSS to your stylesheet */

.aks-optional-indicator {
    font-weight: normal;
    color: #6c757d;
    font-size: 0.9em;
}

.aks-override-reason.aks-no-reason {
    color: #6c757d;
    font-style: italic;
}

.aks-form-group .aks-help-text strong {
    color: #28a745;
}

/* Optional: Add a subtle border color for optional fields */
.aks-textarea:not([required]) {
    border-left: 3px solid #28a745;
}

    .aks-textarea:not([required]):focus {
        border-left-color: #20c997;
    }


    /* ==========================================================================
   Item Flags - Read-Only Display
   --------------------------------------------------------------------------
   Styles for displaying vendor-controlled item flags as read-only indicators
   instead of editable checkboxes.
   ========================================================================== */

/* Container for read-only flag display */
.aks-readonly-flags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--aks-spacing-xs);
    padding: var(--aks-spacing-md);
    background-color: var(--aks-light-color-bg);
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius);
    margin-bottom: var(--aks-spacing-md);
}

/* Individual flag item */
.aks-flag-item {
    display: flex;
    flex-direction: column;
    gap: var(--aks-spacing-xs);
    padding: var(--aks-spacing-sm);
    background-color: var(--aks-background-color);
    border: 1px solid var(--aks-border-color);
    border-radius: var(--aks-border-radius-sm);
    transition: border-color 0.15s ease-in-out;
}

/* Flag label styling */
.aks-flag-label {
    font-weight: var(--aks-font-weight-label);
    font-size: var(--aks-font-size-sm);
    color: var(--aks-text-muted);
    margin-bottom: var(--aks-spacing-xs);
}

/* Flag status display */
.aks-flag-status {
    display: inline-flex;
    align-items: center;
    padding: var(--aks-spacing-xs) var(--aks-spacing-sm);
    border-radius: var(--aks-border-radius-sm);
    font-size: var(--aks-font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s ease-in-out;
}

/* Active flag status (Yes) */
.aks-flag-status.active {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Inactive flag status (No) */
.aks-flag-status.inactive {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

/* Help text under each flag */
.aks-flag-item .aks-help-text {
    margin-top: var(--aks-spacing-xs);
    font-size: 0.8em;
    line-height: 1.3;
    color: var(--aks-text-muted);
}

/* Vendor note explaining read-only nature */
.aks-vendor-note {
    margin-top: var(--aks-spacing-md);
    padding: var(--aks-spacing-sm) var(--aks-spacing-md);
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-left-width: 4px;
    border-left-color: var(--aks-info-color);
    border-radius: var(--aks-border-radius);
}

.aks-vendor-note .aks-help-text {
    margin: 0;
    color: #004085;
    font-size: var(--aks-font-size-sm);
}

/* Hover effect for flag items (subtle feedback) */
.aks-flag-item:hover {
    border-color: var(--aks-input-focus-border);
}

/* Highlight active flags on hover */
.aks-flag-item:hover .aks-flag-status.active {
    background-color: #c3e6cb;
    border-color: #b3d4c3;
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
    .aks-readonly-flags {
        grid-template-columns: 1fr;
        gap: var(--aks-spacing-sm);
        padding: var(--aks-spacing-sm);
    }
    
    .aks-flag-item {
        padding: var(--aks-spacing-sm);
    }
    
    .aks-vendor-note {
        padding: var(--aks-spacing-sm);
    }
}

/* Small screens - compact layout */
@media (max-width: 575.98px) {
    .aks-readonly-flags {
        padding: var(--aks-spacing-xs);
    }
    
    .aks-flag-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--aks-spacing-xs) var(--aks-spacing-sm);
    }
    
    .aks-flag-item .aks-help-text {
        display: none; /* Hide help text on very small screens to save space */
    }
    
    .aks-flag-status {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* Cost display styles */
.aks-cost-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

    .aks-cost-display.aks-cost-calculated {
        border-color: #28a745;
        background: #f8fff9;
    }

    .aks-cost-display.aks-cost-missing {
        border-color: #ffc107;
        background: #fffdf5;
    }

.aks-cost-info {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.aks-cost-breakdown {
    display: flex;
    gap: 0.5rem;
}

.aks-cost-label {
    font-weight: 600;
    color: #666;
}

.aks-cost-value {
    color: #333;
}

.aks-cost-requirements {
    margin-top: 0.5rem;
}

.aks-requirements-list {
    margin: 0.5rem 0;
    padding-left: 1rem;
    list-style: none;
}

    .aks-requirements-list li {
        margin: 0.25rem 0;
        font-size: 0.9rem;
    }

.aks-requirement-met {
    color: #28a745;
}

.aks-requirement-missing {
    color: #dc3545;
}

.aks-cost-calculation-info {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #007bff;
}

.aks-cost-examples {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aks-cost-example {
    font-size: 0.9rem;
}

.aks-text-warning {
    color: #856404;
    font-weight: 600;
}

.aks-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.aks-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    animation: slideIn 0.3s ease-out;
}

.aks-notification--success {
    background: #28a745;
}

.aks-notification--error {
    background: #dc3545;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Help modal styles */
.aks-help-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.aks-help-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border: none;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.aks-help-modal-header {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aks-help-modal-body {
    padding: 1.5rem;
    line-height: 1.6;
}

.aks-help-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
}

    .aks-help-modal-close:hover {
        color: #333;
    }

.aks-help-example {
    background: #f8f9fa;
    padding: 1rem;
    border-left: 4px solid #007bff;
    margin: 1rem 0;
}

.aks-help-tip {
    background: #d4edda;
    padding: 0.75rem;
    border-left: 4px solid #28a745;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
}