/* TI-30XIIS Calculator - Button Grid & Styles */

.button-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 5px;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

/* Base button styles */
.calc-btn {
    position: relative;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--btn-shadow);
    transition: transform 0.05s, box-shadow 0.05s;
    min-height: 44px;
    touch-action: manipulation;
    padding: 2px 4px;
}

.calc-btn:active {
    transform: translateY(1px);
    box-shadow: var(--btn-shadow-active);
}

/* Second function labels (inside button, at top) */
.calc-btn[data-second]::before {
    content: attr(data-second);
    font-size: 8px;
    font-weight: 500;
    color: var(--second-label);
    white-space: nowrap;
    pointer-events: none;
    margin-bottom: 1px;
}

/* Number buttons */
.btn-number {
    background: var(--btn-number-bg);
    color: var(--btn-number-text);
}

.btn-number:active {
    background: var(--btn-number-active);
}

/* Operator buttons */
.btn-operator {
    background: var(--btn-operator-bg);
    color: var(--btn-operator-text);
    font-size: 18px;
}

.btn-operator:active {
    background: var(--btn-operator-active);
}

/* Function buttons */
.btn-function {
    background: var(--btn-function-bg);
    color: var(--btn-function-text);
    font-size: 12px;
}

.btn-function:active {
    background: var(--btn-function-active);
}

/* 2nd button */
.btn-second {
    background: var(--btn-second-bg);
    color: var(--btn-second-text);
}

.btn-second:active {
    background: var(--btn-second-active);
}

.btn-second.active {
    background: #ffb74d;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.6);
}

/* Clear/Reset buttons */
.btn-clear {
    background: var(--btn-clear-bg);
    color: var(--btn-clear-text);
}

.btn-clear:active {
    background: var(--btn-clear-active);
}

/* Enter/Equals button */
.btn-enter {
    background: var(--btn-enter-bg);
    color: var(--btn-enter-text);
    font-size: 20px;
}

.btn-enter:active {
    background: var(--btn-enter-active);
}