/*
 * Timer Cascading Style Sheets (CSS)
 * Dark Mode Version
 */

/* Angular Cloak Handling */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* Animation Settings */
.animate-show {
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 1;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    display: block!important;
}

.animate-show.ng-hide {
    opacity: 0;
}

/* Basic Body Styling */
body.dark-mode {
    padding-top: 60px;
    background-color: #1e1e1e; /* Dark background */
    color: #ffffff; /* Light text */
}

/* Container Styling */
.dark-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Jumbotron Dark Mode */
.dark-jumbotron {
    background-color: #1e1e1e !important; /* Darker background for jumbotron */
    border: 1px solid #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Timer Display */
#timer .timer-time_left {
    text-align: center;
    font-size: min(15vw, 70vh); /* Takes the smaller of 25% viewport width or 90% viewport height */
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #ffffff !important;
}

/* Add this to ensure the container properly wraps the text */
.time-display {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1em;
    overflow: hidden;
}

/* Input Fields */
#timer .timer-time_total {
    text-align: right;
}

.dark-input {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
}

.dark-input:focus {
    background-color: #363636 !important;
    border-color: #666 !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

/* Button Styling */
#timer .timer-play {
    width: 75px;
}

#timer .timer-stop {
    width: 75px;
}

#timer .timer-reset {
    width: 75px;
}

/* Dark Mode Buttons */
.dark-btn-success {
    background-color: #2e7d32 !important;
    border-color: #1b5e20 !important;
}

.dark-btn-danger {
    background-color: #c62828 !important;
    border-color: #b71c1c !important;
}

.dark-btn-primary {
    background-color: #1976d2 !important;
    border-color: #1565c0 !important;
}

/* Progress Bar Dark Mode */
.dark-progress {
    background-color: #333333 !important;
    border: 1px solid #444;
}

.dark-progress-bar {
    background-color: #1976d2;
}


/* Make progress bar taller */
.progress {
    height: 40px !important; /* Double the default height of 20px */
}

.progress-bar {
    line-height: 40px !important; /* Match the height to keep content vertically centered */
}


/* Well Dark Mode */
.dark-well {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Settings Section */
.dark-settings {
    color: #ffffff;
}

/* Labels */
.dark-label {
    color: #ffffff !important;
}

/* Checkbox Styling */
.dark-checkbox {
    background-color: #2d2d2d;
    border: 1px solid #444;
}

/* Progress Bar States */
.dark-progress-bar.progress-bar-success {
    background-color: #2e7d32 !important;
}

.dark-progress-bar.progress-bar-warning {
    background-color: #f9a825 !important;
}

.dark-progress-bar.progress-bar-danger {
    background-color: #c62828 !important;
}

/* Disabled States */
.dark-input:disabled,
.dark-btn-success:disabled,
.dark-btn-danger:disabled,
.dark-btn-primary:disabled {
    background-color: #404040 !important;
    border-color: #555 !important;
    color: #888 !important;
}

/* Placeholder Text */
.dark-input::placeholder {
    color: #888 !important;
}

/* Focus States */
.dark-btn-success:focus,
.dark-btn-danger:focus,
.dark-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Hover States */
.dark-btn-success:hover:not(:disabled) {
    background-color: #388e3c !important;
}

.dark-btn-danger:hover:not(:disabled) {
    background-color: #d32f2f !important;
}

.dark-btn-primary:hover:not(:disabled) {
    background-color: #1e88e5 !important;
}