body, body * {
	font-weight: 400;
	font-family: helvetica, Tahoma, Geneva, Verdana, sans-serif;
}

/* Show/hide content based on decrease/increase behavior preference */
/* Default (or when body has do-less): Show decrease wording, hide increase wording */
body .do-more,
body.do-less .do-more {
	display: none !important;
}
body .do-less,
body.do-less .do-less {
	display: inline !important;
}

/* When body has do-more class: Show increase wording, hide decrease wording */
body.do-more .do-more {
	display: inline !important;
}
body.do-more .do-less {
	display: none !important;
}

.footer {
    width: 100%;
}
.footer p {

	margin: 10px 0px 0px 0px;
}

a:hover, a:focus {
	text-decoration: none;

}
h2 {
		font-size: 2rem;
        text-align: center;
}

h3 {
    font-size: 1.5rem;
	margin-top: 26px;
	margin-bottom: 13px;

}
h4 {
    font-weight: 550;
	margin-top: 20px;
	font-size: 1.2rem;

}

/* ==========================================
   jQuery UI Datepicker Icon Fixes
   (Replaces missing image icons with CSS)
   ========================================== */

/* Hide the missing image-based icons */
.ui-icon {
	background-image: none !important;
}

/* Datepicker prev/next arrows using CSS */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	background-image: none !important;
	text-indent: 0 !important;
	font-size: 0;
}

.ui-datepicker .ui-datepicker-prev span::after,
.ui-datepicker .ui-datepicker-next span::after {
	font-size: 16px;
	color: #444;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ui-datepicker .ui-datepicker-prev span::after {
	content: '◀';
}

.ui-datepicker .ui-datepicker-next span::after {
	content: '▶';
}

.ui-datepicker .ui-datepicker-prev:hover span::after,
.ui-datepicker .ui-datepicker-next:hover span::after {
	color: #000;
}

/* ==========================================
   iOS / Safari Form Input Fixes
   ========================================== */

/* Prevent iOS zoom on input focus (requires 16px+ font-size) */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
	font-size: 16px;
}

/* Reset native select styling for iOS/Safari */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 4px;
	padding: 6px 28px 6px 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 12px;
    padding-right: 22px !important;
}

/* Time picker selects - larger size with proper styling */
select.time-picker-hour,
select.time-picker-minute,
select.time-picker-am-pm {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 1.8rem;
	padding: 6px 28px 6px 8px;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 14px;
	margin: 0 2px;
}

/* Checkbox and radio iOS fixes */
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #6c757d;
	background-color: #fff;
	cursor: pointer;
	vertical-align: middle;
	position: relative;
	flex-shrink: 0;
}

input[type="checkbox"] {
	border-radius: 4px;
}

input[type="checkbox"].baseline-usage-chunk-checkbox,
input[type="checkbox"].settings-usageBatched {
    margin: 0;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--color-primary, #2b922b);
	border-color: var(--color-primary, #2b922b);
}

input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	background-color: #fff;
	border-radius: 50%;
}

/* Bootstrap form-check-input override for iOS */
.form-check-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Number input styling */
input[type="number"] {
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 6px 10px;
	border: 1px solid #ced4da;
	border-radius: 4px;
}

/* Ensure touch targets are large enough on iOS */
@media (pointer: coarse) {
	input,
	select,
	button {
		min-height: 20px;
        margin-bottom: 5px;
	}
}

.container {
	max-width: 480px;
}

#header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    
	background: rgba(0,0,0,0.2);
    position: relative;
    right: 5px;
    width: calc(100% + 10px);
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.app-background {
	background: url('../assets/images/lake-reflect-background.jpg');
    background-position: 0px -147px;
    animation: animatedBackground 26s ease-in-out infinite alternate;
}

@keyframes animatedBackground {
    from {
        background-position: 0px -147px;
    }
    to {
        background-position: 300px -147px;
    }
  }

.app-overlay {
	background: rgba(0,0,0,0.1);
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 0px;
	min-height: calc(100vh - 50px);
}


.header-logo {
	display: inline-block;
	padding: 13px 5px;
	max-height: 85px;
}


.logo-and-tagline {
	display: inline-block;
	max-height: 85px;
}
.logo-and-tagline img {
	display: inline-block;
	max-height: 60px;
	padding-top: 5px;
}
.tagline {
	color: white;
	font-weight: 800;
  font-size: 2.2rem;
}

.logo-and-tagline p {
	color: white;
	font-size: 18px;
}

/* Header navigation */

.header-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}

.nav-icon-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	color: white;
	position: relative;
	border-radius: 4px;
	transition: background 0.15s ease;
}

.nav-icon-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.nav-icon-btn:focus {
	outline: none;
}

/* Hamburger toggle button */
.hamburger-toggle {
	background: white;
	border: none;
	cursor: pointer;
	width: 70px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	margin-left: 8px;
	transition: background 0.15s ease;
}

.hamburger-toggle:hover {
	background: #f0f0f0;
}

.hamburger-toggle:focus {
	outline: none;
}

/* Animated hamburger icon */
.hamburger-icon {
	width: 22px;
	height: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hamburger-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background: #333;
	border-radius: 2px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Hamburger to X animation */
.hamburger-toggle.active .hamburger-icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hamburger-toggle.active .hamburger-icon span:nth-child(2) {
	opacity: 0;
}

.hamburger-toggle.active .hamburger-icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Full-height slide-out menu overlay */
.hamburger-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.hamburger-overlay.show {
	opacity: 1;
	visibility: visible;
}

/* Full-height slide-out menu */
.hamburger-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	max-width: 80vw;
	height: 100%;
	background: white;
	z-index: 1200;
	transform: translateX(-100%);
	transition: transform 0.2s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.hamburger-menu.show {
	transform: translateX(0);
}

/* Menu header */
.hamburger-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
	background: #f8f9fa;
}

.hamburger-menu-header .menu-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
}

.hamburger-close {
	background: transparent;
	border: none;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.hamburger-close:hover {
	background: #eee;
	color: #333;
}

.hamburger-close:focus {
	outline: none;
}

/* Menu items container */
.hamburger-menu-items {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

/* Menu items */
.hamburger-menu-item {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	color: #444;
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 500;
	transition: background 0.1s ease, color 0.1s ease;
	border-left: 3px solid transparent;
}

.hamburger-menu-item:hover {
	background: #f5f5f5;
	color: #333;
	text-decoration: none;
}

.hamburger-menu-item.active {
	color: #2b922b;
	background: #f0fff0;
	border-left-color: #2b922b;
}

.hamburger-menu-item i {
	font-size: 1.25rem;
	width: 28px;
	margin-right: 14px;
	text-align: center;
	color: #666;
}

.hamburger-menu-item:hover i,
.hamburger-menu-item.active i {
	color: #2b922b;
}

/* Undo button container - below action buttons */
.undo-button-container {
    text-align: center;
    padding: 10px 0;
    margin-top: 5px;
}

.undo-button-container #undoActionButton {
    background: transparent;
    border-color: rgba(255, 193, 7, 0.6);
    color: #856404;
    font-size: 0.85rem;
}

.undo-button-container #undoActionButton:hover {
    background: rgba(255, 193, 7, 0.2);
}


/* app main area */

.main-content {
    display: flex;
    align-items: flex-start;
    min-height: 85vh;
}

.tab-content {
    width: calc(100% - 75px);
    
}

.tab-pane {
	background: #f9f9f9;
	padding: 15px 7px;

     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

}

.tab-pane#statistics-content {
    background: none;
    padding: 0px;
}

.tab-pane .btn {
	margin-bottom: 20px;
}


