/* styles.css */

/* 
 * CSS RESET AND GLOBAL STYLES
 * IMPROVEMENT: Added a basic reset to ensure consistent styling across browsers
 * Your original code relied on default browser styles which can vary
 */
 *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    /* Better font fallback than original */
}

/* 
 * BODY STYLES
 * IMPROVEMENT: Added a proper centering technique using flex
 * Original didn't have explicit centering which could cause layout issues
 */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right bottom, #1a1a1a, #3a3a3a);
    /* Added gradient background for visual interest */
}

/* 
 * CALCULATOR CONTAINER
 * IMPROVEMENT: Added proper padding and shadow for better visual hierarchy
 * Original box didn't have enough visual separation from background
 */
.calculator-box {
    background-color: #2d2d2d;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    width: min(95vw, 400px); /* Responsive width with maximum */
    /* Added subtle inner shadow for depth */
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1),
                0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 
 * CALCULATOR SCREEN
 * IMPROVEMENT: Added proper text alignment and overflow handling
 * Original screen didn't handle long numbers well
 */
.calculator-screen {
    background-color: #1c1c1c;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    text-align: right;
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    word-break: break-all;
    /* Added subtle inner glow */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.previous-operand {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.2rem;
    min-height: 1.5rem;
}

.current-operand {
    color: white;
    font-size: 2rem;
    font-weight: 500;
    min-height: 2.5rem;
}

/* 
 * CALCULATOR GRID
 * IMPROVEMENT: Used CSS Grid for better button layout
 * Original layout was less flexible and harder to maintain
 */
.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

/* 
 * BUTTON STYLES
 * IMPROVEMENT: Added proper button states and transitions
 * Original buttons lacked visual feedback
 */
button {
    padding: 1.25rem;
    font-size: 1.5rem;
    border: none;
    border-radius: 8px;
    background-color: #3d3d3d;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Added subtle gradient and shadow for depth */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05)
    );
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2),
                inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

/* Button hover state */
button:hover {
    background-color: #4d4d4d;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
                inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

/* Button active state */
button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* 
 * SPECIFIC BUTTON STYLES
 * IMPROVEMENT: Added distinct visual hierarchy for different button types
 * Original buttons didn't have enough visual differentiation
 */
.operator {
    background-color: #505050;
    color: #ff9500;
}

.operator:hover {
    background-color: #606060;
}

.equals {
    background-color: #ff9500;
    color: white;
}

.equals:hover {
    background-color: #ffaa33;
}

.clear-btn {
    background-color: #ff3b30;
    color: white;
}

.clear-btn:hover {
    background-color: #ff4d44;
}

.delete-btn {
    background-color: #505050;
}

.delete-btn:hover {
    background-color: #606060;
}

/* 
 * UTILITY CLASSES
 * IMPROVEMENT: Added utility classes for special cases
 * Original code didn't handle special layout cases well
 */
.span-two {
    grid-column: span 2;
}

/* 
 * RESPONSIVE DESIGN
 * IMPROVEMENT: Added proper responsive design
 * Original didn't handle different screen sizes well
 */
@media (max-width: 480px) {
    .calculator-box {
        padding: 1rem;
    }
    
    button {
        padding: 1rem;
        font-size: 1.25rem;
    }
    
    .calculator-screen {
        padding: 0.75rem;
    }
    
    .current-operand {
        font-size: 1.75rem;
    }
    
    .previous-operand {
        font-size: 1rem;
    }
}

/* 
 * ACCESSIBILITY IMPROVEMENTS
 * IMPROVEMENT: Added focus states for keyboard navigation
 * Original didn't support keyboard navigation well
 */
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.5),
                0 3px 6px rgba(0, 0, 0, 0.2);
}

/* 
 * ANIMATION
 * IMPROVEMENT: Added subtle animations for better UX
 * Original lacked visual feedback
 */
@keyframes press {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

button:active {
    animation: press 0.2s ease-out;
}