/* Global box-sizing and basic reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Root variables for colors, fonts, and spacing */
:root {
    /* Colors */
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-primary: #0066ff;
    --color-primary-dark: #004cbb;
    --color-danger: #ff3b30;
    --color-success: #34c759;
    --color-muted: #777777;
    --color-border: #e0e0e0;
    --color-text: #222222;
    --color-text-muted: #555555;
    --color-hover: #e6e6e6;

    /* Calculator specific custom properties */
    --calc-bg: var(--color-surface);
    --calc-display-bg: #222;
    --calc-display-color: #fff;
    --calc-btn-bg: #f0f0f0;
    --calc-btn-color: #333;
    --calc-btn-primary-bg: var(--color-primary);
    --calc-btn-primary-color: #fff;
    --calc-btn-danger-bg: var(--color-danger);
    --calc-btn-danger-color: #fff;
    --calc-btn-success-bg: var(--color-success);
    --calc-btn-success-color: #fff;
    --calc-btn-hover-bg: #d4d4d4;
    --calc-btn-primary-hover-bg: #e08900; /* for operators */
    --calc-btn-danger-hover-bg: #e03228;
    --calc-btn-success-hover-bg: #28a745;

    /* Fonts */
    --font-family-base: "Helvetica Neue", Arial, Helvetica, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-sm: 0.875rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

/* Body styling – center the app, set background, clean font */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
    font-family: var(--font-family-base);
    color: var(--color-text);
    line-height: 1.5;
    padding: var(--spacing-md);
}

/* Main app container – generic styles (kept for other parts of the project) */
#app {
    background: var(--color-surface);
    max-width: 600px;
    width: 100%;
    padding: var(--spacing-lg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ----- Calculator Specific Styles ----- */

.calculator {
    display: flex;
    flex-direction: column;
    background: var(--calc-bg);
    border-radius: var(--spacing-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    width: 90%;            /* fallback for narrow screens */
    max-width: 350px;      /* limit on larger screens */
}

/* Fixed width for larger screens */
@media (min-width: 601px) {
    .calculator {
        width: 350px;
    }
}

/* Display styling */
#display {
    background: var(--calc-display-bg);
    color: var(--calc-display-color);
    font-size: 2rem;
    text-align: right;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 3rem;
    line-height: 1.2;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Buttons container using CSS Grid */
.buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--color-hover);
}

.buttons-grid .btn {
    font-size: var(--font-size-lg);
    padding: var(--spacing-sm);
    border: none;
    border-radius: var(--spacing-xs);
    background: var(--calc-btn-bg);
    color: var(--calc-btn-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons-grid .btn:hover,
.buttons-grid .btn:focus {
    background: var(--calc-btn-hover-bg);
    outline: none;
    transform: translateY(1px);
}

/* Digit buttons */
.buttons-grid .btn.digit {
    background: var(--calc-btn-bg);
    color: var(--calc-btn-color);
}

.buttons-grid .btn.digit:hover,
.buttons-grid .btn.digit:focus {
    background: var(--calc-btn-hover-bg);
}

/* Operator buttons (+, -, *, /) */
.buttons-grid .btn.operator {
    background: var(--calc-btn-primary-bg);
    color: var(--calc-btn-primary-color);
}

.buttons-grid .btn.operator:hover,
.buttons-grid .btn.operator:focus {
    background: var(--calc-btn-primary-hover-bg);
}

/* Function buttons – Clear (C) and Backspace (←) */
.buttons-grid .btn.function[data-key="C"] {
    background: var(--calc-btn-danger-bg);
    color: var(--calc-btn-danger-color);
}

.buttons-grid .btn.function[data-key="C"]:hover,
.buttons-grid .btn.function[data-key="C"]:focus {
    background: var(--calc-btn-danger-hover-bg);
}

.buttons-grid .btn.function[data-key="←"] {
    background: var(--calc-btn-bg);
    color: var(--calc-btn-color);
}

.buttons-grid .btn.function[data-key="←"]:hover,
.buttons-grid .btn.function[data-key="←"]:focus {
    background: var(--calc-btn-hover-bg);
}

/* Equals button */
.buttons-grid .btn.operator[data-key="="] {
    background: var(--calc-btn-success-bg);
    color: var(--calc-btn-success-color);
    grid-column: span 2; /* make it larger horizontally */
}

.buttons-grid .btn.operator[data-key="="]:hover,
.buttons-grid .btn.operator[data-key="="]:focus {
    background: var(--calc-btn-success-hover-bg);
}

/* Placeholder elements (used for layout symmetry) */
.buttons-grid .placeholder {
    visibility: hidden;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 600px) {
    .calculator {
        width: 90vw;
    }
    #display {
        font-size: 2.5rem;
    }
    .buttons-grid .btn {
        font-size: 2rem;
        padding: var(--spacing-md);
    }
    .buttons-grid {
        gap: var(--spacing-xs);
    }
}

/* Existing generic styles for task list and other components (unchanged) */
/* Input form */
#app form {
    width: 100%;
    display: flex;
    gap: var(--spacing-sm);
}

#app form input[type="text"] {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

#app form input[type="text"]:focus {
    border-color: var(--color-primary);
}

#app form input[type="text"]::placeholder {
    color: var(--color-muted);
    opacity: 0.8;
}

#app form button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

#app form button:hover,
#app form button:focus {
    background: var(--color-primary-dark);
    outline: none;
}

/* Task list */
.task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.task-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s, opacity 0.2s;
    background: var(--color-surface);
}

.task-list > li:hover {
    background: var(--color-hover);
}

.task-list > li.completed {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Checkbox */
.task-list input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: var(--spacing-sm);
    cursor: pointer;
}

/* Buttons inside each task item */
.task-list .edit-button,
.task-list .delete-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs);
    margin-left: var(--spacing-xs);
    color: var(--color-muted);
    transition: color 0.2s;
}

.task-list .edit-button:hover,
.task-list .edit-button:focus {
    color: var(--color-primary);
    outline: none;
}

.task-list .delete-button:hover,
.task-list .delete-button:focus {
    color: var(--color-danger);
    outline: none;
}

/* Footer */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer .count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer .filters {
    display: flex;
    gap: var(--spacing-xs);
}

.footer .filters button {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.footer .filters button.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary-dark);
}

.footer .clear-completed {
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.footer .clear-completed:hover,
.footer .clear-completed:focus {
    background: #d32f2f;
    outline: none;
}

/* Responsive adjustments for narrow screens (generic) */
@media (max-width: 600px) {
    #app {
        padding: var(--spacing-md);
    }
    #app form input[type="text"] {
        font-size: var(--font-size-lg);
    }
    #app form button {
        font-size: var(--font-size-lg);
    }
    .task-list > li {
        flex-direction: column;
        align-items: flex-start;
    }
    .task-list .edit-button,
    .task-list .delete-button {
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
    .footer {
        flex-direction: column;
        align-items: stretch;
    }
    .footer .filters {
        justify-content: center;
    }
    .footer .clear-completed {
        width: 100%;
        text-align: center;
    }
}

/* High‑contrast mode for accessibility */
@media (prefers-contrast: more) {
    :root {
        --color-bg: #ffffff;
        --color-surface: #ffffff;
        --color-text: #000000;
        --color-muted: #000000;
        --color-border: #000000;
        --color-primary: #0000ff;
        --color-primary-dark: #0000aa;
        --color-danger: #ff0000;
        --color-success: #00aa00;
        --color-hover: #e0e0e0;
    }
    .task-list > li.completed {
        opacity: 0.8;
    }
}