.button-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 6;
}
/* app main tab menu - Cost, Use, Goals */
.button-bar {
    width: 70px;
    margin-left: 5px;

     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.button-bar .button-group {
    width: 100%;
    margin-bottom: 13px;
}
.button-group a {
    color: grey;
	width: 70px;
    margin-bottom: 0px;
}
.button-group a .icon,
.button-group a .button-text {
    text-align: center;
    margin-bottom: 0px;
}
.button-group a.active {
	color: black;
}

.nav-tabs {
	margin: 7px 0px 0px 0px;
}

/* BASELINE QUESTIONNAIRE */
    .baseline-intro {
        color: #666;
        margin-bottom: 20px;
        font-style: italic;
    }
    .baseline-heading {
        margin-top: 40px;
    }
    .serious-user .baseline-intro {
        display: none;
    }
    .serious.question-set {
        display: none;
    }
    .serious-user .serious.question-set {
        display: inherit;
    }

    .baseline-questionnaire .question-set {
        margin: 25px 0px 10px;
        padding: 5px 10px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* Big choice boxes for Yes/No questions */
    .big-choice-container {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        height: 120px;
    }

    .big-choice-option {
        flex: 1;
        display: flex;
    }

    .big-choice-label {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .big-choice-label:hover {
        border-color: #4d83b5;
        background: #e8f4fd;
    }

    .big-choice-label:has(input:checked) {
        border-color: #4d83b5;
        background: #d0e7f9;
        box-shadow: 0 0 0 3px rgba(77, 131, 181, 0.25);
    }

    .big-choice-label input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .big-choice-text {
        font-size: 1.8rem;
        font-weight: 600;
        color: #333;
    }

    /* Importance Grid (Question Set 3) */
    .importance-question h4 {
        margin-bottom: 20px;
    }

    .importance-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .importance-option {
        display: block;
        cursor: pointer;
    }

    .importance-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .importance-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 5px;
        background: #f8f9fa;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        transition: all 0.2s ease;
        min-height: 120px;
    }

    .importance-card:hover {
        border-color: #4d83b5;
        background: #e8f4fd;
    }

    .importance-option input:checked + .importance-card {
        border-color: #4d83b5;
        background: #d0e7f9;
        box-shadow: 0 0 0 3px rgba(77, 131, 181, 0.25);
    }

    .importance-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        color: #6c757d;
        transition: color 0.2s ease;
    }

    .importance-option input:checked + .importance-card .importance-icon {
        color: #4d83b5;
    }

    .importance-icon svg {
        width: 100%;
        height: 100%;
    }

    .importance-label {
        font-size: 0.95rem;
        font-weight: 500;
        color: #495057;
        text-align: center;
    }

    /* Goal Question Sets - Minimal Style */
    .goal-question-set {
        padding: 15px 15px 20px !important;
    }

    .goal-question-set h4 {
        margin-bottom: 18px;
    }

    /* Goal form styles consolidated in CREATE GOAL DIALOG section */

    /* Time picker inline */
    .time-picker-inline {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .time-input {
        width: 50px !important;
        text-align: center !important;
        padding: 8px 6px !important;
    }

    .time-unit {
        font-size: 0.85rem;
        color: #6c757d;
        margin-right: 8px;
    }

    /* Money input */
    .money-input-wrapper {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .currency-symbol {
        font-size: 0.95rem;
        color: #6c757d;
    }

    .money-input {
        width: 80px !important;
    }

    /* Timeline label spans */
    .usage-timeline-label,
    .time-timeline-label,
    .spending-timeline-label {
        font-weight: normal;
        color: #6c757d;
    }

    /* Icon colors using mask-image for true color control */
    .importance-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .importance-icon .icon-mask {
        width: 48px;
        height: 48px;
        background-color: #6c757d;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transition: background-color 0.2s ease;
    }

    .importance-icon .icon-mask.icon-tally {
        -webkit-mask-image: url('../assets/icons/tally.svg');
        mask-image: url('../assets/icons/tally.svg');
    }

    .importance-icon .icon-mask.icon-clock {
        -webkit-mask-image: url('../assets/icons/clock.svg');
        mask-image: url('../assets/icons/clock.svg');
    }

    .importance-icon .icon-mask.icon-dollar {
        -webkit-mask-image: url('../assets/icons/dollar.svg');
        mask-image: url('../assets/icons/dollar.svg');
    }

    .importance-icon .icon-mask.icon-heart {
        -webkit-mask-image: url('../assets/icons/heart-pulse.svg');
        mask-image: url('../assets/icons/heart-pulse.svg');
    }

    /* Selected state - darker grey by default */
    .importance-option input:checked + .importance-card .importance-icon .icon-mask {
        background-color: #495057;
    }

    /* Decrease mode: red icons when selected */
    body.do-less .importance-option input:checked + .importance-card .importance-icon .icon-mask {
        background-color: #911521;
    }

    /* Increase mode: green icons when selected */
    body.do-more .importance-option input:checked + .importance-card .importance-icon .icon-mask {
        background-color: #1e9039;
    }

    /* Observe mode: grey icons when selected */
    body.do-equal .importance-option input:checked + .importance-card .importance-icon .icon-mask {
        background-color: #495057;
    }

    .baseline-questionnaire div.question {
		padding: 20px 0px;
	}

    /* Behavior direction question with large arrows */
    .behavior-direction-question .behavior-direction-options {
        display: flex;
        justify-content: space-around;
        gap: 10px;
    }

    .behavior-direction-question .behavior-option {
        flex: 1;
        text-align: center;
        padding: 15px 10px;
        border: 2px solid #ddd;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .behavior-direction-question .behavior-option:hover {
        border-color: #999;
        background: #f8f9fa;
    }

    .behavior-direction-question .behavior-option label {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        margin: 0;
    }

    .behavior-direction-question .behavior-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .behavior-direction-question .behavior-arrow {
        font-size: 3rem;
        margin-bottom: 8px;
        transition: transform 0.2s ease;
    }

    /* Default/Observe mode - two contrasting greys */
    .behavior-direction-question .decrease-arrow {
        color: #495057;
    }

    .behavior-direction-question .increase-arrow {
        color: #adb5bd;
    }

    /* Decrease mode - green down (good), red up (bad) */
    body.do-less .behavior-direction-question .decrease-arrow {
        color: #1e9039;
    }

    body.do-less .behavior-direction-question .increase-arrow {
        color: #911521;
    }

    /* Increase mode - red down (bad), green up (good) */
    body.do-more .behavior-direction-question .decrease-arrow {
        color: #911521;
    }

    body.do-more .behavior-direction-question .increase-arrow {
        color: #1e9039;
    }

    /* Observe mode - contrasting greys */
    body.do-equal .behavior-direction-question .decrease-arrow {
        color: #495057;
    }

    body.do-equal .behavior-direction-question .increase-arrow {
        color: #adb5bd;
    }

    .behavior-direction-question .behavior-option span {
        font-weight: 500;
        font-size: 1rem;
    }

    /* Selected state */
    .behavior-direction-question .behavior-option:has(input:checked) {
        border-color: #4d83b5;
        background: #e8f4fd;
    }

    .behavior-direction-question .behavior-option:has(input:checked) .behavior-arrow {
        transform: scale(1.2);
    }

/* OBSERVE MODE - Two contrasting neutral greys */
body.do-equal .bar-chart .legend .color.primary {
    background: #495057;
}

body.do-equal .bar-chart .legend .color.secondary {
    background: #adb5bd;
}

body.do-equal .ct-series-a line {
    stroke: #495057 !important;
}

body.do-equal .ct-series-b line {
    stroke: #adb5bd !important;
}

body.do-equal .weekly-report .statistic .percent-changed.up,
body.do-equal .weekly-report .statistic .percent-changed.down {
    color: #6c757d;
}

body.do-equal .weekly-report .goal-report .amount-changed.up,
body.do-equal .weekly-report .goal-report .amount-changed.down {
    color: #6c757d;
}

/* Baseline Values Settings Section */
.baseline-values-settings {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 5px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.baseline-values-settings h3 {
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.baseline-values-settings .baseline-values-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.baseline-value-row {
    margin-bottom: 18px;
    padding: 15px 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.baseline-value-row:last-of-type {
    margin-bottom: 0;
}

.baseline-value-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 10px;
}

.baseline-value-label i {
    margin-right: 8px;
    color: #4d83b5;
    width: 18px;
    text-align: center;
}

.baseline-value-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.baseline-value-input-group .baseline-input {
    width: 80px;
    text-align: center;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.baseline-value-input-group .baseline-input:focus {
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.15);
    outline: none;
}

.baseline-value-input-group.time-inputs .baseline-input {
    width: 44px;
}

.baseline-value-input-group .time-separator {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.baseline-value-input-group .currency-prefix {
    font-size: 1rem;
    color: #495057;
    font-weight: 500;
}

.baseline-value-input-group .baseline-timeline-select {
    width: auto;
    min-width: 100px;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.baseline-value-input-group .baseline-timeline-select:focus {
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.15);
    outline: none;
}

.baseline-values-empty-message {
    text-align: center;
    font-style: italic;
    padding: 15px;
    margin: 0;
}

/* Category-specific colors for baseline value rows */
.baseline-value-row[data-baseline-category="valuesTimesDone"] .baseline-value-label i {
    color: #6b96c1;
}

.baseline-value-row[data-baseline-category="valuesTime"] .baseline-value-label i {
    color: #17a2b8;
}

.baseline-value-row[data-baseline-category="valuesMoney"] .baseline-value-label i {
    color: #28a745;
}

/* Displayed Statistics Section */
.displayed-statistics {
    margin-top: 20px;
}

.displayed-statistics h3 {
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #2c3e50;
    margin-bottom: 25px;
}

/* Stats Category Cards */
.stats-category {
    margin-bottom: 20px;
    border: none;
    border-radius: 12px;
    padding: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stats-category:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stats-category .category-toggle {
    margin-bottom: 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
}

.stats-category .category-toggle label {
    font-size: 1.15rem;
    color: #343434;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.3px;
    gap: 12px;
}

.stats-category .category-toggle label strong {
    font-weight: 500;
}

.stats-category .category-toggle .form-check-input {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    padding: 0;
}

.stats-category .category-options {
    margin-left: 0;
    margin-top: 0;
    padding: 15px 20px 20px;
    border-top: none;
    background: #fff;
}

.stats-category .category-options .form-check {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.stats-category .category-options .form-check:hover {
    background: #f8f9fa;
}

.stats-category .category-options .form-check-label {
    font-size: 0.95rem;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 0;
    gap: 12px;
}

.stats-category .category-options .form-check-input {
    margin: 0;
    padding: 0;
}

/* Category color variations */
.stats-category .category-toggle {
    background: linear-gradient(135deg, #e0e0e0 0%, #bbbbbb 100%);
}
/* Hide category options when category is unchecked */
.stats-category.category-disabled .category-options {
    display: none;
}

.stats-category.category-disabled {
    opacity: 0.6;
}

.stats-category.category-disabled .category-toggle {
    background: linear-gradient(135deg, #eeeded 0%, #dcdcdc 100%);
}

/* Buttons category - always visible, checkbox disabled but styled as active */
.stats-category-buttons .category-toggle {
    background: linear-gradient(135deg, #4d83b5 0%, #3a6591 100%);
}

.stats-category-buttons .category-toggle label strong {
    color: #fff;
}

.stats-category-buttons .category-toggle .form-check-input {
    opacity: 0.7;
}

/* Conditional options (buttons, log items, report items) that are hidden */
.button-option[style*="display: none"],
.log-option[style*="display: none"],
.report-option[style*="display: none"] {
    margin: 0;
    padding: 0;
}
	.baseline-questionnaire div.question > label {
		font-weight: 550;
	}
  
	.baseline-questionnaire .form-message .success,
    .baseline-questionnaire .form-message .failure {
        color: white;
        border-radius: 5px;
        margin: 10px;
        padding: 5px;
        
    }
    .baseline-questionnaire .form-message .success {
        background: #218838;
        
    }
    .baseline-questionnaire .form-message .failure {
        background: #c82333;
        
    }

    .baseline-questionnaire {
        padding-bottom: 15px;
    }

    .btn.btn-collapse {
        width: 100%;
        margin: 4px 0;
        position: relative;
    }
    
    .btn.btn-collapse h3 {
        margin: 0px;
        text-align: left;
    }

    .btn-collapse .caret {
        top: 7px;
        right: 15px;
        width: 0;
        height: 0;
        position: absolute;
    }
    .btn-collapse .caret:before,
    .btn-collapse .caret:after {
        content: "";
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-width: 7px 8px;
        border-style: solid;
        border-color: transparent;
        z-index: 100;
    }
    .btn-collapse[aria-expanded="true"] .caret:after {
        bottom: -18px;
        right: -8px;
        border-bottom-color: #000;
    }
    
    .btn-collapse[aria-expanded="false"] .caret:after {
        bottom: -18px;
        right: -8px;
        border-top-color: #000;
    }

    .btn-collapse[aria-expanded="false"] .caret {
        top: 14px;
    }

/* REPORTS */

/* Report Filter Controls */
.report-filters {
    margin: 15px 0 20px;
    display: flex;
    justify-content: center;
}

.report-filter-group {
    display: flex;
    gap: 10px;
}

.report-filter-wrapper {
    position: relative;
    display: inline-block;
}

.report-filter-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.7rem;
    color: #666;
}

.report-filter-select {
    padding: 8px 30px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.report-filter-select:focus {
    outline: none;
    border-color: #8b3a75;
}

/* Legend label colors */
.legend .color.primary {
    background-color: #911521;
}

.legend .color.secondary {
    background-color: #1e9039;
}

/* Hide secondary legend item when only one series (cost) */
.legend-secondary-item.d-none {
    display: none !important;
}

/* ============================================
   BRIEF STATS BAR
   ============================================ */

/* Full-width wrapper - breaks out of parent padding */
.brief-stats-container-wrapper {
    position: relative;
    left: -5px;
    padding-top: 82px;
    width: calc(100% + 10px);
    background: rgba(0,0,0,0.2);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.brief-stats {
    position: relative;
    z-index: 5;
    background: #171717;
    background: radial-gradient(circle,rgba(23, 23, 23, .8) 23%, rgba(59, 58, 58, .7) 86%, rgba(193, 193, 193, .6) 100%);
    backdrop-filter: blur(8px);
    border-radius: 0 0 10px 10px;
    padding: 0px 20px 8px 20px;
    margin: 0;
    max-height: 55px;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.brief-stats-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.stat-brief {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 30%; /* Default: 30% width for most stats */
    min-width: 0;
    justify-content: flex-end;
}

.stat-brief.stat-last-done,
.stat-brief.stat-last-spent {
    flex: 0 0 40%; /* Timer stats: 40% width */
    align-items: flex-start;
    justify-content: flex-start;
}

/* Do Before - ASAP block display (doMore mode, when interval has elapsed) */
.stat-brief.stat-last-done .do-before-asap {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #3bba2d;
    text-align: center;
    line-height: 1.1;
    padding: 0.5rem 0;
}

.stat-brief .timer-recepticle {
    margin: 0;
    max-height: 95px;
    max-width: 147px;
    overflow: hidden;
    position: absolute;
    left: 7px;
    top: -75px;
    z-index: 0;
}

.stat-brief.stat-last-time {
    align-items: flex-start;
    text-align: left;
}

/* Base text color - dark enough for light bg, light enough for dark bg */
.stat-brief-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6b96c1; /* Dark blue-gray - works on both backgrounds */
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
    max-width: 100%;
}

.stat-brief.stat-last-time .stat-brief-value {
    font-size: 1.0rem;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    letter-spacing: -0.5px;
}

.stat-brief-label {
    text-align: center;
    font-size: .8rem;
    color: #d6d9dd; /* Slightly lighter dark blue-gray */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 5px;
    line-height: 1.1;
    font-weight: 600;
}

/* Pie chart container - base size (larger) */
.stat-brief-chart {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    border-radius: 50%;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Hide ratio label inside pie chart */
.stat-brief-chart .pie-percentage,
.stat-brief-chart .pie-ratio {
    display: none;
}

/* Resist streak styling */
.stat-brief.stat-resist-streak .stat-brief-value {
    color: #1e9039; /* Updated green */
}

/* Comparison stat styling (stat vs best/avg) */
.stat-brief.stat-comparison {
    flex: 0 0 35%;
    align-items: center;
    justify-content: center;
}

.stat-comparison-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-comparison-values {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.stat-comparison-values .stat-current {
    font-size: 1.6rem;
    font-weight: 700;
    color: #6b96c1;
}

/* ============================================
   COMPARISON STAT - Resist Streak Style
   ============================================ */
.stat-brief.stat-comparison {
    flex: 0 0 45%;
}

.stat-comparison-content {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2px;
}

.stat-comparison-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 50px;
}

.stat-comparison-box.stat-current-box {
    background: linear-gradient(135deg, #2a3a4a 0%, #1e2a38 100%);
    border: 1px solid #3a4a5a;
}

.stat-comparison-box.stat-vs-box {
    position: relative;
    left: -12px;
    background: rgba(40, 50, 60, 0.8);
    border: 1px solid #2a3a4a;
}

.stat-current-label,
.stat-vs-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    margin-bottom: 2px;
}

.stat-comparison-box .stat-current {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    transition: all 0.3s ease;
}

.stat-comparison-box .stat-vs {
    font-size: 1.4rem;
    font-weight: 600;
    color: #8fa5bb;
    line-height: 1;
}

.stat-comparison-divider {
    font-size: 0.8rem;
    color: #5a6a7a;
    font-weight: 500;
    text-transform: lowercase;
    display: none;
}

/* Animation when current exceeds best/avg */
.stat-brief.stat-comparison.stat-exceeds .stat-current-box {
    background: linear-gradient(135deg, #2a4a3a 0%, #1e382a 100%);
    border-color: #6a3a3a;
    animation: pulse-glow 1.5s ease-in-out;
}

.do-less .stat-brief.stat-comparison.stat-exceeds .stat-current {
    color: #dd4646;
    font-size: 2.2rem;
}

.do-more .stat-brief.stat-comparison.stat-exceeds .stat-current {

    color: #3bba2d;
    font-size: 2.2rem;
    animation: celebrate 0.6s ease-out;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 224, 124, 0); }
    50% { box-shadow: 0 0 15px 5px rgba(124, 224, 124, 0.3); }
}

@keyframes celebrate {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 2 stats visible - comparison sizing */
.brief-stats-container.stats-count-2 .stat-comparison-box .stat-current {
    font-size: 2.2rem;
}
.brief-stats-container.stats-count-2 .stat-comparison-box .stat-vs {
    font-size: 1.6rem;
}
.brief-stats-container.stats-count-2 .stat-comparison-box {
    padding: 10px 16px;
}

/* 1 stat visible - comparison sizing */
.brief-stats-container.stats-count-1 .stat-comparison-box .stat-current {
    font-size: 2.8rem;
}
.brief-stats-container.stats-count-1 .stat-comparison-box .stat-vs {
    font-size: 2.0rem;
}
.brief-stats-container.stats-count-1 .stat-comparison-box {
    padding: 12px 20px;
}

/* ============================================
   MILESTONE STAT - Alarm Clock Style
   ============================================ */
.stat-brief.stat-milestone {
    flex: 0 0 45%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.stat-milestone-datetime {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-milestone-countdown {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-milestone-clock {
    background: #0a0a0a;
    border-radius: 8px;
    padding: 8px 16px;
    border: 2px solid #1a1a1a;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.05);
}

.stat-milestone-time {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff3333;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    text-shadow: 0 0 10px rgba(255, 50, 50, 0.5);
    letter-spacing: 2px;
}

.stat-milestone-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Milestone subtype colors - override for alarm clock */
.stat-brief.stat-milestone.stat-wait-until .stat-milestone-time {
    color: #ff5533; /* Orange-red for "wait" */
    text-shadow: 0 0 10px rgba(255, 85, 50, 0.5);
}

.stat-brief.stat-milestone.stat-do-it-by .stat-milestone-time {
    color: #33ff55; /* Green for "do it" */
    text-shadow: 0 0 10px rgba(50, 255, 85, 0.5);
}

.stat-brief.stat-milestone.stat-do-it-by .stat-milestone-clock {
    border-color: #1a2a1a;
}

/* 2 stats visible - milestone sizing */
.brief-stats-container.stats-count-2 .stat-milestone-time {
    font-size: 1.8rem;
}
.brief-stats-container.stats-count-2 .stat-milestone-countdown {
    font-size: 1rem;
}
.brief-stats-container.stats-count-2 .stat-milestone-clock {
    padding: 7px 14px;
    border: 1px solid #1a1a1a;
}

/* 1 stat visible - milestone sizing */
.brief-stats-container.stats-count-1 .stat-milestone-time {
    font-size: 2.8rem;
}
.brief-stats-container.stats-count-1 .stat-milestone-countdown {
    font-size: 1.2rem;
}
.brief-stats-container.stats-count-1 .stat-milestone-clock {
    padding: 12px 24px;
}

/* Milestone on-track / off-track styling */
.stat-brief.stat-milestone.milestone-on-track .stat-milestone-countdown {
    color: #ffffff;
    font-size: 0.85rem;
}

.stat-brief.stat-milestone.milestone-off-track .stat-milestone-time,
.stat-brief.stat-milestone.milestone-off-track .stat-milestone-countdown {
    color: #ff3333;
}

.stat-brief.stat-milestone.milestone-ahead .stat-milestone-time,
.stat-brief.stat-milestone.milestone-ahead .stat-milestone-countdown {
    color: #20c997;
}


/* ============================================
   BRIEF STATS - DYNAMIC SIZING BY COUNT (max 3)
   ============================================ */

/* 3 stats visible */
.brief-stats-container.stats-count-3 .stat-brief-value {
    font-size: 2.5rem;
}
.brief-stats-container.stats-count-3 .stat-brief.stat-last-time .stat-brief-value {
    font-size: 2.2rem;
}
.brief-stats-container.stats-count-3 .stat-brief-chart {
    width: 75px;
    height: 75px;
}
.brief-stats-container.stats-count-3 .stat-brief.stat-resist-streak .stat-brief-value {
    font-size: 3.0rem;
}

/* 2 stats visible */
.brief-stats-container.stats-count-2 .stat-brief-value {
    font-size: 3.0rem;
}
.brief-stats-container.stats-count-2 .stat-brief.stat-last-time .stat-brief-value {
    font-size: 2.7rem;
}
.brief-stats-container.stats-count-2 .stat-brief-chart {
    width: 68px;
    height: 68px;
}
.brief-stats-container.stats-count-2 .stat-brief.stat-resist-streak .stat-brief-value {
    font-size: 3.5rem;
}

/* 1 stat visible */
.brief-stats-container.stats-count-1 .stat-brief-value {
    font-size: 3.5rem;
}
.brief-stats-container.stats-count-1 .stat-brief.stat-last-time .stat-brief-value {
    font-size: 3.2rem;
}
.brief-stats-container.stats-count-1 .stat-brief-chart {
    width: 80px;
    height: 80px;
}
.brief-stats-container.stats-count-1 .stat-brief.stat-resist-streak .stat-brief-value {
    font-size: 4.0rem;
}

/* Show/hide based on habit direction - only apply when not individually hidden */
body.do-more .do-less-only:not(.d-none),
body.do-equal .do-less-only:not(.d-none) {
    display: none !important;
}

body.do-less .do-more-only:not(.d-none) {
    display: none !important;
}

    .weekly-report .week-range {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 25px;
		margin-bottom: 25px;
	}
    .weekly-report .week-range .btn {
		margin-bottom: 0px;
	}
	
	.weekly-report .week-range button,
	.weekly-report .week-range .current-week {
		display: flex;
	}
	.weekly-report .week-range .current-week > div {
		display: inline-block;
	}

    .weekly-report span.ct-label.ct-horizontal.ct-end {
        transform: rotate(60deg);
        padding-left: 10px;
    }

    /* BAR CHART */
    .bar-chart {
        display: flex; 
        flex-direction: column-reverse;
    }

        .bar-chart .legend {
            display: flex;
            justify-content: center;
        }

        .bar-chart .legend .color-descriptor {
            padding: 0px 10px;
        }

        .bar-chart .legend .color-descriptor label {
            display: inline-block;
            margin-bottom: 0px;
        }

        .bar-chart .legend .color {
            height: 15px;
            width: 15px;
            display: inline-block;
            
        }
        /* Chart series colors: series-a = primary (red), series-b = secondary (green) */
        .ct-series-a line,
        .ct-series-a .ct-bar,
        .ct-series-a .ct-line,
        .ct-series-a .ct-area {
            stroke: #911521 !important;
            fill: rgba(220, 53, 69, 0.2) !important;
        }
        .ct-series-b line,
        .ct-series-b .ct-bar,
        .ct-series-b .ct-line,
        .ct-series-b .ct-area {
            stroke: #1e9039 !important;
            fill: rgba(40, 167, 69, 0.2) !important;
        }

        /* Cumulative chart increase point markers */
        .ct-series-a .ct-point.ct-point-increase {
            stroke: #911521 !important;
            fill: #fff;
        }
        .ct-series-b .ct-point.ct-point-increase {
            stroke: #1e9039 !important;
            fill: #fff;
        }

        /* Y-axis label styling for better readability */
        .ct-label.ct-vertical {
            font-size: 10px;
            white-space: nowrap;
            padding-right: 5px;
        }
        
        /* Give Y-axis labels more room on line charts */
        .ct-chart-line {
            overflow: visible;
        }
        .ct-chart-line .ct-labels {
            overflow: visible;
        }


    /* bottom statistics */
        .report-statistics {
            display: inline-block;
            width: 100%;
            padding-right: 25px;
        }
        
        .report-statistics .statistic {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
        .report-statistics .statistic label,
        .report-statistics .statistic .percent-changed {
            float: right;
        }
        
        .report-statistics .statistic label {
            color: grey;
            padding-right: 15px;
        
        }
        .report-statistics .statistic .percent-changed {
            
            clear: right;
        }
        .do-less .weekly-report .statistic .percent-changed.down,
        .do-more .weekly-report .statistic .percent-changed.up {
            color: #1e9039;
        }
        .do-less .weekly-report .statistic .percent-changed.up,
        .do-more .weekly-report .statistic .percent-changed.down {
            color: #911521;
        }


        
        .weekly-report .goal-report {
            margin-top: 20px;
            clear: both;
        }
        .weekly-report .goal-report .row {
            padding: 20px 0px;
        }
        .weekly-report .goal-report .amount-changed {
            font-weight: 600;
        } 
        .do-less .weekly-report .goal-report .amount-changed.down,
        .do-more .weekly-report .goal-report .amount-changed.up {
            color: #1e9039;
        }
        .do-less .weekly-report .goal-report .amount-changed.up,
        .do-more .weekly-report .goal-report .amount-changed.down {
            color: #911521;
        }

    /* goal report table */
        .goal-report table {
            padding-top: 20px;
        }

        .goal-report th {
            color: grey;
            font-weight: 500;
        }
        .goal-report thead th,
        .goal-report td {
            text-align: center;
        }


/* STATISTICS */
.stat-group {
    display: flex;
    padding: 5px 0px;
}
.stat-group .stat-recepticle {
    position: relative;
    background-image: url("../assets/images/mayan-ruin-background-timers.jpg");
    width: 33.3333%;
    flex: 1 0 33.3333%;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: calc(33.3333%);
    margin-bottom: 0;
    padding: 3px;
    
}
.stat-group .stat-recepticle .white-bg {
    background: white;
    position: absolute;
    top: -2px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    border-radius: 4px;
}

.stat-group .stat-recepticle p {
    margin: 0;
    font-size: .8rem;
    z-index: 10;
}
.stat-group .stat-recepticle span:not(.do-less):not(.do-more) {
    text-align: center;
    z-index: 10;
}
.stat-group .stat-recepticle .white-bg::after {
    width: calc(100% + 8px);
    height: 35px;
    background: white;
    content: "";
    position: absolute;
    left: -4px;
}

.stat-recepticle,
.timer-recepticle {
	text-align: left;
    margin-bottom: 30px;
    border-radius: 4px;

}

.stat-recepticle span:not(.do-less):not(.do-more) {
    display: inline-block;
    font-weight: 600;
    font-size: 1.2rem;
}
.stat-recepticle .stat-group.avgTimeBetween span {
	font-size: 1rem;
}

.stat-recepticle p,
.timer-recepticle p {
    font-size: 1.2rem;
    color: #b1b1b1;
    margin: 0;
}

.stat-recepticle.highlighted {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
}

.stat-recepticle.highlighted > p {
    padding-top: 10px;
}

.stat-recepticle.highlighted .stat-recepticle {
    width: 100%;
    flex: unset;
    max-width: inherit;

    border-top-left-radius: 100px;
    border-top-right-radius: 4px;
}
.stat-recepticle.highlighted .stat-recepticle .white-bg{

    top: 4px;
    bottom: -2px;
    left: -2px;
    right: 2px;
}
.stat-recepticle.highlighted .stat-recepticle .white-bg::after{
    width: calc(100% + 4px);
}

.clickCounter {
	background: #2b922bb7;
	color: white;
	border-radius: 15px;
	position: absolute;
	padding: 0px 6px;
    margin-left: 3px;
    z-index: 1;
}

/* ========================================
   LOG MORE INFO DIALOGS (Shared Styles)
   ======================================== */

.log-more-info {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 24px 20px;
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    z-index: 100;
    display: none;
}

.log-more-info h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
}

.log-more-info hr {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 16px 0;
}

.log-more-info .row {
    margin-left: -8px;
    margin-right: -8px;
}

.log-more-info .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.log-more-info button.btn {
    margin-top: 8px;
}

/* Standardized Input Widths */
.log-more-info input[type="number"],
.log-more-info input[type="text"] {
    width: 100%;
    max-width: 120px;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
}

.log-more-info select {
    min-width: 65px;
}

.log-more-info textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    resize: vertical;
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Cost Dialog Specific */
.cost.log-more-info .input-area {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: baseline;  
    border-bottom: .5px solid black;
}

.cost.log-more-info .input-area label {
    font-weight: 600;
    font-size: 1.25rem;
    color: #1e9039;
}

.cost.log-more-info .input-area input {
    max-width: 100px;
    font-size: 1.25rem;
    margin-right: 8px;
}

/* Goal Dialog Specific */
.wait.log-more-info #goalEndPicker,
.wait.log-more-info #waitEndPicker {
    display: table;
    margin: 20px auto;
}

.wait.log-more-info .time-picker-container {
    text-align: center;
}

.time-picker-container span.label {
    font-size: 1.5rem;
    padding: 0 4px;
}

/* ==========================================
   Redesigned Wait Dialog (styled like use dialog)
   ========================================== */

/* Wait dialog tabs - inherit use dialog tab styles */
.wait-dialog-tabs {
    margin-bottom: 20px;
}

.wait-dialog-tab {
    flex: 1;
}

/* Duration options - styled like use dialog radio options */
.wait-duration-content {
    padding: 0;
}

.wait-duration-content h3 {
    margin-bottom: 20px;
}

.wait-duration-option {
    padding: 12px 0 12px 10px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wait-duration-option .form-check-input {
    margin: 0;
    transform: scale(1.3);
}

.wait-duration-option label {
    padding-left: 12px;
    margin-bottom: 0;
    cursor: pointer;
    flex: 1;
    text-align: left;
}

/* Quick wait buttons */
.wait-quick-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 0 16px 36px;
}

.wait-quick-btn {
    padding: 14px 6px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wait-quick-btn:hover {
    border-color: #8b3a75;
    background: #faf5f9;
    color: #4a1942;
}

.wait-quick-btn:active {
    transform: scale(0.98);
}

/* Custom time inputs section */
.wait-custom-inputs {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 12px 0 16px 36px;
}

.wait-custom-inputs select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}

.wait-custom-inputs .label {
    font-size: 1.25rem;
    padding: 0 4px;
}

/* Date picker styling */
.wait-custom-inputs .wait-date-picker {
    display: block;
    width: 100%;
    margin: 16px auto 0;
}

/* Show/hide based on radio selection */
.wait.log-more-info.show-custom .wait-custom-inputs {
    display: flex;
}

/* Quick buttons always visible */

/* Use Dialog Specific */
.cost.log-more-info .time-picker-container,
.use.log-more-info .time-picker-container {
    padding: 16px 0;
}

.cost.log-more-info .time-picker-container .form-check-input,
.use.log-more-info .time-picker-container .form-check-input {
    margin: 0;
    transform: scale(1.3);
}

.cost.log-more-info .time-picker-container .time-picker-now,
.use.log-more-info .time-picker-container .time-picker-now,
.cost.log-more-info .time-picker-container .time-picker-before,
.use.log-more-info .time-picker-container .time-picker-before {
    padding: 8px 0 8px 10px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cost.log-more-info .time-picker-container .time-picker-now label,
.use.log-more-info .time-picker-container .time-picker-now label,
.cost.log-more-info .time-picker-container .time-picker-before label,
.use.log-more-info .time-picker-container .time-picker-before label {
    padding-left: 20px;
    margin-bottom: 0;
}


#greyed-out-div {
	width: 100%;
	position: fixed;
	background-color: black;
	z-index: 0;
	opacity: 0;
}



/*TIMER STYLES */

	.fibonacci-timer {
		display: inline-block;
		background-image: url("../assets/images/mayan-ruin-background-timers.jpg");
		padding: 1px;
		overflow: hidden;
		max-width: 100%;
        border-radius: 4px;
    }
    
	.fibonacci-timer .boxes {
	  width: 9rem;
	  height: 9rem;
	}
	
	.fibonacci-timer .timerSpan {
	  display: inherit;
	  font-size: 18px;

	}
	
	.fibonacci-timer .daysSinceLastClick {
	  font-size: 52px;
    }
    
	.fibonacci-timer .hoursSinceLastClick {
	  font-size: 36px;
	}
	
	.fibonacci-timer .boxes div {
		position: relative;
		background-color: white;
		margin: 2px;
		border-radius: 3px;
	}

	/*timer number values */
	.fibonacci-timer .boxes div span:first-child {
		font-weight: 700;
		text-align: center;
	}

	/*timer labels */
	.fibonacci-timer .boxes div span:nth-child(2) {
		color: #919191;
		display: inherit;
		text-align: center;
		position: relative;
		bottom: 7px;
	}
	
	.fibonacci-timer .boxes div:first-child {
        height: 100%;
        /* center the 5 Days in box */
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; */
	}
	  
	.fibonacci-timer .boxes div:nth-child(2) {
		width: calc(66.6% - 6px);
		height: calc(66.6% - 8px);
        float: left;
        
	}
	  
	.fibonacci-timer .boxes div:nth-child(3) {
		width: calc(33.3% - 6px);
		height: calc(33.3% - 6px);
		float: left;
		clear: right;
	}
	  
	.fibonacci-timer .boxes div:last-child {
		width: calc(33.3% - 6px);
		height: calc(33.3% - 6px);
		float: left;
    }

    /* Create artificial horizontal layout when all boxes are visible */
    .fully-visible.fibonacci-timer .boxes div:nth-child(2) {
        width: calc(66.6%);
        height: calc(66.6% - 2px);
        position: relative;
        left: 100%;
        top: -102%;
	}
	  
	.fully-visible.fibonacci-timer .boxes div:nth-child(3) {
        width: calc(33.3% - 2px);
		height: calc(33.3% - 2px);
        position: relative;
        left: 100%;
        top: -103%;
	}
	  
	.fully-visible.fibonacci-timer .boxes div:last-child {
		width: calc(33.3% - 2px);
		height: calc(33.3% - 2px);
        position: relative;
        left: 100%;
        top: -103%;
	}


/* TEMPLATE STYLES */
/* Notifications styles */

/* Notification overlay container - fixed position, no layout shift */
#notification-overlay {
	position: fixed;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	width: 100%;
	max-width: 460px;
	padding: 0 10px;
	pointer-events: none;
}

#notification-overlay .notification {
	pointer-events: auto;
}

/* Notification badge on bell icon */
.notification-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #911521;
	color: white;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 10px;
	min-width: 16px;
	text-align: center;
}

/* Bell animation when new notification arrives */
.notification-bell-animate {
	animation: bell-ring 0.6s ease-in-out;
}

@keyframes bell-ring {
	0% { transform: rotate(0); }
	15% { transform: rotate(15deg); }
	30% { transform: rotate(-15deg); }
	45% { transform: rotate(10deg); }
	60% { transform: rotate(-10deg); }
	75% { transform: rotate(5deg); }
	90% { transform: rotate(-5deg); }
	100% { transform: rotate(0); }
}

/* Overlay notification animations */
.notification-overlay {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.notification-overlay.notification-visible {
	opacity: 1;
	transform: translateY(0);
}

.notification-overlay.notification-exit {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 3s ease, transform 3s ease;
	pointer-events: none;
}

.notification {
	position: relative;
	background: rgb(211, 190, 251);
	background: url("../assets/images/mayan-notification-background.jpg"); 
	background-size: cover;
	border: 1px solid #818181; 
	border-radius: 4px; 
	padding: 7px 12px;
	margin-bottom: 3px;
}

.notification-message {
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}
.notification p {
    font-size: 1.2rem;
	margin-bottom: 0px;
	font-style: italic;
	color: #111111;
}
.notification-text {
	display: inline-block;
	max-width: calc(100% - 20px);
}
.notification-close {
	width: 20px;
	padding-left: 5px;
    float: right;
    font-size: 1.4rem;
	font-weight: 700;
	color: black;
}
.notification-response-tools {
	padding-top: 15px;
	text-align: center;
	
}
.notification-response-tools button {
	padding: 0px 15px;
	margin: 0px 5px 10px 5px;
}

/* Notifications tab styles */
#notifications-content .notifications-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 15px;
}

#notifications-content h2 {
	margin-bottom: 20px;
}

/* Notification log items */
.notification-log-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px;
	margin-bottom: 8px;
	border-radius: 6px;
	background: #f8f9fa;
	border-left: 4px solid transparent;
	transition: all 0.2s ease;
}

.notification-log-item.notification-unread {
	background: #e8f4fd;
	border-left-color: #007bff;
}

.notification-log-item.notification-read {
	opacity: 0.7;
}

.notification-log-item:hover {
	background: #e9ecef;
}

.notification-log-item.notification-unread:hover {
	background: #d4ebfc;
}

.notification-log-content {
	flex: 1;
	padding-right: 10px;
}

.notification-log-message {
	margin: 0 0 5px 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.notification-log-date {
	font-size: 0.8rem;
	color: #6c757d;
}

.notification-log-actions {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

.notification-log-actions .btn {
	padding: 4px 8px;
	margin-bottom: 0;
}

/* Notification type label */
.notification-log-type {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 2px 8px;
	border-radius: 3px;
	margin-bottom: 6px;
	background: #e9ecef;
	color: #495057;
}

.notification-log-item.type-success .notification-log-type {
	background: #d4edda;
	color: #155724;
}

.notification-log-item.type-warning .notification-log-type {
	background: #fff3cd;
	color: #856404;
}

.notification-log-item.type-info .notification-log-type {
	background: #d1ecf1;
	color: #0c5460;
}

/* Response tools in notification log */
.notification-log-response-tools {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #dee2e6;
}

.notification-log-response-tools button {
	padding: 4px 12px;
	margin: 0 5px 5px 0;
	font-size: 0.85rem;
}

/* Overlay notifications that require a response */
.notification-overlay.has-response-tools {
	border: 2px solid #ffc107;
	box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
	animation: response-pulse 2s ease-in-out infinite;
}

@keyframes response-pulse {
	0%, 100% { box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); }
	50% { box-shadow: 0 4px 20px rgba(255, 193, 7, 0.7); }
}

.notification-response-hint {
	margin: 8px 0 0 0;
	padding-top: 8px;
	border-top: 1px dashed rgba(0,0,0,0.2);
	font-size: 0.85rem;
	color: #555;
	text-align: center;
}

.notification-response-hint i {
	margin-right: 5px;
	color: #ffc107;
}

/* User response display in notification log */
.notification-user-response {
	margin-top: 8px;
	padding: 6px 10px;
	background: #e8f5e9;
	border-radius: 4px;
	font-size: 0.8rem;
	color: #2e7d32;
}

.notification-user-response i {
	margin-right: 5px;
}

/* smiley response  */
#mood-tracker-area .smileys {
    display: flex;
}
#mood-tracker-area .smiley {
    max-width: 20%;
    flex-basis: 20%;
    margin: 5px;
}

#mood-tracker-area .smiley img {
    border-radius: 50%;
}

.mood-0.smiley.selected img,
.mood-0.smiley.habit-log-icon{
    background-color: #e7e7e7;
    
}
.mood-1.smiley.selected img,
.mood-1.smiley.habit-log-icon{
    background-color: #e9e9c7;
    
}
.mood-2.smiley.selected img,
.mood-2.smiley.habit-log-icon{
    background-color: #e9e9a9;
    
}
.mood-3.smiley.selected img,
.mood-3.smiley.habit-log-icon{
    background-color: #e2e267;
    
}
.mood-4.smiley.selected img,
.mood-4.smiley.habit-log-icon{
    background-color: #f0f000;
    
}
#mood-tracker-area .response {
    padding: 10px;
}
#mood-tracker-area .response .text {
    width: 100%;
}

.smiley.habit-log-icon {
    border-radius: 50%;
    max-width: 20px;
}


/* GOAL LOG */

#habit-log .item .title {
	margin-top: 13px;
    font-size: 1.2rem;
}
#habit-log .item .date {
	color: #d6d6d6;
}
#habit-log .item p {
	margin-bottom: 0px;
}
#habit-log .item hr {
	margin-top: 5px;
}
#habit-log .item i {
	color: grey;
}

/* show more buttons */

#habit-log-show-more button.btn,
#habit-log-show-more p {
	margin-bottom: 0px;
}
    
