/*
Coder: klp (refactored by AI)
Date: 2026-01-05
Description: Modern CSS styles for random integer generator
Site: RPS_Spark2026-01-04-Stg1
File: randomIntegerStyles5_ai.css

STAGE 5 ENHANCEMENTS:
- Styles for action buttons (Copy and Clear)
- Secondary button variant with different color scheme
- Success feedback animation for copy confirmation
- Proper spacing and layout for button group

KEY CSS IMPROVEMENTS IMPLEMENTED:
1. CSS Custom Properties (variables) for theming
2. Mobile-first responsive design
3. CSS Grid and Flexbox for layouts
4. Modern box model with box-sizing
5. Accessibility considerations (focus states, contrast)
6. Smooth transitions and animations
7. Consistent spacing with modular scale
8. BEM-like naming convention for clarity
9. Comments explaining design decisions
10. No magic numbers - all values explained
*/

/* ============================================================================
   BEST PRACTICE #1: CSS Reset and Base Styles
   ============================================================================
   - Normalize browser defaults
   - Set sensible base styles
   - Use box-sizing: border-box for easier sizing calculations
*/

*,
*::before,
*::after {
    /* BEST PRACTICE: Include padding/border in element width/height */
    box-sizing: border-box;
    /* Remove default margin/padding for consistency */
    margin: 0;
    padding: 0;
}

/* ============================================================================
   BEST PRACTICE #2: CSS Custom Properties (Variables)
   ============================================================================
   - Centralize design tokens (colors, spacing, fonts)
   - Easy to maintain and modify theme
   - Can be changed dynamically with JavaScript
   - Enable dark mode or theme switching
   - Better than SCSS variables (work in browser, dynamic)
*/

:root {
    /* Color Palette - Using semantic naming */
    --color-primary: #2563eb;          /* Blue for primary actions */
    --color-primary-hover: #1d4ed8;    /* Darker blue for hover */
    --color-primary-active: #1e40af;   /* Even darker for active */
    
    --color-surface: #ffffff;          /* Background surfaces */
    --color-surface-alt: #f9fafb;      /* Alternate surface (subtle) */
    --color-surface-highlight: #fef3c7; /* Antiquewhite modernized */
    
    --color-border: #d1d5db;           /* Default borders */
    --color-border-strong: #9ca3af;    /* Emphasized borders */
    
    --color-text: #111827;             /* Primary text */
    --color-text-muted: #6b7280;       /* Secondary text */
    
    --color-success: #10b981;          /* Success states */
    --color-error: #ef4444;            /* Error states */
    
    /* STAGE 5: Additional colors for secondary buttons */
    --color-secondary: #6b7280;        /* Gray for secondary actions */
    --color-secondary-hover: #4b5563;  /* Darker gray for hover */
    --color-danger: #dc2626;           /* Red for destructive actions */
    --color-danger-hover: #b91c1c;     /* Darker red for hover */
    
    /* Spacing Scale - Based on 8px grid system */
    /* BEST PRACTICE: Consistent spacing creates visual harmony */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    
    /* Typography Scale - Modular scale for hierarchy */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    
    /* Font Families */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                        Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Courier New', Courier, Monaco, 
                        'Lucida Console', monospace;
    
    /* Border Radius - Consistent roundness */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-full: 50%;     /* Circles */
    
    /* Transitions - Consistent animation timing */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
    
    /* Shadows - Depth and elevation */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Layout Constraints */
    --container-max-width: 1200px;
    --content-max-width: 800px;
}

/* ============================================================================
   BEST PRACTICE #3: Mobile-First Base Styles
   ============================================================================
   - Start with mobile styles, enhance for larger screens
   - Most web traffic is mobile
   - Forces focus on essential content
*/

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-surface-alt);
    
    /* BEST PRACTICE: Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   BEST PRACTICE #4: Semantic Layout with Container
   ============================================================================
   - Use main element for primary content
   - Consistent padding and max-width
   - Center content for better reading
*/

.container {
    max-width: var(--content-max-width);
    /* BEST PRACTICE: Responsive padding using clamp() */
    /* Scales from 1rem to 2rem based on viewport */
    padding: clamp(var(--spacing-md), 5vw, var(--spacing-xl));
    margin: 0 auto;
}

/* ============================================================================
   Typography Styles
   ============================================================================ */

h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    
    /* BEST PRACTICE: Add subtle text shadow for depth */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Stage Indicator */
.stage-indicator {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-muted);
}

.stage-indicator mark {
    background-color: var(--color-surface-highlight);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--color-text);
    /* BEST PRACTICE: Don't use default yellow highlight */
}

