/*
 * Timer Cascading Style Sheets (CSS)
 * Dark Mode Version v1.2d
 */

/* =====================
   Core & Utility Styles 
   ===================== */

/* 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;
}

/* ====================
   Layout & Containers 
   ==================== */

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

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

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

/* 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);
}

/* =================
   Timer Display 
   ================= */

/* Main Timer Display */
#timer .timer-time_left {
    text-align: center;
    font-size: min(15vw, 70vh);
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #ffffff !important;
}

.time-display {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1em;
    overflow: hidden;
}

/* =======================
   Input & Button Styling 
   ======================= */

/* Input Styling */
#timer .timer-time_total {
    text-align: right;
    border-radius: 12px !important;
}

/* Reset any previous spacing attempts first */
.input-group .form-control {
    margin-right: 0 !important;
    width: 100% !important;
    border-right-width: 1px !important;
}

/* Add space between input and buttons */
.input-group > .input-group-btn {
    padding-left: 16px !important;
}

/* Remove the padding from nested elements */
.input-group-btn > .btn {
    margin-left: -1px !important;
}


.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 Groups Layout */
.input-group-btn .btn {
    margin-left: -1px !important;
}



/* Group spacing */
/* Space between input and control group */
.timer-play {
    margin-left: 16px !important;
}

/* Space between control group and preset group */
#timer .timer-preset[ng-click="setFiveMinPreset()"] {
    margin-left: 16px !important;
}

/* Keep buttons connected within their groups */
.timer-stop,
.timer-reset,
.timer-preset:not([ng-click="setFiveMinPreset()"]),
.timer-expand {
    margin-left: -1px !important;
}



/* Button Width Settings */
#timer .timer-play,
#timer .timer-stop,
#timer .timer-reset,
#timer .timer-preset {
    width: 75px;
}


/* Control Buttons Group */
.timer-play {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.timer-stop {
    border-radius: 0 !important;
}

.timer-reset {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}


/* Preset & Toggle Buttons Group */
#timer .timer-preset[ng-click="setFiveMinPreset()"] {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.timer-preset {
    border-radius: 0 !important;
}

.timer-expand {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Button Colors */
.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;
}

/* Warning (Preset) Button States */
.dark-btn-warning {
    background-color: #f57c00 !important;
    border-color: #ef6c00 !important;
    color: #ffffff !important;
}

.dark-btn-warning:hover:not(:disabled):not(.active) {
    background-color: #fb8c00 !important;
}

.dark-btn-warning.active {
    background-color: #e65100 !important;
    border-color: #d84315 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2) !important;
}

.dark-btn-warning:disabled {
    background-color: #904d00 !important;
    border-color: #803300 !important;
    color: #888 !important;
}

/* Button 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;
}

/* Button Focus & Active States */
.dark-btn-success:focus,
.dark-btn-danger:focus,
.dark-btn-primary:focus,
.timer-expand:focus {
    outline: none !important;
    box-shadow: none !important;
}

.dark-btn-warning:active {
    outline: none !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;
}

/* ===================
   Progress Bar Styles 
   =================== */

.progress {
    height: 40px !important;
}

.progress-bar {
    line-height: 40px !important;
}

.dark-progress {
    background-color: #333333 !important;
    border: 1px solid #444;
}

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

.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;
}

/* ======================
   Form & Settings Styles 
   ====================== */

.dark-settings {
    color: #ffffff;
}

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

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

.dark-input::placeholder {
    color: #888 !important;
}