/* ================================
   BEHAVIORAL GOALS TAB STYLES
   ================================ */

.behavioral-goals-container {
    padding: 10px 0;
}

.behavioral-goal-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.behavioral-goal-card.behavioral-goal-active {
    border-left: 4px solid #1e9039;
}

.behavioral-goal-card.behavioral-goal-completed {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
}

.behavioral-goal-card.behavioral-goal-abandoned {
    border-left: 4px solid #911521;
    opacity: 0.6;
}

.behavioral-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.behavioral-goal-type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.behavioral-goal-type-badge.quantitative {
    background: #e3f2fd;
    color: #1976d2;
}

.behavioral-goal-type-badge.qualitative {
    background: #fce4ec;
    color: #c2185b;
}

.behavioral-goal-status {
    font-size: 0.75rem;
    color: #888;
    text-transform: capitalize;
}

.behavioral-goal-body {
    margin-bottom: 12px;
}

.behavioral-goal-metric, .behavioral-goal-tenet {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #333;
}

.behavioral-goal-tenet {
    font-style: italic;
    color: #555;
}

.behavioral-goal-timeline {
    font-size: 0.85rem;
    color: #666;
}

.behavioral-goal-footer {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.behavioral-goal-created {
    font-size: 0.75rem;
    color: #999;
}

/* Behavioral Goal Success Overlay */
.behavioral-goal-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.behavioral-goal-success-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.behavioral-goal-success-close:hover {
    color: #333;
}

.behavioral-goal-success-content {
    text-align: center;
}

.behavioral-goal-success-content i {
    color: #1e9039;
    margin-bottom: 15px;
}

.behavioral-goal-success-content p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.view-behavioral-goals-btn {
    min-width: 140px;
}

/* Health Goal Mood Tracker */
.health-mood-tracker {
    margin-top: 10px;
}

.health-mood-tracker .smileys {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.health-mood-tracker .smiley {
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.health-mood-tracker .smiley:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.health-mood-tracker .smiley.selected {
    opacity: 1;
    transform: scale(1.15);
    border-radius: 50%;
    overflow: hidden;
}

.health-mood-tracker .smiley img {
    width: 100%;
    height: 100%;
}

.health-mood-tracker .mood-comment-text {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.9rem;
    resize: none;
}

/* Completion Timeline Row - consolidated in CREATE GOAL DIALOG section */

/* Goals section headers */
.goals-section-header {
    margin-bottom: 16px;
}

.goals-section-header h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.goals-section-header h3 i {
    color: #888;
}

.goals-section-subtitle {
    font-size: 0.85rem;
    margin-top: -4px;
}

/* ================================
   CREATE GOAL DIALOG STYLES
   ================================ */

.create-goal-btn {
    margin-top: 10px;
    font-size: 1.1rem;
}

.create-goal-btn i {
    margin-right: 5px;
}

/* ========================================
   CREATE GOAL DIALOG
   ======================================== */

.create-goal.log-more-info {
    margin-bottom: 20px;
}

/* Goal Type Selector */
.goal-type-selector {
    margin-bottom: 20px;
}

.goal-type-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}

.goal-type-dropdown {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
}

.goal-type-dropdown:focus {
    outline: none;
    border-color: #4d83b5;
    box-shadow: 0 0 0 3px rgba(77, 131, 181, 0.15);
}

.goal-type-inputs {
    animation: fadeIn 0.2s ease-out;
}

/* Shared Goal Form Row Styles */
.goal-input-row,
.goal-timeline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 14px;
    padding: 4px 0;
}

.goal-input-row label,
.goal-timeline-row label {
    margin: 0;
    font-size: 0.95rem;
    color: #495057;
    flex: 1;
}

/* Standardized Goal Input */
.goal-input {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 1rem;
    width: 50px;
    text-align: center;
}

.goal-input:focus {
    outline: none;
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.12);
}