/* ============================================================================
   REFACTOR: Controls Container for Button and Select Menu
   ============================================================================
   - Flexbox layout to position button and select side by side
   - Responsive with gap for spacing
   - Wraps on smaller screens for mobile-first design
*/

.controls-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    margin-bottom: var(--spacing-xl);
}

/* ============================================================================
   BEST PRACTICE #5: Accessible, Modern Button Styles
   ============================================================================
   - Clear focus states for keyboard navigation
   - Sufficient color contrast (WCAG AA minimum)
   - Touch-friendly size (minimum 44x44px)
   - Visual feedback for all states
*/

.btn-primary {
    /* Layout */
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    min-height: 44px;  /* WCAG: Touch target size */
    min-width: 44px;
    
    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    
    /* Colors */
    color: white;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    
    /* Visual */
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    
    /* BEST PRACTICE: Smooth transitions for better UX */
    transition: all var(--transition-base);
    
    /* Remove default button styles */
    -webkit-appearance: none;
    appearance: none;
}

/* Hover state */
.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
    
    /* BEST PRACTICE: Subtle scale on hover for feedback */
    transform: translateY(-1px);
}

/* Active/pressed state */
.btn-primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* BEST PRACTICE #6: Clear Focus Indicator for Accessibility */
/* Critical for keyboard users to see what's focused */
.btn-primary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Disabled state */
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================================
   STAGE 5: Secondary Button Styles
   ============================================================================
   - Used for Copy and Clear actions
   - Lighter color scheme than primary buttons
   - Maintains same accessibility standards
*/

.btn-secondary {
    /* Inherit base button styles */
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    min-height: 44px;
    min-width: 44px;
    
    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    
    /* Colors - Gray theme for secondary actions */
    color: white;
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    
    /* Visual */
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    
    /* Remove default button styles */
    -webkit-appearance: none;
    appearance: none;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-secondary:active {
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

.btn-secondary:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* STAGE 5: Clear button variant with danger color */
.btn-clear {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-clear:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.btn-clear:focus-visible {
    outline-color: var(--color-danger);
}

/* STAGE 5: Success feedback for copy button */
.success-feedback {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

/* ============================================================================
   REFACTOR: Select Menu Styles (matches button styling)
   ============================================================================
   - Consistent styling with button for unified design
   - Accessible with proper focus states
   - Custom styling while maintaining native functionality
*/

.select-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.select-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

.select-primary {
    /* Layout */
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;  /* WCAG: Touch target size */
    
    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.5;
    
    /* Colors */
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    
    /* Visual */
    border-radius: var(--radius-md);
    cursor: pointer;
    
    /* Smooth transitions */
    transition: all var(--transition-base);
    
    /* Remove default appearance for custom styling */
    -webkit-appearance: none;
    appearance: none;
    
    /* Custom dropdown arrow using background image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111827' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: var(--spacing-xl);
}

.select-primary:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.select-primary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.select-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================================
   BEST PRACTICE #7: Semantic Definition List for Key-Value Pairs
   ============================================================================
   - Better than div soup
   - Accessible structure
   - Flexbox for modern layout
*/

.range-display {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.range-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.range-item dt {
    font-weight: 600;
    color: var(--color-text-muted);
}

.range-item dd {
    font-size: var(--font-size-xl);
    font-weight: 700;
    font-family: var(--font-family-mono);
    color: var(--color-primary);
}

/* ============================================================================
   BEST PRACTICE #8: Accessible, Responsive Table Styles
   ============================================================================
   - Mobile-responsive (can add overflow-x on small screens)
   - Clear visual hierarchy
   - Striped rows for easier scanning
   - Hover states for interactivity
*/

table#freqTable {
    width: 100%;
    margin-bottom: var(--spacing-xl);
    border-collapse: collapse;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;  /* Clip border radius */
    box-shadow: var(--shadow-sm);
    font-family: var(--font-family-mono);
}

/* Caption styling */
table#freqTable caption {
    padding: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-align: left;
    color: var(--color-text);
    background-color: var(--color-surface-alt);
}

/* Header cells */
table#freqTable th {
    padding: var(--spacing-md);
    text-align: right;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-primary);
    color: white;
    border-bottom: 2px solid var(--color-primary-hover);
}

/* BEST PRACTICE: First column left-aligned */
table#freqTable th:first-child,
table#freqTable td:first-child {
    text-align: left;
}

/* Data cells */
table#freqTable td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: right;
    border-bottom: 1px solid var(--color-border);
}

