/* 
 * Hour Calculator Styles
 * Styles for the Hour Calculator application - Only contains specific styles unique to this tool
 * Global styles are imported from /css/global.css
 */

/* Tool-specific styles */
.calculator {
    background-color: var(--color-card-bg); /* Changed from #fff to use CSS variable */
    border-radius: 8px;
    box-shadow: var(--shadow-md); /* Using shadow variable instead of hardcoded value */
    padding: 30px;
    margin-bottom: 30px;
}

/* Note: Input and output section styles are in global.css */

/* Date input group styling specific to this calculator */
.date-input-group button {
    white-space: nowrap;
    min-width: 120px;
}

/* Note: Most result styling is using global styles */

.result-item span:last-child {
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* Iteration controls */
.iteration-controls {
    margin-top: 25px;
    padding: 15px;
    border-top: 1px solid var(--color-border);
}

.iteration-question {
    margin-bottom: 15px;
    font-weight: bold;
}

.iteration-button {
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: var(--color-secondary);
}

.iteration-button:hover {
    background-color: var(--color-secondary-light);
}

/* Note: Conversion section now uses global styling */