/* Number input with visible spinners */
.goal-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.goal-input[type="number"]::-webkit-inner-spin-button,
.goal-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    appearance: auto;
    opacity: 1;
    height: 100%;
    cursor: pointer;
}

/* Lighter placeholder text (50% opacity) */
.goal-input::placeholder {
    color: rgba(108, 117, 125, 0.5);
    opacity: 1;
}

.goal-input::-webkit-input-placeholder {
    color: rgba(108, 117, 125, 0.5);
}

.goal-input::-moz-placeholder {
    color: rgba(108, 117, 125, 0.5);
}

.goal-input:-ms-input-placeholder {
    color: rgba(108, 117, 125, 0.5);
}

/* Timeline Select */
.timeline-select {
    padding: 10px 30px 10px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.timeline-unit {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Goal Timeline Helper Text */
.goal-timeline-helper {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 4px;
    font-style: italic;
}

/* Goal Milestone Warning / Goal Building Assistant */
.goal-milestone-warning {
    font-size: 0.8rem;
    padding: 0;
    margin-top: 12px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    border: none;
}

.goal-assistant {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
}

.assistant-info {
    padding: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.assistant-milestone-count {
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 10px;
}

.assistant-milestone-count i {
    color: #17a2b8;
    margin-right: 4px;
}

.assistant-tips {
    background: rgba(40, 167, 69, 0.08);
    border-radius: 6px;
    padding: 10px;
}

.tips-header {
    font-weight: 600;
    color: #28a745;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.tips-header i {
    margin-right: 4px;
}

.tips-list {
    margin: 0;
    padding-left: 20px;
    color: #495057;
    font-size: 0.75rem;
}

.tips-list li {
    margin-bottom: 3px;
}

.tips-list li:last-child {
    margin-bottom: 0;
}

.assistant-warnings {
    padding: 10px 12px;
}

.assistant-warning {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.assistant-warning:last-child {
    margin-bottom: 0;
}

.assistant-warning.danger {
    background: #f8d7da;
    color: #721c24;
    border-left: 3px solid #dc3545;
}

.assistant-warning.warning {
    background: #fff3cd;
    color: #856404;
    border-left: 3px solid #ffc107;
}

.assistant-warning i {
    margin-right: 6px;
}

/* Legacy classes for backwards compatibility */
.goal-milestone-warning.warning-low {
    background: #fff3cd;
    color: #856404;
}

.goal-milestone-warning.warning-high {
    background: #f8d7da;
    color: #721c24;
}

/* Time Picker in Goal Dialogs */
.create-goal .time-picker-container.create-time-picker,
.baseline-time-picker {
    display: flex;
    align-items: center;
    gap: 2px;
}

.create-goal .time-picker-container.create-time-picker select,
.baseline-time-picker select {
    font-size: 1rem;
    padding: 8px 28px 8px 10px;
    min-width: 50px;
}

.create-goal .time-picker-container.create-time-picker .label,
.baseline-time-picker .label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* Spending Input Label */
.spending-input-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1e9039;
    font-size: 1.1rem;
}

.spending-input-label input {
    width: 90px !important;
    text-align: center;
}

/* Health/Wellness Mood Tracker */
.create-health-mood-tracker .smileys,
.baseline-mood-tracker .smileys,
.health-mood-tracker .smileys {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 16px;
}

.create-health-mood-tracker .smiley,
.baseline-mood-tracker .smiley,
.health-mood-tracker .smiley {
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
    border-radius: 50%;
}

.create-health-mood-tracker .smiley:hover,
.baseline-mood-tracker .smiley:hover,
.health-mood-tracker .smiley:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.create-health-mood-tracker .smiley.selected,
.baseline-mood-tracker .smiley.selected,
.health-mood-tracker .smiley.selected {
    opacity: 1;
    transform: scale(1.15);
}

.create-health-mood-tracker .smiley img,
.baseline-mood-tracker .smiley img,
.health-mood-tracker .smiley img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Goal completion timeline section */
.goal-completion-timeline {
    margin-top: 10px;
}

/* ================================
   QUESTION 4 - CURRENT STATUS STYLES
   ================================ */

.current-status-question .status-type-selector {
    margin-bottom: 15px;
}

.status-type-dropdown {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
}

.status-type-dropdown:focus {
    outline: none;
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.15);
}

.status-type-inputs {
    animation: fadeIn 0.2s ease-out;
}

/* Baseline time picker */
.baseline-time-picker {
    display: flex;
    align-items: center;
    gap: 2px;
}

.baseline-time-picker select {
    font-size: 1.2rem;
    padding: 6px 24px 6px 8px;
}

.baseline-time-picker .label {
    font-size: 1rem;
    color: #6c757d;
}

/* Baseline mood tracker */
.baseline-mood-tracker .smileys {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 15px;
}

.baseline-mood-tracker .smiley {
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.baseline-mood-tracker .smiley:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.baseline-mood-tracker .smiley.selected {
    opacity: 1;
    transform: scale(1.15);
    border-radius: 50%;
    overflow: hidden;
}

.baseline-mood-tracker .smiley img {
    width: 100%;
    height: 100%;
}

.baseline-wellness-submit {
    width: 100%;
}

/* Baseline usage unit selector */
.baseline-unit-container {
    position: relative;
    flex: 0 1 120px;
}

.baseline-usage-unit-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    height: 42px;
}

.baseline-unit-container .custom-unit-input {
    display: flex;
    width: 268px;
    gap: 6px;
    margin-top: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.baseline-unit-container .custom-unit-text {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.baseline-unit-container .custom-unit-save-btn {
    padding: 6px 10px;
    background: #4d83b5;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Baseline usage chunk row (for high-frequency habits) */
.baseline-usage-chunk-row {
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

.baseline-usage-chunk-row label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.4;
}

.chunk-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chunk-input-row .goal-input {
    width: 80px;
    text-align: center;
}

.chunk-unit-label {
    font-size: 0.95rem;
    color: #6c757d;
}

/* Baseline session average row */
.baseline-session-avg-row {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e9ecef;
}

.baseline-session-avg-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #6c757d;
}

.baseline-session-time-picker {
    display: flex;
    align-items: center;
    gap: 5px;
}

.baseline-session-time-picker select {
    font-size: 1.2rem;
    padding: 6px 24px 6px 8px;
}

.baseline-session-time-picker .label {
    font-size: 1rem;
    color: #6c757d;
}

/* Create goal session average row */
.create-session-avg-row label {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Create goal usage chunk row (for high-frequency habits) */
.create-usage-chunk-row .goal-input-row label {
    font-size: 0.9rem;
    color: #6c757d;
}

.baseline-wellness-text {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.95rem;
    resize: none;
}

.baseline-wellness-text:focus {
    outline: none;
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.15);
}

/* ================================
   JOURNAL TAB STYLES
   ================================ */

#journal-content {
    padding-bottom: 20px;
}

#journal-content h2 {
    margin-bottom: 5px;
}

#journal-content #mood-tracker-heading {
    font-size: 1.3rem;
    color: #495057;
    margin-bottom: 15px;
}

#journal-content #habit-log-heading {
    font-size: 1.3rem;
    color: #495057;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

#journal-content #mood-tracker-area {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#journal-content #mood-tracker-area .response .text {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px;
    font-size: 0.95rem;
    resize: none;
}