/* BEST PRACTICE #9: Zebra striping for better readability */
/* Skip the total row */
table#freqTable tbody tr:not(.total-row):nth-child(odd) {
    background-color: var(--color-surface-alt);
}

/* Hover effect for rows */
table#freqTable tbody tr:not(.total-row):hover {
    background-color: var(--color-surface-highlight);
    transition: background-color var(--transition-fast);
}

/* Total row styling */
.total-row {
    background-color: var(--color-surface-alt);
    border-top: 2px solid var(--color-border-strong);
    font-weight: 700;
}

.total-row td {
    padding: var(--spacing-md);
}

/* ============================================================================
   BEST PRACTICE #10: Animated List with Modern Grid Layout
   ============================================================================
   - CSS Grid for responsive multi-column layout
   - Smooth animations when items appear
   - Accessible with proper ARIA
*/

.number-list {
    list-style-type: none;
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    background-color: var(--color-surface-highlight);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    
    /* BEST PRACTICE: CSS Grid for responsive columns */
    /* Creates as many columns as fit, minimum 40px wide */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--spacing-sm);
    
    /* BEST PRACTICE: Smooth max-height transition */
    max-height: 400px;
    overflow-y: auto;
    
    /* Custom scrollbar styling (webkit browsers) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) var(--color-surface-alt);
}

/* Webkit scrollbar customization */
.number-list::-webkit-scrollbar {
    width: 8px;
}

.number-list::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

.number-list::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.number-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Individual number items */
.number-item {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;  /* Perfect square */
    min-width: 40px;
    
    /* Typography */
    font-family: var(--font-family-mono);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    
    /* Visual */
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    
    /* BEST PRACTICE #11: Entrance Animation */
    /* Animate in when added to DOM */
    animation: slideIn var(--transition-slow) ease-out;
}

/* BEST PRACTICE #12: Keyframe Animation for New Items */
/* Makes UI more engaging and helps user track new additions */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Hover effect on number items */
.number-item:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transition: all var(--transition-fast);
}

/* ============================================================================
   STAGE 5: Action Buttons Container
   ============================================================================
   - Contains Copy and Clear buttons
   - Positioned below the number list
   - Flexbox layout for responsive button arrangement
   - Hidden by default, shown when numbers exist
*/

.action-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

p#backLinkPara {
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-base);
}

p#backLinkPara a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}   

/* ============================================================================
   BEST PRACTICE #13: Responsive Design with Media Queries
   ============================================================================
   - Mobile-first approach (base styles are mobile)
   - Progressive enhancement for larger screens
   - Use em units in media queries (more accessible)
*/

/* Small tablets and larger (≥640px) */
@media (min-width: 40em) {
    h1 {
        font-size: var(--font-size-3xl);
    }
    
    .container {
        padding: var(--spacing-xl);
    }
    
    .number-list {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    }
}

/* Tablets and larger (≥768px) */
@media (min-width: 48em) {
    .range-display {
        gap: var(--spacing-xl);
    }
    
    .number-list {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }
    
    /* STAGE 5: Action buttons spread out more on larger screens */
    .action-buttons {
        justify-content: flex-start;
    }
}

/* Desktop and larger (≥1024px) */
@media (min-width: 64em) {
    .container {
        padding: var(--spacing-2xl);
    }
}

/* ============================================================================
   BEST PRACTICE #14: Print Styles
   ============================================================================
   - Often forgotten but important for classroom/reports
   - Remove unnecessary elements
   - Optimize for black and white printing
*/

@media print {
    /* Hide interactive elements */
    .btn-primary,
    .btn-secondary,
    .action-buttons,
    .number-list {
        display: none;
    }
    
    /* Optimize colors for print */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    /* Ensure table fits on page */
    table#freqTable {
        page-break-inside: avoid;
    }
}

/* ============================================================================
   BEST PRACTICE #15: Dark Mode Support (Optional Enhancement)
   ============================================================================
   - Respects user's system preference
   - Reduces eye strain in low light
   - Modern UX expectation
*/

@media (prefers-color-scheme: dark) {
    :root {
        /* Update color palette for dark mode */
        --color-surface: #1f2937;
        --color-surface-alt: #111827;
        --color-surface-highlight: #374151;
        
        --color-border: #4b5563;
        --color-border-strong: #6b7280;
        
        --color-text: #f9fafb;
        --color-text-muted: #d1d5db;
    }
    
    .number-item {
        background-color: #374151;
    }
}

/* ============================================================================
   BEST PRACTICE #16: Reduced Motion for Accessibility
   ============================================================================
   - Respects user's motion preferences
   - Critical for users with vestibular disorders
   - WCAG 2.1 Level AAA
*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}