#journal-content #mood-tracker-area .response .text:focus {
    outline: none;
    border-color: #4d83b5;
    box-shadow: 0 0 0 2px rgba(77, 131, 181, 0.15);
}

#journal-content #habit-log-area {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#journal-content #habit-log-area .initial-instructions {
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* ========================================
   UNIFIED GOALS ACCORDION
   ======================================== */

.goals-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goals-accordion-container .no-goals-message {
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    color: #6c757d;
}

/* Goal Item Base */
.goal-accordion-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.goal-accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Goal Color Indicators */
.goal-accordion-item.goal-on-track {
    border-left: 4px solid #1e9039;
}

.goal-accordion-item.goal-behind {
    border-left: 4px solid #911521;
}

.goal-accordion-item.goal-neutral {
    border-left: 4px solid #6c757d;
}

.goal-accordion-item.goal-good-mood {
    border-left: 4px solid #1e9039;
}

.goal-accordion-item.goal-bad-mood {
    border-left: 4px solid #911521;
}

/* Closed State - Summary View (~175px) */
.goal-summary {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    padding: 12px 6px;
    cursor: pointer;
    position: relative;

    border-bottom: 6px solid rgba(0, 0, 0, 0.6);
}

.goal-accordion-item[data-goal-type="qualitative"] .goal-summary {
    padding-bottom: 0;
}

.goal-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.goal-summary-header .goal-type-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.goal-type-badge.badge-qualitative {
    background: #e8f4fd;
    color: #4d83b5;
}

.goal-type-badge.badge-usage {
    background: #fff3cd;
    color: #856404;
}

.goal-type-badge.badge-time {
    background: #d4edda;
    color: #155724;
}

.goal-type-badge.badge-spending {
    background: #f8d7da;
    color: #721c24;
}

.goal-summary-header .goal-days-left {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    margin-right: 25px;
}

.goal-summary-title {
    background: rgba(0, 0, 0, 0.06);
    font-size: 1.3rem;
    font-weight: 400;
    color: #343a40;
    margin-bottom: 12px;
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
}

.goal-summary-title .goal-title-text {
    flex: 1;
}

/* Goal Stats Row (closed state) */
.goal-summary-stats {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
}

.goal-stat-item {
    display: flex;
    flex-direction: column;
    min-width: 50px;
}

.goal-stat-item.goal-stat-left {
    align-items: flex-start;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 10px;
}

.goal-stat-item.goal-stat-left .goal-type-badge {
    padding: 2px 5px;
}

.goal-stat-item.goal-stat-right {
    align-items: center;
}

.goal-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #758390;
}

/* Milestone clock inside goal stats (uses brief-stats structure) */
.goal-stat-item .stat-milestone-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.goal-stat-item .stat-milestone-countdown {
    display: none;
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.goal-stat-item .stat-milestone-clock {
    padding: 6px 12px;
    background: rgba(30, 30, 30, 0.9);
    border-radius: 6px;
    border: 1px solid #333;
}

.goal-stat-item .stat-milestone-time {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff5533;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(255, 85, 50, 0.5);
    letter-spacing: 1px;
}

.goal-stat-item .stat-label {
    font-size: 0.75rem;
    color: #888;
    text-align: right;
    margin-top: 4px;
}

/* "Do more" / on-track goals use green timer */
.goal-on-track .goal-stat-item .stat-milestone-time {
    color: #33ff55;
    text-shadow: 0 0 8px rgba(50, 255, 85, 0.5);
}

.goal-on-track .goal-stat-item .stat-milestone-clock {
    border-color: #1a3a1a;
}

.goal-stat-label {
    font-size: .8rem;
    color: #a9b5bf;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Mood smiley in summary */
.goal-stat-value .mood-smiley-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Inline mood check-in (for qualitative goals in closed state) */
.goal-inline-checkin {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.goal-inline-checkin .inline-smileys {
    display: flex;
    gap: 4px;
}

.goal-inline-checkin .inline-smiley {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
    border-radius: 50%;
}

.goal-inline-checkin .inline-smiley:hover,
.goal-inline-checkin .inline-smiley.selected {
    opacity: 1;
    transform: scale(1.1);
}

.goal-inline-checkin .inline-checkin-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    margin-left: auto;
}

/* Timer display for quantitative goals */
.goal-timer-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

.goal-timer-display .timer-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-family: inherit;
    text-transform: uppercase;
}

/* Expand/Collapse Icon */
.goal-expand-icon {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 10px;
    font-size: 1rem;
    color: #adb5bd;
    transition: transform 0.2s ease;
}

.goal-accordion-item.expanded .goal-expand-icon {
    transform: rotate(180deg);
}

/* Check-in count badge in qualitative goal title bar */
.goal-checkin-count {
    background: #e8f4fd;
    color: #4d83b5;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 7px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Two-column flex for qualitative goal stats (comment input + avg mood smiley) */
.goal-checkin-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.goal-checkin-input-row .goal-checkin-comment {
    flex: 1;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    background: #fff;
    height: 90px;
    resize: none;
}

.goal-checkin-input-row .mood-smiley-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.goal-no-mood {
    width: 32px;
    text-align: center;
    flex-shrink: 0;
    color: #adb5bd;
}

/* Expanded State - Detail View */
.goal-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.goal-accordion-item.expanded .goal-details {
    background: rgba(0, 0, 0, 0.06);
    max-height: 2400px;
    padding-top: 25px;
    transition: max-height 0.3s ease-in;
}

.goal-details-content {
    padding: 0 16px 16px 16px;
    border-top: 1px solid #eee;
}

/* Milestone Section */
.goal-milestones {
    margin-top: 16px;
}

.goal-milestones h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.milestone-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.milestone-item:last-child {
    border-bottom: none;
}

.milestone-check {
    width: 24px;
    margin-right: 12px;
    color: #adb5bd;
}

.milestone-item.milestone-past .milestone-check {
    color: #1e9039;
}

.milestone-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.milestone-target {
    font-weight: 600;
    font-size: 0.9rem;
}

.milestone-date {
    font-size: 0.75rem;
    color: #6c757d;
}

.milestone-pct {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
}

.milestone-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #343a40;
}

/* Milestone Status Styles */
.milestone-item.milestone-completed .milestone-check {
    color: #1e9039;
}

.milestone-item.milestone-missed .milestone-check {
    color: #dc3545;
}

.milestone-item.milestone-upcoming .milestone-check {
    color: #adb5bd;
}

.milestone-item.milestone-missed {
    background: rgba(220, 53, 69, 0.05);
    border-radius: 4px;
    margin: 2px 0;
    padding: 8px 4px;
}

.milestone-item.milestone-completed {
    opacity: 0.8;
}

.milestone-status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.milestone-status-badge.completed {
    background: rgba(30, 144, 57, 0.1);
    color: #1e9039;
}

.milestone-status-badge.missed {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.milestone-status-badge.upcoming {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Day Summary Cards (default view) */
.milestone-day-summary {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 4px solid #adb5bd;
}

.milestone-day-summary:hover {
    background: #e9ecef;
    transform: translateX(2px);
}

.milestone-day-summary.completed {
    border-left-color: #1e9039;
    background: rgba(30, 144, 57, 0.05);
}

.milestone-day-summary.missed {
    border-left-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.milestone-day-summary.mixed {
    border-left-color: #fd7e14;
    background: rgba(253, 126, 20, 0.05);
}

.milestone-day-summary.upcoming {
    border-left-color: #6c757d;
}

.day-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.day-summary-date {
    font-weight: 700;
    font-size: 1.45rem;
    color: #212529;
    line-height: .9rem;
}

.day-summary-count {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.day-summary-stats {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.day-summary-interval {
    color: #495057;
}

.day-summary-stats .status-completed {
    color: #1e9039;
    font-weight: 600;
}

.day-summary-stats .status-missed {
    color: #dc3545;
    font-weight: 600;
}

.day-summary-stats .status-upcoming {
    color: #6c757d;
}

/* Milestone Cards (filtered day view) */
.milestone-card {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.15s ease;
}

.milestone-card:hover {
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.milestone-num {
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #343a40;
    background: #f8f9fa;
    border-radius: 8px;
    margin-right: 14px;
    letter-spacing: -0.5px;
}

.milestone-card.milestone-completed .milestone-num {
    background: rgba(30, 144, 57, 0.1);
    color: #1e9039;
}

.milestone-card.milestone-missed .milestone-num {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.milestone-card.milestone-upcoming .milestone-num {
    background: #f1f3f5;
    color: #868e96;
}

.milestone-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.milestone-datetime {
    font-weight: 600;
    font-size: 1.45rem;
    color: #212529;
    line-height: .9rem;
}

.milestone-progress {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.milestone-card.milestone-completed {
    opacity: 0.85;
    border-left: 3px solid #1e9039;
}

.milestone-card.milestone-missed {
    border-left: 3px solid #dc3545;
    background: rgba(220, 53, 69, 0.02);
}

.milestone-card.milestone-upcoming {
    border-left: 3px solid #adb5bd;
}

/* Progress Bar with Milestone Markers */
.goal-progress-with-markers {
    position: relative;
}

.milestone-marker {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 3px; 
    background: rgba(0, 0, 0, .6);
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
}

.milestone-marker.upcoming {
    background: rgba(0, 0, 0, .6);
}

/* Milestone label - rotated 90° */
.milestone-label {
    position: absolute;
    top: -12px;
    left: -1px;
    transform-origin: center bottom;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    margin-bottom: 2px;
}

/* Day markers - taller markers at midnight */
.day-marker {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 30px;
    background: rgba(197, 197, 197, 1);
    transform: translateX(-50%);
    z-index: 5;
}

/* Day labels between midnight markers */
.day-label {
    position: absolute;
    bottom: 18px;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(197, 197, 197, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 6;
    pointer-events: none;
    border-bottom: 1px solid rgba(197, 197, 197, 1);
}

/* Goal stat value with missed indicator */
.goal-stat-value.has-missed {
    color: #dc3545;
}

.goal-stat-value.has-missed small {
    font-size: 0.7em;
    opacity: 0.8;
}

/* Track status colors */
.goal-stat-value.status-on-track {
    color: #28a745;
    font-weight: 600;
}

.goal-stat-value.status-behind {
    color: #dc3545;
    font-weight: 600;
}

.goal-stat-value.status-ahead {
    color: #20c997;
    font-weight: 600;
}

/* Track status badges */
.goal-type-badge.badge-on-track {
    background: rgba(40, 167, 69, 0.8);
    color: #fff;
    border: 1px solid rgba(40, 167, 69, 0.9);
}

.goal-type-badge.badge-ahead {
    background: rgba(5, 152, 69, 0.527);
    color: #fff;
    border: 1px solid rgba(32, 201, 151, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(32, 201, 151, 0.4);
}

.goal-type-badge.badge-behind {
    background: rgba(220, 53, 69, 0.85);
    color: #fff;
    border: 1px solid rgba(220, 53, 69, 0.9);
}

/* Goal Delete Button */
.goal-accordion-item {
    position: relative;
}

.goal-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #adb5bd;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.goal-delete-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.goal-delete-btn i {
    font-size: 12px;
}

/* Dual Progress Bar */
.goal-dual-progress {
    margin-top: auto;
    margin-left: -7px;
    margin-right: -5px;
    margin-bottom: -16px;
}

.goal-dual-progress .goal-progress-legend {
    padding: 0 16px;
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;

}

.goal-dual-progress .goal-progress-bar {
    height: 32px;
    position: relative;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: visible;
}

.goal-dual-progress .goal-progress-fill {
    position: absolute;
    left: 0;
    transition: width 0.3s ease;
}

/* Time progress - top 50% of bar (grey like day markers) */
.goal-dual-progress .goal-progress-fill.time-progress {
    bottom: 0;
    height: 50%;
    background: rgba(222, 222, 222, 1);
    z-index: 1;
}

/* Amount done progress - bottom 50% of bar */
.goal-dual-progress .goal-progress-fill.goal-progress {
    top: 50%;
    height: 50%;
    z-index: 2;
}

.goal-dual-progress .goal-progress-fill.goal-progress.on-track {
    background: #1e9039;
}

.goal-dual-progress .goal-progress-fill.goal-progress.behind {
    background: linear-gradient(90deg, #911521, #fd7e14);
}

.goal-time-marker {
    position: absolute;
    width: 1px;
    height: 100%;
    background: #343a40;
    z-index: 7;
    border-radius: 1px;
}

/* "Now" label on time marker */
.now-label {
    position: absolute;
    top: -14px;
    left: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #343a40;
    text-transform: lowercase;
    white-space: nowrap;
}

/* Legend for dual progress bar */
.goal-progress-legend {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
    padding: 0 8px;
    font-size: 0.6rem;
    color: #6c757d;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-tick {
    display: inline-block;
    width: 2px;
    height: 8px;
}

.legend-tick.milestone {
    background: rgba(0, 0, 0, 1);
}

.legend-tick.time {
    background: rgba(197, 197, 197, 1);
}

/* Week Navigator for goals > 7 days */
.week-navigator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.week-nav-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    color: #6c757d;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.week-nav-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

.week-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.week-indicator {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
}

.week-indicator .current-week {
    color: #343a40;
}

/* Day Navigator for high-density milestone goals */
.day-navigator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.day-nav-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    color: #6c757d;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.day-nav-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

.day-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.day-indicator {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
}

.day-indicator .current-day-name {
    color: #343a40;
    font-weight: 700;
    font-size: .8rem;;
}

.day-indicator .day-count {
    font-weight: 400;
    opacity: 0.8;
}

/* Hour markers for day view */
.hour-marker {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 14px;
    background: rgba(180, 180, 180, 0.6);
    transform: translateX(-50%);
    z-index: 4;
}

.hour-marker.major {
    height: 18px;
    width: 3px;
    background: rgba(150, 150, 150, 0.6);
}

.hour-label {
    position: absolute;
    bottom: 18px;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(150, 150, 150, 0.6);
    white-space: nowrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.legend-dot.time {
    background: rgba(108, 117, 125, 0.5);
}

.legend-dot.progress {
    background: linear-gradient(90deg, #1e9039, #20c997);
}

/* Calendar Filter Info */
.calendar-filter-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 0.8rem;
}

.calendar-filter-info .filter-date {
    color: #495057;
}

.calendar-filter-info .clear-filter-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* Milestone Density Levels (opacity variations) */
.milestone-density-1 a { opacity: 0.5; }
.milestone-density-2 a { opacity: 0.65; }
.milestone-density-3 a { opacity: 0.8; }
.milestone-density-4 a { opacity: 0.9; }
.milestone-density-5 a { opacity: 1.0; }


/* Goal Milestone Calendar */
.goal-calendar-container {
    margin-top: 16px;
    margin-bottom: 16px;
}

.goal-calendar-container h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.goal-milestone-calendar {
    display: flex;
    justify-content: center;
}

.goal-milestone-calendar .ui-datepicker {
    width: 100%;
    max-width: 300px;
    font-size: 0.85rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: none;
}

.goal-milestone-calendar .ui-datepicker-header {
    background: #f8f9fa;
    border: none;
    border-radius: 8px 8px 0 0;
}

.goal-milestone-calendar .ui-datepicker-title {
    font-weight: 600;
}

/* Milestone day markers in calendar */
.milestone-day {
    position: relative;
}

.milestone-day.milestone-completed a {
    background: #1e9039 !important;
    color: white !important;
    border-radius: 2px;
}

.milestone-day.milestone-missed a {
    background: #dc3545 !important;
    color: white !important;
}

.milestone-day.milestone-upcoming a {
    background: #6c757d !important;
    color: white !important;
    border-radius: 2px;
}

.milestone-day.milestone-completed a::after,
.milestone-day.milestone-missed a::after,
.milestone-day.milestone-upcoming a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
}

.goal-values-highlight {
    display: inline-flex;
    align-items: center;
    flex: 1;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    margin-right: 8px;
    
}

.curve-background {
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    justify-content: space-between;
    flex: 1;
}

.curve-background.down-power {
    background-image: url("../assets/images/arrows-down-power-curve.png");
}

.curve-background.up-power {
    background-image : url("../assets/images/arrows-up-power.png");
}

.curve-background.down-sigmoid {
    background-image: url("../assets/images/arrows-down-sigmoid.png");
}

.curve-background.up-sigmoid {
    background-image : url("../assets/images/arrows-up-sigmoid.png");
}

.curve-background.equal {
    background-image: url("../assets/images/arrows-mid-equal.png");
}

.goal-value-current {
    font-weight: 700;
    color: #c82333;
    font-size: 1.6rem;
}

.goal-value-target {
    font-weight: 700;
    color: #157a2c;
    font-size: 1.8rem;
}

.goal-curve-arrow {
    font-size: 1.4em;
    line-height: 1;
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    opacity: 0;
}

.goal-curve-arrow.curve-power {
    color: #fff;
    background: linear-gradient(135deg, #6c757d, #495057);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.goal-curve-arrow.curve-sigmoid {
    color: #fff;
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.goal-on-track .goal-value-target {
    color: #24b144;
}

.goal-behind .goal-value-target {
    color: #c82333;
}

.goal-behind .goal-curve-arrow {
    color: #fff;
    background: linear-gradient(135deg, #dc3545, #c82333);
}

/* Summary progress bar (visible when collapsed) */
.goal-summary-progress {
    height: 4px;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.08);
}

/* Mood Records Section (for qualitative) */
.goal-mood-records {
    margin-top: 16px;
}

.goal-mood-records h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.mood-record-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mood-record-row:last-child {
    border-bottom: none;
}

.mood-record-row .mood-smiley-img {
    width: 28px;
    height: 28px;
}

.mood-record-info {
    flex-grow: 1;
}

.mood-record-comment {
    font-size: 0.9rem;
    color: #343a40;
}

.mood-record-date {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Goal Progress Bar */
.goal-progress-container {
    margin-top: 16px;
}

/* When progress container is inside .goal-summary (qualitative goals), pin it flush to the bottom */
.goal-summary .goal-progress-container {
    margin-top: auto;
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: -12px;
}

.goal-progress-bar {
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.goal-progress-fill.on-track {
    background: linear-gradient(90deg, #1e9039, #20c997);
}

.goal-progress-fill.behind {
    background: linear-gradient(90deg, #911521, #fd7e14);
}

.goal-progress-text {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 4px;
    text-align: right;
    padding-right: 6px;
}


/* ==========================================
   "Did it" Dialog Tabs
   ========================================== */

.use-dialog-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 4px;
}

.use-dialog-tab {
    flex: 1;
    padding: 9px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.use-dialog-tab:hover {
    background: rgba(77, 131, 181, 0.1);
    color: #4d83b5;
}

.use-dialog-tab.active {
    background: #fff;
    color: #4d83b5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.use-dialog-tab i {
    font-size: 0.9rem;
}

.use-dialog-tab-content {
    display: none;
}

.use-dialog-tab-content.active {
    display: block;
}

/* ==========================================
   "How much" Tab Styles
   ========================================== */

.how-much-input-container {
    padding: 16px 0;
}

.how-much-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.how-much-amount {
    flex: 0 0 80px;
    padding: 8px 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: border-color 0.2s;
    height: 46px;
}

.how-much-amount:focus {
    border-color: #4d83b5;
    outline: none;
}

.how-much-unit-container {
    flex: 0 1 180px;
}

.how-much-unit-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    height: 46px;
}

.how-much-unit-select:focus {
    border-color: #4d83b5;
    outline: none;
}

.custom-unit-input {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.how-much-custom-unit {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 2px solid #4d83b5;
    border-radius: 8px;
    height: 40px;
}

.custom-unit-save-btn {
    padding: 8px 12px;
    background: #4d83b5;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-unit-save-btn:hover {
    background: #3d6a94;
}

/* ==========================================
   "How long" Tab Styles
   ========================================== */

.how-long-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.how-long-option {
    padding: 12px 15px;
    margin: 4px 0;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.how-long-option:has(input:checked) {
    border-color: #212529;
    background-color: #f1f3f5;
}

.how-long-option .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.how-long-option .form-check-input {
    margin-top: 0;
}

.how-long-option .form-check-label {
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding-left: 8px;
}

.how-long-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 4px 0 0 28px;
}

.how-long-manual-inputs {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dee2e6;
}

/* Match .time-picker-container styling */
.how-long-manual-inputs .time-picker-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #dee2e6;
    margin: 10px 0;
}

.how-long-manual-inputs select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.how-long-manual-inputs .label {
    margin: 0 5px;
    font-weight: 600;
    color: #495057;
}

/* ==========================================
   Activity Timer Panel (Full-width, Modern)
   ========================================== */

#activity-timers-container {
    margin-bottom: 0px;
}

.activity-timer-panel {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #3d7ab5 100%);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.3);
}
.activity-timer-panel .fibonacci-timer {
    color: #212529;
}

.activity-timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
}

.activity-timer-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-timer-discard-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-timer-discard-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.activity-timer-body {
    display: flex;
    min-height: 100px;
}

.activity-timer-left {
   max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 15px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.activity-timer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.activity-timer-right {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 12px;
}

.activity-timer-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 15px;
    padding-top: 20px;
    width: 100%;
}

.activity-timer-footer .time-picker-container {
    justify-content: center;
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
}

.activity-timer-footer .time-picker-container select {
    background: #fff;
    color: #333;
    border: none;
}

.activity-timer-footer .label {
    color: rgba(255,255,255,0.8);
}

.activity-timer-rewind-btn {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.activity-timer-rewind-btn:hover {
    background: rgba(255,255,255,0.2);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-indicator.running {
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.status-indicator.paused {
    background: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.activity-timer-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-timer-control {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.activity-timer-pause-btn,
.activity-timer-resume-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.activity-timer-pause-btn:hover,
.activity-timer-resume-btn:hover {
    background: rgba(255,255,255,0.25);
}

.activity-timer-stop-btn {
    background: #fff;
    color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.activity-timer-stop-btn:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

/* ==========================================
   Wait Timer Panel (Delayed Gratification / Procrastination)
   ========================================== */

#wait-timers-container {
    margin-bottom: 0px;
}

.wait-timer-panel {
    background: linear-gradient(135deg, #4a1942 0%, #6b2d5c 50%, #8b3a75 100%);
    border-radius: 16px;
    padding: 16px 10px;
    margin-bottom: 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(74, 25, 66, 0.3);
}

.wait-timer-panel .fibonacci-timer {
    color: #212529;
}

.wait-timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
}

.wait-timer-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wait-timer-discard-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wait-timer-discard-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.wait-timer-body {
    display: flex;
    min-height: 100px;
}

.wait-timer-left {
    max-width: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 7px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.wait-timer-status {
    margin-top: 10px;
    text-align: center;
}

.wait-timer-status .status-text {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
}

.wait-timer-right {
    flex: 1;
    padding-left: 7px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.wait-timer-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 180px;
}

.wait-timer-panel .btn-timer-control {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.wait-timer-distract-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

.wait-timer-distract-btn:hover {
    background: rgba(255,255,255,0.25);
}

.wait-timer-resist-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    color: #4a1942;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.wait-timer-resist-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.wait-timer-do-early-btn {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
}

.wait-timer-do-early-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}

/* Wait Timer Footer (end options) */
.wait-timer-footer {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 15px;
    padding-top: 20px;
    width: 100%;
}

.wait-timer-end-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.wait-timer-end-options .btn {
    flex: 1;
    min-width: 120px;
    max-width: 160px;
}

.wait-timer-footer .time-picker-container {
    justify-content: center;
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.wait-timer-footer .time-picker-container select {
    background: #fff;
    color: #333;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1rem;
}

.wait-timer-footer .label {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

.wait-timer-past-picker {
    text-align: center;
}

/* ==========================================
   Distraction Memes Panel
   ========================================== */

/* Fullscreen backdrop overlay */
.distraction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.distraction.log-more-info {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: none;  
    max-width: 540px;
    overflow: hidden;
    z-index: 9999;
    background: #141518;
    border-radius: 0;
    border: none;
}

/* Large X close button in top right */
.distraction-close-x {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
}

.distraction-close-x:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.distraction-close-x:active {
    transform: scale(0.95);
}

.distraction-header {
    display: none; /* Hidden in full-screen Imgur-style mode */
}

.distraction-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.distraction-offline-message {
    text-align: center;
    padding: 60px 20px;
    color: #85858c;
}

.distraction-offline-message i {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.distraction-memes-container {
    height: 100vh;
    overflow-y: auto;
    padding: 40px 0 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Combined with 20px margin on items = 45px minimum between images */
    background: #141518;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.distraction-memes-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.meme-item {
    width: 100%;
    margin: 20px 0; /* 20px top + 20px bottom from adjacent items = 40px+ between images */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f2023;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.meme-item img {
    width: 100%;
    height: auto;
    display: block;
}

.distraction-loading {
    text-align: center;
    padding: 40px 20px;
    color: #85858c;
    font-size: 14px;
}

.distraction-loading i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.no-memes-message {
    text-align: center;
    padding: 100px 20px;
    color: #85858c;
}

.no-memes-message i {
    font-size: 4rem;
    margin-bottom: 24px;
    display: block;
    opacity: 0.4;
}